小程序开发技术总结（wepy）

这一个月，主导开发了公司的第一款小程序，由于之前没有相关开发经验，所以走了不少弯路，写这篇文章对这一个月的开发流程进行自我总结。
在正式开发小程序之前，花了两天时间看了小程序的官方文档，看完第一印象是：这不就是vue的开发模式吗？于是想会不会有人用vue的方式来开发小程序，果然有人写了个框架wepy，让开发小程序写法更贴近vue，主要看中其支持npm，于是决定用wepy进行开发

---

创建wepy项目

• 全局安装或更新WePY命令行工具：npm install wepy-cli -g
• 在开发目录中生成Demo开发项目：wepy new myproject ， 1.7.0之后的版本使用 wepy init standard myproject 初始化项目，使用 wepy list 查看项目模板
• 切换至项目目录：cd myproject
• 安装依赖：npm install
• 开启实时编译：wepy build --watch（也可以npm run dev，详细查看package.json）

wepy本地运行项目步骤如下：

首先gitLab拿去代码，进入根目录npm install，然后npm run dev生成dist文件，在开发者工具中就打开小程序项目调试，将项目目录选择dist，即可实时看到调试效果

2. 项目目录介绍：

image.png

开发过vue的话，这个配置很类似

3. 项目上线注意事项：

• 首先，项目要遵从小程序的上线规则，句规则参照：https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000808396a4260c0f1066c5a551801&highline=%E5%BC%BA%E5%88%B6%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF

• 其次，上线前一定先删除目录下的dist，重新再执行npm run build，这样尽可能缩小实际上线项目体积（不要超过2M），打包好后，在开发者工具上上传代码，在后台可将代码设置为体验版，测试人员使用体验版对小程序进行测试，测试结束，可将体验版提交审核，审核通过发布小程序，就能在微信端搜索到你的小程序了

4. 小程序如何测试：

• 开发者自测：注意要将开发者工具关闭ES6 转 ES5，不然wepy编译会报错，如果需要请求域名或者需要用到web-wiew域名，后台未设置安全连接，打开工具的设置（不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书）

  
  
  

  image.png

• 将测试人员设置为开发者，不是开发者无法进入开发板，同时手机打开调试模式，即可进路小程序体验版，体验版下面的vclone可以看到相关信息

5. 我写小程序代码配置：

项目公共配置放在app.wepy里面，包括了授权、验证、登录以及获取用户信息
请求链接随项目环境切换，公司为了解决后台域名一个月只能改一次的限制，搞了一个花生壳域名，不同环境指向不同域名，这样就不需要没切换一个环境，就需要小程序后台改域名，太麻烦

6.wepy的一个坑，准确说其实是小程序的坑
在项目过程中，发现在有一个详情页面，渲染速度慢的出奇，因为页面数据结构很复杂，处理逻辑很多，所以我怀疑是数据处理的性能问题，但实际证明并不是数据处理耗时间，而是wepy的脏数据检查非常耗时（apply()），有时甚至超过了20s，于是我放弃wepy的apply()，改用小程序的setData()，问题同样存在，原因就是这个页面数据量太大，将数据转换为字符串长度竟然有的已经超过100万了，不慢就怪了。。。。这个问题解决办法只能是后台数据结构月简单越好，层级越少越好，数据量越少越好.....
详情参考：https://github.com/Tencent/wepy/issues/1090，这位大佬给出了详细原因，同时作者表示在2.0在进行这方面优化

相关文档：

小程序：https://developers.weixin.qq.com/miniprogram/dev/

Wepy：https://tencent.github.io/wepy/document.html

另外，发现一个小程序的bug：input组件在工具上调试正常，但在手机上预览或者体验版时，将光标移到最前面，点击删除，e.detail.value变为了空，问了和社区官方，明显是个bug(手动狗头)..。。bug链接：https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000e824805c778b810175857a5b000&commentid=0002605d888ff0ea6d1700b69510&token=425717196&lang=zh_CN