关于这次的小程序项目,有以下一些内容需要总结一下。
- 开发方式
- 开发文档
- 调试方式
开发方式
由于微信小程序实际上是运行在微信App 内部的,因此和通常我们所说的前端开发有点不同。(其实我并不想将小程序归于web 前端这个领域中来,因为小程序被微信限制的太死了)IDE 是微信自身提供的微信开发工具,我们可以利用这个IDE 快速搭建项目。当然为了部署到线上,在此之前需要在微信开发后配注册小程序拿到相应的AppID 和AppSecretKey 。
IDE 界面如图所示:
根据Vue 的开发经验,我将小程序的项目结构也划分成了类似的结构:包括路由,页面鉴权,api 封装,静态资源,界面,项目所需的实体类,以及一些util 。
由于小程序的开发理念是数据驱动的,通过修改状态来让小程序本身来更新UI ,这点与React 和Vue 相似,可是小程序原生技术并没有提供React 和Vue 的开发方式,也因此为了更方便的进行项目开发,不得不重复性的造轮子。
开发文档
腾讯的开发文档是真的有问题,没有一个统一的标准,好像在设计之初就是想到哪写到哪,就拿微信支付作为例子吧。
关于微信支付
微信H5 开发过程中,微信支付方式是这样的:
wx.chooseWXPay({
timestamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
success (res) {
typeof success === 'function' && success(res)
},
fail (err) {
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,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
success(res) {
typeof success === 'function' && success(res)
},
fail(err) {
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 周期中进行属性的变化更新—
- 我不喜欢小程序
- 其他的想到再写
|
请发表评论