收藏
回答

是否支持从接口获取wxml模板然后动态插入?

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代码模板后动态展示在页面上呢,经验证按照上面的方法插入的是一段字符串

回答关注问题邀请回答
收藏

1 个回答

  • 智能回答 智能回答 本次回答由AI生成
    03-16
    有用
    回复 1
    • 电子小猫🥝
      电子小猫🥝
      03-16
      接口返回的完整数据如下:
      <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>
      03-16
      回复
登录 后发表内容