序言 原本題目寫的時(shí)候?qū)崙?zhàn)經(jīng)驗(yàn)，但是覺著算不上什么經(jīng)驗(yàn)，就改成學(xué)習(xí)筆記了?

注冊小程序賬號

開發(fā)和發(fā)布流程

小范圍討論公公抽離之類

不寫公共樣式因?yàn)椴恢绖e人會不會用你的

目錄結(jié)構(gòu)

小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁面的 page。

具體參見官方文檔

生命周期

onLoad(Object query)
頁面加載時(shí)觸發(fā)。一個(gè)頁面只會調(diào)用一次，可以在 onLoad 的參數(shù)中獲取打開當(dāng)前頁面路徑中的參數(shù)。
onShow()
頁面顯示/切入前臺時(shí)觸發(fā)。
onReady()
頁面初次渲染完成時(shí)觸發(fā)。一個(gè)頁面只會調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。

注意：對界面內(nèi)容進(jìn)行設(shè)置的 API 如wx.setNavigationBarTitle，請?jiān)趏nReady之后進(jìn)行。

onHide()
頁面隱藏/切入后臺時(shí)觸發(fā)。 如 navigateTo 或底部 tab切換到其他頁面，小程序切入后臺等。（??此處跟后面的定時(shí)器有關(guān)聯(lián)）
onUnload()
頁面卸載時(shí)觸發(fā)。如redirectTo或navigateBack到其他頁面時(shí)。（??此處跟后面的定時(shí)器有關(guān)聯(lián)）

??注意：上傳文件的時(shí)候，頁面也會先后進(jìn)入onHide，onShow生命周期

具體參見官方文檔

配置文件

app.json和pages文件夾里的json文件的一個(gè)區(qū)別

app.json

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

pages文件夾里的json文件只有一層，因?yàn)轫撁娴?json只能設(shè)置 window 相關(guān)的配置項(xiàng)，以決定本頁面的窗口表現(xiàn)，所以無需寫 window 這個(gè)鍵。

{"navigationBarTitleText": "訂單詳情" }

project.config.json文件是項(xiàng)目配置（工具配置）文件

通常大家在使用一個(gè)工具的時(shí)候，都會針對各自喜好做一些個(gè)性化配置，例如界面顏色、編譯配置等等，在小程序開發(fā)者工具上做的任何配置都會寫入到這個(gè)文件，當(dāng)你重新安裝工具或者換電腦工作時(shí)，你只要載入同一個(gè)項(xiàng)目的代碼包，開發(fā)者工具就自動會幫你恢復(fù)到當(dāng)時(shí)你開發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中會包括編輯器的顏色、代碼上傳時(shí)自動壓縮等等一系列選項(xiàng)。包括基礎(chǔ)庫版本，項(xiàng)目的appid，項(xiàng)目名字等。

另外，如果修改編譯模式，那么增減的編譯模式會反映在project.config.json文件的condition-miniprogram-list數(shù)組里。可能測試在測的時(shí)候或者協(xié)同開發(fā)的時(shí)候別人有修改，影響了這個(gè)文件最好不要提交。
具體參見官方文檔

快捷鍵

列舉幾個(gè)提升開發(fā)效率的常用快捷鍵**

• ? + N ctrl + N 新建文件
• ? + S ctrl + S 保存文件
• ? + ? + S shift + ctrl + S 保存所有文件
• ? + Z ctrl + Z 撤銷
• ? + ? + Z shift + ctrl + Z 重做
• ? + ? + F shift + alt + F 格式化代碼
• ? + F ctrl + F 文件內(nèi)搜索
• ? + ? + F shift + ctrl + F 項(xiàng)目內(nèi)搜索
• ? + B ctrl + B 編譯項(xiàng)目

更多快捷鍵移步官方文檔

wxss

與 CSS 相比，WXSS 擴(kuò)展的特性有：尺寸單位 樣式導(dǎo)入

尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
??開發(fā)微信小程序時(shí)設(shè)計(jì)師最好用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。這樣好計(jì)算，乘以2就可以了。

樣式導(dǎo)入

使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。

目前支持的選擇器

目前支持的選擇器有：.class，#id，element，element, element，::after，::before。
eg.箭頭之類的小圖標(biāo)可以用偽類寫。

其他

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

wxml

列表渲染

多層渲染
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名。

如不提供 wx:key，會報(bào)一個(gè) warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。

??但是仍然建議使用 wx:key 來指定列表中項(xiàng)目的唯一的標(biāo)識符。

代碼中的 " " 和 ' '

小程序中wxml中設(shè)置wxss變量等情況時(shí)，注意 " " 和 ' ' 之間的嵌套關(guān)系。

