再过几个小时，2018就结束了，赶着最后几个小时，完成了一个微信小程序，感谢时间，也感谢自己。
平时工作比较忙，整个开发花了两个周末的休息时间，输出包括后端服务器以及微信小程序，当然还有一些购买和部署服务器、CDN、https 证书等打杂的事情。
很遗憾，作为一个自诩为程序猿老司机的自己并没有在9小时搞定微信小程序开发。作为一个平时只写后端代码的老司机，这个完成速度勉强算及格吧。下面介绍一下自己这两个周末入门小程序开发用到的资料以及遇到的坑。
微信小程序最好的资料
小程序这块技术栈对于自己来说是一个从0到1的过程，因此最开始还是想找找有没有一些现成的教程。看了一些免费教程，发现不太系统，并且很多js的写法在我这个业务选手看来都业余。于是极客时间找到了一个付费专栏：《9小时搞定微信小程序开发》。
就在我准备付费的时候，发现其课程大纲不过是官方教程的一个搬运和翻译。
课程目录：
官方教程（部分）：
（没有贬低专栏作者的意思，事实上，小程序这块技术栈让我来写，估计目录也差不多。或者说，对于有一定学习能力的??，根本就不应该存在所谓的学习课程?）
作为一个聆听过《左耳听风》耗子叔的极客时间专栏的老司机（好像秒打脸了?），自然是记得他老人家对于学习知识的谆谆告诫：
我问过几个在别的领域知识付费的专栏作者：你们写的这些东西，不就是卡内基的那些东西吗？不就是某某书里的那些东西吗？不就是某某英文资料里的那些内容吗？
他们告诉我，是的，我们就是搬运知识，有些国外的东西，国人理解不了，需要用他们喜欢的语言讲出来，而他们又不读书，英文水平也一般，但他们想速成，所以，才有了我们的市场。这有点像餐馆，他们不想自己做饭吃，那就我们来做，有的人还要别人喂到嘴边，甚至好些人都需要先帮他们嚼一遍，他们才能吃得下去。所以，我们这些学习能力强的人挣点他们的钱也是应该的。
所以，兜兜转转一圈，最后还是选择了微信团队的官方开发教程。而这个选择从后面的开发过程看，是无比正确的：
- 官方教程不长，非常干练，整体系统感强。举个例子，很多奖微信小程序开发的二手教程都会给你说这个API是干嘛的以及如何使用这种废话。但是，微信的框架-API文档中，则直接给你言简意赅的讲解了其所有API涉及的规范和原则，你看了这个规约后，你看到一个API你其实就已经知道它该如何使用了。对于我这种入门菜鸟来说，这种知识点如果在入门时候就知其然，后面会在这个点上重复采坑而不自知，并且后续要知其所以然要花费的时间只会多不会少。
- 这是小程序开发第一手资料的来源，具有权威性和最高的时效性。从两年前关注小程序，到现在开发自己的第一个小程序前，一直以为小程序技术这块从发布至今没有什么迭代和更新，但是从其文档的众多的API兼容以及事件兼容描述看，小程序团队过去两年真的是挺努力的。作为一个开发者，迭代造成的不兼容，你只能去适配，因此，第一手的资料往往能给你节省数小时的时间。
- 丰富的样式库和源代码示例。这块重点推荐两个资源：
第一个是微信小程序设计指南。如果你需要自己设计产品原型，你一定要研读一下这个设计指南，这样你就不用去重新发明很多UI轮子，也不用纠结这个交互是方案A好还是方案B好。这个指南从一定程度上反应了微信整个的产品观和设计理念，你一定也能找出这些指南中不够完美的地方，但是当前阶段，这的确是一个能够让你快速设计出一个80分微信小程序产品的 Bible. 指南中给出了WeUI_sketch组件库、 WeUI_PS组件库以及对应的预览地址，可以帮助你快速设计产品原型。
第二个是WeUI for 小程序. 如果第一个资源主要是辅助你进行产品设计，那么这个资源则是辅助你进行快速开发的必备参考库（老鸟可以无视）。用了这个代码库以后，你开发页面大部分时候就是从这个库里面找你需要的组件和样式，然后复制-粘贴搞定：
那些微信小程序开发中的坑
修改 page data 不生效
坦率讲，这并不是小程序的坑，而是自己看文档不仔细。修改页面的 data 只能通过 setData:
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
- 仅支持设置可 JSON 化的数据。
- 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
- 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
setData 可以直接修改一个其下的子字段：
|
1 2 3 4 5 6 |
changeItemInObject() { this.setData({ 'object.text': 'changed data' }) }, |
但是有一种情况需要注意：如果你的 key 是一个变量，这样修改子字段是不会生效的：
|
1 2 3 4 5 6 7 |
changeItemInObject() { let key = 'object.text' this.setData({ key: 'changed data' }) }, |
你应该这样做：
|
1 2 3 4 5 6 7 |
changeItemInObject() { let key = 'object.text' this.setData({ [key]: 'changed data' }) }, |
navigateTo 不生效
这个依然是看文档不仔细：
wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
如果你要跳转的页面是 tabbar 页面，请使用 wx.switchTab.
列表条目多时出现卡顿
这个问题容易出现在动态加载数据，数据又绑定了前端列表view的场景。根据官方文档，使用 wx:key 解决即可。其原理是：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
wx.request 中 DELETE 传参问题
根据w3c标准，http DELETE 请求中的参数应该跟 GET 方法一样，放在 url query 中，然而微信封装的 wx.request 防范在指定为 DELETE 方法后，data 依然被放在了 body 中。如果你在服务器端获取不到参数，请尝试从 body 中获取。
文件上传阿里云OSS 403 权限问题
如果你直接使用阿里云 OSS 域名上传，因为微信封禁了 OSS 域名，因此你需要参考微信小程序文件上传二三事 绑定自定义域名。同时，千万注意，绑定的域名不要开启CDN，否则，会造成 403 权限错误：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
http api request failed:403:map[Date:[Mon, 31 Dec 2018 06:36:50 GMT] X-Cache:[MISS TCP_MISS dirn:-2:-2] X-Swift-Cachetime:[1] Server:[Tengine] X-Tengine-Error:[You are forbidden to list buckets] Via:[cache46.l2cm9[,0], kunlun3.cn1425[115,403-1280,M], kunlun4.cn1425[156,0]] X-Swift-Savetime:[Mon, 31 Dec 2018 06:36:50 GMT] Content-Type:[text/html] Connection:[keep-alive] X-Swift-Error:[orig response 4XX error] Timing-Allow-Origin:[*] Eagleid:[3b3ff71815462382105176007e] Content-Length:[254] Ali-Swift-Global-Savetime:[1546238210]] <title>403 Forbidden</title> <h1>403 Forbidden</h1> You don't have permission to access the URL on this server. <hr> Powered by Tengine |
如果同时希望使用阿里云的CDN，请绑定另外一个域名，与上传域名分开。
总结
也许是孕妇效应吧，最近发现很多人都开始做微信小程序。从整体开发体验看，这的确是一个分发自己创意的轻量级产品方案。过去的两年，微信小程序已经远超百万，但是真正让你能记住的可能比你能记住的公众号还少。因此，载体本身的影响能力圈是有限的，还是要回归到你的产品解决了什么问题，这也是你做任何产品的价值所在。此外，因为苹果税的问题，当前 （2018.12.31）iOS 平台的微信小程序无法进行虚拟物品支付（会员、道具、课程等）的，这显然会极大的影响开发者的积极性。虽然你张小龙的理念是小程序用完即走，但是你不能让开发者只有一个广告变现的路径，更不能只是自私的维护好自己的地盘儿不管开发者死活。
