感謝作者齊修的授權，如需轉載，請與作者聯系。
作者：齊修，早先就職淘寶UED，目前在好奇心日報參與創業，除了基本的項目開發，還偏好于前端工程化、網站性能優化等方向。
責編：陳秋歌，關注微信開發等領域，尋求報道或者投稿請發郵件至chenqg#csdn.net。
歡迎加入“CSDN微信開發”群，與作者及更多專家、技術同行進行熱點、難點技術交流。請加群主微信「Rachel_qg」,申請入群，務必注明「姓名+公司+職位」。

最近集中開發了兩款微信小程序，分別是好奇心日歷（每天一條辭典+一個小投票）和好奇心日報（輕量版），下面是程序截圖：

本文將結合具體的實戰經驗，主要介紹微信小程序的基礎知識、開發中遇到的難點、項目的架構設計、最佳實踐以及踩過的坑。

值得再次說明的是：微信小程序的內容部分是Hybrid模式，并非原生，所以性能并不好，綁定的tap事件也有明顯的延遲。

每一個由邊框圍起來的部分，都是一個最小粒度的原生view

如上圖所示，每一個由邊框圍起來的部分，都是一個最小粒度的原生view，可以看出，整個微信小程序的內容部分，就是一個原生view。

小程序有哪些基礎知識？

一個完整的微信小程序是由一個App實例和多個Page實例構成，其中App實例表示該小程序應用，多個Page表示該小程序的多個頁面。

此外，微信小程序并沒有提供自定義組件的方式，這就導致微信小程序在開發較復雜應用時，可能會比較艱難。

微信小程序本身很簡單，和一個模板語言的難度幾乎相當，翻翻官方教程就可以開始動手搞。

我也建議大家先動起來，然后再細致啃啃官方文檔。由于微信官方文檔仍在不斷大幅更新中，所以務必查看最新官方文檔。

微信小程序的基礎知識主要分為以下幾個部分：

• 兩種配置文件 && 兩個核心函數;
• WXML模板語法，頁面渲染;
• 頁面間的跳轉;
• 交互事件;
• 官方組件和官方API;

后文會就每個部分簡單介紹介紹……

兩種配置文件 && 兩個核心函數

1.app.json 應用的全局配置文件

app.json是針對微信小程序的全局配置，主要包含以下幾個配置：

• pages：頁面路徑的數組，表示小程序要加載的所有頁面，其中數組第一項代表小程序的初始頁面。
• window：微信原生功能，定制化不強。可設置小程序的狀態欄、導航條、標題以及窗口背景色。
• tabBar：微信原生功能，定制化不強。適用于常規的Tab應用，Tab欄可置于頂部或底部；tabBar是一個數組，僅支持2-5個tab。
• networkTimeout：配置小程序網絡請求的超時時間。
• debug：調試模式開關，開發模式下建議開啟，正式發布別忘了關閉。

app.json配置的主要區域

2.page.json 頁面的全局配置文件

除了上面提到的全局配置，每個頁面還可以單獨配置page.json，page.json會覆蓋app.json中的配置，并只對當前頁面生效。

page.json只能對window配置，有兩個比較有用的配置項分別是：

• enablePullDownRefresh：是否開啟下拉刷新;
• disableScroll：只能在page.json配置，禁止頁面上下滾動，猜測可以實現完美滑屏滑動（未驗證）。

3.App() 小程序注冊入口，全局唯一

App()用來注冊一個小程序，全局只有一個，全局的數據也可以放到這里面來操作。

// 注冊微信小程序，全局只有一個 let appConfig = {// 小程序生命周期的各個階段onLaunch: function(){},onShow: function(){},onHide: function(){},onError: function(){},// 自定義函數或者屬性... }; App(appConfig);// 在別的地方可以獲取這個全局唯一的小程序實例 const app = getApp();

小程序并沒有提供銷毀的方式，所以只有當小程序進入后臺一定時間，或者系統資源占用過高的時候，才會被真正的銷毀。

4.Page() 頁面注冊入口

Page()用來注冊一個頁面，維護該頁面的生命周期以及數據。

// 注冊微信小程序，全局只有一個 let pageConfig = {data: {},// 頁面生命周期的各個階段onLoad: function(){},onShow: function(){},onReady: function(){},onHide: function(){},onUnload: function(){},onPullDownRefresh: function(){},onReachBottom: function(){},onShareAppMessage: function(){},// 自定義函數或者屬性... }; Page(pageConfig);// 獲取頁面堆棧，表示歷史訪問過的頁面，最后一個元素為當前頁面 const page = getCurrentPages();

