微信小程序开发初体验

最近由于工做须要入门了一下小程序，边入门也边在思考小程序的应用场景，“用完即走” 四个字一直浮如今脑海。正好最近在学驾照，由于之前一直对车不感冒，因此连奔驰都不认识，正好作个车标速查的小程序，很是符合 “用完即走” 的理念

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

由于小程序是国产的，因此 文档 是比较友好的，基本上花个半天看下就能够入门了。在一个初学者的角度，谈谈对小程序的感觉

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

而后，小程序的运行自己不依托于浏览器，没有 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 来改写这个简单的小程序