關(guān)于<block/>

小程序中的<block/>并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
因?yàn)?wx:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè)<block/> 標(biāo)簽將多個(gè)組件包裝起來，并在上邊使用 wx:if 控制屬性。
類似 block wx:if，也可以將 wx:for 用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。

關(guān)于 wx:if 和 hidden

因?yàn)?wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當(dāng) wx:if 的條件值切換時(shí)，框架有一個(gè)局部渲染的過程，因?yàn)樗鼤_保條件塊在切換時(shí)銷毀或重新渲染。

同時(shí) wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。

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

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

組件

icon

size 單位px

text

text中的內(nèi)容不確定的時(shí)候，注意添加樣式word-break: break-all;否則，內(nèi)容全是數(shù)字時(shí)會溢出text。

image

binderror：當(dāng)錯(cuò)誤發(fā)生時(shí)，發(fā)布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'}

坑：當(dāng)找不到圖片時(shí)才會執(zhí)行，如果后臺沒有返回這個(gè)字段，src中為空的時(shí)候不會執(zhí)行。

textarea

開發(fā)調(diào)試過程中會發(fā)現(xiàn)textarea 浮在最上面。關(guān)于這個(gè)問題：

該組件是原生組件，使用時(shí)請注意相關(guān)限制。

關(guān)于原生組件

由于原生組件脫離在 WebView 渲染流程外，因此在使用時(shí)有以下限制：
原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。
后插入的原生組件可以覆蓋之前的原生組件。
原生組件還無法在 scroll-view、swiper、picker-view、movable-view 中使用。
部分CSS樣式無法應(yīng)用于原生組件，例如：
無法對原生組件設(shè)置 CSS 動畫
無法定義原生組件為 position: fixed
不能在父級節(jié)點(diǎn)使用 overflow: hidden 來裁剪原生組件的顯示區(qū)域
原生組件的事件監(jiān)聽不能使用 bind:eventname 的寫法，只支持 bindeventname。原生組件也不支持 catch 和 capture 的事件綁定方式

在iOS下，原生組件暫時(shí)不支持觸摸相關(guān)事件。

坑：在開發(fā)過程中遇到的問題，如果一個(gè)輸入框中的文字過多，顯示不完全，在ios真機(jī)上是無法左右滑動文字查看的。在開發(fā)工具上可以，原因見下一條。

??注意 真機(jī)與開發(fā)工具的表現(xiàn)

在工具上，原生組件是用web組件模擬的，因此很多情況并不能很好的還原真機(jī)的表現(xiàn)，建議開發(fā)者在使用到原生組件時(shí)盡量在真機(jī)上進(jìn)行調(diào)試。

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

數(shù)據(jù)傳遞

小程序兩個(gè)頁面如何接傳值

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

url傳值

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

本地儲存（后面有單獨(dú)一節(jié)）

全局的app對象

• 在一個(gè)頁面中g(shù)etApp().mydata = 'lnp'，在另一個(gè)頁面中g(shù)etApp().mydata即可
• 在配置文件app.js中有一個(gè)叫做globalData的對象。在小程序的所有頁面中都可以隨時(shí)調(diào)用和寫入存放在GlobalData的數(shù)據(jù)。無論是調(diào)用還是寫入，第一步都是要讓頁面與App.js產(chǎn)生關(guān)聯(lián)。所以在頁面的對應(yīng)的JS中，第一句話就要寫上：var app = getApp();，

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

本地儲存（后面有單獨(dú)一節(jié)）

全局的app對象

<!--### 組件中傳值-->

跳轉(zhuǎn)

為了不讓用戶在使用小程序時(shí)造成困擾，請盡量避免多層級的交互方式。
??注意：目前頁面路徑最多只能十層。

導(dǎo)航api

wx.navigateTo(OBJECT)
保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面。（非 tabBar 的頁面的路徑 ；路徑后可以帶參數(shù)）

wx.redirectTo(OBJECT)
關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。（非 tabBar 的頁面的路徑 ；路徑后可以帶參數(shù)）

wx.reLaunch(OBJECT)
關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個(gè)頁面。（可以打開任意頁面，包括tabBar 頁面；路徑后可以帶參數(shù)；跳轉(zhuǎn)的頁面路徑是 tabBar 頁面則不能帶參數(shù)。跳轉(zhuǎn)到的頁面不能返回，因此最好用在返回至首頁的的時(shí)候）

wx.switchTab(OBJECT)
跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面（需要跳轉(zhuǎn)的 tabBar 頁面的路徑必須是 app.json 的 tabBar 字段定義的頁面，否則無效，路徑后不能帶參數(shù)）