關于各個生命周期的細節以及流程，參考下圖，可以細細品味：

app.json 和 page.json 維護了應用和頁面的配置屬性。App() 和 Page() 維護了應用和頁面的各個生命周期以及數據。

那么，APP 和 Page 如何將數據傳遞到頁面呢？頁面又是如何渲染呢？

WXML模板語法，頁面渲染

小程序雖然是Hybrid模式，但并不使用HTML渲染，而是全部通過自定義標簽來渲染頁面。這樣做的好處我不清楚，但問題卻不少：不能跨瀏覽器、富文本解析困難，iframe視頻不支持，沒辦法外鏈跳轉。

和所有的模板語言一樣，WXML支持數據綁定、條件渲染、循環、模塊化等功能。

1.數據綁定

在 WXML 中可以使用{{}}將 Page 的變量或者表達式包裹起來，實現數據綁定，舉個例子：

// 將message的值渲染到view中 <view> {{ message }} </view>// 將id的值渲染到view的id屬性中 <view id="item-{{id}}"> </view>// 根據isSelected的值，輸出不同的class <view class="{{isSelected ? 'selected' : ''}}"> HelloWorld </view>// 結合template，可以傳入更復雜的數據 <template is="objectCombine" data="{{...article, categoty, tag: '埃隆馬斯克'}}"></template>

2.條件渲染

條件渲染，適合根據數據輸出不同狀態的 WXML，舉個例子：

<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>

3.循環渲染

循環渲染，適合遍歷數據輸出多段 WXML，舉個例子：

// wx:for 表示需要遍歷的數據 // wx:key 使用唯一的字段來標識，有利于提升性能 // wx:for-index 表示數組的下標 // wx:for-item 表示數組的元素 <view wx:for="{{[{id:1, message: 'HelloWorld1'}, {id:2, message: 'HelloWorld2'}]}}" wx:key="id" wx:for-index="idx" wx:for-item="item">{{idx}}: {{item.message}} </view>

wx:key 有利于提升重新渲染時的效率，建議添加

4.模塊化

WXML的模塊化，可以讓我們復用一些WXML片段，還挺重要的，舉個例子：

// 引入wxml模塊 <import src="../../components/grid-article/index"></import><block wx:for="{{posts}}" wx:for-item="post" wx:key="id">// 調用wxml模塊，同時可傳入數據<template is="grid-article" data="{{post}}"></template> </block>

數據和頁面的狀態是一一對應的，微信小程序中，設計一份好的數據結構，對于Page和頁面的代碼都有很大的幫助。

微信小程序并不支持a標簽，那么多個頁面之間如何跳轉呢？

頁面間的跳轉

小程序以棧的形式維護了歷史訪問的所有頁面，并提供了多種頁面間的跳轉方式；結合前文提到的App()和Page()的各個生命周期，不同的跳轉方式和不同的生命周期關聯，如下圖：

舉個例子，Tab 切換對應的生命周期（以 A、B 頁面為 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面為例）。

好了，APP和Page負責維護小程序的生命周期和數據，模板負責接受數據完成頁面渲染，頁面間的跳轉負責將多個頁面貫穿起來，那么，如何發生交互呢？接下來我們簡單說一下事件。

交互事件

事件綁定

// bindtap 和 catchtap的區別在于 // bindtap 不會阻止事件冒泡 // catchtap會冒泡事件冒泡 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> <view id="tapTest" data-hi="WeChat" catchtap="tapName"> Click me! </view>// 綁定的函數tapName只是一個函數名稱，默認接受一個event對象作為參數 Page({tapName: function(event) {console.log(event)} })

接下來，另一個問題是：tapName() 如何接受自定義參數呢？

事件傳參

傳遞自定義參數主要有兩種方式：

第一種：將參數綁定到wxml標簽上，然后通過event.target.dataset獲取。

第二種：直接使用Page.data或其他數據。

到目前為止，一個完整的小程序框架已經實現：

