欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序开发富文本插件wxParse的使用(富文本转化为view文本内容,多用于用户协议)

程序员文章站 2022-06-22 16:47:06
需求:申请成为分销商后,阅读同意 分销申请协议 后 需要跳转到 协议页面思路:从后台接口获取富文本协议内容,在申请分销商页面设置异步缓存,然后在协议页面读取缓存,引入富文本协议转化为html的插件,读取出来,关键是插件的引入这里我会在上次资源里面传入我引入的插件部分,页面编写很简单,上代码一、上面图片代码是申请分销商的页面,是图片1/**下面是申请分销商的html*/

需求:申请成为分销商后,阅读同意 分销申请协议 后 需要跳转到 协议页面

思路:从后台接口获取富文本协议内容,在申请分销商页面设置异步缓存,然后在协议页面读取缓存,引入富文本协议转化为html的插件,读取出来,关键是插件的引入
这里我会在上次资源里面传入我引入的插件部分,页面编写很简单,上代码

一、
微信小程序开发富文本插件wxParse的使用(富文本转化为view文本内容,多用于用户协议)
上面图片代码是申请分销商的页面,是图片1

/**下面是申请分销商的html*/
<checkbox-group class="agreement-check" bindchange="checkboxChange">
        <label> 
        <checkbox  disabled="{{shareInfo.id}}" value="{{checked}}" checked="{{checked}}"></checkbox>
        <text>我已阅读并同意</text> 
         <navigator url="../userAgreement/index" class="color-bule">{{apply.shareApplyAgreement}}</navigator>
         </label>
  </checkbox-group>

    /**js部分 异步设置协议缓存  data 为获取的问吧内容*/
   wx.setStorageSync('shareContent', data)

二、下面是协议的页面代码内容

/**下面是协议的的htm  引入插件,设置文本内容l*/
<import src="/wxParse/wxParse.wxml" />
	<view class='conter'>
			<template is="wxParse" data="{{wxParseData:description.nodes}}" />
		</view>

/** js部分  引入插件 */
import WxParse from '../../wxParse/wxParse.js';
Page({

/** 生命周期函数--监听页面显示  读取缓存,设置到页面
   */
  onShow: function () {
    let html=wx.getStorageSync('shareContent')
    WxParse.wxParse('description', 'html', html, this, 0);

  }
})
/** css 部分  引入 文本css插件
   */
@import "/wxParse/wxParse.wxss";


三、插件部分

https://download.csdn.net/download/angelnotears/12620075

本文地址:https://blog.csdn.net/angelnotears/article/details/107365632