收藏
回答

js无法通过setData()给标签属性赋值

框架类型 操作系统 工具版本
小程序 Windows v1.02.1801081

Setting data field "srcPath" to undefined is invalid.


前端触发“打开本地视频”按钮,调用js中的bindOpenLocalVideos方法,改方法打开本地视频并返回本地视频路径,然后通过setDat()方法设置index.wxml中srcPath的值,但是运行时老报上述错误,请各位大神解答一下,谢谢。我正入门微信小程序开发。只copy了两个核心代码,其他代码我认为与改问题不相关,所以没有全部贴出来。

<!--index.wxml-->
<view class="section tc">
  <video id="myVideo" style="height:{{videoHeight}}px;width:{{videoWidth}}px" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls>
  </video>
  <video src="{{srcPath}}"></video>
  <view class="btn-area">
    <button style="margin:10rpx;" bindtap="bindOpenLocalVideos">打开本地视频</button>
  </view>
  <view class="btn-area">
     <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入弹幕内容" bindblur="bindInputBlur" />
                </view>
      </view>
    <button style="margin:10rpx;" bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>
 
<view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">随机颜色</view>
                <view class="weui-cell__ft">
                    <switch checked bindchange="switchChange" />
                </view>
            </view>
</view>
<view class="colorstyle"  bindtap="selectColor">
  <text>选择颜色</text>
  <view style="height:80rpx;width:80rpx;line-height: 100rpx;margin:10rpx;background-color:{{numberColor}}">
  </view>
</view>
//index.js
function getRandomColor() {
  let rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}
 
Page({
  data: {
    srcPath: null
  },
  onLoad: function () {
    var _this = this;
    //获取屏幕宽高 
    wx.getSystemInfo({
      success: function (res) {
        var windowWidth = res.windowWidth;
        //video标签认宽度300px、高度225px,设置宽高需要通过wxss设置width和height。
        var videoHeight = (225 / 300) * windowWidth//屏幕高宽比 
        console.log('videoWidth: ' + windowWidth)
        console.log('videoHeight: ' + videoHeight)
        _this.setData({
          videoWidth: windowWidth,
          videoHeight: videoHeight
        })
      }
    })
  },
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  onShow: function () {
    var _this = this;
    //获取年数
    wx.getStorage({
      key: 'numberColor',
      success: function (res) {
        console.log(res.data + "numberColor----")
        _this.setData({
          numberColor: res.data,
        })
      }
    })
  },
  inputValue: '',
  data: {
    isRandomColor: true,//默认随机
    src: '',
    numberColor: "#ff0000",//默认黑色
 
    danmuList: [
      {
        text: '第 1s 出现的红色弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 2s 出现的绿色弹幕',
        color: '#00ff00',
        time: 2
      }
    ]
  },
  bindInputBlur: function (e) {
    this.inputValue = e.detail.value;
  },
  bindSendDanmu: function () {
    if (this.data.isRandomColor) {
      var color = getRandomColor();
    } else {
      var color = this.data.numberColor;
    }
 
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: color
    })
  },
 
  bindOpenLocalVideos: function () {
    var _this = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 600,
      camera: 'back',
      success: function (res) {
        console.log(res.tempFilePath);
        _this.setData({
          srcPath:res.tempFilepath
        })
      }
 
    })
  },
  videoErrorCallback: function (e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
  },
  //选择颜色页面
  selectColor: function () {
    wx.navigateTo({
      url: '../selectColor/selectColor',
      success: function (res) {
        // success
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  //switch是否选中
  switchChange: function (e) {
    this.setData({
      isRandomColor: e.detail.value
    })
  }
})


回答关注问题邀请回答
收藏
登录 后发表内容