小程序開發實戰學習筆記

註冊小程序帳號

開發和發佈流程

小範圍討論公公抽離之類

不寫公共樣式由於不知作別人會不會用你的

目錄結構

小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。

具體參見官方文檔

生命週期

onLoad(Object query)
頁面加載時觸發。一個頁面只會調用一次，能夠在 onLoad 的參數中獲取打開當前頁面路徑中的參數。
onShow()
頁面顯示/切入前臺時觸發。
onReady() 頁面初次渲染完成時觸發。一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互。

注意：對界面內容進行設置的 API 如wx.setNavigationBarTitle，請在onReady以後進行。

onHide() 頁面隱藏/切入後臺時觸發。 如 navigateTo 或底部 tab切換到其餘頁面，小程序切入後臺等。（⚠️此處跟後面的定時器有關聯）
onUnload() 頁面卸載時觸發。如redirectTo或navigateBack到其餘頁面時。（⚠️此處跟後面的定時器有關聯）

⚠️注意：上傳文件的時候，頁面也會前後進入onHide，onShow生命週期

具體參見官方文檔

配置文件

app.json和pages文件夾裏的json文件的一個區別

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light"
  },
  "networkTimeout": {
    "request": 10000
  }
}
複製代碼

pages文件夾裏的json文件只有一層，由於頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，因此無需寫 window 這個鍵。

{
  "navigationBarTitleText": "訂單詳情"
}
複製代碼

project.config.json文件是項目配置（工具配置）文件

一般你們在使用一個工具的時候，都會針對各自喜愛作一些個性化配置，例如界面顏色、編譯配置等等，在小程序開發者工具上作的任何配置都會寫入到這個文件，當你從新安裝工具或者換電腦工做時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。包括基礎庫版本，項目的appid，項目名字等。

另外，若是修改編譯模式，那麼增減的編譯模式會反映在project.config.json文件的condition-miniprogram-list數組裏。可能測試在測的時候或者協同開發的時候別人有修改，影響了這個文件最好不要提交。

具體參見官方文檔

快捷鍵

列舉幾個提高開發效率的經常使用快捷鍵**

• ⌘ + N ctrl + N 新建文件
• ⌘ + S ctrl + S 保存文件
• ⇧ + ⌘ + S shift + ctrl + S 保存全部文件
• ⌘ + Z ctrl + Z 撤銷
• ⇧ + ⌘ + Z shift + ctrl + Z 重作
• ⇧ + ⌥ + F shift + alt + F 格式化代碼
• ⌘ + F ctrl + F 文件內搜索
• ⇧ + ⌘ + F shift + ctrl + F 項目內搜索
• ⌘ + B ctrl + B 編譯項目

更多快捷鍵移步官方文檔

wxss

與 CSS 相比，WXSS 擴展的特性有：尺寸單位 樣式導入

尺寸單位

rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
⚠️開發微信小程序時設計師最好用 iPhone6 做爲視覺稿的標準。這樣好計算，乘以2就能夠了。

樣式導入

使用@import語句能夠導入外聯樣式表，@import後跟須要導入的外聯樣式表的相對路徑，用;表示語句結束。

目前支持的選擇器

目前支持的選擇器有：.class，#id，element，element, element，::after，::before。
eg.箭頭之類的小圖標能夠用僞類寫。

其餘

沒有嵌套
background-image設置背景圖片:只支持線上圖片和base64圖片，不支持本地圖片

wxml

列表渲染

多層渲染
使用 wx:for-item 能夠指定數組當前元素的變量名，使用 wx:for-index 能夠指定數組當前下標的變量名。

如不提供 wx:key，會報一個 warning， 若是明確知道該列表是靜態，或者沒必要關注其順序，能夠選擇忽略。

⚠️可是仍然建議使用 wx:key 來指定列表中項目的惟一的標識符。

代碼中的 " " 和 ' '

小程序中wxml中設置wxss變量等狀況時，注意 " " 和 ' ' 之間的嵌套關係。

關於<block/>

小程序中的<block/>並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性。
由於 wx:if 是一個控制屬性，須要將它添加到一個標籤上。若是要一次性判斷多個組件標籤，可使用一個<block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。
相似 block wx:if，也能夠將 wx:for 用在標籤上，以渲染一個包含多節點的結構塊。

