WeChatアプレットを開発する場合、元のWebサイトのデータを呼び出す必要がありますが、一般的なWebサイトのデータコンテンツはリッチテキスト、つまりアプレットで解析できないhtmlコンテンツであるため、リッチを変換する必要があります。テキストをWeChatアプレットに挿入します。解析されたテキストには、プラグインを使用する必要があります。これは、wxParseWeChatアプレットのリッチテキストコンポーネントです。現在、小さなプログラムには、リッチテキストも解析できる<rich-text>コンポーネントが付属していますが、この効果はあまり役に立ちません。したがって、wxParseWeChatアプレットのリッチテキスト処理プラグインを使用する必要があります。
1. wxParseWeChatアプレットのリッチテキスト処理プラグインをダウンロードします
アドレス1をダウンロード：https：//github.com/icindy/wxParse
ダウンロードリンク2：https：//download.csdn.net/download/qq_39339179/13779188
図に示すようにダウンロードして解凍した後、ファイルwxparseをWeChatアプレットにコピーし、アプレットのルートディレクトリに配置します。
2. wxParseWeChatアプレットのリッチテキスト処理プラグインの使用方法
2.1。リッチテキストを処理する必要のある小さなプログラムのwxmlページファイルでwxParse.wxmlを参照します。参照方法は次のとおりです。
//路径根据你实际情况修改
<import src="../../../wxParse/wxParse.wxml"/>
2. 2.次のように、リッチテキストを処理する必要がある小さなプログラムのwxssファイルでwxParse.wxssを引用します。
//路径根据你实际情况修改
@import "../../../wxParse/wxParse.wxss";
2.3。リッチテキストを処理する必要がある小さなプログラムjsファイルでwxParse.jsを引用します。引用方法は次のとおりです。
//路径根据你的实际情况更改
var WxParse = require('../../../wxParse/wxParse.js');3.リッチテキストを処理する必要がある小さなプログラムjsファイルの呼び出し側APIインターフェイスに次のコードを追加します
onLoad: function (options) {
console.log(options.id)
var that=this
wx.request({
/*api接口*/
url:'https://www.xxxx.com/api/product-arctrle.php?id='+ options.id,
success:function(res){
console.log(res.data)
that.setData({
lmlist:res.data
})
/*富文本处理代码开始*/
var body = res.data.body;
WxParse.wxParse('body','html',body,that,5);
/*富文本处理代码结束*/
}
})
},
コードコメント：
var body = res.data.body;のbodyフィールドは、APIで取得された記事のコンテンツ値を参照します。これは、リッチテキスト処理を実行する必要があるコードブロックです。
WxParse.wxParse（ 'body'、 'html'、body、that、5）;
* 1.body绑定的数据名(必填)
* 2.html可以为html或者md(必填)
* 3.第二body为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
第四に、元の発呼記事コンテンツの発呼タグが以下の発呼方法に変更されます。
<view>
<template is="wxParse" data="{
{wxParseData:body.nodes}}" />
</view>5.記事のコンテンツに写真があり、写真が相対アドレスである場合は、wxParseファイルの下のwxParse.wxmlコードを次のように変更する必要があります。srcの後にバックグラウンドデータドメイン名を追加します。
<template name="wxParseImg">
<image class="{
{item.classStr}} wxParse-{
{item.tag}}" data-from="{
{item.from}}" data-src="{
{item.attr.src}}" data-idx="{
{item.imgIndex}}" src="https://www.xxxx.com{
{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{
{item.width}}px;"
/>
</template>