序言 原本題目寫的時候實戰經驗，但是覺著算不上什么經驗，就改成學習筆記了?

注冊小程序賬號

開發和發布流程

小范圍討論公公抽離之類

不寫公共樣式因為不知道別人會不會用你的

目錄結構

小程序包含一個描述整體程序的 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 用在<block/>標簽上，以渲染一個包含多節點的結構塊。

關于 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

數據傳遞

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

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

url傳值

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

本地儲存（后面有單獨一節）

全局的app對象

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

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

本地儲存（后面有單獨一節）

全局的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緩存，前端設置圖片的時候需要在圖片路徑后添加參數，否則更換了圖片在移動設備上比較難清緩存

發現一個小bug,不知道是不是小程序自己的問題：圖片路徑后加參數和不加參數，在mode="widthFix"模式下如<image style='width:40rpx;' mode="widthFix" src=""></image>時，高度計算的結果是不一樣的。

待完善...

當網絡條件差或卡頓的情況下，用戶多次點擊，出現多次跳轉頁面等情況，可以通過JS中的函數節流和函數防抖解決。

總結

以上是生活随笔為你收集整理的小程序开发实战学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。