一. 相机授权
1. 需求:
从 A(首页)->B->C->D(三个步骤页面)->E(拍照页面).
2. 遇到的问题:
相机何时判断是否授权, 获取相机权限?
3. 在进入 E 页面时判断是否授权, 如果未授权, 隐藏 camera 组件, 提示用户授权 (第一次弹窗, 第二次跳转手机应用权限管理中修改权限页面), 待用户授权成功后正常显示 E 页面 camera 组件. 出现了 bug:
(1). 当用户同意授权, 或者是进入权限管理页修改权限成功后, 页面的 camera 相机组件不显示, 无法出现取景框. 当时决定取景框是否显示用的 v-show 和 v-if 都无效, 在小程序社区咨询也无果.
(2). 首次进入 E 会发起弹窗, 第二次不会, 多次进入时效果混乱不统一.
(3). 小程序改版, 相机授权需要通过用户在页面的点击操作, 不能直接获取信息.
4. 经过思考, 重新整理逻辑, 决定在启动小程序时在 App.JS 就获取用户权限, 第一次如果没有会出现弹窗, 在 D 页面进入下一页面跳转时判断是否有相机授权, 避免在 E 页面操作太多逻辑导致 camera 组件不显示.
App.JS 代码示例:
- // 获取用户授权设置, 如果用户第一次进入未授权会出现弹窗
- wx.getSetting({
- success: response => {
- if (!response.authSetting['scope.camera']) {
- wx.authorize({
- scope: 'scope.camera',
- success() {
- // 同意摄像头
- },
- fail() {
- // 不同意摄像头
- }
- })
- }
- },
- fail: res => {
- },
- complete: res => {
- },
- })
D 页面: 由于小程序规定不能直接调用, 必须用 button 调用户权限, 所以设置一个中间页向用户询问, 用户同意跳转授权设置页, 设置成功后返回中间页再跳转 E 页面
D 页面
中间页
授权设置页
- Page({
- stepBtn: function () {
- // 检查权限, 看是否跳转
- wx.getSetting({
- success(res) {
- if (!res.authSetting['scope.camera']) {
- // 无权限, 跳转设置权限页面
- wx.redirectTo({
- url: '../needSet'
- })
- } else {
- // 有权限, 跳转拍照页
- wx.redirectTo({
- url: '../camera'
- })
- }
- }
- })
- }
- })
中间页:
- Page({
- // 打开设置
- beginSet(){
- if (wx.openSetting) {
- wx.openSetting({
- scope: 'scope.camera',
- success(errMsg) {
- if (errMsg.authSetting['scope.camera']) {
- // 设置授权成功, 跳转拍照页
- wx.redirectTo({
- url: '../camera'
- })
- }
- }
- })
- } else {
- wx.showModal({
- title: '授权提示',
- content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法: 删除小程序 -> 重新搜索进入 -> 点击授权按钮'
- })
- }
- }
- })
二. 相机拍照
这时候就可以确保在授权成功的情况下, 进入 E 页面 (E 页面特殊需求: 取景框被遮盖的只能露出中间部分, 同时被遮盖部分要写上提示文字)
E 页面
- // e-wxml 部分代码截取,
- <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: {{cameraHeight}}px;" '>
- <cover-view class='coverCircle'>
- <cover-view class='cover-top' style='width:{{cameraWidth}}px;height:{{coverHeight}}px'></cover-view>
- <cover-view class='cover-left' style='width:{{coverWidth}}px;height:{{needPic}}px;top:{{coverHeight}}px'></cover-view>
- <cover-view class='cover-right' style='width:{{coverWidth}}px;height:{{needPic}}px;top:{{coverHeight}}px'></cover-view>
- <cover-view class='cover-bottom' style='width:{{cameraWidth}}px;height:{{coverHeight}}px'></cover-view>
- <cover-view class='camera-text'> 提示文字: 手机水平俯拍, 二维码与取景框边框平行并充满取景框, 光线适度对焦清晰.</cover-view>
- </cover-view>
- </camera>
- //e-JS
- // 设置相机大小
- setwidth() {
- this.setData({
- cameraWidth: wx.getSystemInfoSync().windowWidth
- }, () => {
- this.setData({
- coverWidth: (this.data.cameraWidth - this.data.needPic) / 2,
- coverHeight: (this.data.cameraHeight - this.data.needPic) / 2
- })
- })
- },
- // 拍照
- takePhoto() {
- var that = this;
- that.ctx = wx.createCameraContext(that);
- that.ctx.takePhoto({
- quality: 'high',
- success: (res) => {
- that.setData({
- src: res.tempImagePath,
- })
- },
- fail: (res) => {
- // 拍照失败
- // console.log(res+'拍照失败')
- }
- })
- },
- // 上传照片
- uploadPhoto() {
- var that = this;
- var openId = App.globalData.openId;
- wx.showLoading({
- title: '图片上传中...'
- })
- wx.uploadFile({
- url: API.baseUrl + "api/PostImage",
- filePath: that.data.src,
- name: 'filew',
- formData: {
- 'userid': openId
- },
- success: (res) => {}
- })
- },
- ````
来源: http://www.jianshu.com/p/035e5726dde5