微信小程序快速入门开发指南(二)

2024-06-20 13:35:29 浏览数 (1)

六、基本程序书写格式和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秒后自动关闭

          })

0 人点赞