开发微信小程序总结

时间 2021-01-08

关于这次的小程序项目，有以下一些内容需要总结一下。

开发方式
开发文档
调试方式

开发方式

由于微信小程序实际上是运行在微信App内部的，因此和通常我们所说的前端开发有点不同。（其实我并不想将小程序归于web前端这个领域中来，因为小程序被微信限制的太死了）IDE是微信自身提供的微信开发工具，我们可以利用这个IDE快速搭建项目。当然为了部署到线上，在此之前需要在微信开发后配注册小程序拿到相应的AppID和AppSecretKey。
IDE界面如图所示：

根据Vue的开发经验，我将小程序的项目结构也划分成了类似的结构：包括路由，页面鉴权，api封装，静态资源，界面，项目所需的实体类，以及一些util。

由于小程序的开发理念是数据驱动的，通过修改状态来让小程序本身来更新UI，这点与React和Vue相似，可是小程序原生技术并没有提供React和Vue的开发方式，也因此为了更方便的进行项目开发，不得不重复性的造轮子。

开发文档

腾讯的开发文档是真的有问题，没有一个统一的标准，好像在设计之初就是想到哪写到哪，就拿微信支付作为例子吧。

关于微信支付

微信H5开发过程中，微信支付方式是这样的：

wx.chooseWXPay({
        // appId: data.appId,
        timestamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success (res) {
          typeof success === 'function' && success(res)
        },
        fail (err) {
          // eslint-disable-next-line prefer-promise-reject-errors
          let error = ''
          Object.keys(err).forEach(item => {
            error += item + err[item] + ' '
          })
          typeof failed === 'function' && failed(error)
        },
        cancel () {
          typeof failed === 'function' && failed('取消支付')
        }
      })

请注意上面的timeStamp其实是小写的！
在小程序中：

wx.requestPayment({
       timeStamp: data.timeStamp, // h5是小写的timestamp,小程序又是大写的 woc !
       nonceStr: data.nonceStr,
       package: data.package,
       signType: data.signType,
       paySign: data.paySign,
       success(res) {
         typeof success === 'function' && success(res)
       },
       fail(err) {
         // eslint-disable-next-line prefer-promise-reject-errors
         let error = ''
         Object.keys(err).forEach(item => {
           error += item + err[item] + ' '
         })
         typeof failed === 'function' && failed(error)
       }
     })

调试方式

微信小程序的调试方式也可能是我没有get到正确方式，在涉及后台API复杂请求的时候，微信开发工具就不好使了。

只能通过真机调试来调试，这就比较坑，问题是还比较慢…

小程序和Vue

由于之前的项目是Vue技术栈，小程序这个项目是通过Vue项目源码改造而来的。在改造过程中还是有这样或那样的令人崩溃的瞬间。

小程序组件的prop是可以直接修改的，而Vue不行。
小程序无法通过js改造来实现Vue的计算属性，只能通过监听globalData的修改来更新相应视图。
但是小程序文档中也特别的提醒了我们需要判断当前界面是否可见，否则去更新UI的时候会浪费资源。也就是在onShow周期中进行属性的变化更新—
我不喜欢小程序
其他的想到再写