• 小程序只有邏輯和視圖兩部分，而且不提供組件化解決方案；
• 邏輯主要包含四個東西：兩個配置文件 && 兩個核心函數；
• 視圖很簡單，模板語法稍微有點不完善；
• 邏輯層的數據綁定到視圖層是由小程序框架自動支持，數據變化，視圖自動變化；
• 視圖層到邏輯層的，主要通過事件的方式來實現；
• 視圖之間的跳轉，小程序也提供了它自己的方式，并不支持a標簽。

框架有了，小程序還提供了官方組件以便快速開發，提供了API以增強應用能力。

這塊就不具體介紹了，也需要注意小程序的官方文檔還在大規模的更新中，務必查看最新版。
官方組件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161222。
官方API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161222。

微信小程序的基礎知識就是以上的內容，并不復雜，邊查邊寫都可以。

接下來會介紹更進階一些的內容，內容主要結合好奇心日報這個小程序項目，先看效果：

好奇心日報實際效果圖

如何設計微信小程序？

構建系統 && 目錄結構

構建系統

由于微信小程序本身對工程化幾乎沒有任何的支持，所以動手搭建一份：wxapp-redux-starter。

使用gulp進行編譯構建，主要功能包括：

• 集成了Redux，數據管理更方便;
• 開發過程中，使用XML取代WXML，對開發工具更友好;
• 開發過程中，使用less取代WXSS，功能更強大;
• 引入es-promise，以便可以創建并使用Promise;
• 添加promisify工具函數，可以便捷的將官方Api轉換成Pormise模式;
• 引入normalizr，可以將數據扁平化，更方便進行數據管理;
• 引入babel自動進行ES2015特性轉換;
• 對WXML/WXSS/JS/img壓縮，相對開發者工具提供的壓縮，會減小一丟丟體積。

目錄結構設計

按照pages、components、redux、vendors/libs、images幾個核心部分拆分，直接上目錄。

小程序工程目錄

• dist目錄：構建輸出的文件存放到這個目錄。
• src目錄：開發模式的文件，包括app、頁面、組件、圖片等靜態資源、輔助函數庫、Redux數據管理器、第三方工具庫。
• gulpfile.js：不用多說，gulp構建任務的入口文件。
• package.json：不用多說，管理者構建任務的依賴。
• thirdPlugins：由于小程序并不支持直接使用npm，我們可以自主拉取構建，然后拷貝到vendors里，有時候需要簡單修改。

構建系統會將src目錄下的代碼，編譯處理后輸出到dist目錄，小程序開發工具只需要引入dist目錄即可。

有了構建工具，代碼開發起來更舒心，但很快就遇到另外一個糟心的問題，那就是如何管理散布在各處的數據？

要知道，微信小程序并沒有提供組件化方案，所以把組件寫成無狀態組件特別適合，但是頁面管理太多數據很凌亂，有什么辦法可以將數據集中管理呢？

引入Redux進行數據集中管理

關于Redux相關的內容，之前有三篇博客詳細介紹，有興趣的建議先移步：
Redux整體介紹：Redux 入門教程，應用的狀態管理器
對State進行橫向和縱向拆分設計：State設計，Redux 開發第一步
Reducer的最佳實踐：Reducer 最佳實踐，Redux 開發最重要的部分

這兒就簡單介紹一下，如何在微信小程序中引入Redux 以及 如何將微信小程序和Redux連接起來。

引入Redux

直接在 thirdPlugins目錄運行 yarn add redux / npm install redux，等redux安裝好了之后，將 dist目錄 的 redux.js/redux.min.js 拷貝到vendors目錄中。

需要進行簡單的修改才能使用，將壓縮版208行代碼 (i) 改成 (i || {})即可。

簡單修改，Redux就可以正常使用

連接微信小程序和Redux

將Redux和微信小程序連接起來才會真的有用處。找了個現成的方案charleyw/wechat-weapp-redux，可以直接使用。

一個完整的Redux方案如下，包括：將Store注入到App中、將state的數據和reducer的方法映射到Page中。一旦state發生變化，Page.data也會更新，進而觸發頁面的重新渲染。