關於 wx:if 和 hidden

由於 wx:if 之中的模板也可能包含數據綁定，因此當 wx:if 的條件值切換時，框架有一個局部渲染的過程，由於它會確保條件塊在切換時銷燬或從新渲染。

同時 wx:if 也是惰性的，若是在初始渲染條件爲 false，框架什麼也不作，在條件第一次變成真的時候纔開始局部渲染。

相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。

通常來講，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。所以，若是須要頻繁切換的情景下，用 hidden 更好，若是在運行時條件不大可能改變則 wx:if 較好。

組件

icon

size 單位px

text

text中的內容不肯定的時候，注意添加樣式word-break: break-all;不然，內容全是數字時會溢出text。

image

binderror：當錯誤發生時，發佈到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'}

坑：當找不到圖片時纔會執行，若是後臺沒有返回這個字段，src中爲空的時候不會執行。

textarea

開發調試過程當中會發現textarea 浮在最上面。關於這個問題：

該組件是原生組件，使用時請注意相關限制。

關於原生組件

因爲原生組件脫離在 WebView 渲染流程外，所以在使用時有如下限制：
原生組件的層級是最高的，因此頁面中的其餘組件不管設置 z-index 爲多少，都沒法蓋在原生組件上。
後插入的原生組件能夠覆蓋以前的原生組件。
原生組件還沒法在 scroll-view、swiper、picker-view、movable-view 中使用。
部分CSS樣式沒法應用於原生組件，例如：
沒法對原生組件設置 CSS 動畫
沒法定義原生組件爲 position: fixed
不能在父級節點使用 overflow: hidden 來裁剪原生組件的顯示區域
原生組件的事件監聽不能使用 bind:eventname 的寫法，只支持 bindeventname。原生組件也不支持 catch 和 capture 的事件綁定方式

在iOS下，原生組件暫時不支持觸摸相關事件。

坑：在開發過程當中遇到的問題，若是一個輸入框中的文字過多，顯示不徹底，在ios真機上是沒法左右滑動文字查看的。在開發工具上能夠，緣由見下一條。

⚠️注意 真機與開發工具的表現

在工具上，原生組件是用web組件模擬的，所以不少狀況並不能很好的還原真機的表現，建議開發者在使用到原生組件時儘可能在真機上進行調試。

目前原生組件有：camera canvas input live-player live-pusher map textarea video

數據傳遞

小程序兩個頁面如何接傳值

正向傳值 上一頁面->下一頁面

1. url傳值

• 經過url傳遞參數到下一個頁面，下一個頁面在onload生命週期中經過option.來獲取參數值

2. 本地儲存（後面有單獨一節）
3. 全局的app對象

• 在一個頁面中getApp().mydata = 'lnp'，在另外一個頁面中getApp().mydata便可
• 在配置文件app.js中有一個叫作globalData的對象。在小程序的全部頁面中均可以隨時調用和寫入存放在GlobalData的數據。不管是調用仍是寫入，第一步都是要讓頁面與App.js產生關聯。因此在頁面的對應的JS中，第一句話就要寫上：var app = getApp();，

反向傳值 下一頁面->上一頁面

1. 本地儲存（後面有單獨一節）
2. 全局的app對象

跳轉

爲了避免讓用戶在使用小程序時形成困擾，請儘可能避免多層級的交互方式。
⚠️注意：目前頁面路徑最多隻能十層。

導航api

wx.navigateTo(OBJECT) 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack能夠返回到原頁面。（非 tabBar 的頁面的路徑 ；路徑後能夠帶參數）

wx.redirectTo(OBJECT) 關閉當前頁面，跳轉到應用內的某個頁面。（非 tabBar 的頁面的路徑 ；路徑後能夠帶參數）

wx.reLaunch(OBJECT) 關閉全部頁面，打開到應用內的某個頁面。（能夠打開任意頁面，包括tabBar 頁面；路徑後能夠帶參數；跳轉的頁面路徑是 tabBar 頁面則不能帶參數。跳轉到的頁面不能返回，所以最好用在返回至首頁的的時候）

wx.switchTab(OBJECT) 跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面（須要跳轉的 tabBar 頁面的路徑必須是 app.json 的 tabBar 字段定義的頁面，不然無效，路徑後不能帶參數）

