all articles

my first WeChat Mini-Program 2 - development & launch

2018-04-08 @sunderls

wechat mini-program

editor

可以用,但是真是不好用。 还是用vscode比较好用,反正都是live reload。 至于代码高亮啥的,直接在vscode里面安装插件,搜索wxss之类的就行。

config

APP基本配置例子如下:

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

重要点如下:

  1. 所有的页面需要列在pages中,微信应该会根据列出的文件去寻找相关的css和配置文件进行build
  2. tabBar中配置底部的tabBar,包括每个tab的文字,icon和链接。

for, swiper, navigator

  1. 模版中常用的一个语法是for循环
  2. swiper 小程序已经提供好了,直接用就好
  3. 链接的话用navigator或者js API

以下是一个使用例子:

<swiper indicator-dots="{{true}}" class="swiper" indicator-color="#rgba(0,0,0,0.01)" indicator-active-color="#fff" wx:if="{{loaded && items.length > 0}}">
<swiper-item class="item" wx:for="{{items}}" wx:key="item.id">
    <navigator url="/pages/detail/index?id={{item.id}}" class="card">
        <view class="favs">
            <image class="item-fav" src="/static/heart.png" />
            <image class="item-fav" wx:if="{{item.degree >= 2}}" src="/static/heart.png" />
            <image class="item-fav" wx:if="{{item.degree > 2}}" src="/static/heart.png" />
        </view>
        <view class="item-title">{{item.title}}</view>
        <view class="item-info">{{item.info}}</view>
    </navigator>
</swiper-item>
</swiper>

rpx

小程序的css中提供了自适应的像素单位rpx,以iphone6视觉为准就行啦。

不同的设备有不同的devicePixcelRatio,简单的想是不用进行viewport设置,而是用rpx就行,小程序帮你搞定。

cloud

Tencent cloud提供了小程序的模版,在打开小程序的时候,选择node.js模版即可,开发环境不要钱也可以测试。 等到开发完毕了可以一键下单购买生产环境,包括域名等,用起来很方便。

具体文档可以看这里

如果你想要海外服务器而不用腾讯云的话也没有问题,可以参照这里

API request

小程序的API请求通过wx.request完成,文档在这里

注意没有cookie啥状态,只能自己处理,所以可以用wafer2-client-sdk中的方法,如果你用了腾讯的解决方案的话。

如果自己实现也不难,就和平时的JWT差不多,官方解释的流程如下:

login

简单的说

  1. wx.login()获取登陆码
  2. 服务器中通过登陆码和自己的appsecret啥的,调用微信API获得用户的openID
  3. 存储openId,自己设计一套token机制
  4. 把token存在小程序的storage中,以后API的时候带上。

flexbox, scroll-view, alert, actionsheet

在小程序中的布局的话,建议多用flexbox,布局灵活代码简单。使用建有参考MDN文档

另外小程序不像网页,需要有<scroll-view>来支持区域滚动。

当然alert/confirm这种webview必有的API也是没有的,需要用wx.showModal这一套小游戏的统一解决方案。

所有的API可以参考这里

event 处理

事件处理也是小程序自定义的一套命名,比如bindtap(或者bind:tap)是点击的event,capturetap是capure阶段捕获,catch过后就不会冒泡了,拿同事catch和bind呢?当然就是catch-bind:tap

详细可以看这里

预览,beta分享,debug,送审

在实际的机器上查看效果的话,点击开发工具顶部的预览按钮即可。

感觉开发的差不多了,点击上传按钮,上传过后beta版本就可以给设置为开发成员的人看了。

debug的话可以点击右上角的“远程调试”按钮。

beta测试OK了,就点击送审按钮。审查可能很快可能很慢,我最快一两个小时,最晚一周。

如果超过一周没有反应,可以到开发者社区中吐个槽,说不定会有效果。

正式发布,推广

审核通过后,点击“发布”按钮就可以把小程序公开给所有人啦。

当然发布过后也不一定有人知道,分享给朋友之外,可以投稿给一些聚合网站,比如小程序商店之类的。

推广过后可以在管理页面查看到实时的用户数据,用户来源,用户画像等,非常方便。

打一个小广告,我做的小程序叫做「我想要这个」欢迎使用!

buemethis