微信小程序 加载 HTML 标签
肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到一个合适的轮子拿来用!这里用到的轮子就是这个:wxParse.他的介绍可以去 github 主页学习,这里简要记录使用过程.(项目地址链接)
本文由百牛信息技术bainiu.ltd整理发布于博客园
接口是截取的网易新闻的新闻详情接口,数据格式大家自行格式化观察.这里在做 HTML 处理的时候遇到了两个小问题.
1.返回数据中包含非 HTML 标签的内容,这会导致加载数据时解析失败.
2.一些新闻详情会有配图,配图的位置是通过一些标识字符串加到内容里,不是直接加载出来.
首先来看第一个问题.其实这个问题很好解决,直接获取到要加载的内容,找到这些非 HTML 字符串将他们替换成空字符串,问题就迎刃而解了.下面是关键的代码;
- <span style="font-size:18px;"> <span style="white-space:pre"> </span>//替换标签中特殊字符 这里观察返回数据找到非 HTML 字符串,随后将该字符串替换成空字符串.
- var infoFlg = "<!--SPINFO#0-->";
- if (content.indexOf(infoFlg) > 0) {
- content = content.replace(/<!--SPINFO#0-->/, "");
- }</span>
第二个问题思路也是这样,将标识图片位置的非 HTML 字符串替换成 HTML 标签就解决了.
- <span style="font-size:18px;"><span style="white-space:pre"> </span>var imgFlg = "<!--IMG#";
- //图片数量
- var imgCount = (content.split(imgFlg)).length-1;
- if (imgCount > 0) {
- console.log("有dd" + imgCount + "张图片");
- for (var i = 0; i < imgCount; i++) {
- var imgStr = "<!--IMG#" + i + "-->";
- var imgSrc = "\"" + imgInfoArr[i].src + "\"";
- var imgHTML = "<div> <img style=\"width:100%\" src=" +imgSrc+ "> </div>";
- content = content.replace(imgStr, imgHTML);
- }
- }</span>
最后加载数据,
- <span style="font-size:18px;"><span style="white-space:pre"> </span>var article = title + source + content ;
- WxParse.wxParse('article', 'html', article, self,imgCount);</span>
wxml 页面代码如下
- <span style="font-size:18px;"><import src="../../wxParse/wxParse.wxml"/>
- <loading hidden = "{{hide}}">加载中...</loading>
- <view class="wxParse">
- <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
- </view></span>
js 页面详细代码如下:
- <span style="font-size:18px;">var WxParse = require('../../wxParse/wxParse.js');
- Page({
- data: {
- },
- onLoad: function(options) {
- //http://c.m.163.com/nc/article/CADGA4VH0001875N/full.html
- var self = this;
- var optionId = options.id;
- console.log(optionId);
- wx.request( {
- url: 'http://c.m.163.com/nc/article/' +optionId+ '/full.html',
- header: {
- "Content-Type": "application/json"
- },
- method: "GET",
- data: {
- },
- success: function( res ) {
- var data = res.data[optionId];
- var imgInfoArr = res.data[optionId].img;
- //替换标签中特殊字符
- var infoFlg = "<!--SPINFO#0-->";
- var imgFlg = "<!--IMG#";
- var title = " <p style=\"margin:15px 15px; line-height: 20px;\"> " + res.data[optionId].title + "</p>";
- var source = " <p style=\"margin:15px 15px; font-size: 14px; color:darkgray \">来源于: " + res.data[optionId].source + "</p>";
- var content = "<div style=\"margin:10px; line-height:25px; font-weight:200; font-size:17px; color:black; word-break:normal\">" + res.data[optionId].body + "</div>";
- //替换标签中特殊字符
- var infoFlg = "<!--SPINFO#0-->";
- if (content.indexOf(infoFlg) > 0) {
- content = content.replace(/<!--SPINFO#0-->/, "");
- }
- var imgFlg = "<!--IMG#";
- //图片数量
- var imgCount = (content.split(imgFlg)).length-1;
- if (imgCount > 0) {
- console.log("有dd" + imgCount + "张图片");
- for (var i = 0; i < imgCount; i++) {
- var imgStr = "<!--IMG#" + i + "-->";
- var imgSrc = "\"" + imgInfoArr[i].src + "\"";
- var imgHTML = "<div> <img style=\"width:100%\" src=" +imgSrc+ "> </div>";
- content = content.replace(imgStr, imgHTML);
- }
- }
- var article = title + source + content ;
- WxParse.wxParse('article', 'html', article, self,imgCount);
- setTimeout (function () {
- self.setData({
- hide: true
- })
- }, 500)
- }
- });
- }
- })</span>
最后的效果图如下
转载于:https://www.cnblogs.com/bainiu/p/7833424.html
微信小程序 加载 HTML 标签相关推荐
- HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法 发布时间:2020-12-31 11:01:19 来源:亿速云 阅读:126 作者:小新 这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
- php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
- 微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
- 微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容 一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
- 微信小程序加载百度地图
1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...
- 有效解决微信小程序加载视频[渲染层网络层错误] Failed to load media
问题1,小程序的视频一般都是放在网络上的,没谁能把视频放本地把,所以在小程序视频插件在加载视频的时候,就会出现如下错误:[渲染层网络层错误] Failed to load media wxml加载视频 ...
- 微信小程序 加载中 动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
- 微信小程序加载本地图片方法
目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片. 步骤一:微信开发工具 打开项目 步骤二:新建个文件夹(放项目的一 ...
- 微信小程序加载第三方字体
1.加载本地字体 做小程序项目时,有时为了提升页面展示效果,会引入一些第三方字体,引入方式如下代码片段 /*每个页面公共css */ @font-face {font-family: "al ...
最新文章
- Silverlight OA源代码(Silverlight4+SQLServer2005)
- ios数组基本用法和排序
- kafka集群的搭建
- java序列化kr_序列化专用列表
- python dataframe索引转成列_Pandas之DataFrame对象的列和索引之间的转化
- pybamm库学习-tutorial
- PHP 抽象工厂模式(Kit模式)
- 关于“绞刑架和职业发展”问题带来的思考
- 安卓网页离线保存_Android之 -WebView实现离线缓存阅读
- matlab中如何调用lm算法,lm算法的matlab实现
- 最新四端同步苹果cms影视影视源码
- SpringBoot整合JPA(六)
- 如何缩小png图片大小kb?如何让png图片变小?
- JAVAGUI设计步骤
- 用友u8服务器修改ipv4,如何修改用友服务器ip地址
- 蔡康永的说话之道2-笔记
- HHKB 键盘 配置Mac 的 command 和 切换输入法
- epub转pdf网站推荐
- 亲密关系的本质是分享:如何把握暧昧的窗口期?
- 高等数学学习笔记——第二十八讲——函数的极值及最优化应用
热门文章
- CVPR 2021 | 大幅涨点!新型动态激活函数和轻量级网络TFNet
- 解决string字符串关于copy函数的C4996错误
- 带你自学Python系列(十三):Python函数的用法(三)
- windows下使用word2vec训练维基百科中文语料全攻略!(三
- TF使用例子-情感分类
- 关于国土空间规划的价值的一些思考
- linux gfs原理,Linux GFS 配置方法及注意事项
- mysql 查询视图是否存在_sql server判断数据库、表、列、视图是否存在
- php与mysql实例教程_mysql实例与连接
- session和cookie的区别和联系