wxml页面代码:
<!-- 模板内容 -->
<view class="template-content" wx:if="{{templateContent}}">
<text>{{templateContent}}</text>
</view>
js获取模板逻辑:
/**
* 获取模板内容
*/
async getTemplateContent() {
try {
const res = await productApi.reqFun8102109({ type:'0',fund_code: fundCode })
if (res && res[0].applet_template_content) {
this.setData({
templateContent: this.data.templateContent.concat(res[0].applet_template_content)
})
}
console.log('模板内容:', this.data.templateContent)
} catch (error) {
console.error('获取模板内容失败:', error)
}
},
如上如何才能实现通过接口获取wxml代码模板后动态展示在页面上呢,经验证按照上面的方法插入的是一段字符串

<view class="public_top pro_share" data-prod-type="sevenDay" data-is-share="1">
<view class="top">
<text class="m_text_darkgray m_font_size16">{{publicDetatilData.prod_sname}}</text>
<text class="m_text_gray m_font_size12">({{publicDetatilData.fund_code}})</text>
</view>
<view class="public_top_middle flex">
<view class="main_flxe vertical_line m_width_50">
<text class="m_text_gray m_font_size12">{{publicDetatilData.income_period_type_desc}}年化收益率</text>
<text class="{{publicDetatilData.dk_income_rate > 0 ? 'red' : 'green'}} m_text_red m_font_size22">{{utils.toFixed(publicDetatilData.dk_income_rate, 2)}}%</text>
</view>
<view class="main_flxe m_width_50" style="padding-left: 20rpx;">
<text class="m_text_gray m_font_size12">单位净值({{publicDetatilData.nav_date}})</text>
<text class="m_font_size20 color_000">{{publicDetatilData.nav}}</text>
</view>
</view>
<view class="public_bottom m_font_size12" style="display: flex; justify-content: left; align-items: center;">
<view class="public_bottom_first">
<text class="fund_type_name" id="risk_level_name">{{publicDetatilData.risk_level_name}}</text>
<text class="fund_type_name" id="fund_type_name">{{publicDetatilData.fund_type_name}}</text>
</view>
<view>
<text class="m_text_gray m_paddingLeft_10">基金规模:{{publicDetatilData.scale_fund}}({{publicDetatilData.scale_fe_date}})</text>
</view>
</view>
</view>
<!--
<div style="margin-top: 0.1rem">
<div id="applet_enter" style="display: none">fund_filesystem/prod_details_img/1693963990020.png</div>
<img id="applet_enter_img" @click="appletEnter('pages/marketPulse/publicityPage/publicityPage?type=6&id=APPLET005')" src="" alt="" style="width: 100%"></div> -->
<!-- 历史盈利概率 -->
<view class="marketing_content" style="padding: 16rpx;margin-top:20rpx;background-color:#fff">
<view>
<view style="font-size:32rpx;color: #333333;padding-left:20rpx">历史盈利概率</view>
</view>
<view style="background:#ffedd8;padding: 20rpx 0;border-radius: 20rpx;width: 100%;display: flex;margin-top: 20rpx;justify-content: center;align-items: center;" class="perChartPad">
<image class="img_goods" src="/static/images/img_good.png" mode="aspectFit" style="width: 80rpx;height: 80rpx;"></image>
<view style="float: left;margin-left: 40rpx;font-size: 28rpx;color: #000;font-weight: bold;" class="perMar" data-order="13">
<view class="m_center">历史持有30天,有<text class="sectionProbability" style="color:#e5443c">{{profitProbability}}%</text>的概率</view>
<view>获得<text style="color:#e5443c">年化2%</text>以上收益</view>
</view>
</view>
<view style="margin: 20rpx 0; display: flex;" class="perChartName">
<view style="background: #e5e5e5;width: 144rpx;text-align: center;">收益分布</view>
<view style="background: #e5e5e5;margin-left: 8rpx;width: 81%;text-align: center;" class="perChartName_width">概率</view>
</view>
<view class="perChart">
<!-- 历史盈利概率柱状图 -->
<ec-canvas id="earningChart" canvas-id="earningChart" ec="{{ earningChart }}" style="width: 100%; height: 180px;"></ec-canvas>
<view class="spliceDate">
<text data-id="1" class="{{activeClassPer == '1' ? 'active' : ''}}" style="width: 25%;" bindtap="choosePerList" data-index="1">持有1个月</text>
<text data-id="3" class="{{activeClassPer == '3' ? 'active' : ''}}" style="width: 25%;" bindtap="choosePerList" data-index="3">持有3个月</text>
<text data-id="6" class="{{activeClassPer == '6' ? 'active' : ''}}" style="width: 25%;" bindtap="choosePerList" data-index="6">持有6个月</text>
<text data-id="12" class="{{activeClassPer == '12' ? 'active' : ''}}" style="width: 25%;" bindtap="choosePerList" data-index="12">持有一年</text>
</view>
</view>
</view>
<!-- 走势图切换 -->
<view class="trend-chart">
<text bindtap="initTrajectoryData" style="border-color:#e6e6e6 !important;" class="{{initShowChat == 0 ? 'm_text_red' : ''}}">业绩走势</text>
<text bindtap="initializationData7" class="{{initShowChat == 1 ? 'm_text_red' : ''}}">净值走势</text>
</view>
<!-- 单位净值走势图表 -->
<view class="chartContent" hidden="{{initShowChat != 1}}" id="navTrend">
<ec-canvas id="navChart" canvas-id="navChart" ec="{{ navChart }}" style="width: 100%; height: 250px;"></ec-canvas>
</view>
<!-- 业绩走势图表 -->
<view class="chartContent" hidden="{{initShowChat != 0}}" id="trajectory">
<ec-canvas id="performanceChart" canvas-id="performanceChart" ec="{{ performanceChart }}" style="width: 100%; height: 250px;"></ec-canvas>
</view>
<!-- 时间区间选择 -->
<view class="chartContent" id="spliceDate">
<view class="spliceDate">
<text wx:for="{{timeListNew}}" wx:key="section" class="{{activeClass == item.section ? 'active' : ''}}" bindtap="chooseTrajectoryData" data-item="{{item}}">{{item.name}}</text>
<text class="{{(activeClass > 12 || activeClass == '') ? 'active' : ''}}" bindtap="showMoreSpliceDate">{{moreName}}<text class="m_text_gray">▼</text></text>
</view>
</view>
<!-- 业绩表现/历史净值切换 -->
<view class="chart mt10 m_padding_left">
<text class="{{activeClassSecond == 1 ? 'active' : ''}}" bindtap="performance7" data-index="1" id="performance">业绩表现</text>
<text class="{{activeClassSecond == 2 ? 'active' : ''}}" bindtap="history7" data-index="2" id="history">历史净值</text>
</view>
<!-- 业绩表现列表 -->
<view class="list" wx:if="{{activeClassSecond == 1}}" id="performanceContent" data-show-rank="0" data-show-annualized="1">
<view class="list_header">
<text class="m_width_50">时间</text>
<text class="m_width_50">涨跌幅</text>
<text class="m_width_50">年化收益</text>
</view>
<view class="list_content">
<view class="list_item" wx:for="{{performanceList}}" wx:key="period">
<text class="m_width_50" style="color:#666666">{{item.period}}</text>
<text class="m_width_50 {{item.rate > 0 ? 'red' : item.rate < 0 ? 'green' : ''}}">{{item.rate}}%</text>
<text class="m_width_50 {{item.annualizedRate > 0 ? 'red' : item.annualizedRate < 0 ? 'green' : ''}}">{{item.annualizedRate == '--' ? item.annualizedRate : item.annualizedRate + '%'}}</text>
</view>
</view>
<view bindtap="page_performance" class="list_footer" id="PerformanceList">
<text>查看更多</text>
</view>
</view>
<!-- 历史净值列表 -->
<view class="list" wx:if="{{activeClassSecond == 2}}" id="historyContent">
<view class="list_header">
<text>日期</text>
<text>单位净值</text>
<text>累计净值</text>
<text>日涨跌幅</text>
</view>
<view class="list_content">
<view class="list_item" wx:for="{{historyList}}" wx:key="date">
<text>{{item.date}}</text>
<text>{{item.nav}}</text>
<text>{{item.accumulatedNav}}</text>
<text class="{{item.dailyChange > 0 ? 'red' : item.dailyChange < 0 ? 'green' : ''}}">{{item.dailyChange}}%</text>
</view>
</view>
<view bindtap="page_history" class="list_footer" id="HistoryList">
<text>查看更多</text>
</view>
</view>
<!-- 交易规则 -->
<view class="remarkTitle7 flex">
<view>交易规则</view>
<view bindtap="page_rule" class="flex vertical_center">
<text class="m_font_size14 m_text_999">买入、卖出规则及费率</text>
<image class="arrows_right" src="/static/images/arrows_right.png" mode="aspectFit"></image>
</view>
</view>
<!-- 交易进度 -->
<view class="progress">
<view class="progress_text">
<text>买入提交</text>
<text>确认完成</text>
<text>查看收益</text>
</view>
<view class="progress_icon">
<text class="ok"></text>
<text class="no"></text>
<text class="no"></text>
</view>
<view class="progress_time">
<text>现在买入</text>
<text id="qrDate">{{publicDetatilData.qrDate}}({{publicDetatilData.qrDayOfWeek}})</text>
<text id="syDate">{{publicDetatilData.syDate}}({{publicDetatilData.syDayOfWeek}})</text>
</view>
</view>
<!-- 建议提示 -->
<view class="suggest">
<text class="suggest_inline">为实现收益最大化,<text class="bold_text">建议持有<text id="tip_max_day">{{publicDetatilData.suggest_hold_days || '--'}}天</text>以上</text>。若持有时间不满<text id="tip_min_day">{{publicDetatilData.min_hold_days || '--'}}天</text>,赎回费率不低于<text id="tip_max_rate">{{publicDetatilData.min_redemption_rate || '--'}}</text>。
</text>
</view>
<!-- 产品档案标题 -->
<text class="product_archives">产品档案</text>
<!-- 产品档案列表 -->
<view class="item_box" id="item_box">
<view bindtap="page_record" class="title" id="jjThirtyDetailRecord">
<text>基金档案</text>
<image class="arrows_right" src="/static/images/arrows_right.png" mode="aspectFit"></image>
<text class="title_right">概况、分红</text>
</view>
<view bindtap="page_manager" class="title" id="jjThirtyDetailManager">
<text>基金经理</text>
<image class="arrows_right" src="/static/images/arrows_right.png" mode="aspectFit"></image>
<text class="title_right" id="fund_managers">{{publicDetatilData.fund_managers}}</text>
</view>
<view bindtap="page_company" class="title" id="jjThirtyDetailCompany">
<text>基金公司</text>
<image class="arrows_right" src="/static/images/arrows_right.png" mode="aspectFit"></image>
<text class="title_right" id="mgrcomp_name">{{publicDetatilData.mgrcomp_name}}</text>
</view>
<view bindtap="page_configuration" class="title" id="jjThirtyDetailConfiguration">
<text>资产配置</text>
<image class="arrows_right" src="/static/images/arrows_right.png" mode="aspectFit"></image>
</view>
<view bindtap="page_notice" class="title f14 m0" id="jjThirtyDetailNotice">
<text>基金公告</text>
<image class="arrows_right" src="/static/images/arrows_right.png" mode="aspectFit"></image>
</view>
<view bindtap="page_file" class="title m0" id="jjThirtyDetailFile">
<text>基金文件</text>
<image class="arrows_right" src="/static/images/arrows_right.png" mode="aspectFit"></image>
</view>
</view>
<!-- 风险提示 -->
<view class="warm-tip">
<text>过往收益业绩不预示未来表现,市场有风险,投资需谨慎。请仔细阅读基金合同和基金招募说明书。</text>
</view>
<!-- 版权信息 -->
<view class="thfundCopyright">
<view>
<image src="/static/images/icon_safety.png" mode="aspectFit"></image>
<text>基金销售服务由深圳新华信通基金销售有限公司提供</text>
</view>
</view>
<!-- 更多时间区间弹窗 -->
<view class="pop_layer" wx:if="{{showMoreSpliceDate}}" id="moreSpliceDate" bindtap="cancelMoreSpliceDate">
<view class="action_sheet_wrapper more_splice_date" catchtap="preventClose">
<view class="pay_login slideup in">
<view class="model_content">
<view id="model_content" class="modify_box" style="padding-bottom: 20rpx;">
<text wx:for="{{timeListMore}}" wx:key="section" bindtap="chooseMoreList" data-item="{{item}}">{{item.name}}<text wx:if="{{index == timeListMore.length - 1}}">({{publicDetatilData.differ_date}})</text>
</text>
</view>
</view>
<view class="model_bottom" style="display: flex;">
<view class="button" bindtap="cancelMoreSpliceDate">取消</view>
</view>
</view>
</view>
</view>