JSON 配置
在小程序中，JSON扮演的静态配置的角色。
小程序配置 app.json
{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
全局配置
tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象
{
"pages": ["pages/index/index", "pages/logs/index"],
"tabBar": {
"list": [
{
"iconPath": "assets/fonts/首页.png",
"selectedIconPath": "assets/fonts/home.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}
tabBar 还有其他属性
颜色仅支持十六进制，定位仅支持top和bottom，其中top时不支持图标。
{
"tabBar": {
"color": "#ff00ff",
"selectedColor": "#0000ff",
"backgroundColor": "#00ff00",
"position":"bottom"
}
}
页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项
页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。
WXML 模版
WXML 充当的就是类似 HTML 的角色。block标签的作用是直接解析里面的内容，不解析自身block标签。
WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器
小程序api
获取登录用户的数据
// 获取登录用户的数据
wx.getUserInfo({
//withCredentials: true,
success: (res) => {
console.log(res);
let user = res.userInfo;
this.setData({
user
})
}
})
数据存储(全局缓存中存取)
存数据：setStorage， 同步： setStorageSync
// 数据存储
wx.setStorage({
key: 'isCollected',
data: oldCollectFlag
})
2) 获取数据：getStorage 同步: getStorageSync
let oldCollectFlag = wx.getStorageSync('isCollected');
发送请求
官方文档
wx.request({ // 发送请求
url: API_URL, // 请求的url
header: { // 设置请求头
'Content-type': 'json',
},
success: (res) => { // 请求成功的回调函数
// 隐藏提示加载信息
wx.hideToast();
console.log(res); // 请求的成功的数据对象，注意是封装后的对象
}
})
wx.request({
url: url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded',
"Cache-Control": "no-cache"
},
method: method,
success: function (res) {
//console.log(res);
},
fail: function (res) {
},
complete: function (res) { },
})
小程序组件化
wxml节点信息API
在小程序中使用wx.createSelectorQuery()获取到SelectorQuery对象，这个对象提供了对应的节点操作方法
in(this) 将节点选区范围指向当前组件，默认只会查找当期页面
select() 根据css选择器查询到匹配结果的第一个元素节点，返回的 NodesRef对象实例
selectAll() 和select一样只不过他可以匹配多个
selectViewport() 选择显示区域(页面)，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例。
exec() 执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回。
NodesRef对象
1、 boundingClientRect([callback])
获取节点信息， 返回值相对于显示区域，以像素为单位。
返回节点的信息有left、right、top、bottom、width、height 如果提供了callback回调函数，在执行selectQuery的exec方法后，节点信息会在callback中返回
2、scrollOffset([callback])
获取滚动位置信息，只针对与scroll-view组件以及viewport页面起作用，返回值是scrollLeft、scrollTop，如果提供了callback回调函数，在执行selectQuery的exec方法后，节点信息会在callback中返回
3、fields(Object, [callback])
指定获取那些信息 （id, dataset, rect, size, scrollOffset , properties=[获取的常规属性名称（注:id class style 除外）
微信小程序生命周期、页面生命周期、组件生命周期
- 生命周期 App（全局）
位置：项目根目录app.js文件
App({
onLaunch (options) {
//
console.log('小程序初始化')
},
onShow(options) {
console.log('监听小程序启动或切前台')
},
onHide() {
console.log('监听小程序切后台')
},
onError(msg) {
console.log('错误监听函数')
},
onPageNotFound(res) {
console.log('小程序要打开的页面不存在时触发');
wx.redirectTo({ // 重定向
url: 'pages/...'
}) // 如果是 tabbar 页面，请使用 wx.switchTab
}
})
- 页面生命周期
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
* 一个页面只会调用一次，可以在onLoad中获取当前页面从上一级页面带过来的参数
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
* 一个页面只会调用一次，代表当前页面已经准备妥当，可以和视图层进行交互
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
* 每次打开页面都会调用一次，如果需要每次进入页面时刷新数据，可在此方法中实现
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
* 当navigateTo或底部tab切换时调用
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
* 当redirectTo或navigateBack的时候调用
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- 组件生命周期
// pages/myComponent.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
},
/*组件生命周期*/
lifetimes: {
created() {
console.log("在组件实例刚刚被创建时执行")
},
attached() {
console.log("在组件实例进入页面节点树时执行")
},
ready() {
console.log("在组件在视图层布局完成后执行")
},
moved() {
console.log("在组件实例被移动到节点树另一个位置时执行")
},
detached() {
console.log("在组件实例被从页面节点树移除时执行")
},
error() {
console.log("每当组件方法抛出错误时执行")
},
/*组件所在页面的生命周期 */
pageLifetimes: {
show: function () {
// 页面被展示
console.log("页面被展示")
},
hide: function () {
// 页面被隐藏
console.log("页面被隐藏")
},
resize: function (size) {
// 页面尺寸变化
console.log("页面尺寸变化")
}
}
}
})
