vue 公众号扫描_vue编写微信公众号打开相机功能

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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流