wx.navigateBack(OBJECT) 關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages() 獲取當前的頁面棧，決定須要返回幾層。

wx.navigateBack({
  delta: 2
})
複製代碼

⚠️注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會

詳見文檔

navigator組件

navigator組件的open-type屬性值規定頁面的跳轉方式，navigate，redirect，switchTab，reLaunch，navigateBack與api相對應。
詳見文檔

坑：好比有的小程序底部的tabBar有一個‘個人’功能有未讀消息紅點的需求，因此沒法使用小程序本來的tab。自定義的tabBar中 <navigator class="tab-item" url="/pages/home/index/index" open-type="redirect">須要添加open-type="redirect"，不然頁面會被加入堆棧，用戶切換tab屢次會致使頁面沒法跳轉。可是添加該屬性存在一個問題，在開發工具上會明顯看到頁面先跳轉到index頁面，再跳轉到目標頁面，在真機上表現爲閃一下，該問題目前未解決。

跳轉到h5

使用web-view組件，基礎庫 1.6.4 開始支持，低版本需作兼容處理。
⚠️注意：

• 我的類型與海外類型的小程序暫不支持使用。
• 每一個頁面只能有一個web-view組件，<web-view/>會自動鋪滿整個頁面，並覆蓋其餘組件。

當須要跳轉到的url過長時，沒法經過url參數攜帶，能夠經過本地存儲保存。

api相關

wx.nextTick(FUNCTION)

基礎庫 2.2.3 開始支持，低版本需作兼容處理。

用於延遲一部分操做到下一個時間片再執行（相似於 setTimeout）。

由於自定義組件中的 setData 和 triggerEvent 等接口自己是同步的操做，當這幾個接口被連續調用時，都是在一個同步流程中執行完的，所以若邏輯不當可能會致使出錯。

Component({
  doSth() {
    this.setData({ number: 1 }) // 直接在當前同步流程中執行

    wx.nextTick(() => {
      this.setData({ number: 3 }) // 在當前同步流程結束後，下一個時間片執行
    })

    this.setData({ number: 2 }) // 直接在當前同步流程中執行
  }
})
//1 2 3
複製代碼

詳見文檔

本地存儲

每一個微信小程序均可以有本身的本地緩存，能夠經過 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）能夠對本地緩存進行設置、獲取和清理。同一個微信用戶，同一個小程序 storage 上限爲 10MB。localStorage 以用戶維度隔離，同一臺設備上，A 用戶沒法讀取到 B 用戶的數據。

注意： 若是用戶儲存空間不足，咱們會清空最近最久未使用的小程序的本地緩存。咱們不建議將關鍵信息所有存在 localStorage，以防儲存空間不足或用戶換設備的狀況。 詳細請看接口文檔，寫的很詳細。

//設置
wx.setStorage({
    key: 'mykey',
    data: 'lnp'
  })
//獲取      
wx.getStorageSync('mykey'),
複製代碼

定時器

清除定時器須要注意在頁面卸載和隱藏/進入後臺時都要清除。

// redirectTo或navigateBack離開時觸發
onUnload: function() {
    clearInterval(countDownTimer)
},
// navigateTo 離開時觸發
onHide: function() {
    clearInterval(countDownTimer)
}
複製代碼

支付

付款的時候點擊叉，都是支付失敗，可是能夠經過fail中返回的res.errMsg == 'requestPayment:fail cancel'與否來判斷是不是用戶主動取消支付。
本來說上線才能測試支付，可是後臺配置了以後也能夠測試。
詳見文檔

音頻

移步文檔
微信小程序獲取音頻時長

const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.src = 'http://kano.guahao-test.com/orT27672955?token=V1.0_Vi9tRHZQbE9mZXRzUVd5UDhaazBVQT09X1RJTUVfQUVTCOUSTOM&convert=1'
innerAudioContext.onCanplay(() => {
console.log("語音時長預獲取:" + innerAudioContext.duration)
})//這一段必須有 否則無法獲取時長 刪掉console.log也不行
setTimeout(() => {
console.log("語音時長獲取:" + innerAudioContext.duration)//2.795102
}, 1000)
複製代碼

