小程序插入html代码
一、首先,html 分 2 种情况:
1、我在做详情页开发的时候发现获取到的数据是 转译后的 html字符串,如下图:
这种 转译后的 html字符串,左括号、右括号、&符号等都被转译了,这种代码,使用下文中的 wxParse 可直接插入。
而如果使用 rich-text,则需要先转译成正常 html 代码,再插入才能成功(这种方法我用以下链接中的内容中包含了例子,确实可行)。
(反转译方法在我另一篇博客里面:转译html链接)
我使用该反转译方法确实可以将 html转译字符串 转译为正常 html代码,这是经过测试的,,但是我自己项目中获得的大段详情页的 html转译字符串 在经以上代码翻译后再放入 rich-text 中却不能显示出来,目前原因尚未清楚,如有同行大神知道个中蹊跷,忘留言指教,我将在此再次更新。
2、获得的是正常 html 代码,如下图:
二、插入 html 代码的 3 种方法:
1、使用组件 web-view:(这种方法只能插入完整网页)
2、使用组件 rich-text:
官方链接:点击打开链接
js 页面:
// 插入正常 html 代码
var article = '<div style="text-align:center;">《静夜思》· 李白<br />床前明月光,<br />疑是地上霜。 <br />举头望明月, <br />低头思故乡。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br /></div>';
that.setData({ detailInfo: article });// 插入 html 转译字符串
var html = '<div><p>第一行</p><p>第二行</p></div>';
var newHtml = this.htmlEscapt(html);
this.setData({ detailInfo: newHtml });
htmlEscape: function(html){var reg = /(<)|(>)|(&)|(")/g;return html.replace(reg,function(match){switch(match){case "<":return "<";case ">":return ">"case "&":return "&";case """:return "\""}});
}
wxml 页面:
<rich-text nodes="{{detailInfo}}"></rich-text>
3、使用 wxParse:点击打开链接(wxParse使用详解)
wxParse下载链接:点击打开链接
在此声明一点,使用这个方法,不管下文中的 article 是正常 html 代码,还是 html 转译字符串,都可直接使用。
此外,我在项目中遇到的是将大段的 html 转译字符串 转译为小程序可识别内容,用的就是 wxParse,,只是在项目中遇到了几个问题,如果你也有遇到,请点击以下链接:点击打开链接
实例:
wxss 页面:
@import "/templates/wxParse/wxParse.wxss";
js 页面:
var WxParse = require('../../../templates/wxParse/wxParse.js');
Page({data: { },onLoad: function (options) {// var atricle = '<div><p>第一行</p><p>第二行</p></div>';var article = '<div style="text-align:center;">《静夜思》· 李白<br />床前明月光,<br />疑是地上霜。 <br />举头望明月, <br />低头思故乡。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br /></div>';WxParse.wxParse('article', 'html', article, that, 5); },
})
wxml 页面:
<import src="../../../templates/wxParse/wxParse.wxml"/>
<view><template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
小程序插入html代码相关推荐
- 微信小程序插入个性化地图
1 问题 如何在微信小程序中插入个性化地图. 2 方法 进入腾讯地址服务官网 控制台 -> 个性化地图 -> 个性化样式 -> 样式选择 选择自己喜欢的样式并输入自己的小 ...
- python基础代码事例-Python简单基础小程序的实例代码
1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i, ...
- python程序实例教程基础-Python简单基础小程序的实例代码
1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i, ...
- python经典程序实例-Python简单基础小程序的实例代码
1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i, ...
- python简单程序实例-Python简单基础小程序的实例代码
1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i, ...
- java基础代码实例_全网都在找的Python简单基础小程序的实例代码
这篇文章主要介绍了Python简单基础小程序的实例代码,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下. 1 九九乘法表 3 4 5 6 7for i in range(9):#从0循环到8 ...
- 微信小程序星星评分代码片段(含半星)
微信小程序星星评分代码片段(含半星) 代码思路 完整代码 代码片段 图片资源 写代码时需要一个点击星星评分的功能 安卓直接用RatingBar非常轻松的解决了 到了小程序,没有现成的封装方法可以用了, ...
- 移动APP和小程序的低代码开发平台有哪些
市场上的小程序低代码开发平台很多,包括:有赞云.uni-app.云程.知晓云.意派Coolsite360.jeecg-uniapp.unimall小程序.微盟云.微尘.牛刀云.应用公园.叮当.即速应用 ...
- 小程序,解决代码同步执行问题
在做小程序的时候,是不是经常遇到这两种同步问题: 1.使用for循环,一个循环里面的操作还没结束,下一个循环就已经开始了.如果循环之间没有互相依赖,问题应该还不大,但是如果下一个循环的开始依赖于上一个 ...
- 还不错的全民采矿小程序源码+代码已开源
正文: 还不错的全民采矿小程序源码+代码已开源,可配合流量主和激励视频,程序是单开版的,一个站点只能单个平台使用此应用,一个小程序使用此应用. 下方图片是小程序工具介绍: 下方是程序介绍: 程序: l ...
最新文章
- 精选实践 | 爱奇艺实用数据库选型树:不同场景如何快速选择数据库?
- I/O模型之一:Unix的五种I/O模型
- linux 其他常用命令
- iptables的基础知识-iptables中的状态检测
- python挖长尾词 源码,如何用代码挖局长尾关键词
- rs485编程java_串行编程RS485
- 华为鸿蒙编程:如何显示网络图片
- 汇编语言 利用栈 将数据逆序存放
- java编写正则表达式_如何用Java编写最快的表达式评估器之一
- kafka部分重要参数配置-broker端参数
- 计算机二级 java和web_2020年全国计算机二级WEB程序复习知识点:JavaBean
- ES6-set集合应用
- C#实现超长位整数运算
- mysql创建外键失败_mysql创建外键错误
- GLSL Core Tutorial – Pipeline (OpenGL 3.2 – OpenGL 4.2)
- 【第十届“泰迪杯”数据挖掘挑战赛】C题:疫情背景下的周边游需求图谱分析 赛后总结、46页论文及代码
- Python绘制计算机CPU占有率变化的折线图
- java工具类书写规范
- 最新 2022高露洁AI面试真题题库
- FZU 1968 Twinkling lights III
热门文章
- kubernetes核心组件的运行机制
- 泰牛php第10期百度云,泰牛程序员 韩顺平 2017年 MyBatis
- 【转】将 azw3 格式转换为 mobi 格式并保持原有排版格式
- php 开发一元夺宝插件,yiyuanyungou 一元云购商城源码,商用 ci框架开发,带指定中奖插件 Other systems 其他 249万源代码下载- www.pudn.com...
- Microsemi Libero使用技巧3——使用FlashPro单独下载程序
- java网络编程实现聊天小程序
- 用python算股票月涨幅_「」股票产品 python-如何选取过去每个月股票的市值 python-TOP金融网...
- SAP FICO财务模块FI财务CO成本视频教学教程(基础+进阶+高级篇)
- 威纶通定时循环操作宏_武器化excel4.0宏演化过程
- Mac 设置终端命令快捷方式