微信小程序开发初体验

最近因为工作需要入门了一下小程序，边入门也边在思考小程序的应用场景，“用完即走” 四个字一直浮现在脑海。正好最近在学驾照，因为以前一直对车不感冒，所以连奔驰都不认识，正好做个车标速查的小程序，非常符合 “用完即走” 的理念

最终源码点击 这里（附小程序码），车标信息数据来自 车标网

因为小程序是国产的，所以 文档 是比较友好的，基本上花个半天看下就可以入门了。在一个初学者的角度，谈谈对小程序的感受

首先，小程序这个东西出现的用意是非常好的，依托于微信，自带社交、支付等，非常适合传播，比如斗地主这样的小程序（小游戏），分享到群，然后开玩，用完即走，非常之爽

然后，小程序的运行本身不依托于浏览器，没有 dom 的概念，在性能上，也比 h5 流畅了不少

可以说，小程序这个东西，还是非常有前途的

然后来说说开发这个 车标速查 小程序时候踩的一些坑吧：

• index 页面右侧有个 a-z 的导航，如果是 web 端，用锚点即可解决，但是小程序没法用锚点，正确的解决方案是用 scroll-view 组件，而且需要设置 height 属性（程序中设置 scroll-view 的 height 属性为 100%），并且父节点需要设置 height 属性为 100%（程序中设置 page 标签的 height 为 100%）本来还想做导航到指定区域时候的 active，但是不好做，遂放弃
• 小程序没有 div p 等标签，只能用它自带的 组件，可以把 view 组件当作是 web 开发时候的 div
• 因为我抓取的页面，有直接抓取 html 代码，那么就有个问题，如何在小程序中插入 html 代码？如果是 web 开发，innerHTML 即可，但是小程序没有 dom，可以用 wxParse，其实就是把 html 转换为了小程序语言的组件（没有看过具体实现，我觉得应该就是先转为抽象语法树（Abstract syntax tree），然后替换）
• 有个地方想用到类似 Vue 的 filter 功能，小程序中可以用 wxs 实现，同时貌似发现小程序 {{}} 中居然不能运算？只能基础赋值？（小程序其实自带了富文本组件 rich-text，但是不好用）
• 小程序中有专门的 css 叫做 wxss，它建议用单位 rpx，规定屏幕宽为 750rpx。建议用 iPhone6 做设计稿，375px，然后设计稿一般是双倍，也就是 750px，那么 1px 就对应 1rpx 了，直接按照设计稿来就好了
• app.js 有个勾子叫做 onLaunch，在小程序启动的时候会触发，这让小程序看起来更像是 app，因为类似 Vue 这样的 web app 并没有这样的勾子
• 如果点击右上角要能够分享，必须要写 onShareAppMessage，而这个函数会在转发的时候触发。这点设计不是很能理解，我的观点是这个配置应该放在 xx.json 里面，而不是放在类似这样的勾子函数里
• project.config.json 不需要自己去写，而是改变微信开发者工具里的一些配置后，会自动更新，类似 Alfred workflow 开发时候的 info.plist 文件
• 最后说到发布，貌似一个账号只能发布一个小程序／公众号？之前账号注册了一个公众号，现在不能添加小程序了，只能再注册一个账号了

接下去计划用 mpvue 来改写这个简单的小程序