微信小程序开发技术文档

数字化终端小程序开发文档

一．目录结构

1. 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

 

 

 

2. 一个小程序页面由四个文件组成，分别是：

 

 

 

*注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

 

二．配置小程序

1. app.json小程序全局配置文件

{

  "pages":[//用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

    "pages/index/index",

    ...

  ],

  "window":{//定义小程序所有页面的顶部背景颜色，文字颜色定义等

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#388bff",

    "navigationBarTitleText": "数字化终端",

    "navigationBarTextStyle":"white",

    "enablePullDownRefresh": true,

    "onReachBottomDistance": 50

}

1. 页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

例如：

{

  "navigationBarBackgroundColor": "#ffffff",

  "navigationBarTextStyle": "black",

  "navigationBarTitleText": "页面标题名称",

  "backgroundColor": "#eeeeee",

  "backgroundTextStyle": "light"}

三．小程序框架

 

1. 注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

//index.jsPage({

  data: {

    text: "This is page data."

  },

  onLoad: function(options) {

    // 页面创建时执行

  },

  onShow: function() {

    // 页面出现在前台时执行

  },

  onReady: function() {

    // 页面首次渲染完毕时执行

  },

  onHide: function() {

    // 页面从前台变为后台时执行

  },

  onUnload: function() {

    // 页面销毁时执行

  },

  onPullDownRefresh: function() {

    // 触发下拉刷新时执行

  },

  onReachBottom: function() {

    // 页面触底时执行

  },

  onShareAppMessage: function () {

    // 页面被用户分享时执行

  },

  onPageScroll: function() {

    // 页面滚动时执行

  },

  onResize: function() {

    // 页面尺寸变化时执行

  },

  onTabItemTap(item) {

    // tab 点击时执行

    console.log(item.index)

    console.log(item.pagePath)

    console.log(item.text)

  },

  // 事件响应函数

  viewTap: function() {

    this.setData({

      text: 'Set some data for updating view.'

    }, function() {

      // this is setData callback

    })

  },

  // 自由数据

  customData: {

    hi: 'MINA'

  }})

 

1. 页面生命周期

 

 

 

 

 

 

 

 

1. 数据的绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

<view> {{ message }} </view>

Page({

  data: {

    message: 'Hello MINA!'

  }})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({

  data: {

    id: 0

  }})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({

  data: {

    condition: true

  }})

1. 网络发起发起 HTTPS 网络请求请求

wx.request({

url: app.globalData.ip + '/Ashx/CheckAssetHandler.ashx?cmd=3&checkid='+this.data.pddid+'&userid='+user[0].SYSCODE, 

      header: {

        'content-type': 'application/json'

      },

      success (res) {

        wx.hideLoading()

        if(res.data.code==0){

          _this.setData({

          details:res.data.data[0]

          })

        } else {

          wx.showToast({

            title: res.data.message,

            icon: 'none',

            duration:3000

          })

        }

      },

      fail: function(e) { //网络请求错误

        wx.showToast({

          title: '网络请求错误',

          icon: 'none'

        })

      }

    })