微信小程式小總結

帕奇式發表於2017-01-18
微信小程式

微信小程式使用起來感覺像寫h5一樣，對於新手估計會有比較多疑惑，如果撇去這些想法應該是很快就能上手的一套開發方案。

但是它自身的限制也比較大，如不提供window物件會導致一些功能實現起來比較麻煩。我這次開發的小程式就遇到了，雖然比較快找到解決辦法（可能都是比較標準化的東西），希望之後不會有其他大坑。

需要其實比較簡單，就是兩頁文章列表及文章詳情頁，剛上手卻遇到下面的坑：

  • 無法利用window物件解析xml

  • 不支援HTML標籤的使用

  • 怎樣相容Promise和generator非同步

剛開始一臉懵逼…後來趕緊去github看看各大牛例子及一些工具就解決了。

解析xml問題

由於比較多的解析外掛都是基於window.DOMParser處理的，在小程式卻無用武之地。找到問題就好解決，我要的是DOMParser而不是window找找應該有代替品，然後找到這個xmldom引入代替掉DOMParser就解決，然後把xml轉成json處理了。

評論有問道如何改，這裡我已經把這個整合到這庫了。

解析html問題

現在比較成熟的是wxParse這貨，的確大部分的html標籤均能解析渲染，但是我這邊程式錄入的富文字內容卻摻雜了些奇奇怪怪的標籤，解析時還是會出錯，內容解析到一半就停了…既然它做不到忽略，咋整？那把那些垃圾都過濾掉吧！！！馬上用上js-xss這個來處理問題，能控制過濾的標籤及標籤能擁有的屬性，方便得很。

const xss = require(`../lib/js-xss/xss`)
const WxParse = require(`../../lib/wxParse/wxParse.js`)

//把style及class新增到白名單。
Object.keys(xss.whiteList).forEach(name => xss.whiteList[name] = xss.whiteList[name].concat([`style`, `class`]))
let content = xss(`<div>HTML文字</div>`, Object.assign(xss.whiteList, {
  /**在這新增你的標籤白名單**/
  //div: [`style`, `css`, `title`]
}))

WxParse.wxParse(`wxml`, `html`, content, this, 15)

經過上面的程式碼便能解析出合理的html好讓wxParse好好渲染了。

你說引用js-xss檔案，物件是個方法都沒有，出錯了？恩，這裡由於dist目錄下的xss.js檔案並不是UMD包裹所以導致引用出錯，這裡得把整個js-xss專案下載下來並使用browerify重新打包。

browerify lib/index.js > dist/xss.js -s xss

相容Promise和Generator問題

Promise使用es6-promise打個補丁或者用bluebird

//引入
const Promise = require(`../../lib/es6-promise/es6-promise`).Promise;
// 或
const Promise = require(`../../lib/bluebird/bluebird`);

Generator需要regeneratorRuntime，執行環境如果不加上就提示出錯。

var Promise = require(`../../lib/es6-promise/es6-promise`).Promise;
var co = require(`../../lib/co/we-index`);
var regeneratorRuntime = require("../../lib/regenerator-runtime/runtime");

//獲取應用例項
var app = getApp();

Page({


    onReady: function () {
        //console.log(`onReady`);
        var that = this;

        var gen = function* () {
            var a = Promise.resolve(1);
            var b = Promise.resolve(2);
            var c = Promise.resolve(3);
            var res = yield [a, b, c];
            console.log(res); // 輸出：[1, 2, 3]
        };

        co(gen).then(function () {
            console.log(`Generator函式執行完畢了`); // 輸出：Generator函式執行完畢了
        });       
    }
});

部分引用的庫需要稍微改動才能在微信小程式環境使用，想馬上上手可直接使用GyWxappCases 微信小程式案例下的庫

相關文章