总结一些小程序开发技巧(微信小程序开发技巧)

本文分享一些微信小程序开发的技巧，希望对开发者有所帮助。

1、全局变量的使用

每个小程序都需要调用app.js中的app方法来注册小程序实例，比如绑定生命周期回调函数、错误监控、页面没有监控功能等。详细的参数含义和使用请参考App参考文档。

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

我们做小程序的时候，往往需要很多请求，请求的域名都是一样的。我们可以将域名存储在全局变量中，这样便于以后修改域名。(user_id、unionid、user_info等常用的可以放在全局变量中)

//app . jsapp({ global data:{ user _ id:null，unionid:null，URL: ；https://xxx.com/index.php/Home/Mobile/&;，//请求的域名user_info:null }})在页面使用的时候记得参考app.js，小程序已经提供了方法。

//index.js// Get应用实例const app = getApp()//Get app//let URL = app . global data . URL；//如何使用，可以先定义或者直接使用app . global data . URL wx . request({ URL:app . global data . URL+ # 39；checkfirst # 39，//这里可以直接调用方法: # 39；邮政 # 39；，标题:{ content -Type ；: application/x-www-form/ ；}数据:{}，成功:(RES)= gt；{}2.箭头功能的使用

当我们调用接口请求时，需要通过请求返回的数据来改变页面数据，我们经常使用一个临时指针来保存这个指针。

但是如果使用ES6的箭头功能就可以避免。

使用临时指针

onload:function(options){ let that = this//保存临时指针wx . request({ URL:URL+ # 39；GetCouponlist # 39，方法: # 39；邮政 # 39；，表头:{ # 39；内容-类型 # 39；: 'application/x-www-form -urlencoded # 39；}，data: {}，success(RES){ that . setdata({//使用临时指针coupon _ length:RES . data . data . length } })使用ES6 arrow函数()= >；{}

成功:(RES)= gt；{this.setData({ // this仍然指向onload coupon _ length:RES . data . data . length })} 3。HTTP请求方法的封装

Http请求在小程序中比较频繁，但是每次都要输入wx.request比较烦，代码也比较冗余，需要打包。首先，我们需要在utils文件夹中创建一个新js。我将其命名为request.js，封装了post和get的请求。记得在最后声明。

//封装请求constapp = getapp()lethost = app.globalData.url/** * post请求*模型:{ * URL:interface * post data:parameter { } * do success:成功回调* doFail:失败回调*} */函数post request(model){ wx . request({ URL:host+model . URL，header:{ ；content -Type ；: application/x-www-form -urlencoded ；}，方法: 帖子 ，data: model.data，success:(RES)= gt；{ model.success(res.data) }，fail:(RES)= gt；{ model . fail(RES . data)} }/* * get request * model:{ * URL:interface * get data:parameter { } * do success:成功回调* doFail:失败回调* } */function get request(model){ wx . request({ URL:host+model . URL，data: model.data，success:(RES)= gt；{ model.success(res.data) }，fail:(RES)= gt；{ model . fail(RES . data)} })}/* * module . exports用于通过let call = require( ；../util/request . js ；)Loading */module . exports = { post request:post request，getrequest: getrequest}这一步非常重要。记得补充一下！

模块。exports = { post request:post request，getrequest: getrequest}在页面外使用时在相应页面顶部调用。

let call = require( ；../../utils/request . js ；)使用时↓

得到

//获取广告地图call . Get request({ URL: # 39；GetAd # 39，成功:(RES)= gt；{//箭头函数没有指针问题this . setdata({ URL item:RES . data })} } post

call . post request({ URL: # 39；addorder # 39，data:{ shop _ id:that . data . shop _ id，user_id: app.globalData.user_id，coupon_sn: that.data.coupon_sn，carType: that.data.car_type，appointment time:that . data . to time }，success:(RES)= gt；{ console . log(RES)wx . navigate to({ URL: # 39；../selectPay/selectPay？order _ sn = # 39+RES . data . order _ sn+ # 39； 费用= # 39；+RES . data . real _ pay+ ； order _ id = +res.data.order _ id，}}}) 4。在搜索输入中，如何点击搜索按钮来搜索和修改按钮样式？

正常情况下，我们会在搜索框中添加一个搜索按钮，点击进行搜索，但是小程序并不操作dom，所以无法直接在input中获取值，只好用另一种方法进行搜索。

(1)通过输入组件中的bindconfirm属性(confirm -type = ；搜索 将软键盘的“完成”按钮改为“搜索”)

lt输入class = # 39search _ input # 39type = # 39正文 # 39；confirm -type = # 39；搜索 # 39；bindconfirm = # 39toSearch # 39 gt lt/input gt；//js part to search(e){ console . log(e . detail . value)//e . detail . value是输入框中输入的值}(2)使用表单的提交完成点击按钮的提交(输入需要添加name属性)

搜索按钮

使用按钮而不是表单提交表单(form -type = ；提交 )，注意使用视图时，必须使用按钮。

需要自己修改按钮的默认样式(按钮的边框要在button::after中修改)

//wxml part < form bind submit = ；表单提交 bindreset = formReset gt lt输入class = # 39search _ input # 39type = # 39正文 # 39；confirm -type = # 39；搜索 # 39；name = 搜索 bindconfirm = # 39toSearch # 39 gt ltbutton class = # 39search _ btn # 39form -type = # 39；提交 # 39； gt调查

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：总结一些小程序开发技巧(微信小程序开发技巧) https://zhujicankao.com/79965.html