小程序富文本图片预览

最新推荐文章于 2023-10-20 16:18:47 发布

qq_43253238

最新推荐文章于 2023-10-20 16:18:47 发布

阅读量105

点赞数

文章标签：小程序 javascript

本文链接：https://blog.csdn.net/qq_43253238/article/details/132170965

版权

原生平台

npm 方式
1. 在项目目录下安装组件包
```
npm install mp-html
```
2. 开发者工具中勾选 使用 npm 模块（若没有此选项则不需要）并点击 工具 - 构建 npm
3. 在需要使用页面的 json 文件中添加
```
{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}
```
4. 在需要使用页面的 wxml 文件中添加
```
<mp-html content="{{html}}" />
```
5. 在需要使用页面的 js 文件中添加
```
Page({
  onLoad () {
    this.setData({
      html: '<div>Hello World!</div>'
    })
  }
})
```
源码方式
1. 将源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html
2. 在需要使用页面的 json 文件中添加
```
{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}
```
后续步骤同上

查看快速开始了解更多

uni-app

源码方式

将源码中 dist/uni-app 内的内容拷贝到项目根目录下
可以直接通过插件市场引入

在需要使用页面的 vue 文件中添加

<template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
  import mpHtml from '@/components/mp-html/mp-html'
  export default {
    // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
    components: {
      mpHtml
    },
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>

npm 方式

在项目目录下安装组件包
```
npm install mp-html
```

在需要使用页面的 vue 文件中添加

<template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
  import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
  export default {
    // 不可省略
    components: {
      mpHtml
    },
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>

使用 cli 方式运行的项目，通过 npm 方式引入时，需要在 vue.config.js 中配置 transpileDependencies，详情可见 #330
如果在 nvue 中使用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下，否则无法运行