小程序开发经验总结

发表于 | 分类于

最近工作需要，两周时间开发上线了一个小程序，稍微记录总结下，以下都是基于wepy框架，至于为什么要wepy框架，就是觉得腾讯亲儿子靠谱点，不过还是感觉好坑…

  • 小程序登录流程
    login
    伪代码如下：
    app.wpy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    onLaunch () {
        // 检查小程序登录,查看上文中的checkLoginState,如果登录状态失效，那么重新掉起login 方法登录
        this.checkLoginState()
    }
    // 检查登录状态
    async checkLoginState () {
        try {
          // 微信自己的code 状态
          let wxLoginState = await wepy.checkSession().then(res => {return true}, res => {return false});
          console.log('微信检查是否过期：', wxLoginState)
          let threeSessionKey = wx.getStorageSync('threeSessionKey')
          console.log('threeSessionKey', threeSessionKey)
          if (!wxLoginState || !threeSessionKey) {
            return await this.login()
          } else {
            return true
          }
        } catch (err) {
          console.log(err)
          console.log('检查登录状态---checkLoginState');
        }
    }
    // 登录
    async login () {
        try {
          let {code: myCode} = await wepy.login()
          let loginData = {
            code: myCode
          }
          login(loginData).then(res => {
            wepy.setStorageSync('threeSessionKey', res.data.threeSessionKey)
            // 保证获取到threeSessionKey再调用其他请求，其他请求都带上threeSessionKey校验
            if (this.loginCallback) {
              this.loginCallback()
            }
          }).catch(err => {
            console.log(err)
          })
        } catch (err) {
          console.log(err)
        }
    }

index.wpy

1
2
3
4
5
6
7
8
9
onLoad () {
    if (wepy.getStorageSync('threeSessionKey')) {
      this._getData()
    } else {
      this.$parent.loginCallback = () => {
          this._getData()
      }
    }
}

  • 最基本的请求封装

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    import wepy from 'wepy'
    async function wxRequest (options = {}) {
      return wepy.request({
        ...options
      }).then((res) => {
        return res.data
      }).catch((e) => {
        console.log(e)
        return Promise.reject(e)
      })
    }
    function get (url, data = {}, options = {}) {
      return wxRequest({
        url,
        data,
        ...options,
        method: 'GET'
      })
    }
    function post (url, data = {}, options = {}) {
      options.header = options.header || {}
      options.header['content-type'] = 'application/x-www-form-urlencoded'
      return wxRequest({
        url,
        data,
        ...options,
        method: 'POST'
      })
    }
    wxRequest.get = get
    wxRequest.post = post
    export default wxRequest

  • 如何使用promise
    在1.4.1以下版本，wepy生成的项目默认都会加入promise polyfill。
    在1.4.1以后的版本，需要用户手动加入，具体方法如下：

    • 进入项目根目录：

      1
      npm install wepy-async-function --save

    • 在app.wpy中引入polyfill

      1
      import 'wepy-async-function';

    • 在app.wpy中使API promise化

      1
      2
      3
      4
      5
      6
      7
      8
      export default class extends wepy.app {
          constructor () {
              super();
              this.use('promisify');
          }
      }

  • 在ios8及部分机型下会有样式混乱的问题，经查找，原因是缺少浏览器前缀，需要加prefix

    • 安装插件

      1
      npm install less-plugin-autoprefix --save-dev

    • 在wepy.config.js中加入

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      const LessPluginAutoPrefix = require('less-plugin-autoprefix');
      ...
      ...
        compilers: {
          less: {
            compress: true,
            plugins: [new LessPluginAutoPrefix({browsers: ['Android >= 2.3', 'Chrome > 20', 'iOS >= 6']})]
          }

  • 如果直接引入了.wxss文件，需要改成.less

  • 框架默认对小程序提供的API全都进行了 Promise处理，甚至可以直接使用async/await等新特性进行开发
  • 对于wepy中的methods属性，因为与Vue中的使用习惯不一致，非常容易造成误解，这里需要特别强调一下：wepy中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致的
  • props传值
    • 静态传值只能传递string类型
    • 动态传值支持数据双向绑定，在子组件的props中添加twoWay：true
  • import组件不能写全wpy后缀，否则报错
    微信图片_20180813145518
  • wepy框架热更新，修改组件内容保存不会热更新，必须要引用该组件的页面再保存一下才会刷新，巨坑！！！
  • 使用canvas画图颜色不支持简写，比如#fff，必须写全#ffffff

  • canvas不支持rpx单位，需要转化下，伪代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    data = {
        windowWidth: ''
    }
    onLoad () {
        // 获取设备信息
        wepy.getSystemInfo().then(res => {
            this.windowWidth = res.windowWidth
            this.$apply()
        })
    }
    // rpx转化px，因为canvas不支持rpx
    rpxToPx (num) {
        return this.windowWidth / 750 * num
    }

  • scroll-view组件设置scroll-top为0，滚动到顶部，初始值scrollTop：0, 必须这样设置才生效，滚动过程这个值是不会发生变化的，猜想应该是需要这个值发生改变

    1
    this.scrollTop = this.scrollTop - 1

  • computed中的数据始终是计算来的， 不能主动修改，只能修改其依赖的数据

  • 动态绑定多个class
    1
    :class="{'btn_active': flag1, 'btn': flag2}"
1
2
3
4
data = {
    flag1: false,
    flag2: false
}