微信小程式開發過程問題總彙
之前在開發一個控車小程式，把過程中稍微需要搜尋的問題做了記錄。
1.
關鍵詞：本地資源圖片無法通過WXSS獲取
描述：做小程式開發的時候，如果你需要使用圖片作為背景，也就是想使用background-img這個屬性，但在小程式中這個屬性是無法使用本地資源的。它要求你必須使用網路圖片，也就是url是http...開頭的。
解決：有兩種方式可以解決。
1）將你的圖片上傳到伺服器，獲取該圖片的網路地址。
2）使用<image>元件，然後將該元件的樣式設定為
.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } // 前提是你得先設定 page { width: 100%; height: 100%; }
2.
關鍵詞：微信小程式頁面禁止拖動
描述：在ios真機上測試的時候發現頁面是可以拖動的，這很影響使用者體驗，所以必須禁止這種行為。
解決：在你需要禁止拖動的頁面的json檔案配置
{ "disableScroll": true }
3.
關鍵詞：小程式 switch 大小
描述：小程式官方提供的<switch>元件是一個非常好用的元件，但它不能自如地改變它的大小，可能你會想通過css來改變它，但結果可能不盡如人意。
因為這是官方提供的一個標準組件，不建議改大小，但可以通過下面這種方式來實現
switch { transform:scale(0.8); }
4.
關鍵詞：小程式 導航欄 閃爍
描述：真機測試的時候，如果我們有使用自己的背景顏色而不是純白色，會發現在切換頁面會出現白色的閃爍，這也是很影響使用者體驗的。
解決：根據你設定的navigationBarBackgroundColor顏色，backgroundColor也要設定成相同的顏色，如
{ "navigationBarBackgroundColor": "#0a113b","backgroundColor": "#0a113b" }
如果全域性都需要這種效果，可以在app.json中設定
"window": { "navigationBarBackgroundColor": "#0a113b", "navigationBarTextStyle": "white", "backgroundColor": "#0a113b" }
5.
關鍵詞：登入
描述：小程式是有自己的登入態的，而我們做的軟體也有自己的登入態，類似於token。所以我們在做登入這一塊的時候，還需要再做對登入態的檢查，以隨時退出返回登入介面。
因為小程式的登入之前大改過一次，登入的邏輯也發生了變化，所以我們先假設場景，才知道去查閱哪些相關的文件。
場景：登入介面點選一個按鈕，彈出授權視窗，點選授權視窗的允許，登入成功進入首頁。
通過查閱文件得知，現在彈出授權視窗只能通過<button>元件的open-type屬性，open-type擁有獲取微信的開放能力，通過它我們能獲得使用者的資訊。
將 open-type 設定為 getUserInfo ，同時搭配 <button> 的 bindgetuserinfo 屬性，這樣當我們點選的時候就會彈出獲取使用者資訊的授權視窗，點選授權視窗的按鈕觸發 login 事件：
<buttonopen-type="getUserInfo" bindgetuserinfo="login">微信使用者快速登入</button>
在 login 事件內呼叫wx.login獲取 code 再通過 request 傳送請求到後端，後端返回 token：
login: function(e) { // 判斷是否授權 var errMsg = e.detail.errMsg; if (errMsg == 'getUserInfo:fail auth deny') { // 點選拒絕 wx.showToast({ title: '授權以取消，請重新授權', icon: 'none', duration: 2000 }) } else { // 點選允許 app.globalData.userInfo = e.detail.userInfo; // 將拿到的使用者資訊儲存起來 wx.showLoading({ title: '登入中' }) // 呼叫wx.login介面 wx.login({ success: function(res) { var code = res.code; // 自己家的登入 wx.request({ url: 你後端的登入介面, data: { code: wx_code ... }, header: { 'content-type': 'application/json' ... }, method: 'POST', success: function(e) { if (e.data.status == 200) { wx.hideLoading(); app.globalData.token = e.data.data.token; // 儲存返回的token wx.redirectTo({ url: '../home/home', }) } else { wx.showToast({ title: '登入失敗，請重新登入', icon: 'none' }) } } }) } }) } }
你可以在頁面展現的時候檢查登入態，登入態失效就會返回登入介面：
checkLogin: function () { var that = this; wx.checkSession({ success: function (res) { // 登入態未過期 if (that.globalData.token == undefined || that.globalData.token == '') { wx.reLaunch({ url: '../login/login', }) } }, fail: function (res) { // 登入態過期 wx.reLaunch({ url: '../login/login', }) } }) }
6.
關鍵詞：placeholder-style
解決：<input> 元件的 placeholder-style 屬性跟 style 屬性的使用方式一樣。
<input type="number" placeholder="請輸入驗證碼" placeholder-style="color:#999;"></input>
7.
關鍵詞：hidden
描述：如果一個元素的顯隱需要頻繁切換，請使用hidden。
解決：
8.
關鍵詞：navigateBack
描述：在當前頁面做了資料選擇，點選確定返回上一個頁面，如果將資料 setData 到上一個頁面？
解決：
var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; prevPage.setData({ brandInfo: JSON.stringify(e.target.dataset) }); wx.navigateBack({ delta: 1, })
9.
關鍵詞：currentTarget
描述：在包裹元素傳遞了資料，點選裡面的原數獲取資料時，拿的應該是 currentTarget 而不是 target 。
解決：
<view class="time" data-start_id="{{item.start_id}}"> <view class="time-time"></view> <view class="time-week"></view> <view class="time-duration"></view> </view>
10.
關鍵詞：動態改變導航欄標題
解決：
wx.setNavigationBarTitle({ title: '' })
11.
關鍵詞：小程式 checkbox樣式
描述：如果自定義小程式的 checkbox 樣式？
解決：小程式有許多暗知識，這裡要用到它的隱藏類。
checkbox .wx-checkbox-input{ } checkbox .wx-checkbox-input.wx-checkbox-input-checked { }
12.
關鍵詞：更新
描述：
熱啟動說的是小程式從後臺切到前臺。
冷啟動說的是小程式從不存在到存在。
冷啟動時會下載新版本，下次冷啟動才會應用新版本。
小程式進入後臺，5分鐘後會被銷燬，記憶體不足也會被銷燬。