记录一下首次调用wx公众号JSSDK心路
2024-05-29 06:31:27
需求为 公众号点击按钮调用手机摄像头或本地图库 取身份证图片 OCR 识别(智能接口)得到相关信息 放到表单内 注册信息 查阅官网
第一步
是绑定域名(导致 修改一次打版到服务器 域名不同步 得不到config签名中url)
第二步
引js文件 我是采用 npm install weixin-js-sdk
第三步
vx.config 查询大部分的文档都是后端一个接口 给出必填的4项 我是只有appId token 其余自己处理
mounted() {this.wx();},
methods: {//微信初始化wx() {this.getJsapiTicket(this.getJsapiTicketCallback);},//签名需要 获取jsapi_ticketgetJsapiTicket(callback) {JsapTick({}).then(response => {callback(response.data.result);});},/*** 获得随机字符串* @param e 字符串位数*/getNonceStr(e) {e = e || 32;var t = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",a = t.length,n = "";for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));return n;},/*** 获得时间戳*/getTimestamp() {return (parseInt(new Date().getTime()) + "").substring(0, 10);},/*** 获得config微信签名* npm install js-sha1 引入* @param*/getConfigSignature(jsapi_ticket, timestamp, nonceStr, url) {//待签名数据let obj = new Map();obj.set("timestamp", timestamp);obj.set("noncestr", nonceStr);obj.set("jsapi_ticket", jsapi_ticket);obj.set("url", url);//排序签名串let waitSignatureStr = this.sort_ascii(obj);// console.log("waitSignatureStr:",waitSignatureStr)//签名加密let sha1 = require("js-sha1");let signtureStr = sha1(waitSignatureStr);// console.log("signtureStr:",signtureStr)return signtureStr;},/*** 获得按ASCII排序的签名串* @param obj 待加密数据Map*/sort_ascii(obj) {console.log(obj, "obj");let arr = new Array();let num = 0;//遍历Keyfor (let i of obj.keys()) {// console.log(i,"i")arr[num] = i;num++;}// console.log(arr,"arr")//按ascii排序let sortArr = arr.sort();//自定义排序字符串let str = "";for (let i in sortArr) {str += sortArr[i] + "=" + obj.get(sortArr[i]) + "&";}//去除两侧字符串let char = "&";str = str.replace(new RegExp("^\\" + char + "+|\\" + char + "+$", "g"),"");return str;},/* 配置wx.config*/getJsapiTicketCallback(jsapi_ticket) {let timestamp = this.getTimestamp();let nonceStr = this.getNonceStr();let url = window.location.href.substring(0,window.location.href.lastIndexOf("#"));let signature = this.getConfigSignature(jsapi_ticket,timestamp,nonceStr,url);wx.config({debug: false, // 开启调试模式。appId: this.vx, // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: ["chooseImage", 'uploadImage', 'downloadImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表});},
}
第四步
配置ok后 点击按钮 给后端一张照片 调用wx成功后 图片是base64 OCR是需要file文件 所以得到图片后还要将base64 转换成file 采用"Content-Type": "multipart/form-data" 传输 拿到接口返回的信息
//点击按钮
scanning() {let that = this;//判断当前客户端版本是否支持指定JS接口wx.checkJsApi({jsApiList: ['chooseImage', 'getLocalImgData'],success: function(res) {//拍照或从手机相册中选图接口wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {var localIds = res.localIds[0].toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片//获取本地图片接口 这项localData是图片的base64数据，可以用img标签显示wx.getLocalImgData({localId: res.localIds[0].toString(),success: function(res) {const localData = res.localData;let imageBase64 = '';if (localData.indexOf('data:image') == 0) {//苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接imageBase64 = localData;} else {//此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换//此时一个正常的base64图片路径就完美生成赋值到img的src中了imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');}//base64做处理 然后传给后端that.handleAvatar(that.dataURLtoBlob(imageBase64));}});}});}});},//base转换file (还有文档 采用 blob 刚开始我也是用blob 最终因为 return 的file 和element ui 上传得到格式是一致) dataURLtoBlob(dataurl) {let arr = dataurl.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], 'multipartFile', {type: mime});},//正常传输 handleAvatar(imageData) {let multipartFile = new FormData();multipartFile.append('multipartFile', imageData);Orcheck(multipartFile,).then((response) => {this.userName = response.data.result.namethis.idCardNum = response.data.result.idthis.birthday = response.data.result.birththis.address = response.data.result.addrthis.sexName = response.data.result.genderif (this.sexName == '男') {this.sex = '1'} else {this.sex = '2'}//日期字符串转换日期格式 计算年龄var strDa = this.birthday.split(" ");var strDatepart = strDa[0].split("-");var time = new Date(strDatepart[0], strDatepart[1] - 1, strDatepart[2]);time = time.Format("yyyy-MM-dd");this.age = patient.jsGetAge(time);}).catch((error) => {Toast(error);});},//下面就是转换的方法/*根据出生日期算出年龄*/jsGetAge(strBirthday) {var returnAge;var birthYear = strBirthday.substr(0, 4);var birthMonth = strBirthday.substr(4, 2);var birthDay = strBirthday.substr(6, 2);var d = new Date();var nowYear = d.getFullYear();var nowMonth = d.getMonth() + 1;var nowDay = d.getDate();if (nowYear == birthYear) {returnAge = 0;//同年 则为0岁} else {var ageDiff = nowYear - birthYear; //年之差if (ageDiff > 0) {if (nowMonth == birthMonth) {var dayDiff = nowDay - birthDay;//日之差if (dayDiff < 0) {returnAge = ageDiff - 1;} else {returnAge = ageDiff;}} else {var monthDiff = nowMonth - birthMonth;//月之差if (monthDiff < 0) {returnAge = ageDiff - 1;} else {returnAge = ageDiff;}}} else {returnAge = -1;//返回-1 表示出生日期输入错误 晚于今天}}return "" + returnAge;//返回周岁年龄},/*根据身份证号算出出生日期*/getBirthdayFromIdCard : function(idCard) { var birthday = ""; if(idCard != null && idCard != ""){ if(idCard.length == 15){ birthday = "19"+idCard.substr(6,6); } else if(idCard.length == 18){ birthday = idCard.substr(6,8); } birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-"); } return birthday; },/*根据身份证号算出性别*///男返回“1”，女返回“2”getSexFromIdCard : function(idCard) { if (parseInt(idCard.substr(16, 1)) % 2 == 1) {return "1";} else {return "2";}},
};
记录一下首次调用wx公众号JSSDK心路相关推荐
- 微信公众号js-sdk使用步骤总结
微信公众号js-sdk使用步骤总结 1. 域名绑定 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 可填写三 ...
- php企业微信号js-sdk,php微信公众号js-sdk开发应用
这篇文章主要为大家详细介绍了php微信公众号js-sdk开发应用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 测试js的接口功能,我用的是BAE服务器不是SAE服务器.SAE服务器不能 ...
- weixin公众号页面返回上一层_微信公众号jssdk打开内置地图点击返回会回到之前页面，怎么退出页面...
问题描述 在使用公众号jssdk过程中,用户需求点击公众号菜单微信内置地图打开指定地点. 暂用实现过程为 用户打开空白页面 空白页面wx.config wx.openLocation打开内置地图 问题 ...
- 微信公众号jssdk 分享/App原生应用接入分享开发及应用场景
文章目录 前言 一.应用场景 二.Jssdk 接入准备工作 1.申请企业版微信公众号,并进行认证,并设置成为开发者 2.公众号配置 3.查看appid.设置密钥.并配置ip 白名单等 三.开发接入 1 ...
- WX公众号授权登录的简单应用
2019独角兽企业重金招聘Python工程师标准>>> 项目中我们经常会遇到第三方登录,那我们今天就来看看WX公众号授权登录的过程是怎么样的,其实微信公众平台中的开发者文档已经写得非 ...
- 第三方网站调用微信公众号的图片被禁止
第三方网站调用微信公众号的图片被禁止 借助搜狗搜索的接口来处理,让后端转码,前端调用 <meta name="referrer" content="no-refer ...
- php调用微信公众号支付接口,Thinkphp微信公众号支付接口
本文实例为大家分享了Thinkphp微信公众号支付接口,供大家参考,具体内容如下 第一步 先把文件夹的那两个图片 配置成一样的路径 除了域名要改 其他保持一致. 第二步 把 Weixinpay 这个 ...
- C# 调用微信公众号接口发送客服消息示例
客服消息发送比较简单 注:指定openid和消息内容使用Post发送就可以,很多时候需要在触发事件或相应的情况下发送 官方文档:https://mp.weixin.qq.com/wiki?t=reso ...
- 微信公众号 Jssdk调用错误码：63002， 获取access_token错误代码 errcode 40164的解决方法，如何解决，微信公众号的坑。
今晚在开发公众号,需要调用到 Jssdk,结果配置好了,一运行就提示:Errmsg:"config:fail,Error: 系统错误,错误码:63002,invalid signature ...
最新文章
- 如何在CentOS 5.x 中安装Windows Azure Linux Agent (WALA)
- H.264的一些资料整理
- sonar 匿名内部类写法不推荐
- vue - 父子组件通信之$emit传多个参数
- java tls 实例_grpc加密TLS初体验（go、java版本）
- 1064. 朋友数(20)-PAT乙级真题
- 简单的开源日志Log4D delphi 6---delphi xe 10全可用
- matlab查表svpwm,SVPWM的查表生成方式代码
- android 各国语言对应的缩写
- TKMybatis的使用大全和例子（example、Criteria、and、or）
- idea中按住ctrl+滚轮改变字体大小
- 电脑使用手机摄像头（超详细）
- 微信付款到个人银行卡php,微信企业付款到银行卡(下)
- 【模拟器】华三模拟器HCL安装操作指导
- python解析word中表格_python读取word表格
- vue php聊天室,实时聊天室：基于Laravel+Pusher+Vue通过事件广播实现
- jupyter note 打开md文件
- iconv 库编译流程
- oracle电子商务套件使用手册,甲骨文电子商务套件操作.pdf
- Spring Boot教程（二十五）返回JSON格式