微信小程序使用起來感覺像寫h5一樣，對(duì)于新手估計(jì)會(huì)有比較多疑惑，如果撇去這些想法應(yīng)該是很快就能上手的一套開發(fā)方案。

但是它自身的限制也比較大，如不提供window對(duì)象會(huì)導(dǎo)致一些功能實(shí)現(xiàn)起來比較麻煩。我這次開發(fā)的小程序就遇到了，雖然比較快找到解決辦法（可能都是比較標(biāo)準(zhǔn)化的東西），希望之后不會(huì)有其他大坑。

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

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

• 不支持HTML標(biāo)簽的使用

• 怎樣兼容Promise和generator異步

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

解析xml問題

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

評(píng)論有問道如何改，這里我已經(jīng)把這個(gè)整合到這庫了。

解析html問題

現(xiàn)在比較成熟的是wxParse這貨，的確大部分的html標(biāo)簽均能解析渲染，但是我這邊程序錄入的富文本內(nèi)容卻摻雜了些奇奇怪怪的標(biāo)簽，解析時(shí)還是會(huì)出錯(cuò)，內(nèi)容解析到一半就停了...既然它做不到忽略，咋整？那把那些垃圾都過濾掉吧?。。●R上用上js-xss這個(gè)來處理問題，能控制過濾的標(biāo)簽及標(biāo)簽?zāi)軗碛械膶傩?，方便得很?/p>

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, {
  /**在這添加你的標(biāo)簽白名單**/
  //div: ['style', 'css', 'title']
}))

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

經(jīng)過上面的代碼便能解析出合理的html好讓wxParse好好渲染了。

你說引用js-xss文件，對(duì)象是個(gè)方法都沒有，出錯(cuò)了？恩，這里由于dist目錄下的xss.js文件并不是UMD包裹所以導(dǎo)致引用出錯(cuò)，這里得把整個(gè)js-xss項(xiàng)目下載下來并使用browerify重新打包。

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

兼容Promise和Generator問題

Promise使用es6-promise打個(gè)補(bǔ)丁或者用bluebird

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

Generator需要regeneratorRuntime，運(yùn)行環(huán)境如果不加上就提示出錯(cuò)。

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

//獲取應(yīng)用實(shí)例
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函數(shù)執(zhí)行完畢了'); // 輸出：Generator函數(shù)執(zhí)行完畢了
        });       
    }
});

部分引用的庫需要稍微改動(dòng)才能在微信小程序環(huán)境使用，想馬上上手可直接使用GyWxappCases 微信小程序案例下的庫