小程序开发笔记
Page.prototype.setData
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
不同于 Vue 自动追踪数据变化,小程序更像 backbone 需要开发者主动告之。
WXSS
尺寸单位 rpx
在网页开发中使用过 lib-flex(可伸缩布局方案),看到这个单位真是很惊喜。
开发时,可以使用 postcss 插件 wx-px2rpx 将 px 转换成 rpx。
background-image
必须使用线上地址或 base64。
开发时,可以使用 postcss 插件 postcss-url 将本地路径转换成 base64,发布时,视情况,是否要上传到 cdn,将图片地址替换为线上地址
选择器限制
-
:host
指自定义组件所在节点的默认样式。当然,默认:host
的display
属性值是inline
。如果需要影响其他组件的样式可以写在:host
中,例如:关联组建使用flex
布局。 - 官方文档上列举了比较少的支持的选择器,实际上还支持部分伪类。而在网页开发中,常常用到的后台选择器未被支持,开发时,可以尝试 BEM 的模式书写。
可模块化
写 css 有个老大难问题就是没有作用域,在迭代中容易出现样式冲突。一些方法论应运而生,例如:BEM 。而 WXSS 中提供了作用域,一定程度上缓解了这一问题。
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
直接通过元素选择器修改默认组件的样式,会对全局产生影响。不知道算不算bug。
组件 web-view
目前存在诸多限制:
- 小程序除了重新加载 src 外,没有能力与小程序发送消息。如果要做登录授权这样的功能,可以像微信网页授权那样实现。基于这点,内嵌的网页不做鉴权比较合适。
- 网页中后退,和小程序自带左上角的后退键效果不一致。例如:在安卓机上,点返回按钮,优先执行网页历史记录的后退,而直接点击后退按钮,是小程序内的操作后退,而非网页的历史记录后退。所以,内嵌网页,最好是独立的页面,如果要有链接跳转,最好通知小程序新开窗口处理。
自定义组件
写习惯了 Vue ,也习惯了组件开发,所以小程序出来很长一段时间,我都是持观望态度,直到自定义组件出现。
相较于 Vue ,有部分概念相同,而小程序的组件近似于 shadow-dom,更内聚。
构造器 properties 属性
类似 Vue 的 props ,但小程序支持单类型,且不支持 Function,
组件最小单元 json js wxml
wxml 内容可以是空的,但是文件一样要存在
API
-
wx.showToast
带图标时 title 文本最多显示 7 个汉字长度,否则支持两行。开始觉得不太友好,但是从体验上来说,字太多,很短时间内确实很难阅读完。 - app.onLaunch 不能立即(可以延时1秒以上)进行页面切换,应该这个阶段是没有完全初始化好。切换逻辑应该放置到 page 的生命周期中去。
编译工具 wepy
用 wepy-cli 开发了两天,有诸多问题不太如意:
- 目前版本 1.x 不支持自定义组件
- 社区插件比较少,例如 postcss,虽然自己造了个轮子
- 类 Vue 的开发模式,但是很多地方还是不太像,差别还是有很多,写起来很别扭。要熟悉 Vue 的模式,小程序的模式,wepy 的模式,目前阶段还有很多不成熟的地方,怕入坑太深,爬不出来。
- 自己写一个简单的文件编译,可以满足大部分的需求,熟悉小程序的模式就行。