微信小程序開(kāi)發(fā)技巧匯總
1.全局變量的使用
每個(gè)小程序都需要在 app.js 中調(diào)用 App 方法注冊(cè)小程序示例，綁定生命周期回調(diào)函數(shù)、錯(cuò)誤監(jiān)聽(tīng)和頁(yè)面不存在監(jiān)聽(tīng)函數(shù)等。
詳細(xì)的參數(shù)含義和使用請(qǐng)參考 App 參考文檔 。
整個(gè)小程序只有一個(gè) App 實(shí)例，是全部頁(yè)面共享的。開(kāi)發(fā)者可以通過(guò) getApp 方法獲取到全局唯一的 App 示例，獲取App上的數(shù)據(jù)或調(diào)用開(kāi)發(fā)者注冊(cè)在 App 上的函數(shù)。
我們?cè)谧鲂〕绦虻臅r(shí)候往往需要大量的請(qǐng)求，而請(qǐng)求的域名也都是相同的，我們可以把域名儲(chǔ)存到全局變量中，這樣會(huì)方便后面請(qǐng)求域名的修改。（user_id、unionid、user_info之類(lèi)經(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" 可將軟鍵盤(pán)的完成按鈕改為“搜索”）
<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)文章
這篇文章主要介紹了ES10 特性的完整指南小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了使用javascript插入樣式的相關(guān)方法，用javascript插入<style>樣式以及<link>樣式，感興趣的小伙伴們可以參考一下2016-03-03
我們知道，動(dòng)畫(huà)其實(shí)是由一幀一幀的圖像構(gòu)成的。有Web動(dòng)畫(huà)那么就會(huì)存在該動(dòng)畫(huà)在播放運(yùn)行時(shí)的幀率。而幀率在不同設(shè)備不同情況下又是不一樣的。有的時(shí)候，一些復(fù)雜或者重要?jiǎng)赢?huà)，需要實(shí)時(shí)監(jiān)控它們的幀率，從而更好的優(yōu)化它們，本文就是介紹Web動(dòng)畫(huà)幀率（FPS）計(jì)算方法。2021-05-05
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)站中非常常見(jiàn)，所以有必要掌握它的實(shí)現(xiàn)方式，以便在有需要的時(shí)候基于它的思路寫(xiě)出功能更多的組件出來(lái)2016-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽元素選擇和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
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的類(lèi)型判斷(從基礎(chǔ)到精通)
JavaScript 語(yǔ)言具有多種數(shù)據(jù)類(lèi)型,它們可以大致分為兩大類(lèi)：基本數(shù)據(jù)類(lèi)型（Primitive Data Types）和引用數(shù)據(jù)類(lèi)型（Reference Data Types）,本文將帶大家一起從基礎(chǔ)到精通深入探究JavaScript的類(lèi)型判斷,需要的朋友可以參考下2024-05-05