wxvalidate和wxParse的使用

悠悠 2022-05-19 09:45 59阅读 0赞

1. wxParse 是微信小程序用来解析富文本编辑器的内容的

下载地址：[https://github.com/icindy/wxParse][https_github.com_icindy_wxParse]

此处我把，wxParse放入了项目根目录下，也就是跟pages和utils同一个目录：

![70][]

第一步在需要使用 wxParse 的 wxml 中引入 ：var WxParse= require('../../../wxParse/wxParse.js');

第二步在需要使用 wxParse 的 wxss 中引入 ：@import"../../../wxParse/wxParse.wxss";

第三步在需要使用 wxParse 的 js 中引入 ：var WxParse = require('../../wxParse/wxParse.js');

第四步：测试一下

第一点：在wxml中加入代码：<template is="wxParse" data="\{ \{wxParseData:test.nodes\}\}" />

这个代码中的data的值 和 js 中的代码一一对应：

第二点：在 js 中加入如下代码

var test = '<div>我是HTML代码</div>';

var that = this; //为了解决作用域冲突的问题，避免程序不知道this是Page对象的this 还是当前代码所在对象的this，

即：避免this指向不明确的问题。

WxParse.wxParse('test', 'html', test, that, 5);

第一个参数：与wxml中的 template 中的 data 中的 test 相对应，即前后端绑定的数据名

第二个参数：是传入数据的类型

第三个参数：指的是要解析的文本值，也就是传入的数据。

第四个参数：一般就是 this，指向 Page对象

第五个参数：图片的左右 padding 值

2. WxValidate 是微信小程序用来进行表单验证的

下载地址：暂无

使用简介：[https://github.com/skyvow/wx-extend/blob/master/docs/components/validate.md][https_github.com_skyvow_wx-extend_blob_master_docs_components_validate.md]

引入方式：

第一种：全局引入

第一步：在app.js中引入：import WxValidate from 'utils/WxValidate.js'

第二步：在app.js中加入：WxValidate: (rules,messages) => new WxValidate(rules,messages),

![70 1][]

第三步： 在要使用的页面的js中：

this.data.validate = app.WxValidate(rules,messages);

并且在data中加入：validate: ""

![70 2][]

![70 3][]

第二种：单个页面引入

在这里我把WxValidate.js放到了utils目录下：

![70 4][]

第一步：在所需要使用的页面的js中引入：

import WxValidate from '../../utils/WxValidate.js'

第二步：

var Validate = "" //方便下面使用中将 创建的 WxValidate 赋值给它

（代码实现：Validate = new WxValidate(rules,messages））

然后再结合上面所说的使用简介中的内容即可

Ps ： 全局引入我试过了，没有问题，单页面引用没有试过

[https_github.com_icindy_wxParse]: https://github.com/icindy/wxParse
[70]: /images/20220519/cb673609a26f457d9ac41833fa5b111f.png
[https_github.com_skyvow_wx-extend_blob_master_docs_components_validate.md]: https://github.com/skyvow/wx-extend/blob/master/docs/components/validate.md
[70 1]: /images/20220519/07676ba4b18440698d3e4c066f8e35e2.png
[70 2]: /images/20220519/6eacd79e4570460d8c2483316018b888.png
[70 3]: /images/20220519/4867ab7120ad4b9caedb420b70348be7.png
[70 4]: /images/20220519/7d4f9befac92476aa22d1a5c49e8932b.png