小程序中页面兼容h5标签的解析
有时候当小程序向后台拿数据是一篇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标签的解析的更多相关文章
- 小程序中嵌套的h5页面设置分享转发
场景描述:当在小程序中打开h5页面时,希望小程序的转发出去的标题,图片,跳转link可以通过h5通信实现自定义. 实现方式:通过h5给小程序通信,发送标题,图片,跳转link等信息,让小程序设置分享. ...
- 小程序中使用、H5、uniapp下使用阿里巴巴iconfront图标或者新增图标
第一步:登录iconfont的账号,创建项目. 第二步:选择自己需要的图标,并添加入库(就是那个购物车的图标). 第三步:将选好的图片添加到项目.(点击上图中右上角的购物车图标). 第四步:下载资源到 ...
- 一招解决微信小程序中的H5缓存问题
一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...
- 微信小程序中使用全局变量解决页面的传值问题
由于项目需要,最近便在做 一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变量和本地存储这两种方法,在这个项目中我采用的 ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 小程序中webview内嵌h5页面
小程序内嵌h5页面跳转小程序指定页面, 需要引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...
- 小程序中的web-view与h5网页之间的交互
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
- 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法
在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...
随机推荐
- 实战build-react(二)-------引入Ant Design
安装 Ant Design npm install antd --save 或 yarn add antd 注释:https://www.jianshu.com/p/21caf40ee93e(cop ...
- Spring Cloud架构教程 (二)Hystrix监控数据聚合
上一篇我们介绍了使用Hystrix Dashboard来展示Hystrix用于熔断的各项度量指标.通过Hystrix Dashboard,我们可以方便的查看服务实例的综合情况,比如:服务调用次数.服务 ...
- 5-1 Django的路由层(urlconf)
URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于客户端发来的某个URL调用哪一段逻辑代码 ...
- Loading class `com.mysql.jdbc.Driver'. This is deprecated警告处理,jdbc更新处
1.报错信息是这样的; 处理:提示信息表明数据库驱动com.mysql.jdbc.Driver'已经被弃用了.应当使用新的驱动com.mysql.cj.jdbc.Driver' 所以,按照提示更改jd ...
- jQuery file upload上传图片的流程
先触发_onChange[jquery.fileupload.js] _onChange: function (e) { var that = this, data = { fileInput: $( ...
- python - Tkinter 模块 - python 自带的gui模块
Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口,位Python的内置模块,直接import tkinter即可使用. 1.创建窗口 from Tk ...
- 【flask_sqlalchemy】动态CURD类
环境: flask_sqlalchemy mysql from app import db class Curd(object): def __init__(self,modelName): self ...
- Python Module_os_操作系统
目录 目录 前言 软件环境 os模块内建属性 osname 获取执行平台的类型 oslinesep 输出当前平台使用的行终止符 ossep 输出操作系统特定的路径分隔符 ospathsep 输出用于分 ...
- 阶段3 1.Mybatis_12.Mybatis注解开发_3 mybatis注解开发保存和更新功能
使用直接来实现CRUD操作 Insert方法 创建测试类 把变量都定义在外面 写测试方法 修改链接的数据库 update方法 再加上address 被更新的数据
- App测试工具选择
一.功能测试自动化 a) 轻量接口自动化测试: jmeter, b) APP UI层面的自动化 android:UI Automator Viewer,Android Junit,Instrument ...