// 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讀取數據 let entities = wx.getStorageSync('entities') || {};const store = createStore(rootReducer, {// 將讀取的數據注入到store中entities: entities},applyMiddleware(thunk) );let appConfig = {onLaunch: function() {},onHide: function() {let state = store.getState(),cacheEntities = {};// 體積大于2M，直接清空，防止緩存占用過大體積if (sizeof(state.entities) <= 2 * 1024 * 1024) {cacheEntities = state.entities;}// 退出時將entities緩存下來wx.setStorageSync('entities', cacheEntities);} };App(Provider(store)(appConfig));// Page的邏輯 import { connect } from '../../vendors/weapp-redux.js';import { fetchArticleDetail } from '../../redux/models/articles.js';let pageConfig = {data: {id: 0,postsHash: {}},onLoad: function(params) {var me = this,{ id, postsHash } = me.data;me.fetchArticleDetail(id, function() {}, function() {});} }// 考慮到列表頁已經獲取到部分數據 // 為了在詳情頁第一時間利用這些數據，我們將params傳入 // 防止以后需要用data的數據，我們將data也一并傳入 let mapStateToData = (state, params, data) => {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);

需要注意的是，為了保證第一時間能拿到數據，我們對wechat-weapp-redux/src/connect.js做了優化調整，修改的地方如下:

// 修改了以下兩個函數 // 可以對照原項目修改，也可以直接拿我的模板項目使用 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對象不存在!")}if (shouldSubscribe) {this.unsubscribe = this.store.subscribe(handleChange.bind(this, options))// 第一次處理的時候也傳入optionshandleChange.apply(this, [options])}if (typeof _onLoad === 'function') {_onLoad.call(this, options)} }

引入Redux的優勢

引入Redux的好處在于可以集中管理數據，并且讓Page的代碼保持絕對簡單，讓所有的組件都變成簡單可復用的無狀態組件。

此外，Redux還讓離線緩存更方便，數據復用更簡單。

引入Redux解決了數據散布各處的問題，參考Redux的管理思路，我們構思了一套簡單組件化解決方案：假設我們把所有的組件都設計成無狀態組件，而組件的數據來源是Page.data，那么我們是否也可以將組件數據的管理抽離到一個單獨的文件中呢？接下來講講我們使用的簡單的組件化解決方案。

簡單的組件化解決方案

這份組件化解決方案的核心就在于把組件的關聯數據集中起來管理，只暴露出默認數據和數據的操作函數。

比如好奇心日報的詳情頁有個Toolbar，該Toolbar并不復雜，主要提供返回和點贊功能，其中點贊功能只對文章詳情有效，研究所詳情頁會將點贊功能隱藏。

Toolbar組件

// components/toolbar/index.js 文件 // 僅提供默認值，不需要和page中的數據保持同步 let defaultData = {isPraised: false,praiseCount: 0,showPraiseIcon: false, }; // 切換點贊狀態 function togglePraise() {// 本質上是修改Page.data中的toolbarData } // 返回上一級 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: {// 其他數據id: 0,// Toolbar數據，單獨的一份數據，便于維護toolbarData: Toolbar.defaultData},// 點贊或者取消贊togglePraise: function() {let me = this;Toolbar.togglePraise.call(me);} }// 這兒的組件化并不是真正的組件化 // 而是將組件相關的邏輯和函數抽離到單獨的文件中，保證Page代碼清晰。 // 同時也為這部分組件邏輯復用提供了可能。 // 本質上來說，抽離出的組件都是“操作Page.data的工具函數”，他們也是純函數，和“操作state的reducer”類似。

這種Redux的組件化解決方案既簡單又好用，保持一定的代碼規范即可。這樣設計當然是為了復用，同時也讓Page的邏輯保持極度精簡。

開發中遇到了哪些難點 && 微信小程序有多少坑？

微信小程序目前的確算不上公測的版本(12月29日之前的版本)，開發者工具不完善、真機表現和開發環境差異很大、部分組件性能較差、部分功能有缺陷，只有經歷了這些大坑，才會真的知道你有多“愛”微信小程序。這兒總結了開發中的難點以及微信小程序中遇到的比較明顯的坑。

富文本解析

微信小程序并不支持HTML標簽，所以對于富文本解析來說，難度較大，而且有些功能還沒有辦法實現，比如：iframe視頻、連接跳轉等。

這塊功能建議由后臺統一轉換，如果非得前端轉換，建議參考下面的思路。

非常感謝 wxParse 這款組件，替我省了不少時間。推薦大家使用，期間遇到一些問題，也分享給大家。

