本文為大家分享了幾點微信小程式開發(fā)技巧，希望能幫助到廣大開發(fā)者。

1、全域變數(shù)的使用

每個小程式都需要在app.js 中呼叫App 方法註冊小程式範例，綁定生命週期回呼函數(shù)、錯誤監(jiān)聽和頁面不存在監(jiān)聽函數(shù)等。
詳細的參數(shù)意義和使用請參考 App 參考文件 。

整個小程式只有一個 App 實例，是全部的頁面共享。開發(fā)者可以透過 getApp 方法取得到全域唯一的 App 範例，取得App上的資料或呼叫開發(fā)者註冊在 App 上的函數(shù)。

我們在做小程式的時候往往需要大量的請求，而請求的網(wǎng)域也都是相同的，我們可以把網(wǎng)域儲存到全域變數(shù)中，這樣會方便後面請求網(wǎng)域的修改。 （user_id、unionid、user_info之類常用到的都可以放在全域變數(shù)中）

//app.js
App({
 globalData: {
  user_id: null,
  unionid:null,
  url:"https://xxx.com/index.php/Home/Mobile/",   //請求的域名
  user_info:null
 }
})

當在頁面中使用時記得要引用下app.js，小程式已經(jīng)提供了方法

//index.js
//獲取應(yīng)用實例
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ù)的使用

當我們呼叫介面請求時要透過請求傳回的資料改變頁面資料經(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用來導出代碼
 * js中通過 let call = require("../util/request.js") 加載
 */
module.exports = {
 postRequest: postRequest,
 getRequest: getRequest
}

這一步非常重要記得新增！

module.exports = {
postRequest: postRequest,
getRequest: getRequest
}

使用時就在對應(yīng)的頁面頂部呼叫,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中，如何點擊搜尋按鈕進行搜尋及按鈕樣式修改

正常我們會在搜尋框中加入一個搜尋按鈕，點擊進行搜索，但是小程序不是操作dom的，所以是無法直接取得到input中的值，所以要透過另外的方法進行搜尋。

（1）透過input元件中的bindconfirm屬性（confirm-type="search" 可將軟鍵盤的完成按鈕改為「搜尋」）

<input class=&#39;search_input&#39; type=&#39;text&#39; confirm-type=&#39;search&#39; bindconfirm=&#39;toSearch&#39; ></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的預(yù)設(shè)樣式（button的邊框要在button::after中修改）

//wxml部分
<form bindsubmit="formSubmit" bindreset="formReset">
 <input class=&#39;search_input&#39; type=&#39;text&#39; confirm-type=&#39;search&#39; name="search" bindconfirm=&#39;toSearch&#39; >
 <button class=&#39;search_btn&#39; form-type=&#39;submit&#39;>搜索</button></input>
</form>

//js部分
formSubmit(e){
 console.log(e.detail.value.search) //為輸入框的值，input記得添加name屬性
}

相關(guān)推薦：小程式開發(fā)教學

以上是總結(jié)幾點小程式開發(fā)技巧的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！