⼩程序-个⼈总结
简介
⼩程序的运⾏环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式⼯作在渲染层，JS 脚本⼯作在逻辑层。这样在⼩程序中不能使⽤⼀些前端的框架，如jQuery、Zepto等。⽽⽹页开发者可以使⽤到各种浏览器暴露出来的 DOM API，进⾏DOM选中和操作。
全局配置
⼩程序根⽬录下的 app.json ⽂件⽤来对⼩程序进⾏全局配置，决定页⾯⽂件的路径、窗⼝表现、设置⽹络超时时间、设置多 tab 等。
常⽤的配置项
属性类型描述
pages string[]页⾯路径列表
window Object全局的默认窗⼝表现
tabBar Object底部 tab 栏的表现
networkTimeout Object⽹络超时时间
debug boolean是否开启 debug 模式，默认关闭部分常⽤配置选项
{
"pages": [ // 第⼀项为默认⾸页
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarBackgroundColor": "#ffffff", //导航栏背景颜⾊
"navigationBarTextStyle": "black",//导航栏标题颜⾊
"navigationBarTitleText": "", //导航栏标题⽂字内容
"backgroundColor": "#eeeeee", //窗⼝的背景⾊
"backgroundTextStyle": "light" //下拉 loading 的样式，仅⽀持 dark / light
},
"tabBar": {
"color": "#666",//未选中的的⽂字颜⾊
"selectedColor": "#ff8928",//选中的的⽂字颜⾊
"list": [{
"pagePath": "pages/index/index", //页⾯路径
"text": "⾸页",//tab 上按钮⽂字
"iconPath": "images/tabBar_img2.png", //未选中的图⽚路径
"selectedIconPath": "images/tabBar_img1.png"//选中时的图⽚路径
}, {
"pagePath": "pages/logs/logs",
"text": "⽇志"
}]
},
"networkTimeout": {
"request": 10000, //wx.request 的超时时间
"downloadFile": 10000 //wx.downloadFile 的超时时间
},
"debug": true,
"navigateToMiniProgramAppIdList": [ //允许跳转到其他⼩程序的appId
"wxe5f52902cf4de896"
]
}
页⾯配置
每⼀个⼩程序页⾯也可以使⽤同名 .json ⽂件来对本页⾯的窗⼝表现进⾏配置，页⾯中配置项会覆盖 app.json 的 window 中相同的配置项。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "接⼝功能演⽰",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
sitemap 配置
⼩程序根⽬录下的 sitemap.json ⽂件⽤来配置⼩程序及其页⾯是否允许被索引。
注册⼩程序
整个⼩程序只有⼀个 App 实例，是全部页⾯共享的。开发者可以通过 getApp ⽅法获取到全局唯⼀的 App ⽰例，获取App上的数据或调⽤开发者注册在 App 上的函数。
onLaunch (options) { //⽣命周期回调——监听⼩程序初始化
// Do something initial when launch.
},
onShow (options) { //⽣命周期回调——监听⼩程序启动或切前台    // Do something when show.
},
onHide () { //⽣命周期回调——监听⼩程序切后台
// Do something when hide.
},
onError (msg) { //错误监听函数
console.log(msg)
},
onPageNotFound(res){ //页⾯不存在监听函数
// Do something when page not found.
},
globalData: 'I am global data'
})
其他页⾯引⽤:
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
页⾯⽣命周期
data: { //页⾯的初始数据
text: "This is page data."
},
onLoad: function(options) { //⽣命周期回调—监听页⾯加载
// Do some initialize when page load.
},
onReady: function() { //⽣命周期回调—监听页⾯初次渲染完成
// Do something when page ready.
},
onShow: function() { //⽣命周期回调—监听页⾯显⽰
// Do something when page show.
},
onHide: function() { //⽣命周期回调—监听页⾯隐藏
// Do something when page hide.
},
onUnload: function() { //⽣命周期回调—监听页⾯卸载
/
/ Do something when page close.
},
onPullDownRefresh: function() { //监听⽤户下拉动作
// Do something when pull down.
},
onReachBottom: function() { //页⾯上拉触底事件的处理函数
// Do something when page reach bottom.
},
onShareAppMessage: function (res) { //⽤户点击右上⾓转发
if (res.from === 'button') {
// 来⾃页⾯内转发按钮
console.log(res.target)
}
return {
title: '⾃定义转发标题',
path: '/page/user?id=123'
}
},
onPageScroll: function() { // 页⾯滚动触发事件的处理函数
// Do something when page scroll
},
onResize: function() { //页⾯尺⼨改变时触发，详见响应显⽰区域变化    // Do something when page resize
},
onTabItemTap(item) {  //点击 tab 时触发
console.log(item.index); //被点击tabItem的序号，从0开始
console.log(item.pagePath); //被点击tabItem的页⾯路径
console.); //被点击tabItem的按钮⽂字
}
})
页⾯路由
框架以栈的形式维护了当前的所有页⾯
打开新页⾯
调⽤ API wx.navigateTo
使⽤组件 <navigator url="/page/index/index" open-type="navigateTo"/>页⾯重定向
调⽤ directTo
使⽤组件 <navigator url="/page/index/index" open-type="redirectTo"/>页⾯返回
调⽤ API wx.navigateBack
使⽤组件<navigator url="/page/index/index" open-type="navigateBack">
⽤户按左上⾓返回按钮
Tab 切换
调⽤ API wx.switchTab
使⽤组件 <navigator open-type="switchTab"/>
⽤户切换 Tab
重启动
调⽤ Launch
使⽤组件 <navigator open-type="reLaunch"/>
模块化
可以将⼀些公共的代码抽离成为⼀个单独的 js ⽂件，作为⼀个模块。模块只有通过 ports 或者 exports 才能对外暴露接⼝。
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
exports.sayGoodbye = sayGoodbye
//引⼊并调⽤
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
常⽤API
名称说明
wx.showToast显⽰消息提⽰框
wx.showLoading显⽰ loading 提⽰框
wx.uploadFile将本地资源上传到服务器
wx.showShareMenu显⽰当前页⾯的转发按钮
wx.login调⽤接⼝获取登录凭证（code）
wx.checkSession检查登录态是否过期
wx.UserInfo⽤户信息
>textstyle

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。