小程序实现vue的v-html指令（仿微信搜索）

最新推荐文章于 2024-08-23 13:15:00 发布

竹叶轻拂水

最新推荐文章于 2024-08-23 13:15:00 发布

阅读量5.9k

点赞数 1

分类专栏：笔记项目文章标签：小程序

本文链接：https://blog.csdn.net/cbb_2313/article/details/103069960

版权

小程序自己的<rich-text>组件：
组件的nodes属性就是要渲染的html格式的字符串，因为是渲染html格式，并不是小程序格式，所以该组件不识别<text></text>一类的标签，支持标签中含有class和style，但是不支持id属性，具体支持哪些标签，可以参考文档-微信文档
案例仿照了一个微信搜索的功能，用到了<rich-text>组件，具体如下：
在这里插入图片描述

      <!-- 弹性盒子布局 -->
      <view class="flex_box">
        <!-- 名字 -->
        <view class="name_box

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

竹叶轻拂水

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序-微信小程序渲染html

08-06

wx-mina-html-view 微信小程序渲染html 支持的特性: 大部分的普通HTML标签(未全部测试) , <video>, <audio> , , , 等表格标签标签转`` HTML entities 七牛图片裁剪自定义插件不支持<form>, ,等表单元素. 使用方法请参考pages/index目录里的文件. 拷贝html-view目录到你的项目. 在页面的js/wxml/wxss中, 引入代码: index.js // 引入HtmlParser const HtmlParser = require('../../html-view/index') // ... // 解析HTML字符串 const html = new HtmlParser('hello world').nodes this.setData({ html }) index.wxml index.wxss @import "../../html-view/index.wxss"; API new HtmlParse

飞机大战-vue-微信小程序

06-12

总结来说，"飞机大战-vue-微信小程序"项目结合了Vue.js的现代Web开发技术和微信小程序的移动端优势，实现了在微信环境中流畅运行的游戏体验。开发者通过掌握Vue.js的组件化、数据绑定等特性以及微信小程序的API和...

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序中关于HTML的解析

weixin_31182871的博客

08-06

334

最近在研究微信小程序接入数据时，遇到了一个小问题，就是获取到的数据里有html标签，然后怎么把它转化为微信小程序结构wxml的。在vue中遇到类似的问题，可以直接使用它的内置属性：v-html。但是在微信小程序中就需使用插件：WxParse和Towxml。接下来，说一下这两个插件的用法。WxParse首先要下载WxPa...

微信小程序wxml与标准的html的异同

热门推荐

Xpy 的博客

05-20

2万+

一、微信小程序需求，有一段富文本字符串需要解析并展示在页面上；结构如下：content 二、解决办法一、用过vue 的都知道vue 有个 v-html 属性，可以准换html格式并且展示；但是微信小程序提供的方法是一个新的标签【基础内容 /rich-text】；使用方法很简单： <view> <rich-text nodes="{{content}}"></rich-text> </view> 二、属性只有两个属性类型默认值必

微信小程序使用wxParse将字符串转成html(实现v-html)

zhang1339435196的博客

11-12

1421

适用于从后台请求过来的字符串为html标签形式，并想让它渲染到我们的微信小程序中。点点我

小程序插入html代码（类似vue中的v-html）

a1057267039的博客

10-31

2007

使用wxParse插件 1、下载wxParse（链接：https://github.com/icindy/wxParse） 2、wxParse文件夹放入小程序根目录 3、引入css样式 @import “/wxParse/wxParse.wxss”; 4、引入js代码 var WxParse = require(’…/…/wxParse/wxParse.js’); 5、var content= ‘HTML代码’; var _this= this; WxParse.wxParse('co

vue自定v-model实现表单数据双向绑定问题

10-18

在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新能够即时反映到用户界面上。在传统的`v-model`使用中，我们通常直接在表单...

基于vue框架的网红店打卡微信小程序源码.zip

05-20

综上所述，这个压缩包提供的源码是一个使用Vue.js框架和mpvue工具开发的微信小程序，旨在实现网红店打卡的功能。开发者可以研究源码来学习如何在微信小程序中利用Vue.js的特性进行开发，同时也可以了解如何构建一个...

在微信小程序中渲染HTML内容3种解决方案及分析与问题解决

11-30

大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序（下文简称为「小程序」）中，应当如何渲染这部分内容呢？在微信小程序中渲染HTML内容的3种解决方案 wxParse 小程序刚上线那会儿，是无法直接渲染HTML内容的，于是就诞生了一个叫做「wxParse」的库。它的原理就是把HTML代码解析成树结构的数据，再通过小程序的模板把该数据渲染出来。 rich-text 后来，小程序增加了「rich-text」组件用于展示富文本内容。然而，这个组件存在一个极大的限制：组件内屏蔽了所有节点的事件。也就是说，在该组件内，连「预览

简单的html小程序

06-12

一个简单的html小程序，用到了框架，模板

微信小程序-将html文件转为微信小程序用的wxml文件

08-05

html2wxml 将html文件转为微信小程序使用的文件转化规则将以下标签转化为view body,article,aside,ul,li,ol,caption,dd,dl,dt,footer,header,nav,section,table,thead,tbody,tr,td,th,h1,h2,h3,h4,h5,h6,div,p 将img转化为image 将a转化为navigator 将span,s,b,i,strong转化为text 安装使用下载安装成功后，将需要处理的html文件拖拽到工具界面即可自动转化，并将文件文件名后缀改为wxml，生成到与当前目录同级的wxml文件夹界面预览下载暂时支持mac版 mac版

微信小程序富文本内容渲染，如何使用rich-text，微信小程序如何实现v-html效果

sanshenggiao的博客

04-11

708

微信小程序如何实现v-html效果

uniapp使用v-html微信小程序（rich-text）不显示

weixin_52256715的博客

08-06

700

uniapp使用v-html微信小程序（rich-text）不显示

微信小程序类似v-html标签解析，关键字高亮

abc516835137的博客

08-26

1219

搜索文字替换，让关键字高亮，replace为替换,"g"为全局搜索,类似于v-html标签

微信小程序类似v-html,web开发中有类似微信小程序template吗

weixin_36078604的博客

06-04

546

内嵌网页中可使用JSSDK 1.3.0提供的接口，可坑就来了，居然不支持支付接口的调用，经过一番研究，总算打通了两边的交互。大概流程1、先说明涉及到的文件，下面会用到1.1 app.js:小程序的app.js文件,在globalData里定义一个全局变量paySuccessUrl: '',用来保存支付成功跳转url1.2 wxminiwebview.js:小程序中放web-view的界面 1.3 ...

微信小程序类似v-html,微信小程序如何像vue一样在动态绑定类名

weixin_36047538的博客

06-04

506

小程序 开发中遇到这样一个问题...排行榜开发的时候，前三名的样式不同，其余的样式一样。但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api，一下子就做出来了。就是不同名次上边的样式根据实际情况展示效果。模块化我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外...