微信小程序使用(yong)起來感(gan)覺像(xiang)寫(xie)h5一(yi)樣，對(dui)于新(xin)手估計會有比較(jiao)多疑(yi)惑，如果撇去這些(xie)想法應該是很快就能上手的一(yi)套開發(fa)方案。

但是它自(zi)身的(de)限(xian)制也比較大，如不(bu)提供window對象(xiang)會(hui)導致一些功能實現起來比較麻(ma)煩。我這次(ci)開(kai)發(fa)的(de)小程序就遇到了，雖(sui)然比較快找(zhao)到解決辦法（可能都是比較標準(zhun)化的(de)東(dong)西），希望之后不(bu)會(hui)有其(qi)他大坑。

需要其實(shi)比較簡單，就是兩頁文章(zhang)列表(biao)及文章(zhang)詳情(qing)頁，剛上手卻(que)遇到(dao)下面的坑(keng)：

• 無(wu)法利用window對象解析xml

• 不支持HTML標簽的使用(yong)

• 怎樣兼容Promise和generator異步(bu)

剛開(kai)始一(yi)臉懵(meng)逼...后來趕(gan)緊(jin)去github看看各大牛(niu)例子及一(yi)些工(gong)具就解決了。

解析xml問題

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

評論有(you)問道如何改，這(zhe)里我(wo)已(yi)經把(ba)這(zhe)個整合到(dao)這(zhe)庫了。

解析html問題

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

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

//把style及(ji)class添加(jia)到白名單。
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, {
  /**在這添加你的標簽白名單(dan)**/
  //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

//引(yin)入
const Promise = require('../../lib/es6-promise/es6-promise').Promise;
// 或(huo)
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");

//獲取應(ying)用實例
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函數執行(xing)完畢了'); // 輸出：Generator函(han)數執(zhi)行完畢了
        });       
    }
});

部(bu)分引用的庫需要(yao)稍微改動才(cai)能(neng)在微信(xin)小程序環境使(shi)用，想馬(ma)上(shang)上(shang)手可直(zhi)接(jie)使(shi)用GyWxappCases 微信(xin)小程序案例下的庫