mp-html
小程序富文本组件
news
- 欢迎加入 QQ 交流群:699734691
- 示例小程序添加获取组件包功能
功能介绍
- 支持在多个平台使用
- 支持丰富的标签(包括 table、video、svg 等)
- 支持丰富的事件效果(自动预览图片、链接处理等)
- 支持锚点跳转、长按复制等丰富功能
- 支持大部分 html 实体
- 丰富的插件(关键词搜索、内容编辑等)
- 效率高、容错性强且轻量化
使用方法
1. npm 方式
在项目根目录下执行
npm install mp-html
开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm
在需要使用页面的 json 文件中添加
{
"usingComponents": {
"mp-html": "mp-html"
}
}
在需要使用页面的 wxml 文件中添加
<mp-html content="{{html}}" />
在需要使用页面的 js 文件中添加
Page({
onLoad() {
this.setData({
html: 'Hello World!'
})
}
})
2. 源码方式
将源码中的代码包(dist/mp-weixin)拷贝到 components 目录下,更名为 mp-html
在需要使用页面的 json 文件中添加
{
"usingComponents": {
"mp-html": "/components/mp-html/index"
}
}
后续步骤同上
获取
github 链接:https://github.com/jin-yufeng/mp-html
求教下 span标签解析之后能添加点击事件吗
使用这个组件在安卓真机测试好使,在苹果手机不好使视频音频无法播放
这个在当前view不显示的情况下获取到的boundingClientRect数据高度有误
https://developers.weixin.qq.com/s/I0efKFmr7si5
我将view的left改成了100%,boundingClientRect的height值发生了变化
太棒了, 解决了我的大问题
支持在cover-view里面显示吗?
现在画在webgl-canvas上只能用cover-view
selectable 设置为true了 为啥之前可以复制,突然又不能复制了
请问a标签是不是只能填小程序内不在tabBar上的页面,是不是只会用navigateto这种,不会用switchtab
这个属性在真机上调试 不兼容 text-align: justify;
<jyf-parser :html="resume"></jyf-parser>
</view>
</van-tab>
<van-tab title="公司介绍">
<view class="wrod">
<jyf-parser :html="company"></jyf-parser>
</view>
</van-tab>
<van-tab title="热销商品"> </van-tab>
</van-tabs>
</view>
</view>
</template>
<script>
import parser from "components/jyf-parser/jyf-parser";
export default {
components: {
"jyf-parser": parser
},
data() {
return {
active: 0,
resume:
"<p>尤雨溪是Vue.js框架的作者,HTML5版Clear的打造人。他认为,未来App的趋势是轻量化和细化,能解决问题的应用就是好应用。而在移动互联网时代大的背景下,个人开发者的机遇在门槛低,成本低,跨设备和多平台四个方面。</p><p>在美中国学生尤雨溪(Evan You)两天打造HTML5版的Clear Clear是一款极具创意的、摆脱了任何形式的按钮的束缚的任务管理应用。和Any.do相比,Clear不仅有着更优秀的UI设计,而且还有比Any.do多得多的手势操作方式。Clear不但可以拖拽任务、滑动完成任务,同时还可以通过两个手指操作上下级界面、向左滑动删除任务、中间添加任务等。几乎所有的操作都可以通过滑动完成,让用户无需一个一个的点击,减少了点击数,也让用户做事更有效率。</p><p>Clear正式推出的第一天就在App Store排行榜(付费榜和总榜)窜升至第二,成为了苹果App Store本周最佳应用软件。而在美中国学生尤雨溪(Evan You)则花了两天时间,打造了一个HTML5版的Clear,几乎完整实现了Clear的所有功能,并放出了源代码。</p><p>尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,现任职于纽约Google Creative Lab。</p>",
company:
"<p>阿里云创立于2009年,是全球领先的云计算及人工智能科技公司,致力于以在线公共服务的方式,提供安全、可靠的计算和数据处理能力,让计算和人工智能成为普惠科技。</p><p>阿里云服务着制造、金融、政务、交通、医疗、电信、能源等众多领域的领军企业,包括中国联通、12306、中石化、中石油、飞利浦、华大基因等大型企业客户,以及微博、知乎、锤子科技等明星互联网公司。在天猫双11全球狂欢节、12306春运购票等极富挑战的应用场景中,阿里云保持着良好的运行纪录。</p><p>阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。</p>"
};
},
methods: {
onChange(event) {
wx.showToast({
title: `切换到标签 ${event.detail.title}`,
icon: "none"
.wrod {
padding: 20rpx 0;
p {
color: $uni-word-color;
white-space: pre-wrap;
text-indent: 2em;
font-size: $uni-font-size-base;
text-align: justify;
width: 100%;
}
}
支持文字复制吗?
发布上去,图片点击无法查看大图