微信小程序開發(fā)技巧匯總
1.全局變量的使用
每個小程序都需要在 app.js 中調(diào)用 App 方法注冊小程序示例，綁定生命周期回調(diào)函數(shù)、錯誤監(jiān)聽和頁面不存在監(jiān)聽函數(shù)等。
詳細(xì)的參數(shù)含義和使用請參考 App 參考文檔 。
整個小程序只有一個 App 實(shí)例，是全部頁面共享的。開發(fā)者可以通過 getApp 方法獲取到全局唯一的 App 示例，獲取App上的數(shù)據(jù)或調(diào)用開發(fā)者注冊在 App 上的函數(shù)。
我們在做小程序的時候往往需要大量的請求，而請求的域名也都是相同的，我們可以把域名儲存到全局變量中，這樣會方便后面請求域名的修改。（user_id、unionid、user_info之類經(jīng)常用到的都可以放在全局變量中）
//app.js
App({
globalData: {
user_id: null,
unionid:null,
url:"https://xxx.com/index.php/Home/Mobile/", //請求的域名
user_info:null
}
})
當(dāng)在頁面中使用時記得要引用下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)用接口請求時要通過請求返回的數(shù)據(jù)改變頁面數(shù)據(jù)經(jīng)常要用到臨時指針來保存this指針。
但如果使用ES6的箭頭函數(shù)就可以避免
使用臨時指針
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箭頭函數(shù) ( ) => {}
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:參數(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 請求
* 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用來導(dǎo)出代碼
* js中通過 let call = require("../util/request.js") 加載
*/
module.exports = {
postRequest: postRequest,
getRequest: getRequest
}
這一步非常重要記得添加！
module.exports = {
postRequest: postRequest,
getRequest: getRequest
}
使用時就在相應(yīng)的頁面頂部調(diào)用,Page外部噢
let call = require("../../utils/request.js")
使用的時候↓
get
//獲取廣告圖
call.getRequest({
url:'GetAd',
success:(res)=>{ //箭頭函數(shù)沒有指針問題
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)行搜索及按鈕樣式修改
正常我們會在搜索框中加入一個搜索按鈕，點(diǎn)擊進(jìn)行搜索，但是小程序不是操作dom的，所以是無法直接獲取到input中的值，所以要通過另外的方法進(jìn)行搜索。
（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表單的提交，來完成點(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屬性
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)列表查詢功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
本文主要介紹了js實(shí)現(xiàn)下拉菜單效果的實(shí)例，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信還搗鼓出新的rpx單位？下面通過這篇文章來一起看看吧。2016-12-12
js實(shí)現(xiàn)點(diǎn)擊選項(xiàng)置頂動畫效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊選項(xiàng)置頂動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
wordpress之js庫集合研究介紹...2007-08-08
這篇文章主要介紹了JavaScript?管道運(yùn)算符,管道運(yùn)算符為我們的代碼添加了大量上下文，并簡化了操作，以便以后可以擴(kuò)展它們，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
上一篇文章，我們定義了矩陣，這篇文章我們來給矩陣添加一些常用方法比如：toString方法、clone方法等，需要了解的朋友可以詳細(xì)參考下2012-12-12
學(xué)習(xí)RxJS之JavaScript框架Cycle.js
這篇文章主要介紹了學(xué)習(xí)RxJS之JavaScript框架Cycle.js ,它是一個極簡的JavaScript框架（核心部分加上注釋125行），提供了一種函數(shù)式，響應(yīng)式的人機(jī)交互接口,需要的朋友可以參考下2019-06-06
怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化，想了解函數(shù)柯里化的同學(xué)，可以參考下2021-04-04
踩了很多次坑,終于在微信小程序中搞定了圖片上傳以及內(nèi)容安全審核,下面這篇文章主要給大家介紹了關(guān)于微信小程序圖片上傳以及內(nèi)容安全審核的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04