微信小程序开发中自己的小总结

朴灿烈づ我的快乐病毒、 2022-05-19 06:45 258阅读 0赞

微信小程序使用起来感觉像写h5一样，对于新手估计会有比较多疑惑，如果撇去这些想法应该是很快就能上手的一套开发方案。

但是它自身的限制也比较大，如不提供window对象会导致一些功能实现起来比较麻烦。我这次开发的小程序就遇到了，虽然比较快找到解决办法（可能都是比较标准化的东西），希望之后不会有其他大坑。

需要其实比较简单，就是两页文章列表及文章详情页，刚上手却遇到下面的坑：

*  无法利用window对象解析xml
 *  不支持HTML标签的使用
 *  怎样兼容Promise和generator异步

刚开始一脸懵逼...后来赶紧去github看看各大牛例子及一些工具就解决了。

## 解析xml问题 ##

由于比较多的解析插件都是基于`window.DOMParser`处理的，在小程序却无用武之地。找到问题就好解决，我要的是`DOMParser`而不是window找找应该有代替品，然后找到这个[`xmldom`][xmldom]引入代替掉`DOMParser`就解决，然后把xml转成json处理了。

评论有问道如何改，这里我已经把这个整合到[这库][Link 1]了。

## 解析html问题 ##

现在比较成熟的是[`wxParse`][wxParse]这货，的确大部分的html标签均能解析渲染，但是我这边程序录入的富文本内容却掺杂了些奇奇怪怪的标签，解析时还是会出错，内容解析到一半就停了...既然它做不到忽略，咋整？那把那些垃圾都过滤掉吧！！！马上用上[`js-xss`][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`，运行环境如果不加上就提示出错。

[xmldom]: https://github.com/jindw/xmldom
[Link 1]: https://github.com/lpreterite/xmlToJSON
[wxParse]: https://github.com/icindy/wxParse
[js-xss]: https://github.com/leizongmin/js-xss