開發(fā)小程序的技巧有哪些

小編給大家分享一下開發(fā)小程序的技巧有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10余年的芙蓉網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整芙蓉建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“芙蓉網(wǎng)站設(shè)計(jì)”,“芙蓉網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1、全局變量的使用

每個(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í)候往往需要大量的請求，而請求的域名也都是相同的，我們可以把域名儲(chǔ)存到全局變量中，這樣會(huì)方便后面請求域名的修改。（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)行搜索及按鈕樣式修改

正常我們會(huì)在搜索框中加入一個(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屬性)

搜索按鈕

開發(fā)小程序的技巧有哪些

利用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屬性
}

以上是“開發(fā)小程序的技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：開發(fā)小程序的技巧有哪些
路徑分享：http://muchs.cn/article36/ipiopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(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)

h5響應(yīng)式網(wǎng)站建設(shè)