微信小程序实践之旅

AnnatarHe.lls 2018.07.25

小程序理念

  • 小而美
  • 不干扰用户
  • 有意义

一些 bug (feature)

  • Navigation stack 不能超过五层
  • 4MB/8MB 大小
  • 小程序推送只能一个 formid 推一次,且七天有效期
  • 必须点击 button 才能触发一些操作(比如跳转小程序)
  • 算命类小程序不允许分享图传播

能做什么

  • 电商
  • 新闻类
  • 简单工具类
  • 其他...

不能做什么

  • webassembly 类(语音打分,图像识别)
  • 重型交互(考虑做成游戏)

不建议

  • 运营活动类(审核风险,封禁风险)

优势

  • 更大的分享图
  • 加载更快
  • 流式打分(已有组件)
  • 分享图可以存入相册
  • 可以打开 App
  • 自带下拉刷新和底部更多

小程序结构

  • .js
  • .wxss
  • .wxml
多线程处理(逻辑和视图在两条线程上)
部分 native 化(video 标签等) 需要 cover-view
mp lifecycle

注意点

  • wxml 只支持非常简单的表达式
  • css 属性大多是支持的,微信推荐 flexbox
  • 由于 page 作用域的关系,不能通过全局 Object 来做数据存储,只能通过 globalData
  • 绝大多数情况并不需要 redux 方案

做好玄学编程的准备!

喜闻乐见的踩坑集锦

  • 小程序音频播放是同步的,所以可能导致路由不能跳转,canvas 画图不能完成等
  • canvas 画图存储,html 上必须有对应的 canvas-id, 而且不能 display none, 可以绝对定位移走
  • 微信 6.5.13 报错:`invoking Page() in async task.` 不要慌,按照页面顺序重新整理一下 app.json 的 page 顺序即可
  • 一些安卓机不认识 font-weight: 500; 要用 normal
  • 有些安卓机器不认识 `color: #fff` 而要写成 `color: #ffffff`
小程序踩坑集锦

框架选择

  • 原生
  • wepy
  • mpvue
  • taro

原生小程序各种不支持现代 js

wepy 各种深坑,原生小程序的特性跟不上(props observer)

场景系列解决方案

  • 生成分享图
  • 子组件根据父组件某个属性变化产生一些行为(compoentWillReceiveProps)

微信服务

  • 登陆(platform 计划支持)
  • 客服(图片只有三天有效期)
  • 推送(platform 组八月中提供 grpc 的支持)
  • 内容安全(lingome 后端 Q3 会提供 grpc 接口)
  • 生物认证

监控

数据

  • 无埋点
  • API 上报

可被导出

调试

  • 预览
  • 远程调试

常规 Chrome dev tool 操作

优化(常规操作)

  • 图片压缩3.6MB -> 163KB
  • 减少 this.setData
            ?imageView2/0/format/jpg/interlace/1/q/75|imageslim
          

优化(非常规操作)

  • 分包
  • 少用阴影
  • 资源缓存
  • 图片预加载

感谢