微信小程序开发基础
1. 登录微信公众平台 https://mp.weixin.qq.com/注册小程序账号。
2. 下载并安装微信web开发者工具
Json配置文件
配置文件分为两类。
- app.json为全局配置。作用域： 作用于全部页面
- pages目录下的每个页面下也有一个.json文件，作用域： 只作用于当前页面。
下面来介绍一下app.json的相关知识点。
app.json
app.json文件，是对当前小程序的全局配置。
包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
基本组成如下：
组成 | 功能 |
pages | 设置页面路径。 |
window | 设置窗体 （状态栏、导航条、标题、背景）。 如： navigationBarBackgroundColor 导航栏背景色、 navigationBarTextStyle 导航栏标题颜色、 navigationBarTitleText 导航栏标题文字内容 、 backgroundColor 背景色、 backgroundTextStyle 下拉背景字体，loading图的样式、 enablePullDownRefresh 是否开启下拉刷新 |
tabBar | 设置底部的tab。 如： color颜色、 selectedColor tab栏被选中的那一个的颜色、 backgroundColor tab栏的背景色、 borderStyle 边框颜色 |
debug | 设置网络超时时间。 |
networkTimeOut | 是否开启debug。 |
pages文件夹的所有页面，都要放在app.json中的pages属性中。否则就不会被加载。
{
//pages属性值是一个数组，每一个元素都是一个页面，且第一个页面就是首页
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}pages目录
pages目录下有多个目录，且每个目录代表一个页面。
pages的每个子目录下，默认会有xxx.js、xxx.json、xxx.wxml、xxx.wxss 四个文件
xxx.wxml
xxx.wxml充当的是类似于HTML的角色，用来描述当前页面的结构。
和HTML非常类似，有标签、属性。但并没有HTML中的p标签，h2标签等。常用的有： button、view、text等。
xxx.wxss
xxx.wxss语法和CSS大部分一致。
但是，有两点注意点：
1. wxss中新增了尺寸单位。由于在移动端设备上的像素比、宽度不同，于是采用了rpx来换算像素单位。设备的宽度统一设为750rpx。用于更好的适配各种移动设备。
2. wxss提供了全局样式和局部样式，和JSON配置文件类似。
xxx.json
为该页面的配置文件。
xxx.js
用于与用户的交互等。
生命周期
每个页面会有一个生命周期，在js文件中体现。
生命周期名 | 动作 |
data | 页面的初始数据 |
onLoad | 监听页面加载 |
onReady | 页面加载成功 |
onShow | 页面显示 |
onHide | 页面隐藏 |
onPullDownRefresh | 监听页面下拉动作 |
onReachBottom | 页面上拉触底 |
onShareAppMessage | 用户点击右上角分享 |
onUnload | 页面卸载 |
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})