今天说一个进阶技能，怎么用wxParse读取的富文本中插入商品链接，首先你得懂得使用wxParse 和后台网页的富文本编辑器，这篇文章并不是基础讲解这俩个插件的使用方法，这里只作概述，如需详细了解，还请搜索这俩个插件的详细使用方法，弄懂之后再看本文，会比较容易理解
最终效果:
1.后台文本编辑器，添加商品链接效果：
2。小程序内文章中自动转为商品模块效果：
*其中小程序的富文本页面的商品模块可以直接点击跳转到商品详情界面
实现流程：
一 插件简介及下载地址
1.wxParse：小程序中的HTML解析器，可以将HTML代码直接转换为小程序可以显示的代码，一般用于后台传入HTML富文本，小程序中直接显示文章
GitHub地址：https://github.com/icindy/wxParse
使用简介：
解压出来后，直接复制到小程序项目的根级目录，
在需要解析HTML的页面中加入代码
wxml:(除了目录地址，其他都是固定格式，不需要修改)
import src="../../wxParse/wxParse.wxml" />
<viewclass="wxParse">
<templateis="wxParse" data="{{wxParseData:article.nodes}}" />
</view>
js：（这里的res.data.content就是我们后台传过来的HTML富文本代码，其他参数都不需要改）
const WxParse = require('../../wxParse/wxParse.js');
onLoad: function (options) {
WxParsewxParse('article', 'html', resdatacontent, that, 0);
},
2.Ueditor:网页的富文本编辑器插件，下载地址某度搜Ueditor官网就出来了，这种编辑器很多，关键不是TX的，就不发使用说明和下载地址了，怕给我文章封了，嘿嘿，自行查找吧
二 后台富文本编辑器修改
本文以Ueditor为例子，使用其他编辑器插件，可以看看实现原理
1.修改link插件文件：（说明：Ueditor有添加自定义按钮的方法，不过呢，因为我这里用的编辑器都是给小程序传的HTML编码，添加A标签的功能用不上，就直接修改了，有兴趣的可以额外添加一个按钮）
下面是完整代码，修改一下你的AJAX 调用接口地址后，直接复制，替换截图中的link.html文件就可以使用了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">htmlhead
title></title
metahttp-equiv"Content-Type"content"text/html;charset=utf-8"/>
scripttype"text/javascript"src"../internal.js"></script
styletype"text/css"
*{marginpaddingcolor: #838383;}
table{font-size: 12pxmargin: 10pxline-height: 30px}
.txt{width300pxheight21pxline-height21pxborder1px solid #d7d7d7;}
</style</headbody
table
tr
td><labelfor"href"商品ID:</label></td
td><inputclass"txt"id"href"type"text" /></td
</tr
tr
td><labelfor"text"商品名称:</label></td
td><inputreadonlyclass"txt"id"text"type"text"disabled"true"/></td
</tr<!--
<tr>
<td><label for="text"> <var id="lang_input_text"></var></label></td>
<td><input class="txt" id="text" type="text" disabled="true"/></td>
</tr>
-->
tr
td><labelfor"title"商品信息:</label></td
td><inputreadonlyclass"txt"id"title"type"text"/></td
</tr<!--
<tr>
<td><label for="title"> 原title<var id="lang_input_title"></var></label></td>
<td><input class="txt" id="title" type="text"/></td>
</tr>
-->
tr
tdcolspan"2"
labelfor"target"><varid"lang_input_target"></var></label
inputid"target"type"checkbox"/>
</td
</tr
tr
tdcolspan"2"id"msg"></td
</tr
</tablescripttype"text/javascript"
var range = editor.selection.getRange(),
link = range.collapsed ? editor.queryCommandValue( "link" ) : editor.selection.getStart(),
url,
text = $G('text'),
rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(),'a'true),
orgText;
link = domUtils.findParentByTagName( link, "a", true );
if(link){
url = utils.html(link.getAttribute( '_href' ) || link.getAttribute( 'href', ));
if(rangeLink === link && !link.getElementsByTagName('img').length){
text.removeAttribute('disabled');
orgText = text.value = link[browser.ie ? 'innerText''textContent'];
}else{
text.setAttribute('disabled''true');
text.value = lang.validLink;
}
}else{
if(range.collapsed){
text.removeAttribute('disabled');
text.value = '';
}else{
text.setAttribute('disabled''true');
text.value = lang.validLink;
}
}
$G("title").value = url ? link.title : "";
$G("href").value = url ? url: '';
$G("target").checked = url && link.target == "_blank" ? true : false;
$focus($G("href"));
functionhandleDialogOk(){
var href =$G('href').value.replace(/^\s+|\s+$/g, '');
if(href){
//原组件连接地址如果不填HTTP等协议,会自动提示要增加,这里注释掉,将不会添加// if(!hrefStartWith(href,["http","/","ftp://",'#'])) {// href = "http://" + href;// }
var obj = {
'href' : href,
'target' : $G("target").checked ? "_blank" : '_self',
'title' : $G("title").value.replace(/^\s+|\s+$/g, ''),
//这里原理啊的title写法如下,改装后这里自动转为商品信息
//$G("title").value.replace(/^\s+|\s+$/g, ''),
'_href':href
};
//修改链接内容的情况太特殊了，所以先做到这里了
//todo:情况多的时候，做到command里
if(orgText && text.value != orgText){
link[browser.ie ? 'innerText' : 'textContent'] = obj.textValue = text.value;
range.selectNode(link).select()
}
if(range.collapsed){
obj.textValue = text.value;
}
editor.execCommand('link',utils.clearEmptyAttrs(obj) );
dialog.close();
}
}
dialog.onok = handleDialogOk;
$G('href').onkeydown = $G('title').onkeydown = function(evt){
evt = evt || window.event;
if (evt.keyCode == 13) {
handleDialogOk();
returnfalse;
}
};
$G('href').onblur = function(){
// if(!hrefStartWith(this.value,["http","/","ftp://",'#'])){// 原组件连接地址如果不填HTTP等协议,会自动提示要增加,这里注释掉,将不会提示未添加// $G("msg").innerHTML = "<span style='color: red'>"+lang.httpPrompt+"</span>";// }else{// $G("msg").innerHTML = "";// }
//这里的AJAX请求地址，需要改成你的接口地址
createRequest('你的AJAX接口地址.html?id='+$G('href').value.replace(/^\s+|\s+$/g, ''),getgoodinfo);
//提示：这里的这个请求接口，用户用F12是可以看到的，所以调用的时候，一定要作加密认证，不要只传ID
};
functionhrefStartWith(href,arr){
href = href.replace(/^\s+|\s+$/g, '');
forvar i=,ai;ai=arr[i++];){
if(href.indexOf(ai)==){
returntrue;
}
}
returnfalse;
}
/获取ajax回传数据
unction getgoodinfo(){
if(http_request.readyState == ){
if(http_request.status==200){
if(http_request.responseText==){
alert("该ID商品不存在");
document.getElementById('title').value=;
}else{
document.getElementById('text').value="商品链接:" + http_request.responseText.split(",")[];
//这里我是以 商品ID，商品名称，商品图标地址，商品价格 以‘,’英文逗号链接成的字符串，可以根据你的业务需要修改，
document.getElementById('title').value=http_request.responseText;
}
}else{
alert("您请求的页面发生错误");
}
}
ar http_request = false;
/生成ajax
unction createRequest(url,func){
//Mozilla 等其他浏览器
if(window.XMLHttpRequest){
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
}elseif(windows.ActiveXObject){
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!http_request){
alert("浏览器不支持访问");
returnfalse;
}
http_request.onreadystatechange = func;
//发出http请求
http_request.open("GET",url,true);
http_request.send(null);
}
</script</body</html
三 小程序端wxParse插件代码修改
1.修改html2json.js文件：
在该文件的146行添加如下代码：（这里我是以 商品ID，商品名称，商品图片地址，商品价格以‘,’英文逗号隔开组成字符串传过来的，可以根据你的业务需求更改识别方式）
如图：
//将A标签的title转为商品信息
if (nodetag === 'a' && nodeattr.title!=) {
//console.log(nodenode.attr.title)
var title = nodeattr.title.split(",")
nodeattr.title.split(",")
nodegoodname = title[]
nodegoodicon = title[]
nodegoodprice = title[]
}
2.修改wxParse.wxml文件：
在文件177行找到<!--a类型--> 进行修改，如图：
代码如下：（注释掉的是原本插件的代码，这里的商品模块CSS就自行设计编写吧，直接写到要调用wxParse的页面wxss文件中就行）
<!--a类型-->blockwx:elif{{item.tag == 'a'}}viewbindtap"wxParseTagATap"class"wxParse-inline {{item.classStr}} wxParse-{{item.tag}}data-src{{item.attr.href}}style{{item.styleStr}}viewclass"goodbg row"imageclass"goodimg"src{{item.goodicon}}></imageviewviewclass"goodname"{{item.goodname}}</viewviewclass"between pricev"viewclass"goodprice"￥{{item.goodprice}}</viewimagesrc"/imgs/cart.png"class"cartimg"></image</view</view</view<!-- <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="key">
<template is="wxParse2" data="{{item}}" />
</block> --></view</block
3.修改wxParse.js文件：
这个主要是修改一下点击跳转标签的路径，因为我这里是直接是把商品的ID传了过来，如果直接传了绝对路径这一步可以省略
这里涂抹的地方换成你的小程序路径
到此，修改结束，就可以使用了！
后记
1.该方法可以改为跳转其他的页面路径也可以，稍微修改一下就行
2.后台的编辑器我没弄成可视化的商品跳转组件，这个如果有兴趣的同学搞出来了，给大家分享一下
