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

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

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

         })

相关文章
|
3月前
|
前端开发 Java 微服务
开发指南027-微信支付
订单信息分为两层,业务层和微信层,业务层保留订单的详细信息,微信层只有总金额信息
|
2月前
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
2月前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
95 2
|
6月前
|
小程序
微信小程序快速入门 - 10分钟入门
微信小程序快速入门 - 10分钟入门
54 0
|
7月前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
602 0
|
7月前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
340 1
|
7月前
|
JSON 小程序 JavaScript
微信小程序快速入门02(含案例)
微信小程序快速入门02(含案例)
|
7月前
|
小程序 JavaScript 前端开发
微信小程序快速入门03
微信小程序快速入门03
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
37 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
364 3