微信小程序开发初体验
最近因为工作需要入门了一下小程序,边入门也边在思考小程序的应用场景,“用完即走” 四个字一直浮现在脑海。正好最近在学驾照,因为以前一直对车不感冒,所以连奔驰都不认识,正好做个车标速查的小程序,非常符合 “用完即走” 的理念
因为小程序是国产的,所以 文档 是比较友好的,基本上花个半天看下就可以入门了。在一个初学者的角度,谈谈对小程序的感受
首先,小程序这个东西出现的用意是非常好的,依托于微信,自带社交、支付等,非常适合传播,比如斗地主这样的小程序(小游戏),分享到群,然后开玩,用完即走,非常之爽
然后,小程序的运行本身不依托于浏览器,没有 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 来改写这个简单的小程序