備註：關於這個沒有在真機上測試，也沒有在項目中使用，由於可能涉及流量消耗的問題在真機上這個方法會被阻止掉，往後知道更多再更新此問題。

內存泄露

跳轉頁面傳值屢次來回點擊就會報錯，但不影響頁面。官方回覆爲基礎庫的已知問題 eventemitter 的 warning，沒影響，也不會實際泄露。 移步開發者社區

注意

設置data數據

setData 函數用於將數據從邏輯層發送到視圖層，同時改變對應的 this.data 的值。注意：

（1）直接修改 this.data 無效，不會從新渲染page，還會形成數據不一致。

（2）單次設置的數據不能超過1024kB，請儘可能避免一次設置過多的數據。

this賦值

方法中給this賦值，const _this = this, 應對變量提高等問題

表單提交

formId

前臺獲取 formId 送至後臺，由後臺實現模板消息的發送。（此處因爲 formId 只能由用戶觸發表單提交操做產生，故前臺須要將每次產生的formId發送至後臺，由後臺保存並在適當時候調用微信接口向用戶發送模板消息）

注意：由於咱們是在開發者工具中測試，因此獲得的formId值爲the formId is a mock one。在真機中咱們能夠獲得一個具體的值，利用該值結合其餘參數就能夠發送模板消息啦，因此測試真實場景務必在真機中測試。

坑：開始的作法是先e.detail.formId獲取formId，保存到form的隱藏input裏，而後再提交，這樣作會致使第一次點擊提交的時候獲取不到formId的值。後來用這種方法直接傳值是能夠的。

data: Object.assign(e.detail.value,{
        formId: e.detail.formId//formId 用於發送模板消息
}),
複製代碼

避免表單重複提交

有時候接口請求慢，須要注意禁止重複提交的問題。

兼容

ios上new Date()時間格式處理

在ios上new Date(expiredTimeNormalIos)中的參數若是直接用後臺返回的 「2017-11-11 11:11:11」時間格式，不支持，會直接返回null，須要轉化成能夠兼容的格式，以下

let expiredTimeNormalIos = expiredTimeNormal.replace(/\-/g, '/')
 //時間格式兼容ios 2014-09-25T13:24:00
複製代碼

input在華爲mate8上顯示問題

與佈局有關

toast

低版本，若是配置none，最後顯示仍是勾

iphone x

<!--app.js-->
globalData: {
    isIphoneX: false,//判斷是不是iphone x以便兼容
}
onShow: function () {
    const _this = this
    //判斷設備類型
    wx.getSystemInfo({
      success: function (res) {
        //console.log(res.model)
        if (res.model.search('iPhone X') != -1) {//判斷方法不能寫res.model==iPhone X，由於真機上返回的是一個包含iPhone X字段的詳細設備類型
          _this.globalData.isIphoneX = true
        }
      }
    })
},
<!--app.wxss-->
/* 適配iphone x 吸底按鈕 */
.fix-iphonex-button {
  bottom:68rpx!important;
}
.fix-iphonex-button::after {
    content: ' ';
    position: fixed;
    bottom: 0!important;
    height: 68rpx!important;//關於68rpx是根據iphone x和其餘設備寬高對比得出來的，親測有效
    width: 100%;
    background: #fff;
}
.fix-iphonex-pb{
  padding-bottom:68rpx!important;//修改了底部的bottom可能會影響其餘佈局，視狀況添加其餘樣式
}
複製代碼

其餘

更改appId 須要在項目上改，單在配置文件中改無效，一樣別人更新的時候須要拉取代碼，而後新建項目。

圖片上傳服務器的域名須要後臺配置

報錯：未綁定爲第三方平臺的開發小程序。是由於解除綁定，須要從新添加項目。

剛開始開發的時候發如今個別安卓機上不能預覽（好比錘子手機🔨）

發佈的時候域名要是https

上線前把開發調試時候的無用編譯模式刪掉，或者保留有效的入口和參數名以便模擬調試

接口域名切換成線上地址

線上圖片若是有cdn緩存，前端設置圖片的時候須要在圖片路徑後添加參數，不然更換了圖片在移動設備上比較難清緩存

待完善...

當網絡條件差或卡頓的狀況下，用戶屢次點擊，出現屢次跳轉頁面等狀況，能夠經過JS中的函數節流和函數防抖解決。