微信小程序开发技巧汇总

微信(小程序)  /  管理员 发布于 3年前   159

1.全局变量的使用

每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
详细的参数含义和使用请参考 App 参考文档 。

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

我们在做小程序的时候往往需要大量的请求，而请求的域名也都是相同的，我们可以把域名储存到全局变量中，这样会方便后面请求域名的修改。（user_id、unionid、user_info之类经常用到的都可以放在全局变量中）

//app.jsApp({ globalData: {  user_id: null,  unionid:null,  url:"https://xxx.com/index.php/Home/Mobile/",   //请求的域名  user_info:null }})

当在页面中使用时记得要引用下app.js，小程序已经提供了方法

//index.js//获取应用实例const app = getApp()  //获取app//let url = app.globalData.url; //使用方法，可先定义或者直接使用app.globalData.urlwx.request({  url: app.globalData.url + 'checkfirst', //就可以直接在这里调用  method:'POST',  header:{"Content-Type":"application/x-www-form/"}  data:{},  success:(res)=>{}

2.箭头函数的使用

当我们调用接口请求时要通过请求返回的数据改变页面数据经常要用到临时指针来保存this指针。

但如果使用ES6的箭头函数就可以避免

使用临时指针

onLoad: function (options) {  let that = this //保存临时指针  wx.request({   url: url + 'GetCouponlist',   method: 'POST',   header: { 'Content-Type': 'application/x-www-form-urlencoded' },   data: { },   success(res) {    that.setData({  //使用临时指针     coupon_length:res.data.data.length    })   }  })

使用ES6箭头函数 ( ) => {}

success:(res) => {    this.setData({  //此时this仍然指向onLoad     coupon_length:res.data.data.length    })   }

3.HTTP请求方法的封装

在小程序中http请求是很频繁的，但每次都打出wx.request是很烦的，而且代码也是冗余的，所以我们要把他封装起来
首先要在utils文件夹中新建一个js，我命名为request.js,在里面封装出post和get的请求，记得最后要声明出来

//封装请求const app = getApp()let host = app.globalData.url/** * POST 请求 * model:{ * url:接口 * postData:参数 {} * doSuccess:成功的回调 *  doFail:失败回调 * } */function postRequest(model) { wx.request({  url: host + model.url,  header: {   "Content-Type": "application/x-www-form-urlencoded"  },  method: "POST",  data: model.data,  success: (res) => {   model.success(res.data)  },  fail: (res) => {   model.fail(res.data)  } })}/** * GET 请求 * model:{ *  url:接口 *  getData:参数 {} *  doSuccess:成功的回调 *  doFail:失败回调 * } */function getRequest(model) { wx.request({  url: host + model.url,  data: model.data,  success: (res) => {   model.success(res.data)  },  fail: (res) => {   model.fail(res.data)  } })}/** * module.exports用来导出代码 * js中通过 let call = require("../util/request.js") 加载 */module.exports = { postRequest: postRequest, getRequest: getRequest}

这一步非常重要记得添加！

module.exports = {postRequest: postRequest,getRequest: getRequest}

使用时就在相应的页面顶部调用,Page外部噢

let call = require("../../utils/request.js")

使用的时候↓

get

//获取广告图  call.getRequest({   url:'GetAd',   success:(res)=>{   //箭头函数没有指针问题    this.setData({     urlItem: res.data    })   }  })

post

call.postRequest({   url: 'addorder',   data: {    shop_id: that.data.shop_id,    user_id: app.globalData.user_id,    coupon_sn: that.data.coupon_sn,    carType: that.data.car_type,    appointtime: that.data.toTime   },   success:(res)=>{    console.log(res)    wx.navigateTo({     url: '../selectPay/selectPay?order_sn=' + res.data.order_sn + '&fee=' + res.data.real_pay + "&order_id=" + res.data.order_id,    })   }  })

4.搜索input中，如何点击搜索按钮进行搜索及按钮样式修改

正常我们会在搜索框中加入一个搜索按钮，点击进行搜索，但是小程序不是操作dom的，所以是无法直接获取到input中的值，所以要通过另外的方法进行搜索。

（1）通过input组件中的bindconfirm属性（confirm-type="search" 可将软键盘的完成按钮改为“搜索”）

//js部分toSearch(e){ console.log(e.detail.value) //e.detail.value 为input框输入的值}

（2）利用form表单的提交，来完成点击按钮的提交(input需要添加name属性)

搜索按钮

利用button代替form的表单提交(form-type="submit")，注意用view不行，必须用button

需要自己修改button的默认样式（button的边框要在button::after中修改）

//wxml部分
  搜索

//js部分formSubmit(e){ console.log(e.detail.value.search) //为输入框的值，input记得添加name属性}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 详解基于Wepy开发小程序插件(推荐)
• 微信小程序+云开发实现欢迎登录注册
• 微信小程序+腾讯地图开发实现路径规划绘制
• 微信小程序云开发修改云数据库中的数据方法
• 使用微信小程序开发弹出框应用实例详解
• 详解如何在微信小程序开发中正确的使用vant ui组件
• 使用apifm-wxapi快速开发小程序过程详解