1.全局變量的使用
創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為綠園企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,綠園網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
每個(gè)小程序都需要在 app.js 中調(diào)用 App 方法注冊小程序示例,綁定生命周期回調(diào)函數(shù)、錯(cuò)誤監(jiān)聽和頁面不存在監(jiān)聽函數(shù)等。
詳細(xì)的參數(shù)含義和使用請參考 App 參考文檔 。
整個(gè)小程序只有一個(gè) App 實(shí)例,是全部頁面共享的。開發(fā)者可以通過 getApp 方法獲取到全局唯一的 App 示例,獲取App上的數(shù)據(jù)或調(diào)用開發(fā)者注冊在 App 上的函數(shù)。
我們在做小程序的時(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)在頁面中使用時(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)用接口請求時(shí)要通過請求返回的數(shù)據(jù)改變頁面數(shù)據(jù)經(jīng)常要用到臨時(shí)指針來保存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請求方法的封裝
在小程序中http請求是很頻繁的,但每次都打出wx.request是很煩的,而且代碼也是冗余的,所以我們要把他封裝起來
首先要在utils文件夾中新建一個(gè)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 }
使用時(shí)就在相應(yīng)的頁面頂部調(diào)用,Page外部噢
let call = require("../../utils/request.js")
使用的時(shí)候↓
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)行搜索及按鈕樣式修改
正常我們會在搜索框中加入一個(gè)搜索按鈕,點(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í)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前標(biāo)題:微信小程序開發(fā)技巧匯總
標(biāo)題網(wǎng)址:http://jinyejixie.com/article14/pggige.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、App設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)