vue编写微信公众号打开相机功能，什么都不多说直接上代码
页面布局代码
<group class="upload-content" title="上传图片" label-width="5.5em" label-margin-right="1em">
<div class="img_Video">
<div class="img_upload img_load_box" v-for="(item, index) in ioslocId" :key="index">
<img
class="previewer-demo-img"
:key="index"
:src="item.src"
width="100"
@click="previewImg(index)"
>
<icon type="clear" class="del_pic" @click.native="deletePic(index)"></icon>
</div>
<div class="img_upload img_load_btn" @click="imgup" v-if="imgBoolean">
<div>
<img src="/static/images/inner/add.png" alt>
</div>
</div>
</div>
</group>
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<String, Object> getWxJSConf(HttpServletRequest request, HttpServletResponse response) {
String PageUrl = request.getParameter("url");
Map<String, Object> result = new HashMap<String, Object>();
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("×tamp=" + 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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流
网友评论