You are here

Drupal8+微信小程序:6,使用Wxparse实现图文展示

 作者: 老葛 亚艾元软件

当我们第一次实现新闻详细页面的时候,效果如下:

8-2-6-1.png 

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.png 

8-2-6-2

 

8-2-6-3.png 

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.png 

8-2-6-4

 

当然个别地方,还是有点小问题,不过这个HTML转义的问题就这样解决了。


Drupal版本: