微信小程序-代码构成

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.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>

Page

小程序页面主要包含四个文件.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

.wxss类似于css，页面展示样式控制。

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

​