微信小程序的若干疑问记录

微信小程序与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
上面的这些window的属性命名总能在相互之间找到相同的地方,对于没有认真看的来说会弄错。