微信小程序開發(fā)技巧匯總
1.全局變量的使用
每個(gè)小程序都需要在 app.js 中調(diào)用 App 方法注冊(cè)小程序示例,綁定生命周期回調(diào)函數(shù)、錯(cuò)誤監(jiān)聽和頁(yè)面不存在監(jiān)聽函數(shù)等。
詳細(xì)的參數(shù)含義和使用請(qǐng)參考 App 參考文檔 。
整個(gè)小程序只有一個(gè) App 實(shí)例,是全部頁(yè)面共享的。開發(fā)者可以通過(guò) getApp 方法獲取到全局唯一的 App 示例,獲取App上的數(shù)據(jù)或調(diào)用開發(fā)者注冊(cè)在 App 上的函數(shù)。
我們?cè)谧鲂〕绦虻臅r(shí)候往往需要大量的請(qǐng)求,而請(qǐng)求的域名也都是相同的,我們可以把域名儲(chǔ)存到全局變量中,這樣會(huì)方便后面請(qǐng)求域名的修改。(user_id、unionid、user_info之類經(jīng)常用到的都可以放在全局變量中)
//app.js
App({
globalData: {
user_id: null,
unionid:null,
url:"https://xxx.com/index.php/Home/Mobile/", //請(qǐng)求的域名
user_info:null
}
})
當(dāng)在頁(yè)面中使用時(shí)記得要引用下app.js,小程序已經(jīng)提供了方法
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp() //獲取app
//let url = app.globalData.url; //使用方法,可先定義或者直接使用app.globalData.url
wx.request({
url: app.globalData.url + 'checkfirst', //就可以直接在這里調(diào)用
method:'POST',
header:{"Content-Type":"application/x-www-form/"}
data:{},
success:(res)=>{}
2.箭頭函數(shù)的使用
當(dāng)我們調(diào)用接口請(qǐng)求時(shí)要通過(guò)請(qǐng)求返回的數(shù)據(jù)改變頁(yè)面數(shù)據(jù)經(jīng)常要用到臨時(shí)指針來(lái)保存this指針。
但如果使用ES6的箭頭函數(shù)就可以避免
使用臨時(shí)指針
onLoad: function (options) {
let that = this //保存臨時(shí)指針
wx.request({
url: url + 'GetCouponlist',
method: 'POST',
header: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: { },
success(res) {
that.setData({ //使用臨時(shí)指針
coupon_length:res.data.data.length
})
}
})
使用ES6箭頭函數(shù) ( ) => {}
success:(res) => {
this.setData({ //此時(shí)this仍然指向onLoad
coupon_length:res.data.data.length
})
}
3.HTTP請(qǐng)求方法的封裝
在小程序中http請(qǐng)求是很頻繁的,但每次都打出wx.request是很煩的,而且代碼也是冗余的,所以我們要把他封裝起來(lái)
首先要在utils文件夾中新建一個(gè)js,我命名為request.js,在里面封裝出post和get的請(qǐng)求,記得最后要聲明出來(lái)
//封裝請(qǐng)求
const app = getApp()
let host = app.globalData.url
/**
* POST 請(qǐng)求
* model:{
* url:接口
* postData:參數(shù) {}
* doSuccess:成功的回調(diào)
* doFail:失敗回調(diào)
* }
*/
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 請(qǐng)求
* model:{
* url:接口
* getData:參數(shù) {}
* doSuccess:成功的回調(diào)
* doFail:失敗回調(diào)
* }
*/
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用來(lái)導(dǎo)出代碼
* js中通過(guò) let call = require("../util/request.js") 加載
*/
module.exports = {
postRequest: postRequest,
getRequest: getRequest
}
這一步非常重要記得添加!
module.exports = {
postRequest: postRequest,
getRequest: getRequest
}
使用時(shí)就在相應(yīng)的頁(yè)面頂部調(diào)用,Page外部噢
let call = require("../../utils/request.js")
使用的時(shí)候↓
get
//獲取廣告圖
call.getRequest({
url:'GetAd',
success:(res)=>{ //箭頭函數(shù)沒(méi)有指針問(wèn)題
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中,如何點(diǎn)擊搜索按鈕進(jìn)行搜索及按鈕樣式修改
正常我們會(huì)在搜索框中加入一個(gè)搜索按鈕,點(diǎn)擊進(jìn)行搜索,但是小程序不是操作dom的,所以是無(wú)法直接獲取到input中的值,所以要通過(guò)另外的方法進(jìn)行搜索。
(1)通過(guò)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表單的提交,來(lái)完成點(diǎn)擊按鈕的提交(input需要添加name屬性)
搜索按鈕

利用button代替form的表單提交(form-type="submit"),注意用view不行,必須用button
需要自己修改button的默認(rèn)樣式(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屬性
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼
這篇文章介紹了,JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07
使用getBoundingClientRect方法實(shí)現(xiàn)簡(jiǎn)潔的sticky組件的方法
本文介紹這種組件的實(shí)現(xiàn)思路,并提供一個(gè)同時(shí)支持將sticky元素固定在頂部或底部的具體實(shí)現(xiàn),由于這種組件在網(wǎng)站中非常常見,所以有必要掌握它的實(shí)現(xiàn)方式,以便在有需要的時(shí)候基于它的思路寫出功能更多的組件出來(lái)2016-03-03
canvas簡(jiǎn)單快速的實(shí)現(xiàn)知乎登錄頁(yè)背景效果
本篇文章主要介紹了canvas簡(jiǎn)單快速實(shí)現(xiàn)知乎登錄頁(yè)背景效果的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
js實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
Javascript數(shù)組的排序 sort()方法和reverse()方法
JavaScript提供了sort()方法和reverse()方法,使得我們可以簡(jiǎn)單的對(duì)數(shù)組進(jìn)行排序操作和逆序操作2012-06-06
深入探究JavaScript的類型判斷(從基礎(chǔ)到精通)
JavaScript 語(yǔ)言具有多種數(shù)據(jù)類型,它們可以大致分為兩大類:基本數(shù)據(jù)類型(Primitive Data Types)和引用數(shù)據(jù)類型(Reference Data Types),本文將帶大家一起從基礎(chǔ)到精通深入探究JavaScript的類型判斷,需要的朋友可以參考下2024-05-05

