微信小程序开发富文本插件wxParse的使用(富文本转化为view文本内容,多用于用户协议)
程序员文章站
2022-06-22 16:47:06
需求:申请成为分销商后,阅读同意 分销申请协议 后 需要跳转到 协议页面思路:从后台接口获取富文本协议内容,在申请分销商页面设置异步缓存,然后在协议页面读取缓存,引入富文本协议转化为html的插件,读取出来,关键是插件的引入这里我会在上次资源里面传入我引入的插件部分,页面编写很简单,上代码一、上面图片代码是申请分销商的页面,是图片1/**下面是申请分销商的html*/
需求:申请成为分销商后,阅读同意 分销申请协议 后 需要跳转到 协议页面
思路:从后台接口获取富文本协议内容,在申请分销商页面设置异步缓存,然后在协议页面读取缓存,引入富文本协议转化为html的插件,读取出来,关键是插件的引入
这里我会在上次资源里面传入我引入的插件部分,页面编写很简单,上代码
一、
上面图片代码是申请分销商的页面,是图片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
上一篇: 用法查询笔记(2)