wx.navigateBack(OBJECT)
關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當(dāng)前的頁面棧，決定需要返回幾層。

wx.navigateBack({delta: 2 })

??注意：調(diào)用 navigateTo 跳轉(zhuǎn)時(shí)，調(diào)用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會

詳見文檔

navigator組件

navigator組件的open-type屬性值規(guī)定頁面的跳轉(zhuǎn)方式，navigate，redirect，switchTab，reLaunch，navigateBack與api相對應(yīng)。
詳見文檔

坑：比如有的小程序底部的tabBar有一個(gè)‘我的’功能有未讀消息紅點(diǎn)的需求，所以無法使用小程序原本的tab。自定義的tabBar中 <navigator class="tab-item" url="/pages/home/index/index" open-type="redirect">需要添加open-type="redirect"，否則頁面會被加入堆棧，用戶切換tab多次會導(dǎo)致頁面無法跳轉(zhuǎn)。但是添加該屬性存在一個(gè)問題，在開發(fā)工具上會明顯看到頁面先跳轉(zhuǎn)到index頁面，再跳轉(zhuǎn)到目標(biāo)頁面，在真機(jī)上表現(xiàn)為閃一下，該問題目前未解決。

跳轉(zhuǎn)到h5

使用web-view組件，基礎(chǔ)庫 1.6.4 開始支持，低版本需做兼容處理。
??注意：

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

當(dāng)需要跳轉(zhuǎn)到的url過長時(shí)，無法通過url參數(shù)攜帶，可以通過本地存儲保存。

api相關(guān)

wx.nextTick(FUNCTION)

基礎(chǔ)庫 2.2.3 開始支持，低版本需做兼容處理。

用于延遲一部分操作到下一個(gè)時(shí)間片再執(zhí)行（類似于 setTimeout）。

因?yàn)樽远x組件中的 setData 和 triggerEvent 等接口本身是同步的操作，當(dāng)這幾個(gè)接口被連續(xù)調(diào)用時(shí)，都是在一個(gè)同步流程中執(zhí)行完的，因此若邏輯不當(dāng)可能會導(dǎo)致出錯(cuò)。

Component({doSth() {this.setData({ number: 1 }) // 直接在當(dāng)前同步流程中執(zhí)行wx.nextTick(() => {this.setData({ number: 3 }) // 在當(dāng)前同步流程結(jié)束后，下一個(gè)時(shí)間片執(zhí)行})this.setData({ number: 2 }) // 直接在當(dāng)前同步流程中執(zhí)行} }) //1 2 3

詳見文檔

本地存儲

每個(gè)微信小程序都可以有自己的本地緩存，可以通過 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以對本地緩存進(jìn)行設(shè)置、獲取和清理。同一個(gè)微信用戶，同一個(gè)小程序 storage 上限為 10MB。localStorage 以用戶維度隔離，同一臺設(shè)備上，A 用戶無法讀取到 B 用戶的數(shù)據(jù)。

注意： 如果用戶儲存空間不足，我們會清空最近最久未使用的小程序的本地緩存。我們不建議將關(guān)鍵信息全部存在 localStorage，以防儲存空間不足或用戶換設(shè)備的情況。
詳細(xì)請看接口文檔，寫的很詳細(xì)。

//設(shè)置 wx.setStorage({key: 'mykey',data: 'lnp'}) //獲取 wx.getStorageSync('mykey'),

定時(shí)器

清除定時(shí)器需要注意在頁面卸載和隱藏/進(jìn)入后臺時(shí)都要清除。

// redirectTo或navigateBack離開時(shí)觸發(fā) onUnload: function() {clearInterval(countDownTimer) }, // navigateTo 離開時(shí)觸發(fā) onHide: function() {clearInterval(countDownTimer) }

支付

付款的時(shí)候點(diǎn)擊叉，都是支付失敗，但是可以通過fail中返回的res.errMsg == 'requestPayment:fail cancel'與否來判斷是否是用戶主動取消支付。
原本說上線才能測試支付，但是后臺配置了之后也可以測試。
詳見文檔

音頻

移步文檔
微信小程序獲取音頻時(shí)長

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

備注：關(guān)于這個(gè)沒有在真機(jī)上測試，也沒有在項(xiàng)目中使用，因?yàn)榭赡苌婕傲髁肯牡膯栴}在真機(jī)上這個(gè)方法會被阻止掉，日后知道更多再更新此問題。

內(nèi)存泄露

跳轉(zhuǎn)頁面?zhèn)髦刀啻蝸砘攸c(diǎn)擊就會報(bào)錯(cuò)，但不影響頁面。官方回復(fù)為基礎(chǔ)庫的已知問題
eventemitter 的 warning，沒影響，也不會實(shí)際泄露。
移步開發(fā)者社區(qū)

