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

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

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

         })

相关文章
|
前端开发 Java 微服务
开发指南027-微信支付
订单信息分为两层,业务层和微信层,业务层保留订单的详细信息,微信层只有总金额信息
|
9月前
|
机器学习/深度学习 小程序 安全
让小程序开口说话:DeepSeek语音交互开发指南
本文介绍如何利用DeepSeek语音交互技术构建智能语音助手,涵盖从安装声音采集设备、训练语言理解模型到设计语音控制界面的全过程。通过生活化场景,如深夜查找教程、旅行中寻找餐厅等,展示如何实现自然对话。此外,还深入探讨多轮对话记忆、情感计算及智能家居控制等进阶功能,帮助开发者创建会倾听、善思考的语音应用。最后,提供性能优化与安全防护建议,引领读者进入人机共生的新时代。
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
522 2
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
1071 0
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
940 1
|
小程序
微信小程序快速入门 - 10分钟入门
微信小程序快速入门 - 10分钟入门
180 0
|
小程序 JavaScript 前端开发
微信小程序快速入门03
微信小程序快速入门03
167 0
|
7月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
752 12
|
10月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
474 0

热门文章

最新文章