小程序插入html代码

article/2025/9/19 0:52:32

一、首先,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 = '&lt;div&gt;&lt;p&gt;第一行&lt;/p&gt;&lt;p&gt;第二行&lt;/p&gt;&lt;/div&gt;';
var newHtml = this.htmlEscapt(html);
this.setData({ detailInfo: newHtml });
htmlEscape: function(html){var reg = /(&lt;)|(&gt;)|(&amp;)|(&quot;)/g;return html.replace(reg,function(match){switch(match){case "&lt;":return "<";case "&gt;":return ">"case "&amp;":return "&";case "&quot;":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 = '&lt;div&gt;&lt;p&gt;第一行&lt;/p&gt;&lt;p&gt;第二行&lt;/p&gt;&lt;/div&gt;';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>

 


http://chatgpt.dhexx.cn/article/dLKryec8.shtml

相关文章

获取小程序源代码

获取小程序源代码 1、安装夜神模拟器2、安装微信和QQ3、安装 ER管理器4、发送到QQ5、使用反编译脚本解包 wxapkg 方法&#xff1a;运用模拟器&#xff0c;在电脑上运行微信和小程序&#xff0c;从而获取小程序的wxapkg包&#xff0c;再用反编译器就可以获取到源码了 1、安装夜神…

java高并发秒杀活动的各种简单实现

最近遇到比较多数据不一致的问题&#xff0c;大多数都是因为并发请求时&#xff0c;没及时处理的原因&#xff0c;故用一个比较有代表性的业务场景【活动秒杀】来模拟一下这个这种高并发所产生的问题。 众所周知&#xff0c;电商系统的秒杀活动是高并发的很好应用场景&#xff…

Java 高并发解决方案(电商的秒杀和抢购)

电商的秒杀和抢购&#xff0c;对我们来说&#xff0c;都不是一个陌生的东西。然而&#xff0c;从技术的角度来说&#xff0c;这对于Web系统是一个巨大的考验。当一个Web系统&#xff0c;在一秒钟内收到数以万计甚至更多请求时&#xff0c;系统的优化和稳定至关重要。这次我们会…

【转存】java高并发解决方案

知识点 线程安全&#xff0c;线程封闭&#xff0c;线程调度&#xff0c;同步容器&#xff0c;并发容器&#xff0c;AQS&#xff0c;J.U.C&#xff0c;等等 高并发解决思路与手段 扩容&#xff1a;水平扩容、垂直扩容 缓存&#xff1a;Redis、Memcache、GuavaCache等 队列&…

Java 高并发编程详解:多线程与架构设计

内容简介 本书主要包含四个部分&#xff1a; 部分主要阐述 Thread 的基础知识&#xff0c;详细介绍线程的 API 使用、线程安全、线程间数据通信&#xff0c;以及如何保护共享资源等内容&#xff0c;它是深入学习多线程内容的基础。 第二部分引入了 ClassLoader&#xff0c;这…

Java高并发之Redis批量提交数据库

随着系统并发请求激增&#xff0c;参考电商秒杀、当下集中核酸采取等业务场景&#xff0c;如果突然大量数据请求业务系统。此时如果没有做任何缓存措施&#xff0c;直接保存数据库&#xff0c;即使你的数据库做了集群和分库分表&#xff0c;也会由于扛不住并发压力崩溃的。基于…

Java高并发累加器Striped64

原子类 在多线程环境下&#xff0c;常用累加操作方式是使用原子类进行累加&#xff0c;例如AtomicInteger、AtomicLong。但是使用原子类在多线程高竞争的情况下&#xff0c;CAS会经常失败&#xff0c;并发效率会大大降低。 因为CAS操作失败后要自旋再次进行替换&#xff0c;这…

Java高并发编程实战8,同步容器与并发容器

目录 一、为什么这种方式不能实现线程安全性?二、组合三、同步容器类四、隐藏迭代器五、并发容器六、ConcurrentHashMap一、为什么这种方式不能实现线程安全性? 分析一段代码: package com.guor.util;import java.util.

Java高并发项目案例,Java开发指南

一、前言 最近刚读完一本书&#xff1a;《Netty、Zookeeper、Redis 并发实战》&#xff0c;个人觉得 Netty 部分是写得很不错的&#xff0c;读完之后又对 Netty 进行了一波很好的复习&#xff08;之前用 spring boot netty zookeeper 模仿 dubbo 做 rpc 框架&#xff0c;那时…

Java高并发三部曲

疯狂创客圈为小伙伴奉上以下珍贵的学习资源&#xff1a; 疯狂创客圈 经典极品 &#xff1a; 极致经典《 Java 高并发 三部曲 》 面试必备 大厂必备 涨薪必备 疯狂创客圈 经典图书 &#xff1a; 《Netty Zookeeper Redis 高并发实战》 面试必备 大厂必备 涨薪必备 免费领 …

java队列处理高并发_Java高并发--消息队列

Java高并发--消息队列 举个例子&#xff1a;在购物商城下单后&#xff0c;希望购买者能收到短信或者邮件通知。有一种做法时在下单逻辑执行后调用短信发送的API&#xff0c;如果此时服务器响应较慢、短信客户端出现问题等诸多原因购买者不能正常收到短信&#xff0c;那么此时是…

Java如何解决高并发的问题? 可以试试这些方法

大家好&#xff0c;我是小武&#xff0c;一个工作10年的程序员&#xff0c;就职于鹅厂&#xff0c;平时喜欢搞搞副业。 在工作中&#xff0c;我们经常会遇到高并发的问题&#xff0c;这个是很常见的&#xff0c;只要用户访问量一多的情况下&#xff0c;那么我们的网站就会变慢&…

单例模式的五种写法

设计模式&#xff08;Design pattern&#xff09;&#xff0c;提供了在软件开发过程中面临的一些问题的最佳解决方案&#xff0c;是Java开发者必修的一门课程。主要分创建型模式、结构型模式和行为型模式。其中接下来我们要写的是单例模式&#xff0c;属于创建型模式。 单例模式…

JAVA单例模式代码实现

JAVA常见的设计模式之单例模式 懒汉模式 懒汉式是典型的时间换空间&#xff0c;也就是每次获取实例都会进行判断&#xff0c;看是否需要创建实例&#xff0c;浪费判断的时间。当然&#xff0c;如果一直没有人使用的话&#xff0c;那就不会创建实例&#xff0c;则节约内存空间(…

单例模式编写

单例">什么是单例 单例是保证一个内存/进程里只有一个类的实例&#xff0c;并提供一个访问它的全局访问点。 内存/进程中只有一个实例线程安全性能优化防止序列化产生新对象 写一个单例模式 1、饿汉模式 public class Singleton {//饿汉模式private static Single…

设计模式——单例模式八种方式实现与分析(附代码示例)

一. 概念 所谓类的单例设计模式&#xff0c;就是采取一定的方法保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法&#xff08;静态方法&#xff09;。 单例模式保证了系统内存中该类只存在一个对象&#xf…

C++ 单例模式 代码详解

单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是 最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类&#xff0c;该类负责创建自己的对象&#xff0c;同时确保只有单个对象被…

[设计模式] -- 单例模式

Emai : hahayacodergmail.com 背景 最近在公司的项目中&#xff0c;经常会用到单例模式&#xff0c;由于之前没有想过怎么正确使用单例模式&#xff0c;导致写成的程序中有BUG。在学习Cocos2d-x时&#xff0c;导演类CCDirector等都是单例类。所以从头开始学习单例模式。 介绍 …

单例模式介绍

目录 1 前言 2 单例模式类型 2.1 饿汉式&#xff1a; 2.2 懒汉式&#xff1a; 2.2.1 双重检查锁 2.2.2 volatile防止指令重排 2.3 静态内部类 3 破坏单例 1 前言 单例模式是指在内存中有且只会创建一次对象的设计模式&#xff0c;在程序中多次使用同一个对象且作用相同…

单例模式详解(附常见的7种单例模式源码)

单例模式&#xff08;Singleton Pattern&#xff09;:保证一个类仅有一个对象&#xff0c;并提供一个访问它的全局访问点。(Ensure a class only has one instance,and provide a globe point of access to it.) 常见应用场景&#xff1a; Windows的Task Manager&#xff08;…