はじめに: データはマークダウンで編集されたコンテンツであり、html のタグがすべて含まれています。ループ内ではhtmlでデータを表示したいのですが、他のフィールドのデータには影響を与えたくないのです。
1. wxParse を使用します (非推奨)
- ダウンロードしてルートフォルダーに置きますhttps://github.com/icindy/wxParse
- はじめに
1. まず @import "/wxParse/wxParse.wxss" を app.wxss にグローバルにインポートします
; 2.
に対応する js ファイルに
var WxParse = require('.../.../wxParse/wxParse.js' を導入します必要なモジュール)
3.
jsを使用する
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.request({
url: 'https://xxx',
success: function (res) {
var data = res.data.data.list;
// 就是下面这个for循环
for (let i = 0; i < data.length; i++) {
WxParse.wxParse('content_main' + i, 'html', data[i].content_main, that);
if (i === data.length - 1) {
WxParse.wxParseTemArray("WxParseListArr", 'content_main', data.length, that)
}
}
that.setData({
nbaInfos: data,
});
}
});
},
wxml
<import src="../../wxParse/wxParse.wxml" />
<view class="nba-container">
<block wx:key="{
{index}}" wx:for="{
{nbaInfos}}" >
<view class="content">
<view class="detail-container" data-id="{
{item.id}}" catchtap="onDetailTap">
<template is="wxParse" data="{
{wxParseData:WxParseListArr[index]}}" />
<text class="nba-title">{
{item.modified_time}}</text>
</view>
</view>
</block>
</view>
効果:
2. リッチテキスト タグ (推奨)
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
プラグインは必要なく、公式ドキュメントのタグを直接使用します。ミニプログラム
<view class="nba-container">
<block wx:key="{
{index}}" wx:for="{
{nbaInfos}}" >
<view class="content">
<view class="detail-container" data-id="{
{item.id}}" catchtap="onDetailTap">
<rich-text nodes="{
{ item.content_main }}"></rich-text>
<text class="nba-title">{
{item.modified_time}}</text>
</view>
</view>
</block>
</view>
vueのv-htmlと同様、とても便利でシンプルです