微信小程序的若干疑问记录
微信小程序与web开发有许多相似之处,但是又有很多不同之处。记录下疑问与不同之处,方便不弄混淆。
一、页面开发上的区别
上图的微信小程序我用了4种颜色来区分不同的部分
蓝色:navigationBar(导航栏)
黑色:background(下拉背景)
红色:page(页面)
白色:tabBar(切换栏)
在web开发中我们用js控制逻辑,HTML+CSS布局,在微信小程序中js没有变,
HTML变成了wxml,CSS变成了wxss。
这里需要了解一下,打开微信小程序调试工具后我们可以看见,小程序的page相当于HTML的body。
wxml的布局和wxss的样式仅仅是图中红色的部分。
导航栏、下拉背景、切换栏的样式不由wxss控制,而是由一个全局的app.json和每个页面的json文件控制的,
对于有强迫症的人来说,小程序的这个设定让人有点纠结,明明都是样式控制却要分成两个文件。
二、window属性命名上的纠结
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如"#000000" | |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black/white | |
navigationBarTitleText | String | 导航栏标题文字内容 | ||
navigationStyle | String | default | 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮 | 微信版本 6.6.0 |
backgroundColor | HexColor | #ffffff | 下拉窗口的背景色 | |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark/light |