总结一些小程序开发技巧（“小程序开发”）

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

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:& quot；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;支票优先& amp#39;//这里可以直接调用方法:&；#39;邮政和邮政。#39;，标题:{ & quot内容-类型& quot:& quotapplication/x-www-form/& quot；} data:{}，success:（RES）= & gt；{}2.箭头功能的使用

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

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

使用临时指针

onload:function（options）{ let that = this//保存临时指针wx . request（{ URL:URL+&；#39;GetCouponlist & amp#39;，方法:& amp#39;邮政和邮政。#39;，标题:{ & amp#39;内容-类型&amp。#39;:& amp#39;应用程序/x-www-form -URL encoded & amp；#39;}，数据:{}，成功（RES）{ that。setdata（{//使用临时指针Coupon _ length:RES . data . data . length }）} }）使用ES6箭头函数（）=》{ }

成功:（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（）let host = app.globalData.url/** * post request * model:{ * URL:interface * post data:parameter { } * do success:成功回调* doFail:失败回调* } */function post request（model）{ wx . request（{ URL:host+model . URL，header:{ & quot；内容-类型& quot:& quotapplication/x-www-form -urlencoded & quot；}，方法:& quot帖子& quot，data: model.data，success:（RES）= & gt；{ model . success（RES . data）}，fail:（RES）= & gt；{型号。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；{型号。fail（RES . data ）} }/* *模块。exports用于通过let call = require（& quot；../util/request . js & quot；）Load */module . exports = { post request:post request，getrequest: getrequest}这一步非常重要。记得补充一下！

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

let call = require（& quot；../../utils/request . js & quot；）用的时候↓

得到

//获取广告图片call . get request（{ URL:&；#39;GetAd & amp#39;，成功:（RES）= & gt；{//箭头函数没有指针问题this . setdata（{ URL item:RES . data }）}）post。

call . post request（{ URL:& amp；#39;addorder & amp#39;，数据:{ 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 . totime }，success:（RES）= & gt；{ console . log（RES）wx . navigate to（{ URL:& amp；#39;../selectPay/selectPay？订单编号= & amp#39;+RES . data . order _ sn+& amp；#39;& amp费用= & amp#39;+RES . data . real _ pay+& quot；& amporder _ id = & quot+res.data.order _ id，}）}）4。如何点击搜索按钮搜索并修改搜索输入中的按钮样式？

通常情况下，我们会在搜索框中添加一个搜索按钮并点击进行搜索，但小程序不会操作dom，因此无法直接获取输入中的值，因此我们必须通过另一种方法进行搜索。

（1）通过输入组件中的bindconfirm属性（confirm -type =“search”可以将软键盘的完成按钮更改为“search”）。

& lt输入class = & amp#39;搜索输入& amp#39;type = & amp#39;文本&amp。#39;确认-类型= & amp#39;搜索与广告。#39;bindconfirm = & amp#39;toSearch & amp#39;& gt& lt/input & gt；//要搜索的js部分（e）{ console . log（e . detail . value）//e . detail . value是输入框中输入的值}（2）提交表单点击按钮完成提交（输入需要添加name属性）。

搜索按钮

使用按钮而不是表单提交表单（form -type =“submit“）。注意不能使用视图，必须使用按钮。

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

//wxml part《form bind submit = & quot；表单提交& quotbindreset = & quot表单重置& quot& gt& lt输入class = & amp#39;搜索输入& amp#39;type = & amp#39;文本&amp。#39;确认-类型= & amp#39;搜索与广告。#39;name = & quot搜索& quotbindconfirm = & amp#39;toSearch & amp#39;& gt& ltbutton class = & amp#39;search _ btn & amp#39;form -type = & amp；#39;提交& amp#39;& gt搜索

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

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

本文由主机参考刊发，转载请注明：总结一些小程序开发技巧（“小程序开发”） https://zhujicankao.com/115029.html