注意

設(shè)置data數(shù)據(jù)

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對應(yīng)的 this.data 的值。注意：

（1）直接修改 this.data 無效，不會重新渲染page，還會造成數(shù)據(jù)不一致。

（2）單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。

this賦值

方法中給this賦值，const _this = this, 應(yīng)對變量提升等問題

表單提交

formId

前臺獲取 formId 送至后臺，由后臺實(shí)現(xiàn)模板消息的發(fā)送。（此處由于 formId 只能由用戶觸發(fā)表單提交操作產(chǎn)生，故前臺需要將每次產(chǎn)生的formId發(fā)送至后臺，由后臺保存并在適當(dāng)時(shí)候調(diào)用微信接口向用戶發(fā)送模板消息）

注意：因?yàn)槲覀兪窃陂_發(fā)者工具中測試，所以得到的formId值為the formId is a mock one。在真機(jī)中我們可以得到一個(gè)具體的值，利用該值結(jié)合其他參數(shù)就可以發(fā)送模板消息啦，所以測試真實(shí)場景務(wù)必在真機(jī)中測試。

坑：開始的做法是先e.detail.formId獲取formId，保存到form的隱藏input里，然后再提交，這樣做會導(dǎo)致第一次點(diǎn)擊提交的時(shí)候獲取不到formId的值。后來用這種方法直接傳值是可以的。

data: Object.assign(e.detail.value,{formId: e.detail.formId//formId 用于發(fā)送模板消息 }),

避免表單重復(fù)提交

有時(shí)候接口請求慢，需要注意禁止重復(fù)提交的問題。

兼容

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

在ios上new Date(expiredTimeNormalIos)中的參數(shù)如果直接用后臺返回的 “2017-11-11 11:11:11”時(shí)間格式，不支持，會直接返回null，需要轉(zhuǎn)化成可以兼容的格式，如下

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

input在華為mate8上顯示問題

與布局有關(guān)

toast

低版本，如果配置none，最后顯示還是勾

iphone x

<!--app.js--> globalData: {isIphoneX: false,//判斷是否是iphone x以便兼容 } onShow: function () {const _this = this//判斷設(shè)備類型wx.getSystemInfo({success: function (res) {//console.log(res.model)if (res.model.search('iPhone X') != -1) {//判斷方法不能寫res.model==iPhone X，因?yàn)檎鏅C(jī)上返回的是一個(gè)包含iPhone X字段的詳細(xì)設(shè)備類型_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;//關(guān)于68rpx是根據(jù)iphone x和其他設(shè)備寬高對比得出來的，親測有效width: 100%;background: #fff; } .fix-iphonex-pb{padding-bottom:68rpx!important;//修改了底部的bottom可能會影響其他布局，視情況添加其他樣式 }

其他

更改appId 需要在項(xiàng)目上改，單在配置文件中改無效，同樣別人更新的時(shí)候需要拉取代碼，然后新建項(xiàng)目。

圖片上傳服務(wù)器的域名需要后臺配置

報(bào)錯(cuò)：未綁定為第三方平臺的開發(fā)小程序。是因?yàn)榻獬壎?#xff0c;需要重新添加項(xiàng)目。

剛開始開發(fā)的時(shí)候發(fā)現(xiàn)在個(gè)別安卓機(jī)上不能預(yù)覽（比如錘子手機(jī)?）

發(fā)布的時(shí)候域名要是https

上線前把開發(fā)調(diào)試時(shí)候的無用編譯模式刪掉，或者保留有效的入口和參數(shù)名以便模擬調(diào)試

接口域名切換成線上地址

線上圖片如果有cdn緩存，前端設(shè)置圖片的時(shí)候需要在圖片路徑后添加參數(shù)，否則更換了圖片在移動設(shè)備上比較難清緩存

發(fā)現(xiàn)一個(gè)小bug,不知道是不是小程序自己的問題：圖片路徑后加參數(shù)和不加參數(shù)，在mode="widthFix"模式下如<image style='width:40rpx;' mode="widthFix" src=""></image>時(shí)，高度計(jì)算的結(jié)果是不一樣的。

待完善...

當(dāng)網(wǎng)絡(luò)條件差或卡頓的情況下，用戶多次點(diǎn)擊，出現(xiàn)多次跳轉(zhuǎn)頁面等情況，可以通過JS中的函數(shù)節(jié)流和函數(shù)防抖解決。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。