微信小程序快速入门开发指南（二）
六、基本程序书写格式和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秒后自动关闭
})