微信小程序中显示HTML格式内容的实例

因为个人注册的开发者不允许在微信小程序中加载网页，因此开发者都遇到过需要将网页中的图文内容完整加载到微信小程序中的情况，如果网页数目较多，逐个编辑wxml代码往往过于麻烦，因此这篇文章将介绍如何借助Bmob云后端的图文素材功能和大神编写的wxParse组件实现网页内容在微信小程序中的快速配置。如果读者有更好的办法，欢迎在下方留言交流。（大神勿喷）

以下部分内容转载自：点击打开链接

准备工作：

首先我们下载wxParse

github地址：https://github.com/icindy/wxParse

本地下载：http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar

wxParse

下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下

下面是具体的使用步骤

1、在app.wxss全局样式文件中，需要引入wxParse的样式表

@import "/page/wxParse/wxParse.wxss";

2、在需要加载html内容的页面对应的js文件里引入wxParse

var WxParse = require('../../wxParse/wxParse.js');

3、通过调用WxParse.wxParse方法来设置html内容

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

Page({data: {},onLoad: function () {var that = this;wx.request({url: '', method: 'POST',data: {'id':13},header: {'content-type': 'application/json'},success: function(res) {var article = res.data[0].post;WxParse.wxParse('article', 'html', article, that,5);}})}
})

4、在页面中引用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

这样就可以在微信小程序中嵌入html内容了

以下为个人使用的实例：

关于如何将图文素材搜集并加入云端数据库

不得不说，借助Bmob的图文素材功能将十分方便。进入Bmob云的素材模块，点击新建素材，输入标题，然后直接复制网页内容（不可太过复杂，最好只包含图文内容），保存后就可以看到，应用文件部分已经自动创建了关于该图文的html格式文件，并且已经在数据库中自动新建了名为_Article的表格，里面包含了该图文html格式的文本，接下来可以根据自己需求手动的去添加其他列，比如标题或者预览图片等。

接下来，在微信小程序只需直接访问Bmob数据库中的_Article就可以根据自己的需求获取相关已存在表内的html格式文本。如果没有Bmob的使用经验，可以参考相关官方文档。（http://doc.bmob.cn/data/wechat_app/develop_doc/#_17）

以下为相关页面的函数代码：

  onLoad:function (e) {var _this = this;//因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法直接通过this来setDatavar Diary = Bmob.Object.extend("_Article");var query = new Bmob.Query(Diary);// 查询所有数据query.find({success: function (results) {console.log("共查询到 " + results.length + " 条记录");// 循环处理查询到的数据_this.setData({jieguo: [],})//初始化，防止出现上一次的数据for (var i = 0; i < results.length; i++) {var object = results[i];var lists = _this.data.jieguo;lists.push(object);//实质是添加lists数组内容，使for循环多一次  _this.setData({jieguo: lists,})}if (results.length == 0) {//空数组的值为?console.log('查询失败');//console.log(Boolean(_this.data.jieguo));wx.showToast({title: '权限不足',})}},error: function (error) {console.log("查询失败: " + error.code + " " + error.message);}});},//获取所有_Article表中的标题、预览文字、图片并以列表形式加载到页面中

代码在使用过程中发现一个问题，借助wx.navigateTo在页面间传值时，html文本无论是以对象形式还是以string形式都只能传递前几行，不知道是不是微信官方为了避免在微信小程序内加载网页内容而添加的限制。最后只能采取页面跳转后重新根据点击标题进行查询获取相关html文本。一下为代码实例：

  back: function (e) {var num = e.currentTarget.idvar model = String(this.data.jieguo[num].attributes.content)//不同于页面渲染中使用，需要加".attributes."如this.data.jieguo[num].attributes.contentconsole.log(model)wx.navigateTo({url: '../xinxi/xinxi?str=' + this.data.testStr,});}//获取用户点击的相关图文的标题，跳转新页面，并将标题传值。

跳转页面的代码：

 data: {jieguo: [],art:"",title:"",},onLoad: function (options) {console.log(options.str);var title = options.str;var _this = this;//因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法直接通过this来setDatavar Diary = Bmob.Object.extend("_Article");//以标题为条件进行查询var query = new Bmob.Query(Diary);query.equalTo("title", title);// 查询所有数据query.first({success: function (object) {console.log("查询成功");console.log(object);_this.setData({title: object.attributes.title}) var article = object.attributes.content;console.log(article);WxParse.wxParse('art', 'html', article, _this, 0);//art为定义的传值对象，html为默认，article为html格式文本数据源，_this为page对象，0为默认值},});},

显示图文素材页面的相关代码

<import src="../../style/wxParse/wxParse.wxml"/>
<view style='font-size:25px;font-weight:500;margin-top:.2em;margin-bottom:.1em;margin-left:.3em;'>{{title}}</view>//文章标题
<view style='margin-left:.3em;margin-right:.15em;'>//自定义的间距
<template is="wxParse" data="{{wxParseData:art.nodes}}"/>//art为之前js文件的传值对象
</view>

以上，html格式就可以直接在微信小程序中显示并大致保持原格式。

微信小程序中显示HTML格式内容的实例相关推荐

微信小程序中显示html格式内容的方法
小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. s1.下载wxparse(链接:https://pan.baidu.com/s/1htm ...
微信小程序中的json格式文件
JSON 是一种数据格式 ,并不是编程语言,在小程序中,JSON扮演的静态配置的角色. 相比于XML ,JSON格式最大的优点是易于人的阅读和编写,通常不需要特殊的工具,就能读懂和修改,是一种轻量级的 ...
uniapp 在 H5、App、微信小程序中使用 svga 格式动画详细示例教程，附插件源码及示例源码（常见于网页直播刷礼物特效功能）
前言兼容 h5 网页,微信小程序和 App. 本文详细讲解在 uni-app项目中,如何实现 svga 格式动画的引入及展示. 组件源码及使用文档都有! 你直接复制本文的源码,即可得到封装好的 s ...
微信小程序实现显示pdf格式的两种方式
本文主要介绍小程序中从后台返回显示pdf文件的两种方法情况一:后台直接给了一个pdf地址使用wx.downloadFile会发起get请求,下载文件资源到本地,wx.openDocument打开 ...
微信小游戏游戏显示html控件,微信小程序中如何渲染html内容（代码示例）
我们的小程序是基于「WePY」框架开发的,而「wxParse」是基于原生的小程序编写的.要想让两者兼容,必须修改「wxParse」的源代码. 「wxParse」只是简单地通过image组件对原img元 ...
微信小程序中显示换行、空格
1.空格,换行 <text>你好!\t七月流火啊!\n我在下一行</text>\t空格(多个只会显示一个空格)\n换行 2.连续空格 <view> <text ...
微信小程序中显示空格
如下: <text decode="{{true}}">书名: </text> 注意: 必须在<text>中表示空格,占中文字符一半的 ...
微信小程序中显示倒计时
wxml文件中: <view class="countDownTimeView countDownAllView" ><view ...
微信小程序中显示使用64位图片
使用image标签,src属性添加data:image/png;base64, <image src="https://img-blog.csdnimg.cn/202201070358 ...
微信小程序中的本地存储
1. 微信小程序中的本地存储:wx.setStorageSync("key","value") - 读取时的key必须与存储时的key相同,才能取出需要的数据. ...

微信小程序中显示HTML格式内容的实例

微信小程序中显示HTML格式内容的实例相关推荐

最新文章

热门文章