六、基本程序书写格式和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界现显示页面的渲染和输出
<textclass="stdtitle"decode="{{true}}"space="{{true}}">{{u3}}</text>
<inputname='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秒后自动关闭
})