上次大概了解了一下微信开发是什么，安装了环境，注册了账号，创建了第一个项目并调戏了它一会~~
框架结构
一个标准的项目目录结构
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：当然不是啦，使用全局配置可以少写很多代码，提高代码的精简度，减少工作量~
网友评论