小程序爬坑日記

最近因公司安排首次接觸了微信小程序的開發(fā)乔煞，本來仗著有Vue的基礎以為很簡單止吐，沒想到開發(fā)過程中還是遇到了很多坑蕉世，不過只是接觸了一個小程序的案例遍烦，好多官方api接口還沒有使用過，以后有了新坑再補上拨拓。

注意本文默認你已經(jīng)掌握了小程序的基本開發(fā)知識或者研讀過小程序的官方文檔

整體框架

配置

小程序的官方文檔肴颊，介紹了整體框架的設置，里面的配置都是在.json文件中實現(xiàn)的千元。大致配置官方文檔里都有詳細的說明苫昌，多說一句navigationBarTitleText如果你希望一個page復用颤绕，并且名字不一樣的時候幸海，最好在app.json里面把這項置為空字符串，然后再具體頁面通過wx.setNavigationBarTitle動態(tài)修改奥务，不然會有一個跳動的感覺物独。在使用enablePullDownRefresh的時候，建議把backgroundTextStyle的值寫為dark氯葬，是一個符合大眾口味的樣式挡篓。

路由

小程序的頁面維護在一個最大長度為5的堆棧中，創(chuàng)建新的頁面會執(zhí)行對應頁面的onLoad函數(shù)并且壓入到棧中，返回已存在的函數(shù)只會執(zhí)行onShow函數(shù)官研。這個規(guī)則可能會影響到我們想自定義路由跳轉(zhuǎn)的設計秽澳，所以在設計頁面跳轉(zhuǎn)時候，要考慮棧的前后戏羽。另外担神，關于路由跳轉(zhuǎn)，建議使用js代碼實現(xiàn)始花，這樣可以判斷是否跳轉(zhuǎn)以及跳轉(zhuǎn)到何處妄讯，如果固定連接可以使用navigate標簽

頁面間傳值

各個頁面間傳遞數(shù)據(jù)也是經(jīng)常出現(xiàn)的場景，不過小程序在這塊的支持也不是很好酷宵，可以通過如下代碼進行簡單的query傳值

wx.navigateTo({
    url: '/pages/index/index?key='+value,
})

但是如果傳遞對象就有些困難了亥贸，此處的解決方案有兩個，一是放到app.globalData中浇垦，二是放到storage中:wx.setStorageSync('key',JSON.stringify(objectValue))

運行機制

• 小程序沒有重啟的概念
• 當小程序進入后臺炕置，客戶端會維持一段時間的運行狀態(tài)，超過一定時間后（目前是5分鐘）會被微信主動銷毀
• 置頂?shù)男〕绦虿粫晃⑿胖鲃愉N毀
• 當收到系統(tǒng)內(nèi)存告警也會進行小程序的銷毀

運行機制在小程序的官方文檔中有介紹溜族，不過由于位置不顯眼讹俊，所以單獨在這貼一下，至于如何維護小程序的運行機制以及用戶從后臺回到小程序任意頁面后期望的反應煌抒，需要在實踐中嘗試了仍劈。

表現(xiàn)方面

px，pt和rpx

rpx是小程序獨有的單位長度寡壮，在我理解中是和rem一樣的東西贩疙，因為它們都會根據(jù)設備視口的實際大小調(diào)整真實的長度。那么前端拿到設計稿后是如何換算的呢况既。目前看來1pt=1rpx这溅，1px=2rpx是合適的方案。

組件的使用

一開始打開小程序的官方文檔棒仍，發(fā)現(xiàn)很多封裝好的組件很開心悲靴，感覺省了好多事，在實踐后才發(fā)現(xiàn)莫其，小程序很多組件都不能用癞尚，一用就出事，
所以在做小程序開發(fā)時候乱陡，盡量避免使用很多奇怪的組件(包括text)浇揩。不過在項目開發(fā)過程中，總是有些需求要迎坑而踩的憨颠。大概描述下本人實踐過程中的痛點胳徽。

text

