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("×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后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流
vue 公众号扫描_vue编写微信公众号打开相机功能相关推荐
- python爬取微信公众号_Python爬取微信公众号(中间人代理法)
1.环境:ubuntu16.04 + redis + mysql + python3.5 + anyproxy + android + pm2 + npm + node 一台爬虫服,python3环境 ...
- 微信公众号数据2019_历史微信公众号排名,微信公众号新榜排名
历史微信公众号排名,微信公众号新榜排名 公众号排名优化的注意事项及细节今天给大家分享一下,作为微信公众号的排名优化对于大多数人来说都已经知道了有这个渠道的事情,其实很多的新产品及渠道出来以后有不少的人 ...
- silk lobe资源公众号_优化政务微信公众号实现资源共享
原标题:优化政务微信公众号实现资源共享 随着微信公众号和智能APP的兴起和广泛应用,越来越多的政府微信平台开始兴起.近年来,各级政府部门顺应大趋势,充分利用"互联网"技术开展政府服 ...
- 如何开发微信公众号以及如何运营微信公众号
微信公众号已经成为了企业.个人和组织进行品牌推广.宣传和营销的重要平台.但是,如何开发和运营微信公众号并不是一件容易的事情.本文将从以下几个方面来介绍如何开发和运营微信公众号. 一.微信公众号的开发 ...
- qq公众平台出错了609_微信公众号粉丝去哪买?有哪些购买渠道?
微信公众号的粉丝是可以购买的,如果你申请了微信公众号,想要以营利为主的话,需要去不断的增加公众号粉丝的数量才行,这些粉丝现在是可以去购买到的,微信公众号粉丝去哪买呢? 1.可以找专业的平台去购买微信公 ...
- C语言试题五十七之假定输入的字符串中只包含字母和*号。请编写函数function,它的功能是:删除字符串中所有*号。在编写函数时,不得使用c语言提供的字符串函数。
1. 题目 假定输入的字符串中只包含字母和*号.请编写函数function,它的功能是:删除字符串中所有*号.在编写函数时,不得使用c语言提供的字符串函数. 2 .温馨提示 C语言试题汇总里可用于计算 ...
- 腾讯:微信号能修改,微信帐号不允许修改
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] 2020 年了,微信号终于可以修改了. 但是干完坏事,改个微信号就能溜之大吉? 你要知道微信号.微信帐号,是不一样的. 近期腾讯微信官方带 ...
- 87.假定输入的字符串中只包含字母和*号。请编写函数fun,它的功能是:除了字符串前导的*号之外,将串中其他*号全部删除。在编写函数时,不得使用C语言提供的字符串函数。
87.假定输入的字符串中只包含字母和号.请编写函数fun,它的功能是:除了字符串前导的号之外,将串中其他*号全部删除.在编写函数时,不得使用C语言提供的字符串函数. 例如,若字符串中的内容为****A ...
- 66.假定输入的字符串中只包含字母和*号。请编写函数fun,它的功能是:删除字符串中所有的*号。在编写函数时,不得使用C语言提供的字符串函数。
66.假定输入的字符串中只包含字母和号.请编写函数fun,它的功能是:删除字符串中所有的号.在编写函数时,不得使用C语言提供的字符串函数. 例如,若字符串中的内容为****A*BC*DEFG***** ...
最新文章
- .net 4.0下载
- identifier starts immediately after numeric literal
- PyCharm去掉满屏的波浪线
- 2019年第十届蓝桥杯 - 省赛 - Java研究生组 - A. 立方和
- 大数据WEB阶段Maven安装配置与使用
- 【SICP归纳】6 副作用与环境模型
- java Array 需要包_我编写的程序提示没有Arrays类,导入不了java.util.Arrays包,附程序。...
- 小程序 canvas旋转文字
- 行人重识别论文阅读4,行人重识别实验笔记1-无锚行人搜索框架
- 华硕无线网卡测试软件,华硕 AiMesh WiFi系统 无线回程测试
- ios 上h5点击无效_ios h5 点击事件失效及点击延迟
- 自然辩证法小论文选题_★自然辩证法论文题目_自然辩证法毕业论文题目大全_自然辩证法论文选题参考...
- MAE 论文逐段精读【论文精读】(深度学习论文篇)
- iOS 第四天之ViewController
- 《一件小事.呐喊》--鲁迅 词语解释
- 浅谈手机内存不够的解决方法--我的手机是红米note5
- 2022年最热门三款骨传导测评推荐:骨传导选购指南分享,骨传导耳机选哪款好?
- 数组的正负数分割排序
- 【个人网页设计】简单大方
- 龙年新作:水印文字添加工具源码摘要
热门文章
- 如何搭建一个指标体系
- NET问答: 如果动态构建 Query 查询 EntityFramework
- 通过Dapr实现一个简单的基于.net的微服务电商系统(七)——一步一步教你如何撸Dapr之服务限流...
- 轻量级NuGet—BaGet
- 腾讯35k招.NET Core开发,深扒这些技术要求 真的很难吗?
- 一个迷你ASP.NET Core框架的实现(下)
- ProjectFileManager 发布!项目文件管理效率提升10倍以上!
- 普大喜奔 | Azure 免费送网站SSL证书啦!
- .NET开发框架(二)-框架功能简述
- Abp v0.18.0 新版本: MVC Module 启动模板