微信小程序学习笔记(1)
一、申请个人账号
二、安装开发者工具
三、申请程序
四、阅读帮助文档
1.简单认识基本结构以及页面
app.json【全局配置】
页面路径、界面表现、网络超时时间、底部 tab 等
摘自微信小程序开发者文档的帮助内容:
app.json 配置项列表
属性 |
类型 |
必填 |
描述 |
支持版本 |
String Array |
是 |
页面路径列表 |
||
Object |
否 |
全局的默认窗口表现 |
||
Object |
否 |
底部 tab 栏的表现 |
||
Object |
否 |
网络超时时间 |
||
Boolean |
否 |
是否开启 debug 模式,默认关闭 |
||
Boolean |
否 |
是否启用插件功能页,默认关闭 |
||
Object Array |
否 |
分包结构配置 |
||
String |
否 |
Worker 代码放置的目录 |
||
Array |
否 |
需要在后台使用的能力,如「音乐播放」 |
||
Object |
否 |
使用到的插件 |
||
Object |
否 |
分包预下载规则 |
||
Boolean |
否 |
iPad 小程序是否支持屏幕旋转,默认关闭 |
描述小程序的页面信息,第一项即红色细线框中的一项为首页路径
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 |
类型 |
默认值 |
描述 |
最低版本 |
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色,如 |
|
navigationBarTextStyle |
String |
white |
导航栏标题颜色,仅支持 |
|
navigationBarTitleText |
String |
导航栏标题文字内容 |
||
navigationStyle |
String |
default |
导航栏样式,仅支持以下值: |
微信版本 6.6.0 |
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
|
backgroundTextStyle |
String |
dark |
下拉 loading 的样式,仅支持 |
|
backgroundColorTop |
String |
#ffffff |
顶部窗口的背景色,仅 iOS 支持 |
微信版本 6.5.16 |
backgroundColorBottom |
String |
#ffffff |
底部窗口的背景色,仅 iOS 支持 |
微信版本 6.5.16 |
enablePullDownRefresh |
Boolean |
false |
是否全局开启下拉刷新。 |
|
onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距页面底部距离,单位为px。 |
|
以上就是json配置的基本信息。
Wxml模板
类似网页中的html,由标签、属性等组成。将常用的小组件进行打包,供开发者使用,有各种各样的组件,如<map></map> 、<button></button>等类似的,进行组合使用,大大提高开发效率。这也是微信小程序进行开发时候的简便性。如下图所示,就是微信的一个比较简单的wxml的页面。
微信参考vue和react框架,优化了部分语法,如下所示,就是进行文本渲染。通过在{{变量}}内设置一个变量,然后js在对这个变量进行赋值。(具体内容接下来会学习)
Wxss样式
类似css的样式,不过为开发者省去了有关不同屏幕移动端兼容性的问题,提供了一个新的换算单位rpx.
App.wxss样式作用于所有页面,而特定页面的如page.wxss则只作用于page页面。
JS 交互逻辑
优化了部分功能,同时可以通过js调用许多api
以上,就是对微信小程序的各个页面的功能之间的初步认识了。