支持显示新闻全文(富媒体)的新闻头条微信小程序分享

时间:2019-06-27 12:41:12

自从上次发布新闻头条小程序后,经常会有同学问点击新闻标题后为什么会提示“小程序不支持外链,原文可用相应插件转换”。这是因为新闻接口的数据源来自各大新闻平台,而微信小程序是不允许打开非业余域名内的链接的,所以应该在得到新闻url链接后,通过html转wxml插件将获取到的html网页文件转为支持小程序显示的wxml组件结构。


但是对编程经验不多的小伙伴来说,有一定难度。且转换过程对复杂网页结构并不太友好。其实是可以利用天行数据的“新闻全文”接口,来直接获取网页(包含网页图片等富媒体)的全文数据的,具体的演示效果如下。


支持显示新闻全文(富媒体)的新闻头条微信小程序分享   

(小程序中显示新闻全文)


支持显示新闻全文(富媒体)的新闻头条微信小程序分享   

(新闻列表)


下载了上个版本的新闻头条小程序可以重新下载新版本,解压覆盖即可,如果有自定义修改的地方,请注意备份。主要修改了以下几个地方,打开pages/index/index.js第90行位置,将原来提示需要插件转换的地方,改为跳转事件,前端绑定传递一个新闻url数据给跳转后的view页面。


  handerNavigator: function (e) {//点击新闻列表跳转
    var url = e.currentTarget.dataset.url    // 新闻url 
    wx.navigateTo({
      url: '/pages/view/view?url=' + url
    }); 
  },


在pages目录下新建view/view.js、view.wxml、view.wxss、view.json文件,打开view.js文件复制粘贴以下代码:


var util = require('../../utils/util.js')
Page({
    data: {
    },
  onLoad: function (options) {
      this.loadNewsContent(options.url);
      wx.showShareMenu({
        withShareTicket: true
      })
    },

  loadNewsContent: function (url) {//加载新闻内容
        let that = this;
        wx.showLoading({title: '加载中...'})
        wx.request({
          url: util.txapi_base_url + '/txapi/htmltext/',
            data: {
              key: util.txapi_key,
              url: url
            },
            success: function (res) {
              if (res.data.code == 200) {
                wx.setNavigationBarTitle({
                  title: res.data.newslist[0].title
                })
                that.setData({ 
                  TianAPInewsTitle: res.data.newslist[0].title,
                  TianAPInewsContent: res.data.newslist[0].content,
                  TianAPInewsContentTime: res.data.newslist[0].ctime
                });
                }
                else {
                wx.showModal({
                  title: '天行数据',
                  content: res.data.msg + '\n错误状态码:' + res.data.code,
                  showCancel: false,
                  success: function (res) {
                    wx.navigateBack()
                  }
                })
                }
              wx.hideLoading()  //关闭加载提示
            }
        })
    }
});


在view.wxml复制粘贴以下代码:


<view class="NewsContent">
<view class="title">{{TianAPInewsTitle}}</view>
{{TianAPInewsContentTime}}
<rich-text class="content" nodes="{{TianAPInewsContent}}"></rich-text>
</view>


另外还要注意在根目录的app.json中增加新的页面路由:


  "pages": [
    "pages/index/index",
     "pages/view/view"
  ],


通过以上修改,你的新闻头条小程序就支持显示新闻原文了,新版新闻头条微信小程序完整源代码请下载附件。如果提示“320错误,API没有调用权限”,请自行登录天行数据完成权限的升级开通。


上次文章:用天行数据API接口开发一个新闻微信小程序

微信小程序开发你需要知道这些


其他相关:

天行数据官网:https://www.tianapi.com
新闻全文接口:https://www.tianapi.com/apiview/66
频道列表接口:https://www.tianapi.com/apiview/65
通用新闻接口:https://www.tianapi.com/apiview/51


TianApiNews.zip



本站所有文章均为小宇博客原创,转载请注明来源及出处!

作者:宇天行 (关于我

本文首发地址:https://www.huceo.com/post/494.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:0 | 浏览:844

您对本文《支持显示新闻全文(富媒体)的新闻头条微信小程序分享》有哪些看法?  ---  【期待您的评论】

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

站内文章搜索

转发分享好友

网盟广告赞助