总结几点小程序开发技巧（小程序开发难点在哪里）

总结几点小程序开发技巧（小程序开发难点在哪里）

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

本文为大家分享了几点微信小程序开发技巧，希望能够帮助到广大开发者。

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请求方法的封装

//封装请求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, }) } })-

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

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

搜索按钮

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

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

//wxml部分搜索-

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。