小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。

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

 

Paste_Image.png

本文將結合具體的實戰經驗，主要介紹微信小程式的基礎知識、開發中遇到的難點、專案的架構設計、最佳實踐以及踩過的坑。文章內容較多，如果想看架構設計和躲坑技巧，請直接瀏覽後面的正文，簡書沒有目錄，也挺傷感的。

文末有好奇心日報小程式的二維碼，歡迎圍觀。

值得再次宣告的是：微信小程式的內容部分是hybrid模式，並非原生，所以效能並不好，繫結的tap事件也有明顯的延遲。

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

 

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

小程式有哪些基礎知識？

一個完整的微信小程式是由一個App例項和多個Page例項構成，其中App例項表示該小程式應用，多個Page表示該小程式的多個頁面。
此外，微信小程式並沒有提供自定義元件的方式，這就導致微信小程式在開發較複雜應用時，可能會比較艱難。

微信小程式本身很簡單，和一個模板語言的難度幾乎相當，翻翻官方教程就可以開始動手搞。
我也建議大家先動起來，然後再細緻啃啃官方文件。由於微信官方文件仍在不斷大幅更新中，所以務必檢視最新官方文件。

微信小程式的基礎知識主要分為以下幾個部分：
✦ 兩種配置檔案 && 兩個核心函式
✦ WXML模板語法，頁面渲染
✦ 頁面間的跳轉
✦ 互動事件
✦ 官方元件和官方API
後文會就每個部分簡單介紹介紹...

兩種配置檔案 && 兩個核心函式

app.json 應用的全域性配置檔案

app.json是針對微信小程式的全域性配置，主要包含以下幾個配置：
✦ pages：頁面路徑的陣列，表示小程式要載入的所有頁面，其中陣列第一項代表小程式的初始頁面。
✦ window：微信原生功能，定製化不強。可設定小程式的狀態列、導航條、標題以及視窗背景色。
✦ tabBar：微信原生功能，定製化不強。適用於常規的Tab應用，Tab欄可置於頂部或底部；tabBar是一個數組，僅支援2-5個tab。
✦ networkTimeout：配置小程式網路請求的超時時間。
✦ debug：除錯模式開關，開發模式下建議開啟，正式釋出別忘了關閉。

app.json配置的主要區域

 

page.json 頁面的全域性配置檔案

除了上面提到的全域性配置，每個頁面還可以單獨配置page.json，page.json會覆蓋app.json中的配置，並只對當前頁面生效。
page.json只能對window配置，有兩個比較有用的配置項分別是：
✦ enablePullDownRefresh：是否開啟下拉重新整理
✦ disableScroll：只能在page.json配置，禁止頁面上下滾動，猜測可以實現完美滑屏滑動（未驗證）

App() 小程式註冊入口，全域性唯一

App()用來註冊一個小程式，全域性只有一個，全域性的資料也可以放到這裡面來操作。

// 註冊微信小程式，全域性只有一個
let appConfig = {
    // 小程式生命週期的各個階段
    onLaunch: function(){},
    onShow: function(){},
    onHide: function(){},
    onError: function(){},
    
    // 自定義函式或者屬性
    ...
};
App(appConfig);

// 在別的地方可以獲取這個全域性唯一的小程式例項
const app = getApp();

小程式並沒有提供銷燬的方式，所以只有當小程式進入後臺一定時間、或者系統資源佔用過高的時候，才會被真正的銷燬。

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();

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

 

Paste_Image.png

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

那麼，APP 和 Page 如何將資料傳遞到頁面呢？頁面又是如何渲染呢？

WXML模板語法，頁面渲染

小程式雖然是hybrid模式，但並不使用HTML渲染，而是全部通過自定義標籤來渲染頁面。這樣做的好處我不清楚，但問題卻不少：不能跨瀏覽器、富文字解析困難，iframe視訊不支援，沒辦法外鏈跳轉。
和所有的模板語言一樣，WXML支援資料繫結、條件渲染、迴圈、模組化等功能。

資料繫結

在 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>

條件渲染

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

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

迴圈渲染

迴圈渲染，適合遍歷資料輸出多段 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 有利於提升重新渲染時的效率，建議新增

模組化

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()的各個生命週期，不同的跳轉方式和不同的生命週期關聯，如下圖：

Paste_Image.png

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

 

Paste_Image.png

好了，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幾個核心部分拆分，直接上目錄。

 

小程式工程目錄

作者：齊修_qixiuss
連結：https://www.jianshu.com/p/4433d46e6235
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

✦ 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))
        // 第一次處理的時候也傳入options
        handleChange.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的邏輯保持極度精簡。

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

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

富文字解析

微信小程式並不支援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上自動輪動的時候，會閃爍！

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

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

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

總結說點啥？

本文主要圍繞微信小程式的基礎知識、如何設計微信小程式、開發過程中遇到的問題三個方面介紹。

微信小程式的基礎知識主要包括：
✦ 兩種配置檔案 && 兩個核心函式
✦ WXML模板語法，頁面渲染
✦ 頁面間的跳轉
✦ 互動事件
✦ 官方元件和官方API

如何設計微信小程式的內容主要包括：
✦ 構建系統 && 目錄結構
✦ 引入Redux進行資料集中管理
✦ 簡單的元件化解決方案

最後還介紹開發過程中遇到的難點 以及 微信小程式的大小坑。

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

作者：齊修_qixiuss
連結：https://www.jianshu.com/p/4433d46e6235
關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！