小程序有哪些基礎(chǔ)知識(shí)？
一個(gè)完整的微信小程序是由一個(gè)App實(shí)例和多個(gè)Page實(shí)例構(gòu)成，其中App實(shí)例表示該小程序應(yīng)用，多個(gè)Page表示該小程序的多個(gè)頁(yè)面。
此外，微信小程序并沒(méi)有提供自定義組件的方式，這就導(dǎo)致微信小程序在開發(fā)較復(fù)雜應(yīng)用時(shí)，可能會(huì)比較艱難。
微信小程序本身很簡(jiǎn)單，和一個(gè)模板語(yǔ)言的難度幾乎相當(dāng)，翻翻官方教程就可以開始動(dòng)手搞。
我也建議大家先動(dòng)起來(lái)，然后再細(xì)致啃啃官方文檔。由于微信官方文檔仍在不斷大幅更新中，所以務(wù)必查看最新官方文檔。
微信小程序的基礎(chǔ)知識(shí)主要分為以下幾個(gè)部分：
兩種配置文件 && 兩個(gè)核心函數(shù)
WXML模板語(yǔ)法，頁(yè)面渲染
頁(yè)面間的跳轉(zhuǎn)
交互事件
官方組件和官方API
后文會(huì)就每個(gè)部分簡(jiǎn)單介紹介紹...
兩種配置文件 && 兩個(gè)核心函數(shù)
app.json 應(yīng)用的全局配置文件
app.json是針對(duì)微信小程序的全局配置，主要包含以下幾個(gè)配置：
pages：頁(yè)面路徑的數(shù)組，表示小程序要加載的所有頁(yè)面，其中數(shù)組第一項(xiàng)代表小程序的初始頁(yè)面。
window：微信原生功能，定制化不強(qiáng)。可設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題以及窗口背景色。
tabBar：微信原生功能，定制化不強(qiáng)。適用于常規(guī)的Tab應(yīng)用，Tab欄可置于頂部或底部；tabBar是一個(gè)數(shù)組，僅支持2-5個(gè)tab。
networkTimeout：配置小程序網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。
debug：調(diào)試模式開關(guān)，開發(fā)模式下建議開啟，正式發(fā)布別忘了關(guān)閉。
app.json配置的主要區(qū)域
page.json 頁(yè)面的全局配置文件
除了上面提到的全局配置，每個(gè)頁(yè)面還可以單獨(dú)配置page.json，page.json會(huì)覆蓋app.json中的配置，并只對(duì)當(dāng)前頁(yè)面生效。
page.json只能對(duì)window配置，有兩個(gè)比較有用的配置項(xiàng)分別是：
enablePullDownRefresh：是否開啟下拉刷新
disableScroll：只能在page.json配置，禁止頁(yè)面上下滾動(dòng)，猜測(cè)可以實(shí)現(xiàn)完美滑屏滑動(dòng)（未驗(yàn)證）
App() 小程序注冊(cè)入口，全局唯一
App()用來(lái)注冊(cè)一個(gè)小程序，全局只有一個(gè)，全局的數(shù)據(jù)也可以放到這里面來(lái)操作。
//?注冊(cè)微信小程序，全局只有一個(gè)
let?appConfig?=?{
????//?小程序生命周期的各個(gè)階段
????onLaunch:?function(){},
????onShow:?function(){},
????onHide:?function(){},
????onError:?function(){},
????//?自定義函數(shù)或者屬性
????...
};
App(appConfig);
//?在別的地方可以獲取這個(gè)全局唯一的小程序?qū)嵗?const?app?=?getApp();小程序并沒(méi)有提供銷毀的方式，所以只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間、或者系統(tǒng)資源占用過(guò)高的時(shí)候，才會(huì)被真正的銷毀。
Page() 頁(yè)面注冊(cè)入口
Page()用來(lái)注冊(cè)一個(gè)頁(yè)面，維護(hù)該頁(yè)面的生命周期以及數(shù)據(jù)。
//?注冊(cè)微信小程序，全局只有一個(gè)
let?pageConfig?=?{
????data:?{},
????//?頁(yè)面生命周期的各個(gè)階段
????onLoad:?function(){},
????onShow:?function(){},
????onReady:?function(){},
????onHide:?function(){},
????onUnload:?function(){},
????onPullDownRefresh:?function(){},
????onReachBottom:?function(){},
????onShareAppMessage:?function(){},
????//?自定義函數(shù)或者屬性
????...
};
Page(pageConfig);
//?獲取頁(yè)面堆棧，表示歷史訪問(wèn)過(guò)的頁(yè)面，最后一個(gè)元素為當(dāng)前頁(yè)面
const?page?=?getCurrentPages();關(guān)于各個(gè)生命周期的細(xì)節(jié)以及流程，參考下圖，可以細(xì)細(xì)品味：
app.json 和 page.json 維護(hù)了應(yīng)用和頁(yè)面的配置屬性。App() 和 Page() 維護(hù)了應(yīng)用和頁(yè)面的各個(gè)生命周期以及數(shù)據(jù)。
那么，APP 和 Page 如何將數(shù)據(jù)傳遞到頁(yè)面呢？頁(yè)面又是如何渲染呢？
WXML模板語(yǔ)法，頁(yè)面渲染
小程序雖然是hybrid模式，但并不使用HTML渲染，而是全部通過(guò)自定義標(biāo)簽來(lái)渲染頁(yè)面。這樣做的好處我不清楚，但問(wèn)題卻不少：不能跨瀏覽器、富文本解析困難，iframe視頻不支持，沒(méi)辦法外鏈跳轉(zhuǎn)。
和所有的模板語(yǔ)言一樣，WXML支持?jǐn)?shù)據(jù)綁定、條件渲染、循環(huán)、模塊化等功能。
數(shù)據(jù)綁定
在 WXML 中可以使用{{}}將 Page 的變量或者表達(dá)式包裹起來(lái)，實(shí)現(xiàn)數(shù)據(jù)綁定，舉個(gè)例子：
//?將message的值渲染到view中?{{?message?}}?//?將id的值渲染到view的id屬性中?//?根據(jù)isSelected的值，輸出不同的class?HelloWorld?//?結(jié)合template，可以傳入更復(fù)雜的數(shù)據(jù)條件渲染
條件渲染，適合根據(jù)數(shù)據(jù)輸出不同狀態(tài)的 WXML，舉個(gè)例子：
?1??2??3
循環(huán)渲染
循環(huán)渲染，適合遍歷數(shù)據(jù)輸出多段 WXML，舉個(gè)例子：
//?wx:for?表示需要遍歷的數(shù)據(jù)
//?wx:key?使用唯一的字段來(lái)標(biāo)識(shí)，有利于提升性能
//?wx:for-index?表示數(shù)組的下標(biāo)
//?wx:for-item?表示數(shù)組的元素??{{idx}}:?{{item.message}}wx:key 有利于提升重新渲染時(shí)的效率，建議添加
模塊化
WXML的模塊化，可以讓我們復(fù)用一些wxml片段，還挺重要的，舉個(gè)例子：
//?引入wxml模塊????//?調(diào)用wxml模塊，同時(shí)可傳入數(shù)據(jù)
數(shù)據(jù)和頁(yè)面的狀態(tài)是一一對(duì)應(yīng)的，微信小程序中，設(shè)計(jì)一份好的數(shù)據(jù)結(jié)構(gòu)，對(duì)于Page和頁(yè)面的代碼都有很大的幫助。
微信小程序并不支持a標(biāo)簽，那么多個(gè)頁(yè)面之間如何跳轉(zhuǎn)呢？
頁(yè)面間的跳轉(zhuǎn)
小程序以棧的形式維護(hù)了歷史訪問(wèn)的所有頁(yè)面，并提供了多種頁(yè)面間的跳轉(zhuǎn)方式；結(jié)合前文提到的App()和Page()的各個(gè)生命周期，不同的跳轉(zhuǎn)方式和不同的生命周期關(guān)聯(lián)，如下圖：
舉個(gè)例子，Tab 切換對(duì)應(yīng)的生命周期（以 A、B 頁(yè)面為 Tabbar 頁(yè)面，C 是從 A 頁(yè)面打開的頁(yè)面，D 頁(yè)面是從 C 頁(yè)面打開的頁(yè)面為例）
好了，APP和Page負(fù)責(zé)維護(hù)小程序的生命周期和數(shù)據(jù)，模板負(fù)責(zé)接受數(shù)據(jù)完成頁(yè)面渲染，頁(yè)面間的跳轉(zhuǎn)負(fù)責(zé)將多個(gè)頁(yè)面貫穿起來(lái)，那么，如何發(fā)生交互呢？接下來(lái)我們簡(jiǎn)單說(shuō)一下事件。
交互事件
事件綁定
//?bindtap?和?catchtap的區(qū)別在于
//?bindtap?不會(huì)阻止事件冒泡
//?catchtap會(huì)冒泡事件冒泡?Click?me!??Click?me!?//?綁定的函數(shù)tapName只是一個(gè)函數(shù)名稱，默認(rèn)接受一個(gè)event對(duì)象作為參數(shù)
Page({
??tapName:?function(event)?{
????console.log(event)
??}
})接下來(lái)，另一個(gè)問(wèn)題是：tapName() 如何接受自定義參數(shù)呢？
事件傳參
傳遞自定義參數(shù)主要有兩種方式：
第一種：將參數(shù)綁定到wxml標(biāo)簽上，然后通過(guò)event.target.dataset獲取
第二種：直接使用Page.data或其他數(shù)據(jù)
到目前為止，一個(gè)完整的小程序框架已經(jīng)實(shí)現(xiàn)
? 小程序只有邏輯和視圖兩部分，而且不提供組件化解決方案
? 邏輯主要包含四個(gè)東西：兩個(gè)配置文件 && 兩個(gè)核心函數(shù)
? 視圖很簡(jiǎn)單，模板語(yǔ)法稍微有點(diǎn)不完善
? 邏輯層的數(shù)據(jù)綁定到視圖層是由小程序框架自動(dòng)支持，數(shù)據(jù)變化，視圖自動(dòng)變化
? 視圖層到邏輯層的，主要通過(guò)事件的方式來(lái)實(shí)現(xiàn)
? 視圖之間的跳轉(zhuǎn)，小程序也提供了它自己的方式，并不支持a標(biāo)簽
框架有了，小程序還提供了官方組件以便快速開發(fā)，提供了API以增強(qiáng)應(yīng)用能力。
這塊就不具體介紹了，也需要注意小程序的官方文檔還在大規(guī)模的更新中，務(wù)必查看最新版
官方組件：組件 · 小程序
官方API：API · 小程序
微信小程序的基礎(chǔ)知識(shí)就是以上的內(nèi)容，并不復(fù)雜，邊查邊寫都可以。
接下來(lái)會(huì)介紹更進(jìn)階一些的內(nèi)容，內(nèi)容主要結(jié)合好奇心日?qǐng)?bào)這個(gè)小程序項(xiàng)目，先看效果：
（無(wú)法上傳 GIF，點(diǎn)?鏈接?查看）
如何設(shè)計(jì)微信小程序？
構(gòu)建系統(tǒng) && 目錄結(jié)構(gòu)
構(gòu)建系統(tǒng)
由于微信小程序本身對(duì)工程化幾乎沒(méi)有任何的支持，所以動(dòng)手搭建一份：wxapp-redux-starter。
使用gulp進(jìn)行編譯構(gòu)建，主要功能包括：
? 集成了Redux，數(shù)據(jù)管理更方便
? 開發(fā)過(guò)程中，使用xml取代wxml，對(duì)開發(fā)工具更友好
? 開發(fā)過(guò)程中，使用less取代wxss，功能更強(qiáng)大
? 引入es-promise，以便可以創(chuàng)建并使用Promise
? 添加promisify工具函數(shù)，可以便捷的將官方Api轉(zhuǎn)換成Pormise模式
? 引入normalizr，可以將數(shù)據(jù)扁平化，更方便進(jìn)行數(shù)據(jù)管理
? 引入babel自動(dòng)進(jìn)行ES2015特性轉(zhuǎn)換
? 對(duì)wxml/wxss/js/img壓縮，相對(duì)開發(fā)者工具提供的壓縮，會(huì)減小一丟丟體積。
目錄結(jié)構(gòu)設(shè)計(jì)
按照pages、components、redux、vendors/libs、images幾個(gè)核心部分拆分，直接上目錄。
小程序工程目錄
? dist目錄：構(gòu)建輸出的文件存放到這個(gè)目錄。
? src目錄：開發(fā)模式的文件，包括app、頁(yè)面、組件、圖片等靜態(tài)資源、輔助函數(shù)庫(kù)、Redux數(shù)據(jù)管理器、第三方工具庫(kù)。
? gulpfile.js：不用多說(shuō)，gulp構(gòu)建任務(wù)的入口文件。
? package.json：不用多說(shuō)，管理者構(gòu)建任務(wù)的依賴。
? thirdPlugins：由于小程序并不支持直接使用npm，我們可以自主拉取構(gòu)建，然后拷貝到vendors里，有時(shí)候需要簡(jiǎn)單修改。
構(gòu)建系統(tǒng)會(huì)將src目錄下的代碼，編譯處理后輸出到dist目錄，小程序開發(fā)工具只需要引入dist目錄即可。
有了構(gòu)建工具，代碼開發(fā)起來(lái)更舒心，但很快就遇到另外一個(gè)糟心的問(wèn)題，那就是如何管理散布在各處的數(shù)據(jù)？
要知道，微信小程序并沒(méi)有提供組件化方案，所以把組件寫成無(wú)狀態(tài)組件特別適合，但是頁(yè)面管理太多數(shù)據(jù)很凌亂，有什么辦法可以將數(shù)據(jù)集中管理呢？
引入Redux進(jìn)行數(shù)據(jù)集中管理
關(guān)于Redux相關(guān)的內(nèi)容，之前有三篇博客詳細(xì)介紹，有興趣的建議先移步：
Redux整體介紹：Redux 入門教程，應(yīng)用的狀態(tài)管理器
對(duì)State進(jìn)行橫向和縱向拆分設(shè)計(jì)：State設(shè)計(jì)，Redux 開發(fā)第一步
Reducer的最佳實(shí)踐：Reducer 最佳實(shí)踐，Redux 開發(fā)最重要的部分
這兒就簡(jiǎn)單介紹一下，如何在微信小程序中引入Redux 以及 如何將微信小程序和Redux連接起來(lái)。
引入Redux
直接在 thirdPlugins目錄 運(yùn)行 yarn add redux / npm install redux，等redux安裝好了之后，將 dist目錄 的 redux.js/redux.min.js 拷貝到vendors目錄中。
需要進(jìn)行簡(jiǎn)單的修改才能使用，將壓縮版208行代碼 (i) 改成 (i || {})即可。
簡(jiǎn)單修改，Redux就可以正常使用
連接微信小程序和Redux
將Redux和微信小程序連接起來(lái)才會(huì)真的有用處。找了個(gè)現(xiàn)成的方案charleyw/wechat-weapp-redux，可以直接使用。
一個(gè)完整的Redux方案如下，包括：將Store注入到App中、將state的數(shù)據(jù)和reducer的方法映射到Page中。一旦state發(fā)生變化，Page.data也會(huì)更新，進(jìn)而觸發(fā)頁(yè)面的重新渲染。
//?APP的邏輯
import?{?createStore,?applyMiddleware,?combineReducers?}?from?'./vendors/redux.js';
import?thunk?from?'./vendors/redux-thunk.js';
import?{?Provider?}?from?'./vendors/weapp-redux.js';
//?import?reducers
import?{?rootReducer?}?from?'./redux/reducer.js';
//?從Storage讀取數(shù)據(jù)
let?entities?=?wx.getStorageSync('entities')?||?{};
const?store?=?createStore(
????rootReducer,?{
????????//?將讀取的數(shù)據(jù)注入到store中
????????entities:?entities
????},
????applyMiddleware(
????????thunk
????)
);
let?appConfig?=?{
????onLaunch:?function()?{},
????onHide:?function()?{
????????let?state?=?store.getState(),
????????????cacheEntities?=?{};
????????//?體積大于2M，直接清空，防止緩存占用過(guò)大體積
????????if?(sizeof(state.entities)??{
????return?{
????????id:?params.id,
????????postsHash:?state.entities.posts
????}
};
let?mapDispatchToPage?=?dispatch?=>?({
????fetchArticleDetail:?(id,?callback,?errorCallback)?=>?dispatch(fetchArticleDetail(id,?callback,?errorCallback)),
});
pageConfig?=?connect(mapStateToData,?mapDispatchToPage)(pageConfig)
Page(pageConfig);需要注意的是，為了保證第一時(shí)間能拿到數(shù)據(jù)，我們對(duì)wechat-weapp-redux/src/connect.js做了優(yōu)化調(diào)整，修改的地方如下
//?修改了以下兩個(gè)函數(shù)
//?可以對(duì)照原項(xiàng)目修改，也可以直接拿我的模板項(xiàng)目使用
function?handleChange(options)?{
????if?(!this.unsubscribe)?{
????????return
????}
????const?state?=?this.store.getState();
????//?將data也一并傳入
????const?mappedState?=?mapState(state,?options,?this.data);
????if?(!this.data?||?shallowEqual(this.data,?mappedState))?{
????????return;
????}
????this.setData(mappedState)
}
function?onLoad(options)?{
????this.store?=?app.store;
????if?(!this.store)?{
????????warning("Store對(duì)象不存在!")
????}
????if?(shouldSubscribe)?{
????????this.unsubscribe?=?this.store.subscribe(handleChange.bind(this,?options))
????????//?第一次處理的時(shí)候也傳入options
????????handleChange.apply(this,?[options])
????}
????if?(typeof?_onLoad?===?'function')?{
????????_onLoad.call(this,?options)
????}
}引入Redux的優(yōu)勢(shì)
引入Redux的好處在于可以集中管理數(shù)據(jù)，并且讓Page的代碼保持絕對(duì)簡(jiǎn)單，讓所有的組件都變成簡(jiǎn)單可復(fù)用的無(wú)狀態(tài)組件。
此外，Redux還讓離線緩存更方便，數(shù)據(jù)復(fù)用更簡(jiǎn)單。
引入Redux解決了數(shù)據(jù)散布各處的問(wèn)題，參考Redux的管理思路，我們構(gòu)思了一套簡(jiǎn)單組件化解決方案：假設(shè)我們把所有的組件都設(shè)計(jì)成無(wú)狀態(tài)組件，而組件的數(shù)據(jù)來(lái)源是Page.data，那么我們是否也可以將組件數(shù)據(jù)的管理抽離到一個(gè)單獨(dú)的文件中呢？接下來(lái)講講我們使用的簡(jiǎn)單的組件化解決方案。
簡(jiǎn)單的組件化解決方案
這份組件化解決方案的核心就在于把組件的關(guān)聯(lián)數(shù)據(jù)集中起來(lái)管理，只暴露出默認(rèn)數(shù)據(jù)和數(shù)據(jù)的操作函數(shù)。
比如好奇心日?qǐng)?bào)的詳情頁(yè)有個(gè)Toolbar，該Toolbar并不復(fù)雜，主要提供返回和點(diǎn)贊功能，其中點(diǎn)贊功能只對(duì)文章詳情有效，研究所詳情頁(yè)會(huì)將點(diǎn)贊功能隱藏。
Toolbar組件
//?components/toolbar/index.js?文件
//?僅提供默認(rèn)值，不需要和page中的數(shù)據(jù)保持同步
let?defaultData?=?{
????isPraised:?false,
????praiseCount:?0,
????showPraiseIcon:?false,
};
//?切換點(diǎn)贊狀態(tài)
function?togglePraise()?{
????//?本質(zhì)上是修改Page.data中的toolbarData
}
//?返回上一級(jí)
function?navigateToBack(wx)?{
????wx.navigateBack({?delta:?1?});
}
module.exports?=?{
????defaultData,
????togglePraise,
????navigateToBack
}
//?pages/articles/show.js?文件
import?Toolbar?from?'../../components/toolbar/index.js';
let?pageConfig?=?{
????data:?{
????????//?其他數(shù)據(jù)
????????id:?0,
????????//?Toolbar數(shù)據(jù)，單獨(dú)的一份數(shù)據(jù)，便于維護(hù)
????????toolbarData:?Toolbar.defaultData
????},
????//?點(diǎn)贊或者取消贊
????togglePraise:?function()?{
????????let?me?=?this;
????????Toolbar.togglePraise.call(me);
????}
}
//?這兒的組件化并不是真正的組件化
//?而是將組件相關(guān)的邏輯和函數(shù)抽離到單獨(dú)的文件中，保證Page代碼清晰。
//?同時(shí)也為這部分組件邏輯復(fù)用提供了可能。
//?本質(zhì)上來(lái)說(shuō)，抽離出的組件都是“操作Page.data的工具函數(shù)”，他們也是純函數(shù)，和“操作state的reducer”類似。這種Redux的組件化解決方案既簡(jiǎn)單又好用，保持一定的代碼規(guī)范即可。這樣設(shè)計(jì)當(dāng)然是為了復(fù)用，同時(shí)也讓Page的邏輯保持極度精簡(jiǎn)。
開發(fā)中遇到了哪些難點(diǎn) && 微信小程序有多少坑？
微信小程序目前的確算不上公測(cè)的版本，開發(fā)者工具不完善、真機(jī)表現(xiàn)和開發(fā)環(huán)境差異很大、部分組件性能較差、部分功能有缺陷，只有經(jīng)歷了這些大坑，才會(huì)真的知道你有多“愛(ài)”微信小程序。這兒總結(jié)了開發(fā)中的難點(diǎn)以及微信小程序中遇到的比較明顯的坑。
富文本解析
微信小程序并不支持HTML標(biāo)簽，所以對(duì)于富文本解析來(lái)說(shuō)，難度較大，而且有些功能還沒(méi)有辦法實(shí)現(xiàn)，比如：iframe視頻、連接跳轉(zhuǎn)等
這塊功能建議由后臺(tái)統(tǒng)一轉(zhuǎn)換，如果非得前端轉(zhuǎn)換，建議參考下面的思路。
非常感謝?wxParse?這款組件，替我省了不少時(shí)間。推薦大家使用，期間遇到一些問(wèn)題，也分享給大家。
? wxParse 默認(rèn)層級(jí)只支持10層html嵌套，如果想要支持更深的層級(jí)，在wxParse.xml復(fù)制幾份template即可。
? wxParse 提供了圖片加載成功的回調(diào)wxParseImgLoad，很好用。但如果富文本中的圖片已經(jīng)預(yù)設(shè)寬高比，那么可以不用依賴該回調(diào)，在html2jons.js中根據(jù)屏幕寬度直接計(jì)算出圖片高度，先占位，可以避免頁(yè)面頻繁抖動(dòng)的問(wèn)題。
? 如果你的富文本中有自定義模塊，對(duì)wxParse.xml中的template進(jìn)行改造即可。
自定義模塊樣式
數(shù)據(jù)扁平化
具體如何扁平化，請(qǐng)移步上一篇博客?State設(shè)計(jì)，Redux 開發(fā)第一步。
這兒只簡(jiǎn)單介紹下扁平化應(yīng)用場(chǎng)景：
好奇心日?qǐng)?bào)的研究所是三級(jí)表結(jié)構(gòu)：papers > questions > options，后臺(tái)返回的數(shù)據(jù)是三級(jí)嵌套數(shù)據(jù)，如果想要修改option.selected字段，需要三級(jí)嵌套循環(huán)！如果想要獲取所有選中的option，需要三級(jí)嵌套循環(huán)！
頁(yè)面展現(xiàn)速度優(yōu)化
數(shù)據(jù)復(fù)用，比如復(fù)用列表頁(yè)的數(shù)據(jù)，可以讓詳情頁(yè)的標(biāo)題等字段第一時(shí)間呈現(xiàn)出來(lái)。
離線緩存，同樣可以讓列表頁(yè)和詳情頁(yè)第一時(shí)間呈現(xiàn)出來(lái)，甚至有可能減少請(qǐng)求數(shù)量。
無(wú)論是數(shù)據(jù)復(fù)用還是離線緩存，配合數(shù)據(jù)扁平化，都非常好用。
小程序默認(rèn)設(shè)置代理，會(huì)和Shadowsocks等VPN沖突（最新版又壞了）
解決方法很簡(jiǎn)單，設(shè)置微信小程序不使用代理；或者臨時(shí)關(guān)閉VPN即可。
上一版開發(fā)者工具已經(jīng)解決該問(wèn)題，最新版又壞了。
最新版微信小程序移除了對(duì)Promise的支持。
開發(fā)者自行引入兼容庫(kù)即可，推薦es6-promise。使用的時(shí)候，直接引入Promise即可。
//?引入Promise
import?Promise?from?'../vendors/es6-promise.js';
//?用Promise封裝wx.request網(wǎng)絡(luò)請(qǐng)求
function?request(method?=?'GET')?{
????return?function(url,?data?=?{})?{
????????return?new?Promise(function(resolve,?reject)?{
????????????wx.request({
????????????????url,
????????????????data,
????????????????method,
????????????????header:?{
????????????????????'Content-Type':?'application/json'
????????????????},
????????????????success:?function(res)?{
????????????????????let?{?statusCode,?errMsg,?data?}?=?res;
????????????????????if?(statusCode?==?200?&&?data.meta?&&?data.meta.status?==?200)?{
????????????????????????resolve(data.response);
????????????????????}?else?{
????????????????????????reject('網(wǎng)路請(qǐng)求錯(cuò)誤，請(qǐng)稍后再試~');
????????????????????}
????????????????},
????????????????fail:?function(err)?{
????????????????????reject('網(wǎng)路請(qǐng)求不符合規(guī)范，請(qǐng)檢查域名是否符合要求~');
????????????????}
????????????});
????????})
????}
}
export?const?GET?=?request('GET');
export?const?POST?=?request('POST');
export?const?PUT?=?request('PUT');
export?const?DELETE?=?request('DELETE');
//?用Promise封裝小程序的其他API
export?const?promisify?=?(api)?=>?{
????return?(options,?...params)?=>?{
????????return?new?Promise((resolve,?reject)?=>?{
????????????api(Object.assign({},?options,?{?success:?resolve,?fail:?reject?}),?...params);
????????});
????}
}
//?使用
const?getLocation?=?promisify(wx.getLocation);不清楚微信為何會(huì)臨時(shí)移除Promise，統(tǒng)一內(nèi)置不也挺好？
小程序不能實(shí)現(xiàn)完美的fullpage效果，會(huì)出現(xiàn)上下拉扯的感覺(jué)（最新版預(yù)計(jì)已修復(fù)，待實(shí)際驗(yàn)證）。
小程序一旦滾動(dòng)頂部或者底部，繼續(xù)滑動(dòng)的時(shí)候，就會(huì)出現(xiàn)拉扯現(xiàn)象。而這個(gè)拉扯現(xiàn)象還無(wú)法禁止。
最新版可以對(duì)頁(yè)面配置disableScroll，預(yù)計(jì)可以修復(fù)這個(gè)問(wèn)題，待實(shí)際驗(yàn)證。
fullpage效果
swiper組件不支持輪播，性能差，文檔模糊（部分最新版已修復(fù)）
? swiper組件之前并不支持輪播，最新版已修復(fù)
? swiper組件之前是通過(guò)設(shè)置left屬性來(lái)實(shí)現(xiàn)動(dòng)畫，在小米5、華為V8等高端等安卓機(jī)上能夠感受到明顯的卡頓，當(dāng)然原因是X5內(nèi)核引起的。最新版已修復(fù)，換成了transform，性能有一定的提升。
swiper性能提升
? 文檔并未標(biāo)記可以垂直輪播，但其實(shí)是可以的。
//?簡(jiǎn)單設(shè)置vertical即可，但由于官方文檔并未備注，盡量不要使用?？梢宰约洪_發(fā)一個(gè)swiper組件。
? swiper組件的小圓點(diǎn)其實(shí)是可以定制化的，但是官方文檔并未說(shuō)明，而且開發(fā)者工具也看不出來(lái)，只有鼠標(biāo)hover到元素上的時(shí)候可以看到相關(guān)的class，簡(jiǎn)單猜測(cè)一下，最后分析出來(lái)它的實(shí)現(xiàn)方式。
swiper圓點(diǎn)的實(shí)現(xiàn)原理
//?圓點(diǎn)的父元素，用來(lái)控制圓點(diǎn)間的間距
.wx-swiper-dot?{
????width:?30rpx;
????//?圓點(diǎn)，可以通過(guò)font-size修改圓點(diǎn)的大小，color修改圓點(diǎn)的顏色
????&:before?{
????????width:?100%;
????????display:?inline-block;
????????font-size:?56rpx;
????????content:?'圓點(diǎn)編碼';
????}
????//?active狀態(tài)的圓點(diǎn)
????&.wx-swiper-dot-active?{
????????&:before?{
????????????color:?#ffc81f;
????????}
????}
}小程序WXSS的font-face的url不接受路徑作為參數(shù)
可以將字體文件轉(zhuǎn)換為base64，然后引用。
font-face接受base64，不接受url
同樣，如果想要使用iconfont，也可以使用類似的方案，將iconfont字體文件base64之后再引入。
小程序的margin表現(xiàn)有問(wèn)題（最新版已經(jīng)修復(fù)）
之前發(fā)生margin折疊的時(shí)候，會(huì)取小的那個(gè)值。會(huì)導(dǎo)致底部留白等設(shè)置失效。
canvas問(wèn)題
canvas并沒(méi)有深入研究，目前的發(fā)現(xiàn)的問(wèn)題主要是兩個(gè)，如下圖標(biāo)記：
? 層級(jí)問(wèn)題，canvas總是會(huì)蓋在其他元素上面。
? 支持度不好，在小米5、iPhone5s畫圖會(huì)出現(xiàn)畸形。
canvas繪制餅圖有Bug
最后通過(guò)CSS3的方式繪制餅圖
????????????
????????????????????????
????????????????????.com-pie?{
????position:?relative;
????z-index:?0;
????display:?inline-block;
????width:?100rpx;
????height:?100rpx;
????line-height:?100rpx;
????border-radius:?50%;
????color:?#000;
????background-color:?#ebebeb;
????background-image:?linear-gradient(to?right,?transparent?50%,?#cccccc?0);
????overflow:?hidden;
????.percent-1,
????.percent-2?{
????????position:?absolute;
????????top:?0;
????????width:?60%;
????????height:?100%;
????????left:?50%;
????????transform-origin:?center?left;
????}
????.percent-1?{
????????background-color:?inherit;
????????z-index:?-2;
????}
????.percent-2?{
????????height:?110%;
????????opacity:?0;
????????z-index:?-1;
????????background-color:?#cccccc;
????}
????&.selected?{
????????background-color:?#ffe9a5;
????????background-image:?linear-gradient(to?right,?transparent?50%,?#ffc81f?0);
????????.percent-2?{
????????????background-color:?#ffc81f;
????????}
????}
}微信小程序的rpx會(huì)出現(xiàn)精度問(wèn)題
設(shè)置margin-left/margin-right負(fù)值，可能導(dǎo)致頁(yè)面能夠左右晃動(dòng)。猜測(cè) 是rpx導(dǎo)致的精度問(wèn)題。
rpx本質(zhì)上會(huì)轉(zhuǎn)換為px，在不同寬度的設(shè)備上，實(shí)際的rpx值會(huì)轉(zhuǎn)換為帶小數(shù)的px值，四舍五入可能出現(xiàn)問(wèn)題，之前使用rem布局的時(shí)候在QQ瀏覽器遇到過(guò)類似的問(wèn)題。
rpx精度問(wèn)題
wx.request表現(xiàn)不合理，并且攜帶特殊字符會(huì)報(bào)錯(cuò)
? 請(qǐng)求返回404錯(cuò)誤，也會(huì)觸發(fā)success回調(diào)。
不要想當(dāng)然的認(rèn)為會(huì)觸發(fā)fail回調(diào)，判斷一個(gè)請(qǐng)求成功或失敗，請(qǐng)使用wx.request返回的狀態(tài)來(lái)判斷。只有不符合規(guī)范的請(qǐng)求，才會(huì)觸發(fā)fail。
wx.request回調(diào)
? 請(qǐng)求的數(shù)據(jù)中，如果有特殊字符（比如\u2820），會(huì)報(bào)錯(cuò)。
只會(huì)在真機(jī)上出現(xiàn)，開發(fā)者工具沒(méi)毛病。估計(jì)會(huì)有更多的特殊字符會(huì)導(dǎo)致這個(gè)問(wèn)題。
特殊字符導(dǎo)致wx.request掛掉
開發(fā)者工具，切換頁(yè)面的時(shí)候，有時(shí)候wxml不會(huì)同步切換
希望微信什么時(shí)候能解決一下。
微信小程序給wxml模板賦值的時(shí)候，解構(gòu)放到前面可能會(huì)報(bào)錯(cuò)
最新版會(huì)遇到這個(gè)問(wèn)題，老版本雖然不會(huì)報(bào)錯(cuò)，但是在部分真機(jī)上會(huì)出現(xiàn)問(wèn)題。
原因未知，遇到這個(gè)問(wèn)題的朋友可以考慮繞過(guò)去。
解構(gòu)賦值導(dǎo)致報(bào)錯(cuò)
微信小程序的scroll-view暴露的bindscroll函數(shù)并不能實(shí)時(shí)監(jiān)聽
依賴實(shí)時(shí)獲取滾動(dòng)位置的功能不能實(shí)現(xiàn)。比如滾動(dòng)時(shí)toolbar的動(dòng)態(tài)隱藏和顯示。
最新版開發(fā)工具不能關(guān)掉自動(dòng)刷新
微信小程序的會(huì)默認(rèn)監(jiān)聽文件變化，然后自動(dòng)刷新。
但不足的是每次都是全量刷新，而不是模塊的熱替換，反而會(huì)影響開發(fā)速度，尤其對(duì)于喜歡頻繁Command + S的開發(fā)者，你會(huì)發(fā)現(xiàn)你的小程序在不斷的刷新。建議關(guān)閉。
建議關(guān)閉監(jiān)聽文件變化
但最新版開發(fā)者工具，不勾選也會(huì)自動(dòng)刷新。
微信小程序不支持requestAnimationFrame
微信小程序不支持requestAnimationFrame，所以部分性能優(yōu)化做不了。不支持的原因未知。
Page.onload函數(shù)可以接受參數(shù)
該參數(shù)是有URL決定的，也就是URL攜帶的參數(shù)。
官方文檔這塊寫的有點(diǎn)混淆，特意拿出來(lái)說(shuō)一下。舉個(gè)例子：url中傳遞的時(shí)候id=1，那么option.id=1，而不是什么option.query。
Page.onload參數(shù)文檔描述混淆
不要給Page.data傳入太多無(wú)用數(shù)據(jù)，會(huì)影響渲染效率，在iOS上表現(xiàn)特別明顯
盡量傳入精簡(jiǎn)的數(shù)據(jù)，保持Page.data和view間簡(jiǎn)單的綁定關(guān)系即可。
真機(jī)上有概率卡死，目前不確定是代碼問(wèn)題還是小程序的問(wèn)題。
有遇到類似問(wèn)題的朋友歡迎指出。
總結(jié)說(shuō)點(diǎn)啥？
本文主要圍繞微信小程序的基礎(chǔ)知識(shí)、如何設(shè)計(jì)微信小程序、開發(fā)過(guò)程中遇到的問(wèn)題三個(gè)方面介紹。
微信小程序的基礎(chǔ)知識(shí)主要包括：
? 兩種配置文件 && 兩個(gè)核心函數(shù)
? WXML模板語(yǔ)法，頁(yè)面渲染
? 頁(yè)面間的跳轉(zhuǎn)
? 交互事件
? 官方組件和官方API如何設(shè)計(jì)微信小程序的內(nèi)容主要包括：
? 構(gòu)建系統(tǒng) && 目錄結(jié)構(gòu)
? 引入Redux進(jìn)行數(shù)據(jù)集中管理
? 簡(jiǎn)單的組件化解決方案
最后還介紹開發(fā)過(guò)程中遇到的難點(diǎn) 以及 微信小程序的大小坑。
微信小程序本身并不復(fù)雜，開發(fā)過(guò)程卻比較艱辛，尤其是第一次在真機(jī)上運(yùn)行的時(shí)候，覺(jué)得這個(gè)世界惡意滿滿。
微信小程序開發(fā)有問(wèn)題也可以咨詢北京網(wǎng)站建設(shè)公司北京傳誠(chéng)信。
