一. 相機(jī)授權(quán)
1. 需求：
從A(首頁)->B->C->D(三個步驟頁面)->E(拍照頁面)。
2. 遇到的問題：
相機(jī)何時判斷是否授權(quán)钙畔，獲取相機(jī)權(quán)限茫陆？
3. 在進(jìn)入E頁面時判斷是否授權(quán)，如果未授權(quán)擎析，隱藏camera組件簿盅，提示用戶授權(quán)（第一次彈窗挥下，第二次跳轉(zhuǎn)手機(jī)應(yīng)用權(quán)限管理中修改權(quán)限頁面），待用戶授權(quán)成功后正常顯示E頁面camera組件桨醋。出現(xiàn)了bug:
(1). 當(dāng)用戶同意授權(quán)棚瘟，或者是進(jìn)入權(quán)限管理頁修改權(quán)限成功后，頁面的camera相機(jī)組件不顯示喜最，無法出現(xiàn)取景框偎蘸。當(dāng)時決定取景框是否顯示用的v-show和v-if都無效，在小程序社區(qū)咨詢也無果瞬内。
(2).首次進(jìn)入E會發(fā)起彈窗迷雪，第二次不會，多次進(jìn)入時效果混亂不統(tǒng)一虫蝶。
(3).小程序改版章咧，相機(jī)授權(quán)需要通過用戶在頁面的點擊操作，不能直接獲取信息能真。
4. 經(jīng)過思考赁严，重新整理邏輯，決定在啟動小程序時在app.js就獲取用戶權(quán)限粉铐，第一次如果沒有會出現(xiàn)彈窗疼约，在D頁面進(jìn)入下一頁面跳轉(zhuǎn)時判斷是否有相機(jī)授權(quán)，避免在E頁面操作太多邏輯導(dǎo)致camera組件不顯示蝙泼。
app.js代碼示例:
// 獲取用戶授權(quán)設(shè)置程剥，如果用戶第一次進(jìn)入未授權(quán)會出現(xiàn)彈窗
wx.getSetting({
success: response => {
if (!response.authSetting['scope.camera']) {
wx.authorize({
scope: 'scope.camera',
success() {
// 同意攝像頭
},
fail() {
// 不同意攝像頭
}
})
}
},
fail: res => {
},
complete: res => {
},
})
D頁面：由于小程序規(guī)定不能直接調(diào)用，必須用button調(diào)用戶權(quán)限踱承，所以設(shè)置一個中間頁向用戶詢問倡缠，用戶同意跳轉(zhuǎn)授權(quán)設(shè)置頁，設(shè)置成功后返回中間頁再跳轉(zhuǎn)E頁面
Page({
stepBtn: function () {
// 檢查權(quán)限茎活，看是否跳轉(zhuǎn)
wx.getSetting({
success(res) {
if (!res.authSetting['scope.camera']) {
//無權(quán)限昙沦，跳轉(zhuǎn)設(shè)置權(quán)限頁面
wx.redirectTo({
url: '../needSet'
})
} else {
//有權(quán)限，跳轉(zhuǎn)拍照頁
wx.redirectTo({
url: '../camera'
})
}
}
})
}
})
中間頁：
Page({
//打開設(shè)置
beginSet(){
if (wx.openSetting) {
wx.openSetting({
scope: 'scope.camera',
success(errMsg) {
if (errMsg.authSetting['scope.camera']) {
//設(shè)置授權(quán)成功,跳轉(zhuǎn)拍照頁
wx.redirectTo({
url: '../camera'
})
}
}
})
} else {
wx.showModal({
title: '授權(quán)提示',
content: '小程序需要您的微信授權(quán)才能使用哦~ 錯過授權(quán)頁面的處理方法：刪除小程序->重新搜索進(jìn)入->點擊授權(quán)按鈕'
})
}
}
})
二. 相機(jī)拍照
這時候就可以確保在授權(quán)成功的情況下载荔，進(jìn)入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'>提示文字：手機(jī)水平俯拍懒熙，二維碼與取景框邊框平行并充滿取景框丘损，光線適度對焦清晰。</cover-view>
</cover-view>
</camera>
//e-js
//設(shè)置相機(jī)大小
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) => {}
})
},
````
