有时候当小程序向后台拿数据是一篇html标签的文章时,把它放进小程序会发现很多标签就不兼容,如果要一个个改又很麻烦,有没有方法可以很快地兼容html标签呢? 
有个工具可以做到:wxParse 

下载了它的压缩包后解压,复制wxParse文件夹放到小程序pages页面里: 

在wxml里引入,这里的路径仅供参考:

1
2
3
<import src="../../../../wxParse/wxParse.wxml" />//在需要放置html文本的地方使用wxParse组件 <view class='article_bd'>
    <template is="wxParse" data="{{wxParseData:content.nodes}}" />
  </view>

在js里引入:

1
2
3
4
5
6
7
8
9
10
11
let wxparse = require("../../../../wxParse/wxParse.js");
Page({  /**
   * 页面的初始数据
   */
  data: {
      content: ''
  },
   onLoad: function(options) {     var that = this;
     .....     //在后台拿到content数据后, result.data.content就是拿到的数据
      wxparse.wxParse('content', 'html', result.data.content, that);
   }

在wxss引入:

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

 

小程序中页面兼容h5标签的解析的更多相关文章

  1. 小程序中嵌套的h5页面设置分享转发

    场景描述:当在小程序中打开h5页面时,希望小程序的转发出去的标题,图片,跳转link可以通过h5通信实现自定义. 实现方式:通过h5给小程序通信,发送标题,图片,跳转link等信息,让小程序设置分享. ...

  2. 小程序中使用、H5、uniapp下使用阿里巴巴iconfront图标或者新增图标

    第一步:登录iconfont的账号,创建项目. 第二步:选择自己需要的图标,并添加入库(就是那个购物车的图标). 第三步:将选好的图片添加到项目.(点击上图中右上角的购物车图标). 第四步:下载资源到 ...

  3. 一招解决微信小程序中的H5缓存问题

    一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...

  4. 微信小程序中使用全局变量解决页面的传值问题

    由于项目需要,最近便在做 一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变量和本地存储这两种方法,在这个项目中我采用的 ...

  5. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  6. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  7. 小程序中的web-view与h5网页之间的交互

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...

  8. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  9. 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

随机推荐

  1. oracle调整链接数

    50用户以下:8GB 混用,oracle 占据1GB~3GB内存,open_cursors:300,processes:10050-100用户:16GB 混用,oracle 占据3~4GB内存,ope ...

  2. maven 配置私服 连接

    两种方法: 1.在单个项目的pom.xml中使用 私服的连接地址,这样只对该项目起作用. 2.在maven的setting.xml配置中添加私服的连接地址.这样对所有项目起作用. 本文章只演示第二种方 ...

  3. 前端面试题-CSS选择器

    一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...

  4. wxs 及 获取节点 和 网络请求

    wxs:微信小程序脚本语言,结合 wxml 可以构建页面的结构 在 wxml 中使用 wxs wxs 中的注释 : 单行注释:// 多行注释:/* */ wxs 在页面中的用法 在页面中引用 wxs ...

  5. java jar 服务自启动存在的坑及解决办法

    为了在服务器重启的时候,java程序能够自动重启,我们通常把它加到服务里面 ln -s /full/path/to/jar /etc/init.d/service_name # start servi ...

  6. HAProxy & Keepalived L4-L7 高可用负载均衡解决方案

    目录 文章目录 目录 HAProxy 负载均衡器 应用特性 性能优势 会话保持 健康检查 配置文件 负载均衡策略 ACL 规则 Web 监控平台 Keepalived 虚拟路由器 核心组件 VRRP ...

  7. 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_02.三层架构和ssm框架的对应关系

  8. 【奇技淫巧】linux 定时任务 crontab 反弹 shell

    日期:2018-11-26 13:47:34 介绍:如何使用定时任务来反弹 shell? 0x01. 基本命令 参数 -e:编辑该用户的计时器设置: -l:列出该用户的计时器设置: -r:删除该用户的 ...

  9. 网易云课堂_C++程序设计入门(下)_第7单元:出入虽同趣,所向各有宜 – 文件输入和输出_第7单元 - 作业2:编程互评

    第7单元 - 作业2:编程互评 查看帮助 返回   提交作业(剩余10天) 完成并提交作业     作业批改 互评训练   互评作业   自评作业     成绩公布 查看成绩   由于在线编程不支持 ...

  10. Spring MVC的RequestContextHolder使用误区

    JShop简介:jshop是一套使用Java语言开发的B2C网店系统,致力于为个人和中小企业提供免费.好用的网店系统. 项目主页:http://git.oschina.net/dinguangx/js ...