針對text我只想說：能用view就別用text积锅。text可以類比html中的span標簽，但是很奇怪的一點是养盗，text中竟然還包著一個span標簽缚陷，雖然大部分樣式是可以繼承的，但是總有點別扭的感覺往核，讓你覺得不可以完全把控它蹬跃，所以能用view還是用view吧。

input

input和textarea都屬于有用戶輸入交互的組件铆铆，在vue.js中針對表單組件蝶缀，是有v-modal="value"雙向數(shù)據(jù)綁定機制的(雖然也是語法糖),在小程序中是需要通過data="{{value}}" bindinput="{{getValue}}"實現(xiàn)雙向數(shù)據(jù)綁定的，再加上小程序渲染頁面需要顯式調(diào)用setData方法薄货，所以導致了輸入表單組件的數(shù)據(jù)更新不及時翁都，在用戶使用時具體就體現(xiàn)在，用戶快速增加／刪除文字時會有回退的效果谅猾。

textarea

textarea還得單獨說一下柄慰，因為它實在是太坑了！和text一樣税娜，textarea里面也封裝了一個其他的區(qū)塊坐搔，并且你無法操作它，只能改變他的父級textarea敬矩，這種情況就導致了它很難和其他組件實現(xiàn)水平對齊概行；在還不算完，textarea還擁有最高的層級(z-index = ∞)弧岳，所以你即使加了蒙層的話凳忙，他還是會比你的蒙層高，這在手機端的體驗是很不好的禽炬。所以目前大的互聯(lián)網(wǎng)公司小程序textarea的解決方案是涧卵，把它放到一個單獨的頁面上去，避免上面提到的兩種情況的發(fā)生腹尖。

scroll-view柳恐，swiper

兩個都是可滾動的容器，其中swiper是類似輪播圖似的容器热幔，支持橫向和縱向滾動兩種模式乐设，具體可查看官方文檔，scroll-view則是一個滾動的容器断凶，一般的滾動效果可用直接用view實現(xiàn)伤提，如果真的需要用到scroll-view的話巫俺，必須要注意一點认烁，那就是一定要給scroll-view一個確定的高度／寬度，上面提到小程序的長度單位是rpx，而此處scroll-view需要的長度單位是px却嗡，這就很尷尬了舶沛。好在小程序api有個getSystemInfo接口，希望可以幫到你窗价。

button

其實button組件還是沒什么坑的如庭，注意下button有默認的disabled樣式就可以了，可以在app.wsxx全局樣式表中設置button[disabled]{...},修改button的默認樣式

API

小程序官方api大部分是wx.api(object)的格式撼港，其中入?yún)bject中一般包含3個回調(diào)函數(shù)坪它，分別是success，fail帝牡，complete

promise

雖然小程序自己支持了promise往毡，但是真機使用時發(fā)現(xiàn)，ios8版本是無效的靶溜，所以需要引入一個promise.min的支持庫开瞭，并且實例化對象，開發(fā)過程中發(fā)現(xiàn)require不起作用罩息，建議用import方式引入嗤详。

request

作為小程序最最重要的一個api，request使用起來沒有什么難度瓷炮〈猩看過官方文檔的例子后就可以上手使用了，需要注意的是娘香，小程序最多允許并發(fā)5個request請求冬筒，而且request在實際使用過程中，都會被封裝一層茅主，以便完成一些希望統(tǒng)一處理的情況舞痰。

Storage

和webStorage一樣，微信小程序的Storage是永久保存在本地的一個數(shù)據(jù)诀姚，并不會被會話結(jié)束所影響响牛。同時Storage有兩種使用方法，一種是異步的wx.setStorage({key,value,callBackFn}) wx.getStorage({key,callBackFn}),一種是同步的wx.setStorage(key,value) wx.getStorage(key)赫段。個人感覺同步方法使用的多一點呀打，畢竟數(shù)據(jù)得不到對于后續(xù)操作應該會有影響的。另外storage還有兩個不常用的操作：wx.removeStorage() wx.clearStorage(),可在官方文檔中找到代碼例子糯笙。

