微信小程序小记

本周,在怨念与冷漠中完成了微信小程序的“体验”式开发。
想对小程序说,“去年8月与君一别,今日当刮目相看”。

怨念 ———— 用了小程序1.5.4(截止10月下旬最新是1.6.0)库,没少遇到坑。
冷漠 ———— 一面是微信网红式地鼓吹小程序在业务布局中的地位,另一面小程序生态只是差强人意。

好在,中国的用户不挑食!

以下是干货……

设计篇 参考

文档

继承腾讯CDC的衣钵,或者说是腾讯设计团队的又一次布道。
文档没多少内容,直接有用的信息如下:
– 导航(定义颜色、内容等)
– 交互(下拉刷新,模态,局部反馈等)
– 视觉规范(字体、按钮、图标等)
– 人机交互的基本理念
看完基本了解小程序外观(容器)可定制的功能,以及一些普适性强的设计方法。

度量衡 —— 布局单位

RPX~ Rpx~ rpx~ 微信定义为 responsive pixel,以下是换算关系:

微信小程序rpx单位
微信小程序rpx单位

用法很简单:
假如设计图以iPhone 6的尺寸给出,通常,这种尺寸下屏幕宽采用357px。
那么使用rpx单位时,实际css中可设置 width: 750rpx; 在真机中呈现效果与设计稿即相同。
此时,如果使用其他尺寸的屏幕浏览,可以发现与357px的屏幕呈现的效果十分接近。

框架

基础库

框架本身需要基础库的支持,官方的话术是“小程序的能力需要微信客户端来支撑”。
所以基础库版本与微信客户端对应,且是无法依靠升级基础库解决兼容性问题的。
唯一的方法是降级(容错),所以开发前需要正确选择基础库。

兵器

  • WXML
    小程序使用WXML不算什么特立独行,倒有点东施效颦了(Adobe FLex 使用MXML,但与之就是两码事)。
    不过WXML的优点,合理地表达了层级之间的关系,并支持一些运算(wx:if,wx:for 等)。

  • 组件
    贴近于原生应用的体验,响应灵敏,流畅,组合方便,配置简单,提供的事件接口能满足大部分需求。

生命周期

App({
  onLaunch: function(options) {
    // 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  },
  onShow: function(options) {
      // 当小程序启动,或从后台进入前台显示,会触发 onShow
  },
  onHide: function() {
      // 当小程序从前台进入后台,会触发 onHide
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

比较简单,开发人员不需要干预小程序的视图更新过程。

Trick

连续3天的开发过程中,
– Page 的样式

page {
  height:100%;
}

在做100%高度页面的时候,页面的根元素不是html,也不是body,而是page。

  • 组件细节疏漏
    一些组件并不好用,比如 scroll-view 的横向滑动居然是无效的。需要在子组件上设置 white-space: no-wrap样式。
    似乎有些不可理喻。

  • this.setData()
    setData() 是设置程序内部变量的方法,会触发视图更新。
    但在实际使用中,这是个非同步操作,但也不提供回调方法。
    所以在程序设计中,通常要规避在setData后立即访问其设置的变量。

发表评论

电子邮件地址不会被公开。 必填项已用*标注