小程序开发笔记

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

目前存在诸多限制：

1. 小程序除了重新加载 src 外，没有能力与小程序发送消息。如果要做登录授权这样的功能，可以像微信网页授权那样实现。基于这点，内嵌的网页不做鉴权比较合适。
2. 网页中后退，和小程序自带左上角的后退键效果不一致。例如：在安卓机上，点返回按钮，优先执行网页历史记录的后退，而直接点击后退按钮，是小程序内的操作后退，而非网页的历史记录后退。所以，内嵌网页，最好是独立的页面，如果要有链接跳转，最好通知小程序新开窗口处理。

自定义组件

写习惯了 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 的模式，目前阶段还有很多不成熟的地方，怕入坑太深，爬不出来。
• 自己写一个简单的文件编译，可以满足大部分的需求，熟悉小程序的模式就行。