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.jsPage({  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;}

​