微信小程序中显示html格式内容的方法


Posted in Javascript onApril 25, 2017

前言

最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现。

准备工作:

首先我们下载wxParse

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

本地下载:http://xiazai.3water.com/201704/yuanma/wxParse-master(3water.com).rar

微信小程序中显示html格式内容的方法
wxParse

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

微信小程序中显示html格式内容的方法

下面是具体的使用步骤

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内容了

微信小程序中显示html格式内容的方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
JavaScript如何实现元素全排列实例代码
May 14 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 #Javascript
详解Vue 动态添加模板的几种方法
Apr 25 #Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 #Javascript
基于Vue实现timepicker
Apr 25 #Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 #Javascript
详解Angular 4.x 动态创建组件
Apr 25 #Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 #Javascript
You might like
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python中spy++的使用超详细教程
2021/01/29 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
经济信息系毕业生自荐信
2014/06/02 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
三八节活动简报
2015/07/20 职场文书
校园安全主题班会
2015/08/12 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python