微信小程序学习笔记(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
以上,就是对微信小程序的各个页面的功能之间的初步认识了。