一前言
近期, 开始了一段辛酸的还未开始就已经结束的创业 (参见我的第二次创业, 以梦为马, 莫负韶华) 大体上是开发了一款微信小程序, 关于创业这件事情就不细说了, 本文主要介绍一下开发小程序的过程中踩过的几个坑
二注册
开发一款功能全乎的小程序, 在未动键盘开始码代码之前就要涉及到账号注册微信认证支付申请等等, 这里面也有一些坑
首先是必须要企业认证才能有微信支付功能, 以个人名义申请不能进行支付微信认证还算容易, 只需要支付 300 元即可支付申请的时候会让你选择需要申请的经营种类, 此处如果与企业执照上相同会比较容易通过, 我们的经营项目不太一致, 刚开始写的比较简单被直接驳回, 后面我写了一段比较长的话详细解释了一下要做个什么为什么申请此类型, 估计审核的人被我感动了, 于是顺利通过
三 HTTPS 和备案
如果小程序需要和后台交互, 那么交互时只能选择域名的方式, 且此域名必须经过 ICP 备案, 并且只能采用 HTTPS 方式
ICP 备案比较麻烦, 可以直接选择购买阿里云服务器, 这应该是最方便的方式了吧
HTTPS 建议使用百度云, 可以申请到一年的免费证书, 申请也比较容易
四开发
回归到本行其实小程序开发是个涉及到方方面面的工作, 要求还是蛮高的, 一套下来基本也就是个全栈工程师了
小程序本身就分前台和后台, 就类似与网站开发, wxml 对应 htmlwxss 对应 CSSjs 就是 js 还多了个 json 用于配置等说白了就是微信把这些东西以一定的方式封装起来了, 但是我个人感觉封装的也不是那么理想, 所以有点不太顺手
小程序通信的后台可以采用各种语言, 相当于网页的后台, 也基本等同于 restful 接口此项目我们使用了 python 的 django 框架, 开发起来还蛮容易的
整个一套下来, 哪方面都有接触, 我的合伙人包亮是个编程大牛, 对我进行了很多指导, 我对开发这件事情和 jspython 这两种语言都有了全新的认识
言归正传, 下面开始介绍开发过程中踩过的坑
4.1 js 回调
刚开始 js 代码写的很冗长, 一个函数有上百行并不是我不懂得代码编写的艺术, 而是小程序的 js 开发往往是一个请求中的 sucess 以及 fail 中嵌套另一个请求, 函数只能越写越长, 最后各种功能交织在一起, 变量也混杂在仪器, 我自己实在看不下去了, 于是开始重构, 将一些功能提取出来组成函数, 整体代码清爽了不少, 但是出现了一些让我很费解的 bug, 大神简单看了一下直接指出问题来了, 本来应该嵌套的异步函数写成了并列, 这样导致函数在执行的时候没有时间上的先后顺序, 于是就会出现莫名其妙的 bug, 这个问题我是有所注意的, 但是有些地方也确实没有注意到, 他告诉我你应该将各种回掉函数作为参数传入, 这样就不会再出问题简单如下:
- function b() {
- // do something when sucess
- }
- function a() {
- wx.request({
- url: '...',
- sucess: function(res) {
- b();
- }
- })
- }
- a();
这是我原来写的方式, 当然比这复杂的多, 所以不注意的时候就会将 b 写到 a 的后面, 其实真正的方式应该是这样:
- function b() {
- // do something when sucess
- }
- function a(aSucess) {
- wx.request({
- url: '...',
- sucess: function(res) {
- aSucess()
- }
- })
- }
- a(b);
这样就很清晰的知道 a 函数里当请求成功的时候做了什么事情, 因为直接在调用 a 的时候就已经传入其中了
4.2 app.js 中的异步函数如何保证可靠性
有的时候需要在 app.js 的 onLaunch 事件中向后台请求一些数据, 比如用户信息等等(非微信用户信息, 但需要与微信 openid 关联), 取出这些信息后在加载用户页面的时候会再向后台请求些数据进行展示等, 但是 app.js 和页面之间无法进行普通回掉, 这样就会造成在 app.js 中还没有请求完成, 数据还是 undefined 而页面中使用此数据就会造成错误后来查看了一些文档, 发现可以在 app.js 中为特定数据自定义事件, 用于在其他页面判断, 方式如下:
app.js 中:
- wx.request({
- url: '',
- success: res_user_info = >{
- if (this.userIdCallback) {
- this.userIdCallback(res_user_info)
- }
- this.globalData.userId = res_user_info.data.id;
- }
- })
这样就在 app.js 中定义了一个 userIdCallback 事件, 该事件完成的时候表示已经从后台取到了用户数据在其他页面即可通过此种方式进行判断:
- if (app.globalData.userId == null || app.globalData.userId == undefined) {
- app.userIdCallback = res_user_id = >{
- // do something
- }
- } else {
- // do something
- }
即首先判断此数据是否已经请求到, 如果还未完成则等待此数据完成, 然后在其回调函数中再完成有关操作
4.3 tabBar 之间的切换
如果在 app.js 中设置了 tabBar, 则页面底部会出现相应的导航栏, 但是页面中使用 wx.navigateTo 跳转到的页面底部不显示导航栏, 并且如果需要切换到导航栏内的任何页面, 都需要使用 wx.switchTab 函数而不是 wx.navigateTo 函数
4.4 数据绑定
微信小程序没有数据双向绑定, 在 Page 对象中设置的 data 只能单向改变前台渲染, 而前台改变无法同步更改此变量那么如果需要将前台的变化也同步到后台, 只能监控前台控件的变化事件, 如 input 的 bindinput 事件, 在此事件中对输入值进行判断, 如下:
<input bindinput="bindMoney" value="{{money}}" />
其中 value="{{money}}" 用于后台到前台的绑定, 而 bindinput 则用于前台到后台的绑定, 如下:
- bindMoney: function(e) {
- var value = parseInt(e.detail.value);
- this.setData({
- money: value
- })
- }
并且小程序在绑定变化的时候前台会出现 undefined 的情况, 如果是图像的话就会造成请求错误, 倒是无伤大雅, 时间很短, 前台基本不会察觉
五提交审核
这是最坑的一点, 吭哧吭哧的做了半天, 最后居然因为种种非技术原因而无法通过审核好吧, 最为个体我们真的无法说什么, 只能对微信这个大平台言听计从, 希望我们更改相应页面后能够通过审核审核太严失去了自由的土壤, 微信如何保证有好的产品出现呢?
来源: https://www.cnblogs.com/shoufengwei/p/8447674.html