• wxParse 默認層級只支持10層HTML嵌套，如果想要支持更深的層級，在wxParse.xml復制幾份template即可。
• wxParse 提供了圖片加載成功的回調wxParseImgLoad，很好用。但如果富文本中的圖片已經預設寬高比，那么可以不用依賴該回調，在html2jons.js中根據屏幕寬度直接計算出圖片高度，先占位，可以避免頁面頻繁抖動的問題。
• 如果你的富文本中有自定義模塊，對wxParse.xml中的template進行改造即可。

自定義模塊樣式

數據扁平化

具體如何扁平化，請移步我寫的一篇博客：State設計，Redux 開發第一步。

這兒只簡單介紹下扁平化應用場景：

好奇心日報的研究所是三級表結構：papers > questions > options，后臺返回的數據是三級嵌套數據，如果想要修改option.selected字段，需要三級嵌套循環！如果想要獲取所有選中的option，需要三級嵌套循環！

頁面展現速度優化

數據復用，比如復用列表頁的數據，可以讓詳情頁的標題等字段第一時間呈現出來。

離線緩存，同樣可以讓列表頁和詳情頁第一時間呈現出來，甚至有可能減少請求數量。

無論是數據復用還是離線緩存，配合數據扁平化，都非常好用。

小程序默認設置代理，會和Shadowsocks等VPN沖突（最新版又壞了）

解決方法很簡單，設置微信小程序不使用代理；或者臨時關閉VPN即可。

上一版開發者工具已經解決該問題，最新版又壞了。

最新版微信小程序移除了對Promise的支持。

開發者自行引入兼容庫即可，推薦es6-promise。使用的時候，直接引入Promise即可。

// 引入Promise import Promise from '../vendors/es6-promise.js';// 用Promise封裝wx.request網絡請求 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('網路請求錯誤，請稍后再試~');}},fail: function(err) {reject('網路請求不符合規范，請檢查域名是否符合要求~');}});})} } 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);

不清楚微信為何會臨時移除Promise，統一內置不也挺好？

小程序不能實現完美的fullpage效果，會出現上下拉扯的感覺（最新版預計已修復，待實際驗證）。

小程序一旦滾動頂部或者底部，繼續滑動的時候，就會出現拉扯現象。而這個拉扯現象還無法禁止。

最新版可以對頁面配置disableScroll，預計可以修復這個問題，待實際驗證。

fullpage效果

swiper組件不支持輪播，性能差，文檔模糊（部分最新版已修復）

• swiper組件之前并不支持輪播，最新版已修復。
• swiper組件之前是通過設置left屬性來實現動畫，在小米5、華為V8等高端等安卓機上能夠感受到明顯的卡頓，當然原因是X5內核引起的。最新版已修復，換成了transform，性能有一定的提升。

swiper性能提升

• 文檔并未標記可以垂直輪播，但其實是可以的。

// 簡單設置vertical即可，但由于官方文檔并未備注，盡量不要使用。可以自己開發一個swiper組件。 <swiper vertical="true"></swiper>

• swiper組件的小圓點其實是可以定制化的，但是官方文檔并未說明，而且開發者工具也看不出來，只有鼠標hover到元素上的時候可以看到相關的class，簡單猜測一下，最后分析出來它的實現方式。

swiper圓點的實現原理 // 圓點的父元素，用來控制圓點間的間距 .wx-swiper-dot {width: 30rpx;// 圓點，可以通過font-size修改圓點的大小，color修改圓點的顏色&:before {width: 100%;display: inline-block;font-size: 56rpx;content: '圓點編碼';}// active狀態的圓點&.wx-swiper-dot-active {&:before {color: #ffc81f;}} }

小程序WXSS的font-face的url不接受路徑作為參數

可以將字體文件轉換為base64，然后引用。

font-face接受base64，不接受url

同樣，如果想要使用iconfont，也可以使用類似的方案，將iconfont字體文件base64之后再引入。

小程序的margin表現有問題（最新版已經修復）

之前發生margin折疊的時候，會取小的那個值。會導致底部留白等設置失效。

Canvas問題

Canvas并沒有深入研究，目前的發現的問題主要是兩個，如下圖標記：

• 層級問題，canvas總是會蓋在其他元素上面。
• 支持度不好，在小米5、iPhone5s畫圖會出現畸形。

canvas繪制餅圖有Bug

最后通過CSS3的方式繪制餅圖。

