一文完全弄懂wx.chooseImage
最近在作一個複雜的跨五端（PC、H五、小程序、iOS、android）的需求，歷時將近兩個多月，其中酸甜苦辣冷暖自知，近日終於能夠封板上線，回憶整個開發過程，深坑不斷，收穫頗多，今天先分享一下在微信小程序的web-view裏選取照片的功能，此文完整的記錄整個開發過程，完全解決各類疑難雜症。javascript
深度調研
由於跨端因此最開始使用了<input type="file" accept="image/*" capture="camera">的方式，簡單粗暴可以使用，五端勉強均可以打個及格分，一直到聯調結束PM檢測時說體驗太差了，趁着還有時間（其實我也看不下去），索性就按PM的要求來，開始計劃調用原生的，由於客戶端以前已經提供了這樣的bridge，因此和客戶端的頭像調試輕鬆完成，剩下的小程序歷經萬千磨難，最終完美謝幕。php
首先沒有作過這方面的經驗，兩眼一抹黑，因爲是把H5頁面嵌套在小程序的web-view裏，因此直接查看官方文檔，小程序向web-view提供了三十多個API-詳情文檔。至此覺得能夠輕鬆搞定，因而開始了不斷的趟坑。。。html
按步開發
剛開始直接在H5裏使用了wx.chooseImage,發如今開發者工具中不斷的報錯the permission value is offline verifying,慢慢開始搜索才發如今小程序的web-view裏也必須使用jweixin,其實就是個公衆號網頁，接下來開始按這套流程走:java
- 引入JS文件
// 推薦使用1.3.2以上的版本，以前的版本不少坑😭
https://res.wx.qq.com/open/js/jweixin-1.3.2.js
// 我是直接用的npm包，目前基於1.4.0-test的版本
npm install weixin-js-sdk
複製代碼
- 經過config接口注入權限驗證配置
wx.config({
debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
appId: '', // 必填，微信公衆號的惟一標識，此處填寫公衆號的appId
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});
複製代碼
- 經過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});
複製代碼
- 經過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});
複製代碼
- 判斷當前客戶端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['chooseImage'] // 須要檢測的JS接口列表
success: function(res) {
// 以鍵值對的形式返回，可用的api值true，不可用爲false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
},
fail: function(err) {
// checkJsApi接口調用失敗
}
});
複製代碼
- 接口調用
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
success: function (res) {
var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
}
});
複製代碼
本部分要特別注意如下幾點：android
- invalid url domain：當前頁面所在域名與使用appid沒有綁定（可在該公衆號後臺的應用可信域名中配置當前H5頁面的域名）；
- invalid signature簽名錯誤：建議按以下順序檢查，主要多是域名通常帶的參數，因此域名每次都不同，必須在調用前經過域名來獲取signature；
- 服務上線以後沒法獲取jsapi_ticket,通常是access_token調用次數過多被限制了，須要在服務端作緩存；
- permission denied：該公衆號號沒有權限使用這個JSAPI（部分接口須要認證以後才能使用）；
處理圖片數據爲base64
wx.chooseImage獲取到的圖片爲一個臨時路徑，微信同時提供了wx.getLocalImgData方法能夠把獲取到的路徑轉爲base64格式的數據，至此就能夠輕鬆許多了，可是轉出來的base64在android和iOS中稍有不一樣，須要特別注意一下：web
wx.getLocalImgData({
localId: req.localIds[0].toString(),
success: function (res) {
const localData = res.localData;
let imageBase64 = '';
if (localData.indexOf('data:image') == 0) {
//蘋果的直接賦值，默認生成'data:image/jpeg;base64,'的頭部拼接
imageBase64 = localData;
} else {
//此處是安卓中的惟一得坑！在拼接前須要對localData進行換行符的全局替換
//此時一個正常的base64圖片路徑就完美生成賦值到img的src中了
imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
}
}
});
複製代碼
上傳圖片
獲取到圖片的base64數據以後其實咱們就能夠隨心所欲了，不須要使用
wx.uploadImage和wx.downloadImage了，不只須要麻煩的上傳到微信服務器，還有三天的時間限制反而增長了成本，最好的方式就是直接上傳至咱們本身的服務器。npm
通常與服務端交互的這種文件類型通常採用表單提交--multipart/form-data的方式，這就要求咱們熟悉傳輸form-data的數據交互，因此須要把剛纔獲取到的base64轉爲可post的二進制數據，JavaScript提供了原生的atob/btoa用來對base64進行編碼和解碼；json
base64ToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
複製代碼
ok,處理好可交互的數據就能夠上傳到本身的服務器了，以後至關於普通H5頁面的圖片交互了,可上傳可下載😄小程序
let param = new FormData();
param.append('headPic', imageData);
this.$http.post('/upload.json', {
headers: {
'Content-Type': 'multipart/form-data',
},
params: param,
}).then(res => {
console.log('上傳成功', res);
});
複製代碼
最終效果
wx.chooseImage成功調用後iOS和android分別調起系統原生的拍照和相冊，分別以下圖：微信小程序
完整代碼
終於。。。能夠告一段落了，至此小程序的web-view裏成功使用了wx.chooseImage,下面把完整代碼貼出來，敬請參考😄
<template>
<div class="card-avatar">
<img
:src="avatarUrl"
>
<div
class="choose-image"
@click="chooseImage"
/>
</div>
</template>
<script>
import wx from 'weixin-js-sdk';
const imgUrl = require('../../common/assets/images/default-avatar.png')；
export default {
name: 'Card',
components: {
},
props: {
},
data() {
return {
avatarUrl: imgUrl,
};
},
computed: {
},
watch: {
},
mounted() {
this.getWxConfigDatas();
},
methods: {
getWxConfigDatas() {
const params = {
checkCode: getUrlParams().checkCode, // 從地址欄獲取checkCode用於校驗signature
};
this.$http.get('/signature.json', { params }).then(res => {
if (res.content.data && res.content.data.signature) {
this.registereWxApi(res.content.data.signature);
}
});
},
registereWxApi(data) {
wx.config({
// debug: true,
jsApiList: ['chooseImage', 'getLocalImgData'],
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
});
},
chooseImage() {
let that = this;
if (window.__wxjs_environment === 'miniprogram') {
wx.miniProgram.getEnv(function(res) {
if (res.miniprogram) {
wx.checkJsApi({
jsApiList: ['chooseImage', 'getLocalImgData'],
success: function(res) {
if (res.checkResult.chooseImage) {
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(req) {
wx.getLocalImgData({
localId: req.localIds[0].toString(),
success: function (res) {
const localData = res.localData;
let imageBase64 = '';
if (localData.indexOf('data:image') == 0) {
//蘋果的直接賦值，默認生成'data:image/jpeg;base64,'的頭部拼接
imageBase64 = localData;
} else {
//此處是安卓中的惟一得坑！在拼接前須要對localData進行換行符的全局替換
//此時一個正常的base64圖片路徑就完美生成賦值到img的src中了
imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
}
that.avatarUrl = imageBase64;
that.handleAvatar(that.dataURLtoBlob(imageBase64));
}
});
},
fail() {
that.$toast.show({
type: 'text',
text: '選擇頭像失敗！',
});
}
});
} else {
that.$toast.show({
type: 'text',
text: '暫不支持修改頭像！',
});
}
},
fail: function() {
that.$toast.show({
type: 'text',
text: '暫不支持修改頭像！',
});
},
});
} else {
that.lgBridgeChooseImage();
}
});
} else {
that.lgBridgeChooseImage();
}
},
handleAvatar(imageData) {
let that = this;
let param = new FormData();
param.append('headPic', imageData);
that.$http.post('/upload.json', {
headers: {
'Content-Type': 'multipart/form-data',
},
params: param,
}).then(res => {
if (parseInt(res.state, 10) === 1) {
that.$toast.show({
type: 'success',
text: '上傳成功！',
});
that.avatarUrl = res.content && res.content.data && res.content.data.url;
}
});
},
dataURLtoBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
}
};
</script>
<style lang="less" scoped>
.card-avatar {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
.choose-image, input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
</style>
複製代碼
這個需求作下來參考了很多文章，其實大多都是隻知其一;不知其二，每一個人遇到的問題不一樣，這篇文章能夠說完全解決wx.chooseImage的各類疑難雜症，一步到位,所以趁着今天休息把整個過程記錄下來，分享給以後有須要的各位同行！
精彩預告：最近歷時兩個月的大需求遇到不少深坑，接下來會相繼分享出來，以此共勉😂
更多精彩內容歡迎關注個人公衆號【天道酬勤Lewis】
相關文章
- 1. 一文完全弄懂wx.chooseImage
- 2. 完全弄懂 Unicode 編碼
- 3. 完全弄懂python編碼
- 4. 完全弄懂session，cookie，token
- 5. 這一次，完全弄懂 Promise 原理
- 6. 完全弄懂dalvik字節碼【一】
- 7. 完全弄懂jQuery事件原理一
- 8. 一文弄懂Redis
- 9. 面試不會裝飾器？一文完全弄懂裝飾器
- 10. 一文完全弄懂零拷貝原理
- 更多相關文章...
- • ASP.NET MVC - 安全 - ASP.NET 教程
- • Docker 命令大全 - Docker教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 一文完全弄懂wx.chooseImage
- 2. 完全弄懂 Unicode 編碼
- 3. 完全弄懂python編碼
- 4. 完全弄懂session，cookie，token
- 5. 這一次，完全弄懂 Promise 原理
- 6. 完全弄懂dalvik字節碼【一】
- 7. 完全弄懂jQuery事件原理一
- 8. 一文弄懂Redis
- 9. 面試不會裝飾器？一文完全弄懂裝飾器
- 10. 一文完全弄懂零拷貝原理