钉钉小程序富文本插件aParse

2020-05-22  本文已影响0人  赵伟敏_19

使用插件:aParse

该插件是根据微信小程序的wxParse修改,使用方法基本相同

#### 基本使用方法

(1)复制文件夹:

> 复制文件夹aParse至项目中: component/aParse

(2)引入必要文件:

> 在需要使用的页面中引入aParse组件

    <import src="../../component/aParse/aParse.axml"/>

> 在使用的acss中引入aParse.acss,也可以在app.acss中全局引入

    @import "../../component/aParse/aParse.acss";

(3)数据绑定

> index.js

    var AParse = require('../../component/aParse/aParse.js');

    Page({

      onLoad(query) {

      let article = `

          <h3>

          <span style="color:red">钉钉小程序</span>

          <span style="color:green">富文本解析</span>

          <span style="color:blue">解决方案</span>

          </h3>

      `

        /**

         * 使用说明:

        * AParse.AParse(bindName , type, data, target,imagePadding)

        * 1.bindName绑定的数据名(必填)

        * 2.type可以为html或者md(必填)

        * 3.data为传入的具体数据(必填)

        * 4.target为Page对象,一般为this(必填)

        * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

        */

        let that = this;

        AParse.aParse('article', 'html', article, that, 5);

      }

    });

(4)模板引用:

> 在相应的axml中引入模板,这里的article为bindName

    <import src="../../component/aParse/aParse.axml"/>

    <template is="aParse" data="{{aParseData:article.nodes}}"/>

#####注意事项

下载的aParse的aParse.acss里面有个css(如下图),会导致android的一些view的样式出现滚动条,建议去除

#### 列表循环输出aParse

赋值和显示与上-基本使用方法一致

赋值是稍微注意一下

list.forEach(vo => {

          /**

          * 使用说明:

          * AParse.AParse(bindName , type, data, target,imagePadding)

          * 1.bindName绑定的数据名(必填)

          * 2.type可以为html或者md(必填)

          * 3.data为传入的具体数据(必填)

          * 4.target为Page对象,一般为this(必填)

          * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

          */

          AParse.aParse(`desc.${vo.id}`, 'html', vo.detail, that, 5);

        })

使用AParse.aParse(`desc.${vo.id}`, 'html', vo.detail, that, 5);赋值

查看开发工具的Data,查看当前页面desc值

页面输出标签

<template is="aParse" data="{{aParseData: desc[vo.id].nodes}}"/>

上一篇 下一篇

猜你喜欢

热点阅读