<template name="pie"><view class="com-pie"><!-- 小于50% --><view class="percent-1" style="transform: rotate(0.4turn);"></view><view class="percent-2"></view><!-- 大于50% --><view class="percent-1" style="transform: rotate(0.5turn);"></view><view class="percent-2" style="opacity:1; transform: rotate(0.3turn);"></view></view> </template>.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會出現精度問題

設置margin-left/margin-right負值，可能導致頁面能夠左右晃動。猜測是rpx導致的精度問題。

rpx本質上會轉換為px，在不同寬度的設備上，實際的rpx值會轉換為帶小數的px值，四舍五入可能出現問題，之前使用rem布局的時候在QQ瀏覽器遇到過類似的問題。

rpx精度問題

wx.request表現不合理，并且攜帶特殊字符會報錯

• 請求返回404錯誤，也會觸發success回調。

不要想當然的認為會觸發fail回調，判斷一個請求成功或失敗，請使用wx.request返回的狀態來判斷。只有不符合規范的請求，才會觸發fail。

wx.request回調

• 請求的數據中，如果有特殊字符（比如\u2820），會報錯。

只會在真機上出現，并且安卓調試模式并不輸出錯誤日志，開發者工具沒毛病。估計會有更多的特殊字符會導致這個問題，已反饋給微信小程序相關的開發者，靜待修復。

特殊字符導致wx.request掛掉

在瀏覽器中查看HTML的時候能夠發現這個字符，就是最后那個小紅點。

HTML中的特殊字符

開發者工具，切換頁面的時候，有時候WXML不會同步切換

希望微信什么時候能解決一下。

微信小程序給WXML模板賦值的時候，解構放到前面可能會報錯

最新版會遇到這個問題，老版本雖然不會報錯，但是在部分真機上會出現問題。

原因未知，遇到這個問題的朋友可以考慮繞過去。

解構賦值導致報錯

微信小程序的scroll-view暴露的bindscroll函數并不能實時監聽

依賴實時獲取滾動位置的功能不能實現。比如滾動時toolbar的動態隱藏和顯示。

最新版開發工具不能關掉自動刷新

微信小程序的會默認監聽文件變化，然后自動刷新。

但不足的是每次都是全量刷新，而不是模塊的熱替換，反而會影響開發速度，尤其對于喜歡頻繁Command + S的開發者，你會發現你的小程序在不斷的刷新。建議關閉。

建議關閉監聽文件變化

但最新版開發者工具，不勾選也會自動刷新。

微信小程序不支持requestAnimationFrame

微信小程序不支持requestAnimationFrame，所以部分性能優化做不了。不支持的原因未知。

Page.onload函數可以接受參數

該參數是有URL決定的，也就是URL攜帶的參數。

官方文檔這塊寫的有點混淆，特意拿出來說一下。舉個例子：url中傳遞的時候id=1，那么option.id=1，而不是什么option.query。

Page.onload參數文檔描述混淆

不要給Page.data傳入太多無用數據，會影響渲染效率，在iOS上表現特別明顯

盡量傳入精簡的數據，保持Page.data和view間簡單的綁定關系即可。

切換Tab后，小程序下拉刷新的 loading 動畫會出現 Bug，iOS設備

默認下拉刷新的動畫是三個點依次漸現，如果操作中切換了Tab，再切換回來后，下拉刷新就變成一個靜止的點了。

最新版swiper組件在iPhone上自動輪動的時候，會閃爍！

原因未知，已經發布的小程序不受影響，未發布的最新版有這個問題，猜測是微信升級引起的。

真機上有概率卡死，目前不確定是代碼問題還是小程序的問題。

有遇到類似問題的朋友歡迎指出。

微信小程序本身并不復雜，開發過程卻比較艱辛，尤其是第一次在真機上運行的時候，覺得這個世界惡意滿滿。

大家可以掃描以下二維碼，體驗該款小程序。

好奇心小程序

---

CSDN技術公開課誠邀對小程序有實踐經驗的技術專家、資深開發者，擔任微信小程序技術公開課講師，帶來有關小程序更深入、更全面的技術分享。邀請流程請見：。

也歡迎各位專家老師掃描以下二維碼，加秋歌為好友，前來咨詢，相互交流。加好友時，請注明：講師+小程序。

總結

以上是生活随笔為你收集整理的微信小程序全面实战，架构设计与躲坑攻略大全的全部內容，希望文章能夠幫你解決所遇到的問題。

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