小程序xr-frame中实现动态获取数据后vr扫描图片播放视频功能

示例集demo地址：木头鱼/xr-frame-demo

xr-template-tracker----------index.js文件（重点）：

var sceneReadyBehavior = require('../../behavior-scene/scene-ready');

Page({
  behaviors: [sceneReadyBehavior],
  moveTimes: 0,
  data: {
    // ...保留原有的data配置
    // 内置
    height: 100,
    heightScale: 1,
    showBackBtn: true,
    // 页面
    useScan: false,
    useGLTF: false,
    useVideo1: true,
    useVideo2: true,
    // scan 相关
    showMarkerWrap: false,
    markerLeft: -50,
    markerTop: 50,
    markerWidth: 0,
    markerHeight: 0,
    // 全局状态
    dataReady: false,
    // Debug
    debugMsg: 'Defalut Words',
    markerList: [],
    dataReady: false,
    debugMsg: 'Defalut Words',
  },
  onLoad() {
    this.fetchDataFromApi();
  },
  resetData() {
    this.setData({
      dataReady: false,
      showMarkerWrap: false,
      markerLeft: -50,
      markerTop: 50,
      markerWidth: 0,
      markerHeight: 0,
    })
  },
  //调取接口，获取地址数据
  async fetchDataFromApi() {
    wx.request({
      url: 'https://hwwym.xhtxr.com/static/video.json',
      method: 'GET',
      success: (res) => {
        console.log(res.data);
        // 处理成功响应
        const apiData = res.data.ar; // 假设返回的数据结构与mockDataList相似
        this.processFetchedData(apiData);
      },
      fail: (res) => {
        console.log(res);
        // 处理失败响应
      }
    });
  },
  processFetchedData(apiData) {
    // 假设apiData结构与mockDataList相同
    console.log(apiData);
    this.resetData();
    // 需要使用的marker
    const markerList = []
    //设置初始下标为0
    let videoIndex = 0
    //循环数据，拿到每一项数据，将对应的数据push到空数组中，接着对应下标依次添加直到找到最后一项
    for (let i = 0; i < apiData.length; i++) {
      const mockItem = apiData[i];
      const videoId = 'video' + videoIndex
      markerList.push({
        id: videoId,
        name: '音乐节',
        renderType: 'video',
        markerImage: mockItem.key,
        src: mockItem.val,
      });
      videoIndex++;
    }
    //最后将数据放到所需渲染的数组里面
    this.setData({
      dataReady: true,
      markerList: markerList,
    });
  },
  // ...保留原有的其他函数
  handleTrackerChange(cur) {
    const item = cur.detail;
    this.setData({
      debugMsg: 'handleTrackerChange:' + item.name
    })
  },
  handleTrackerMove(cur) {
    const detail = cur.detail
    const trackerInfo = detail.trackerInfo
    this.moveTimes++
    this.setData({
      showMarkerWrap: true,
    })
  },
});

xr-template-tracker----------index.wxml文件：

  <view wx:if="{{dataReady}}">
    <xr-template-tracker
      disable-scroll
      id="main-frame"
      width="{{renderWidth}}"
      height="{{renderHeight}}"
      style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"
      markerListRaw="{{markerList}}"
      bindtrackerchange="handleTrackerChange"
      bindtrackermove="handleTrackerMove"
    />
  </view>