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

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

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

         })

相关文章
|
14天前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
|
14天前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
|
2月前
|
小程序 JavaScript 前端开发
微信小程序快速入门03
微信小程序快速入门03
|
2月前
|
JSON 小程序 JavaScript
微信小程序快速入门02(含案例)
微信小程序快速入门02(含案例)
|
4月前
|
小程序 前端开发 JavaScript
微信小程序快速入门01(含案例)
微信小程序快速入门01(含案例)
124 1
|
1月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1月前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
3天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
10 1

热门文章

最新文章