vue編寫微信公眾號(hào)打開相機(jī)功能，什么都不多說(shuō)直接上代碼

頁(yè)面布局代碼

class="previewer-demo-img"

:key="index"

:src="item.src"

width="100"

@click="previewImg(index)"

>

1.微信config初始化前端代碼

initWxConfig() {

let $this = this;

let url = location.href.split("#")[0];

let dataW = qs.stringify({ url: url });

axios

.post(baseURL + "/wx/getWxJSConfig", dataW)

.then(res => {

if (res.status == "200") {

wx.config({

debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。

appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)

timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳

nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串

signature: res.data.signature, // 必填，簽名，見附錄1

jsApiList: [

"checkJsApi",

"onMenuShareTimeline",

"onMenuShareAppMessage",

"onMenuShareQQ",

"onMenuShareWeibo",

"onMenuShareQZone",

"hideMenuItems",

"showMenuItems",

"hideAllNonBaseMenuItem",

"showAllNonBaseMenuItem",

"translateVoice",

"startRecord",

"stopRecord",

"onVoiceRecordEnd",

"playVoice",

"onVoicePlayEnd",

"pauseVoice",

"stopVoice",

"uploadVoice",

"downloadVoice",

"chooseImage",

"previewImage",

"uploadImage",

"downloadImage",

"getNetworkType",

"openLocation",

"getLocation",

"hideOptionMenu",

"showOptionMenu",

"closeWindow",

"scanQRCode",

"chooseWXPay",

"openProductSpecificView",

"addCard",

"chooseCard",

"openCard"

] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2

});

}

});

},

后端驗(yàn)證代碼

/**

* 微信js api驗(yàn)證--找電工頁(yè)面

*

* @param request

* @param response

* @return

* @throws DataAccessException

* @throws Exception

*/

@RequestMapping("wx/getWxJSConfig")

@ResponseBody

public Map getWxJSConf(HttpServletRequest request, HttpServletResponse response) {

String PageUrl = request.getParameter("url");

Map result = new HashMap();

result.put("appId", ConfigUtil.APPID);

String access_token = "";

if(access_token == null || access_token=="" || "null".equals(access_token)){

String url="https://api.weixin.qq.com/cgi-bin/token";

String param="grant_type=client_credential&appid="+ConfigUtil.APPID+"&secret="+ConfigUtil.APP_SECRECT;

String token=WeixinUtil.httpGet(url, param);

JSONObject j=new JSONObject(token);

access_token=(String) j.get("access_token");

request.getServletContext().setAttribute("access_token", access_token);

}

String url_ticket="https://api.weixin.qq.com/cgi-bin/ticket/getticket";

String param="access_token="+access_token+"&type=jsapi";

String ticket=WeixinUtil.httpGet(url_ticket, param);

JSONObject j=new JSONObject(ticket);

String jsapi_ticket=(String) j.get("ticket");

request.getServletContext().setAttribute("jsapi_ticket", jsapi_ticket);

long timestamp = new Date().getTime();

String nonceStr = WeixinUtil.getRandomString(16);

//String PageUrl = "http://whemap.3w.net579.com/jzfp_m/wx/test";

StringBuilder sb = new StringBuilder();

sb.append("jsapi_ticket=" + jsapi_ticket);

sb.append("&noncestr=" + nonceStr);

sb.append("&timestamp=" + timestamp);

sb.append("&url=" + PageUrl);

String signature = new SHA1().getDigestOfString(sb.toString().getBytes());

result.put("timestamp", timestamp);

result.put("nonceStr", nonceStr);

result.put("signature", signature);

return result;

}

2.開啟攝像頭

//圖片上傳

imgup() {

let $this = this;

wx.chooseImage({

count: 9, // 最多可以選擇的圖片張數(shù)，默認(rèn)9

sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認(rèn)二者都有

sourceType: ['album', 'camera'], // album 從相冊(cè)選圖，camera 使用相機(jī)，默認(rèn)二者都有

success: function(res) {

$this.images.localId = res.localIds;

let obj={};

obj.src=res.localIds;

$this.ioslocId.push(obj);

$this.scrollFn();

$this.uploadImge();

if ($this.ioslocId.length >= 9) {

$this.imgBoolean = false;

}

}

});

},

3.圖片預(yù)覽功能

//圖片展示

ylimg() {

let $this = this;

// for (let j = 0; j < $this.images.localId.length; j++) {

wx.getLocalImgData({

//循環(huán)調(diào)用 getLocalImgData

localId: $this.images.localId[j], // 圖片的localID

success: function(res) {

var localData = res.localData; // localData是圖片的base64數(shù)據(jù)，可以用img標(biāo)簽顯示

if (window.__wxjs_is_wkwebview) {

//ios

localData = localData.replace("jgp", "jpeg"); //iOS 系統(tǒng)里面得到的數(shù)據(jù)，類型為 image/jgp,因此需要替換一下

} else {

localData = "data:image/jpeg;base64," + localData; //android

}

$this.ioslocId.push(localData); //把base64格式的圖片添加到ioslocId數(shù)組里 這樣該數(shù)組里的元素都是base64格式的

this.scrollFn();

}

});

// }

},

//圖片預(yù)覽

previewImg(index){

this.$refs.previewer.show(index);

},

上面的代碼寫出了微信公眾號(hào)里面調(diào)取攝像頭所有步驟的實(shí)現(xiàn)代碼。微信公眾號(hào)第一步要實(shí)現(xiàn)獲取到公眾號(hào)的唯一標(biāo)志。開啟攝像頭調(diào)取的是微信自帶的wx.chooseImage方法。可以實(shí)現(xiàn)讀取到本地?cái)z像頭，圖片展示功能就是調(diào)取微信自帶的 wx.getLocalImgData方法，這里要注意到兩個(gè)系統(tǒng)的區(qū)別，要轉(zhuǎn)換成base64位的。以上就是全部微信公眾號(hào)獲取相機(jī)功能拍照以及預(yù)覽。

原文作者技術(shù)博客：https://www.jianshu.com/u/ac4daaeecdfe

95后前端妹子一枚，愛(ài)閱讀，愛(ài)交友，將工作中遇到的問(wèn)題記錄在這里，希望給每一個(gè)看到的你能帶來(lái)一點(diǎn)幫助。

歡迎留言交流

總結(jié)

以上是生活随笔為你收集整理的vue 公众号扫描_vue编写微信公众号打开相机功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。