微信小程序快速入门开发指南（二）

六、基本程序书写格式和JSON格式

微信小程序的程序语法格式类似json格式，服务器也要采用结果以json的形式返回给小程序，这种格式需要对特殊字符进行编码，如下举例一个json字符串。

{"errcode":0,"errmsg":"操作成功！"}  

基本构成是花括号、键名、键值，多个键名以逗号分隔

服务器C#简易写法： string result = "{\"errcode\":0,\"errmsg\":\"操作成功！\"}";  

返回给小程序小程序无须对字符串进行处理，通过接收对象直接访问，比如定义一个接收对象res

那么访问方法可以通过  res.errcode 和 res.errmsg，来得到对应的值进行程序进行判断。

Js程序文件如下：

const app = getApp()  //请每页加上这一句，这个代表整个小程序app，以访问app.js里的全程变量

Page({ 

data: {

    us1: '未绑定',

    us2: '未绑定',

    us3: '未绑定',

  },

  /**页面的初始数据   */

setuserinfo:function(){

｝

  /**生命周期函数--监听页面加载 */

  onLoad: function () {

  },

  /**生命周期函数--监听页面初次渲染完成*/

  onReady: function () {

  },

  /**生命周期函数--监听页面显示 */

  onShow: function () {

  },

  /**生命周期函数--监听页面隐藏 */

  onHide: function () {

  },

  /**生命周期函数--监听页面卸载*/

  onUnload: function () {

  },

  /** 页面相关事件处理函数--监听用户下拉动作 */

  onPullDownRefresh: function () {

   },

/** 页面上拉触底事件的处理函数*/

  onReachBottom: function () {   

  },

  /**用户点击右上角分享*/

  onShareAppMessage: function () 

  }

}

)

七、变量的使用

给控件赋值、取值，变量起到了重要的作用，变量有全程变量和页面私有变量之分。

（1）变量的初始化：初始化工作是在JS文件中设置，全程变量需要在app.js里设置，语法如下：

 globalData: {

    userInfo: null,

    appid: 'wxd0993',

    sessionKey:'',

  }

私有变量需要在每个页面里 ****.js里设置，语法如下:

 data: {

    section1:[],

    section2: '这是一个标签'

}

（2）变量的赋值：

   Setuserinfo:function(){

        var that=this;   //this是指这个页对象

      that.setData({us3: '已更新' });

}

（3）变更在wxml界现显示页面的渲染和输出

<text class="stdtitle" decode="{{true}}" space="{{true}}">{{u3}}</text>

<input name='cid' disabled='' value='{{u3}}'  style='{{u3}}' class='stdinput'></input>

        变量以双花括号加变量名称进行渲染，可多次在页面使用，可不用初始化，不初始化不显示任何输出，但程序访问则返回undefined

八、form的提交数据或重置

  formBindsubmit: function (e) {

    var that=this;

    var sdate = e.detail.value.birthday; //e为捕捉的事件对象，这个是访问birthday控件值

    //如果用户未选择值为null

    if (sdate == null) {

      sdate = '';

    }

    var reqf = []; //定义一个数组，进行合法性输入校验

    reqf.push({ fname: '姓名需要填写内容', fvalue: e.detail.value.name });

    reqf.push({ fname: '单位名称需要填写内容', fvalue: e.detail.value.unitName });

 for (var itemIndex in reqf) {

      //判断如果用户输入值为空，则提示

      if (reqf[itemIndex].fvalue == '') {

        //微信小提示框，5秒后自动消失

        wx.showToast({

          title: reqf[itemIndex].fname,

          icon: 'none',

          duration: 5000

        })

        return;

      }

}

    //调用本页的另一个函数，这个函数提交数据到后台处理，后续讲述

    that.wxmp_syncuser(e.detail.value.name, '', '更新个人信息', '', sdate, e.detail.value.UnitName, e.detail.value.address);

  }, //formSubmit

  formReset: function (e) {

    var that = this;

    that.setData({ dateValue: '' });

  }

九、如何与自己的服务器提交数据进行处理

图示是最基础的原理：

格式语法：

    wx.request({

      url:’https://www.xxx.com/api.aspx’,

      method: "POST",

      data: {

             //要传递的数据

  },

      header: {

        'content-type': 'application/x-www-form-urlencoded;;charset=utf-8'

      },

      success: function (res) {

      },

      fail: function (res) {

      }

    })

举例（同步用户信息）：

  wxmp_syncuser: function (_name, _mobile,  _birthday, _unitname, _address) {

    var that = this;

    wx.request({

      url: app.globalData.apiurl,    //后台处理程序地址

      method: "POST",

      data: {

        gettype: 'wxmp_SyncUsers',   //服务器端自己写的接口方法函数

        appid: app.globalData.appid,   //自己记录的一些信息

        openid: app.globalData.openId,

        unionid: app.globalData.unionId,

        name: encodeURIComponent(e.detail.value.name),

        mobile: _mobile,

        birthday: _birthday,

        unitname: encodeURIComponent(_unitname),  //文字类的一定要编码

        address: encodeURIComponent(_address)

      },

      header: {

        'content-type': 'application/x-www-form-urlencoded;;charset=utf-8'

      },

      success: function (res) {

        if (res.data.errcode == '0') {

            //成功了，执行一些操作;

          } else {

          }

      },

      fail: function (res) {

        wx.showModal({

          title: '',

          content: res.errMsg,

          showCancel: false,

        });

      }

    })

    wx.hideLoading();

  }//syncusers

  后台接口处理程序请根据您的技术框架进行处理。

十、小程序的几种提示框

   （1） 一直显示加载性提示，直到下达关闭指令

        wx.showLoading({

              title: '信息加载中...',     //最多显示七个字

            })

        wx.hideLoading();

   （2）显示模式弹窗，等用户点击确定或取消

        wx.showModal({

              title: '',

              content: '是否确认？',

              showCancel: true,//是否显示取消按钮

              cancelText: "否",//默认是“取消”

              //      cancelColor: 'skyblue',//取消文字的颜色

              confirmText: "是",//默认是“确定”

              //      confirmColor: 'skyblue',//确定文字的颜色

              success: function (res) {

                if (res.cancel) {

                  return;

                } else {

                  //点击确定处理程序或函数

                }

              },

              fail: function (res) { },//接口调用失败的回调函数

              complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行）

            })

（3）显示一下，等待一段时间自动关闭

          wx.showToast({

            title: ‘某字段不能为空’,

            icon: 'none',

            duration: 5000  //5秒后自动关闭

          })