vue編寫微信公眾號打開相機功能，什么都不多說直接上代碼

頁面布局代碼

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, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。

appId: res.data.appId, // 必填，公眾號的唯一標識

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

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

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

});

}

});

},

后端驗證代碼

/**

* 微信js api驗證--找電工頁面

*

* @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, // 最多可以選擇的圖片張數，默認9

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

sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認二者都有

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.圖片預覽功能

//圖片展示

ylimg() {

let $this = this;

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

wx.getLocalImgData({

//循環調用 getLocalImgData

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

success: function(res) {

var localData = res.localData; // localData是圖片的base64數據，可以用img標簽顯示

if (window.__wxjs_is_wkwebview) {

//ios

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

} else {

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

}

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

this.scrollFn();

}

});

// }

},

//圖片預覽

previewImg(index){

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

},

上面的代碼寫出了微信公眾號里面調取攝像頭所有步驟的實現代碼。微信公眾號第一步要實現獲取到公眾號的唯一標志。開啟攝像頭調取的是微信自帶的wx.chooseImage方法。可以實現讀取到本地攝像頭，圖片展示功能就是調取微信自帶的 wx.getLocalImgData方法，這里要注意到兩個系統的區別，要轉換成base64位的。以上就是全部微信公眾號獲取相機功能拍照以及預覽。

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

95后前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這里，希望給每一個看到的你能帶來一點幫助。

歡迎留言交流

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。