QQ讨论群：785071190
需要学会一种技术需要丛整体结构来了解，本文主要对微信小程序的代码结构做一个介绍。后期博文将对每一个知识做详细介绍。
json、wxml、wxss、js认识
小程序主要包含后缀是.js .json .wxml .wxss的文件。
.js文件主要完成业务逻辑并控制页面需要展现的数据，完成网络请求，用户点击事件等功能。
.json主要完成应用配置或页面属性配置。
.wxml类似于html，描述页面结构展示。
.wxss类似于css，页面展示样式控制。
app
app.js、app.json、app.wxss这三个文件是微信小程序真个应用的全局配置。
小程序配置 app.json
app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 app.json 配置内容如下：
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}以上所有参数在官方文档中都有详细的介绍此处不重复编写，此处给出部分相关配置实例。官网地址(https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)
小程序应用逻辑控制app.js
app.js包含整个应用的生命周期函数，其中数据是全局的，可以在小程序所有js中调用，其他js中只需要通过getApp()获取app对象即可调用。以下是app.js的基本结构。官网详细介绍
App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})app.wss中定义的样式可在所有页面中使用。方便码农们统一定义样式。
app.wss内容如下：
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: #bfbfbf;
padding: 200rpx 0;
box-sizing: border-box;
} index.wxml如下使用：
<!--index.wxml-->
<view class='container'>
</view>小程序页面主要包含四个文件.js、.json、.wxml、.wxss
小程序页面Page
小程序页面生命周期函数在.js文件中，其中包含有onLoad、onReady、onShow、onHide、onUnload生命周期函数等。官方文档
//index.js
Page({
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 () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})小程序页面视图
小程序页面编写在.wxml文件中，此处内容比较多，后期博文会对其一一介绍。官方文档
<!--index.wxml-->
<form bindsubmit='submit'>
<view>用户名：</view>
<input type='text' name="username"></input>
<view>密码：</view>
<input type='text' password='true' name="password"></input>
<button form-type='submit'>登陆</button>
</form>小程序页面配置json
页面中.json文件主要是对页面标题栏，以及其他属性进行配置。官方文档
{
"navigationBarTitleText": "查看启动日志"
}.wxss类似于css，页面展示样式控制。
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}