收藏
回答

wx.createCameraContext 第一次打开的时候白屏

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug wx.createCameraContext 工具 6.7.3 2.4.1

- 当前 Bug 的表现(可附上截图)

相机已授权的情况下

第一次打开相机组件页面白屏,或者重新进入直至没有白屏才能正常打开相机组件


setTimeout(function () {

this.cameraContext = wx.createCameraContext();

}, 2000)

设置定时器可稍微减少此问题发生,但是还是会频发有此问题

但使用debugger在this.cameraContext = wx.createCameraContext();此段代码前则无此问题

- 预期表现


- 复现路径


- 提供一个最简复现 Demo

if (wx.createCameraContext) {

this.cameraContext = wx.createCameraContext();

} else {

// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示

wx.showModal({

title: '提示',

content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'

})

}


最后一次编辑于  2018-11-28
回答关注问题邀请回答
收藏

1 个回答

  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-11-28

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-11-28
    有用
    回复 13
    • CarlosLee
      CarlosLee
      2018-11-28

      现在我这边苹果安卓华为的机型都这样子,微信版本号6.7.3以上,

      代码:

      /**
       * 页面的初始数据
       */
      data: {
        direction: 'back',
        picUrl: '',
        cameraHeight: null,
        cameraBtn: true,
        aliyunUrl: '',
      },
       
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        if (wx.createCameraContext) {
          this.cameraContext = wx.createCameraContext();
          console.log(this.cameraContext);
        } else {
          // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
          })
        }
        //this.setData({
          //aliyunUrl: api.aliyunPrefix,
        //});
        let that = this;
        wx.getSystemInfo({
          success: function(res) {
            that.setData({
              cameraHeight: res.windowHeight
            })
          }
        })
         
       
      },
       


       
       
      /**
       * 旋转摄像头方向
       */
      rotationalDirection: function() {
        let that = this;
        var direction = that.data.direction;
        if (direction == 'back') {
          that.setData({
            direction: 'front',
          })
        } else {
          that.setData({
            direction: 'back',
          })
        }
      },
      takePhoto() {
        let that = this;
        // var cameraBtn = that.data.cameraBtn;
        // if (cameraBtn == true) {
          this.cameraContext.takePhoto({
            quality: 'high',
            success: (res) => {
              // this.setData({
              //   cameraBtn: false,
              // });
              wx.showLoading({
                mask: true,
                title: '上传中,请稍后',
              })
              that.uploadBackImg(that, res.tempImagePath);
            }
          })
        // }
      },
      <view class="mask">
        <camera device-position="{{direction}}" flash="off" binderror="error" style="width: 100%; height: {{cameraHeight}}px;">
          <cover-image src="/static/images/pic_sfz_z.png" class="mask-bg" mode="widthFix"></cover-image>
          <cover-image src="/static/images/icon_Camera_white.png" class="mask-icon" bindtap='rotationalDirection'></cover-image>
          <cover-view class="mask-btn-post" bindtap='takePhoto'>
            <cover-view class="mask-btn-bg">
              <cover-view class="mask-btn"></cover-view>
            </cover-view>
          </cover-view>
        </camera>
      </view>


      2018-11-28
      回复
    • CarlosLee
      CarlosLee
      2018-11-28

      wx918ba604d14c3e62

      2018-11-28
      回复
    • CarlosLee
      CarlosLee
      2018-11-28

      大概一个多月前还没发现有这种情况,是近期新项目客户反馈回来的,查看后发现以前的项目也出现这种情况,调试基础库用的2.4.1

      2018-11-28
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-11-28回复CarlosLee

      麻烦按照这里来提供代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html,方便复现问题哈

      2018-11-28
      回复
    • CarlosLee
      CarlosLee
      2018-11-28回复疯狂的小辣椒

      https://developers.weixin.qq.com/s/f3fQXgml7x4v

      2018-11-28
      回复
    查看更多(8)
登录 后发表内容