作者： 老葛 亚艾元软件
当我们第一次实现新闻详细页面的时候，效果如下：
图8-2-6-1
对应代码：
newsitem.js
Page({
data: {
node: {}
},
onLoad: function (options) {
//console.log('onLoad')
var that = this
wx.request({
url: 'http://chess.yaiyuan.com/jsonnewsitem/' + options.nid,
method: 'GET',
success:function(res) {
that.setData({
node: res.data[0]
})
}
})
}
})
newsitem.wxml
<view>
<view>{{node.title}}</view>
<view>{{node.body}}</view>
</view>
正文部分是乱的。
经过搜索和研究，发现Wxparse可以解决这个问题。还有一个办法是只提供文本，对于图片，单独给出。
项目地址：https://github.com/icindy/wxParse
我按照Wxparse提供的文档，试了一下，果然可以解决这个问题。
将它下载下来，放到和pages并列的目录：
图8-2-6-2
图8-2-6-3
修改象棋新闻的对应代码：
var WxParse = require('../../wxParse/wxParse.js');
Page({
data: {
node: {}
},
onLoad: function (options) {
//console.log('onLoad')
var that = this
wx.request({
url: 'http://chess.yaiyuan.com/jsonnewsitem/' + options.nid,
method: 'GET',
success:function(res) {
that.setData({
node: res.data[0]
})
var article = res.data[0].body;
WxParse.wxParse('article', 'html', article, that, 5);
}
})
}
})
修改模板文件：
<view>
<view>{{node.title}}</view>
<view>
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
<!--<view>{{node.body}}</view> -->
</view>
修改后的显示效果：
图8-2-6-4
当然个别地方，还是有点小问题，不过这个HTML转义的问题就这样解决了。
