上次大概了解了一下微信开发是什么,安装了环境,注册了账号,创建了第一个项目并调戏了它一会~~
框架结构
pages,顾名思义,是页面的意思,这个文件夹里汇总着所有的页面。pages文件夹下还有多个子文件夹,就是具体的每一个页面。而每一个页面文件夹下又有着.wxml、.wxss、.js和.json文件。
然后继续来看,除了pages,同一级目录下还有app.js 、app.json 、app.wxss 、project.config.json
app.js
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
app.js文件是小程序的脚本代码,用来监听并处理小程序的生命周期函数、声明全局变量。对于app的注册来说,涉及到一个App()方法,用于对小程序进行初始化操作。
App()的参数及其描述
参数 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onLaunch | Function | 生命周期函数——监听小程序初始化 | 当小程序初始化完成,会触发onLaunch |
onShow | Function | 生命周期函数——监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发onShow |
onHide | Function | 生命周期函数——监听小程序隐藏 | 当小程序从前台进入后台,会触发onHide |
onError | Function | 错误监听函数 | 当小程序发生脚本错误,或者API调用失败时,会触发onError并带上错误信息 |
其他 | Any | 开发者自定义函数或数据 |
示例代码:
App({
/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {
},
/**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台,会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
app.wxss
是整个小程序的公共样式表,每一个页面都可以使用,但是页面优先级较高(也就是说,如果页面和这里的样式产生冲突,会优先采用页面的wxss配置)
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
app.json
是整个小程序的全局配置,配置小程序由哪些页面组成,配置小程序的窗口背景色等等。(每新加一个页面,都要来这里注册一下!!!否则打不开!窗口背景色等窗体配置同wxss一样,页面会覆盖这里的全局配置)
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
这里来详细介绍一下app.json的配置问题。
1.全局配置
配置项 | 类型 | 是否必填 | 描述 |
---|---|---|---|
pages | Array | 是 | 设置页面路径 |
window | Object | 否 | 设置默认页面的窗口表现 |
tabBar | Object | 否 | 设置底部的tab表现 |
networkTimeout | Object | 否 | 设置网络超时时间 |
debug | Boolean | 否 | 设置是否开启debug模式 |
2.window配置
对象 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,支持black/white |
navigationBarTitleText | String | 导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 窗口背景色 |
backgroundTextStyle | String | dark | 下拉背景字体、loading图样式,支持dark/light |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 |
3.tabBar配置
对象 | 类型 | 是否必填 | 默认值 | 描述 |
---|---|---|---|---|
color | HexColor | 是 | 标签页上的文字默认颜色 | |
selectColor | HexColor | 是 | 标签页上文字选中时的颜色 | |
backgroundColor | HexColor | 是 | 标签页的背景色 | |
borderStyle | String | 否 | black | 标签条上的框线颜色,支持black/white |
list | Array | 是 | 标签页列表,支持至少两个,至多五个标签页 | |
position | String | 否 | bottom | 可选值bottom、top |
4.networkTimeout配置
对象 | 类型 | 是否必填 | 描述 |
---|---|---|---|
request | Number | 否 | wx.request的超时时间,单位为ms |
connectSocket | Number | 否 | wx.connectSocket的超时时间,单位为ms |
uploadFile | Number | 否 | wx.uploadFile的超时时间,单位为ms |
downloadFile | Number | 否 | wx.downloadFile的超时时间,单位为ms |
project.config.json
这是一个小程序的基础配置文件,用来配置一些最基础的信息在里面,比如项目名啊,版本号啊,一些功能的启动啊等等等等
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.5.0",
"appid": "wxc897608a4adfe2eb",
"projectname": "test01",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
Q&A:
Q:页面文件夹一定要叫pages吗?
A:不是强制的,不用pages命名也可以。但是更推荐这样,会便于代码的查看和后期的维护。
Q:每个页面都有自己的配置,为什么还要全局配置呢,不是很多余吗?
A:当然不是啦,使用全局配置可以少写很多代码,提高代码的精简度,减少工作量~