getLocation贬丛、chooseLocation、openLocation

獲取用戶的地理位置信息给涕，使用戶選擇地理位置信息也是經(jīng)常出現(xiàn)的場景豺憔。其中getLocation和ChooseLocation會申請用戶位置信息的授權额获，如果用戶拒絕后，以后每次調(diào)用這兩個接口都會自動執(zhí)行fail的callback恭应，所以需要在這個回調(diào)里寫引導用戶重新授權的邏輯抄邀。

fail() {
    wx.getSetting({
      success: (res1) => {
        console.log(res1)
        if (!res1.authSetting['scope.userLocation']) {
          wx.openSetting({
            success: (res2) => {
              wx.chooseLocation({
                success: function (res3) {
              
                }
              })
            }
          })
        }
      }
    })
  }

openLocation這個接口是提供一組經(jīng)緯度，然后調(diào)用地圖打開并顯示該地址昼榛，此處注意目前這個接口支持的經(jīng)緯度格式是gcj02不懂這個格式也沒關系境肾，只要看看官方文檔的例子就知道傳什么類型的值了，不過對于js這種弱類型語言胆屿，你的經(jīng)緯度很可能會轉(zhuǎn)換成string類型的奥喻，并且你在模擬器上看不出任何差別，不過在手機上非迹，openLocation接口如果接受了string類型的經(jīng)緯度可能會引起不工作的情況衫嵌，所以保險起見，要手動轉(zhuǎn)一下類型：

wx.openLocation({
    latitude: parseFloat(latitude),
    longitude: parseFloat(longitude),
    scale: 14
})

getSystemInfo

獲取系統(tǒng)信息可以獲取到手機的各個詳細信息彻秆，官方文檔有詳細說明此處不在贅述楔绞，只是提一個使用到的場景：通過這個接口獲取到視口高度從而進行計算。一般會在scroll-view中用到唇兑。

showToast酒朵、showModal、showLoading

這三個接口都是用戶交互反饋的手段扎附，toast是一個不需要用戶點擊的提示蔫耽；modal是一個需要用戶點擊的對話框，有確認和可選的取消按鈕留夜，其中按鈕的文字也可以修改匙铡；loading是一個不可穿透的圖標，告知用戶后臺邏輯正在計算碍粥，一般應用在request等待回文的過程中鳖眼，注意loding需要手動關閉，所以hideLoading放到complete中比較穩(wěn)妥嚼摩。

toast中的文字可能會有省略成...的情況钦讳，所以在設計提示文案時要考慮字數(shù)，原生支持兩種圖標枕面，如果需要自定義自己切圖就可以了愿卒。

wx.showToast({
    title: message,
    image: '/images/icon.png',
    mask: false,
    duration: 1500
})

login、getUserInfo

login和getUserInfo可以使小程序獲取到微信用戶的基本信息潮秘，對于分析用戶數(shù)據(jù)有很重要的作用琼开。其中getUserInfo是需要用戶授權的。

關于模版

前端組件化開發(fā)的思想越來越重要枕荞，模板正是小程序組件化開發(fā)的體現(xiàn)柜候，但是目前這個模板機制還不是很好搞动，比如我們可以在template里面定義結(jié)構和樣式，但是其中觸發(fā)的事件還是得寫到引用模板的js中改橘，解決方案是可以在js中引入公共的模塊實現(xiàn)。

結(jié)尾的話

小程序的開發(fā)過程可謂是痛苦并學習著玉控，作為被Vuejs慣壞了的前端飞主，寫小程序有很多不方便的地方，但是僅僅一個項目并不能用到小程序的所有特性高诺，還有很多接口沒有嘗試碌识。以后計劃打算使用socket進行通訊，嘗試一下用戶的圖片和錄音功能虱而，嘗試小程序的動畫接口筏餐，嘗試小程序的獲取元素信息接口以便開發(fā)適應各個屏幕的結(jié)構。努力努力再努力牡拇！

如有地方不明白可聯(lián)系我的郵箱：ljybill@aliyun.com