1. 程式人生 > >微信小程式個人開發心得

微信小程式個人開發心得

接觸了2個多月的小程式開發,踩了不少坑,寫個小總結(本人第一次寫部落格,有解釋不清楚的請多包涵)。
1、說一下onLoad,onReady,onShow,onHide,onUnload怎麼巧妙運用:
     onLoad和onReady只會在第一次一進入這個頁面會執行,onShow官方給的意思是   當小程式啟動或者從後臺進入前臺顯示(用我的理解就是要麼就是第一次進來這個頁面,要麼就是從子頁面返回父頁面時呼叫),onHide官方給的意思是   當小程式從前臺進入後臺(我的理解就是從父頁進入子頁的時候呼叫),onUnload官方意思叫 監聽頁面解除安裝(我的理解就是離開當前頁時呼叫的)。
有小夥伴看完上面一大堆這就有疑問了,為啥我要理解這些,有什麼用?彆著急,需求和例子馬上到!
需求:有時我們的需求是從子頁傳資料返回改變父頁的資料時(如果只能是點選安卓或者ios的返回鍵)
解決方案:可以利用onUnload將資料傳回父頁,舉個例子,我在index頁面有個getValue變數,現在進入子頁getPhone頁面,當你想在getPhone頁面獲得的電話號碼傳給index頁面的話,在onUnload函式裡面呼叫以下程式碼就可以實現了:
     
var pages = getCurrentPages();//得到當前已有的頁面棧
      var currentPage = pages[pages.length - 1];//當前頁面的資訊
      var prevPage = pages[pages.length - 2];//上一頁面的資訊
      prevPage.setData({ getValue:"我是由子頁傳過去的啊"})


需求:如圖[img=http://img.bbs.csdn.net/upload/201710/21/1508577003_213006.png][/img]父頁點選更多日期會進入到日期選擇頁,需要選中某個日期返回父頁,判斷子頁傳回來的值是今天還是明天或是其他
解決方案:在onShow函式進行判斷選中日期是今天還是明天
2、頁面跳轉 wx.navigateTo只能侷限5層,超過5層再使用wx.navigateTo將不生效,可以用wx.redirectTo,或者將不需要的頁面先呼叫wx.redirectTo,就需要點選返回保留在的頁面就用wx.navigateTo。
3、改變數組裡面某個變數的值(dataList為request請求後賦值的陣列):
this.data.dataList[i].eleInfo.serverPrice = 85;//這樣之後不能馬上生效,要進行再次setData
this.setData({ dataList: this.data.dataList });

4、給陣列增加一個新變數
this.data.dataList[0].fold = true;
this.setData({ dataList: this.data.dataList });

5、修改頁面的標題
{
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#01827D",
        "navigationBarTitleText": "漫長前端路",
        "navigationBarTextStyle": "white"
    }
6、根據需要改變頁面的標題
 wx.setNavigationBarTitle({title: "小程式"})

7、input框placeholder的顏色修改 placeholder-style

8、input框獲取焦點彈出鍵盤時將鍵盤右下角改為搜尋,在input 裡面加 confirm-type="search" 屬性,並且繫結搜尋的點選事件bindconfirm="searchProduct"

9、說一下wx.request的header問題,get請求時

 'content-type':'application/json'
post請求時
'content-type':'application/x-www-form-urlencoded'

10、呼叫地圖得到當前的詳細位置,首先去高德或者騰訊地圖api下得到微信小程式開發的sdk,拿到key,將sdk的js複製貼上到utils下面(看個人喜歡放哪個位置,反正最終引用到就行);

例子:

var amapFile = require('../../../utils/amap-wx.js');

在onLoad中寫下key

var shanAmapFun= new amapFile.AMapWX({ key: 'f387407e04361890eb00xxxxxxxxxxxxx'});
wx.getLocation({
type:'wgs84',
success:function (res){
var latitude= res.latitude
var longitude= res.longitude
that.setData({ lng: res.longitude, lat: res.latitude});
shanAmapFun.getRegeo({
location:'' + res.longitude+ ','+ res.latitude+ '',
success:function (data){
//成功回撥
console.log(data[0].regeocodeData.formatted_address)
},
fail:function (info){
//失敗回撥
console.log(info)
}
})
}
})
11、根據當前經緯度得到距離某個經緯度的距離,如果距離不超10KM的話選騰訊地圖,如果超的話建議調高德地圖(別問為什麼,因為騰訊現在版本距離只能算10km內的),程式碼就不上了吧,高德官網例子有,用的是getDrivingRoute這條函式

先到這吧,要準備下班啦!