共计 3335 个字符，预计需要花费 9 分钟才能阅读完成。
1. 全局变量的使用
每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
详细的参数含义和使用请参考 App 参考文档。
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取 App 上的数据或调用开发者注册在 App 上的函数。
我们在做小程序的时候往往需要大量的请求，而请求的域名也都是相同的，我们可以把域名储存到全局变量中，这样会方便后面请求域名的修改。（user_id、unionid、user_info 之类经常用到的都可以放在全局变量中）
//app.js
App({
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.url
wx.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” 可将软键盘的完成按钮改为“搜索”）
<input class='search_input'type='text'confirm-type='search'bindconfirm='toSearch' ></input>
//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 部分
<form bindsubmit="formSubmit" bindreset="formReset">
<input class='search_input' type='text' confirm-type='search' name="search" bindconfirm='toSearch' >
<button class='search_btn' form-type='submit'> 搜索 </button></input>
</form>//js 部分
formSubmit(e){console.log(e.detail.value.search) // 为输入框的值，input 记得添加 name 属性
}以上就是本文的全部内容，希望对大家的学习有所帮助
