利用动易SF制作资讯类小程序(3)

文章详情页效果图

文章详情页

wxml代码：

<import src="../../wxParse/wxParse.wxml" />
<view class="page">
<view class="page__hd">
<h1 class="page__title">{{title}}</h1>
<p class="page__desc">时间:{{datetime}} 来源:{{copyfrom}}</p>
</view>
<view class="wxParse art-content">
  <template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>
<view class="weui-footer">
<view class="weui-footer__text">{{copyright}}</view>
</view>
</view>

js代码：

const app = getApp()
const WxParse = require('../../wxParse/wxParse.js');
Page({
  data: {
    atitle:'',
    copyright: app.globalData.copyright
  },
  onReady() {

  },
  onLoad(options) {
    var that = this
    wx.request({
      url: 'https://www.xxx.com/Item.aspx?id=' + options.id,
      headers: {
        'Content-Type': 'application/json'
      },
      success(res) {
        //console.log(res.data.title)
        WxParse.wxParse('article', 'html', res.data.content, that, 5),
        that.setData({
          title:res.data.title,
          datetime: res.data.date, 
          copyfrom: res.data.copyfrom                    
        })
       }
    })
  }
})

wxss代码：

@import "../../wxParse/wxParse.wxss";
.page{padding:0 10px;}
.art-content{
    font-size: 16px;
    color: #333;
    padding: 10px;
    line-height: 1.8;
}
.page__hd{border-bottom: 1px solid #ccc;padding-bottom: 7px;}
.page__title {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    display: block;
}
.page__desc {
    margin-top: 5px;
    color: #888;
    text-align: left;
    font-size: 14px;
}

json代码：

{
  "navigationBarTitleText": "内容详情",
  "navigationBarBackgroundColor": "#2AA0C6",
  "navigationBarTextStyle": "white",
  "usingComponents": {
    "txv-video": "plugin://tencentvideo/video"
   }
}