基于vue-cli的微信网页开发中的js-sdk的使用
参考文档:微信公众平台、踩坑记录
一.简介
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题。微信JS-SDK是微信公众号平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
二.JSSDK使用步骤
1.绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
2.引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
或者一步到位使用npm包安装
3.通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
我这里是采用了vuex组件来统一管理。
store.js中的mutations与actions分别如下面两张图所示
// URLconfig接口注入权限验证配置(接口调用前一个页面必须要来一次这个)INITWX (state, params) {wx.config({debug: state.wx_debug,appId: params.appId,timestamp: params.timestamp,nonceStr: params.nonceStr,signature: params.signature,jsApiList: params.jsApiList})wx.ready(function () {alert('wx config ok')state.wx_configFlag = true})wx.error(function (res) {alert('wx error ok')state.wx_configFlag = false})},
getWeChatSignature ({commit}, desurl) {back.jsSdkGet(desurl).then((response) => {console.log(response)var initConfigVal = {}initConfigVal.appId = 'wx2e8318a57a727f36'initConfigVal.timestamp = response.data.timestampinitConfigVal.nonceStr = response.data.nonceStrinitConfigVal.signature = response.data.signature// jsApiList可以写死,也可以外部传参进来******是通过push么?initConfigVal.jsApiList = ['getLocation', 'chooseImage', 'uploadImage', 'downloadImage', 'getLocalImgData']commit('INITWX', initConfigVal)})},
4.通过ready接口处理成功验证
wx.ready(function () {alert('wx config ok')state.wx_configFlag = true})
5.通过error接口处理失败验证
wx.error(function (res) {alert('wx error ok')state.wx_configFlag = false})
三.以调用图像接口为例简单说明
1.拍照或从手机相册中选图接口以及上传图片接口
// 拍照或从手机相册中选图接口(get localId)PHOTOIMAGE (state, payload) {console.log(payload)alert('image')wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) { // ******这个res是怎么就能得到一个对象?函数本身封装的console.log('选择接口调用成功')var localIds = res.localIds// console.log(localIds)state.wx_localIds = localIds// 上传图图片接口(localId)setTimeout(() => {wx.uploadImage({localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {console.log('上传接口调用成功')var serverId = res.serverId // 返回图片的服务器端IDstate.wx_imgSId = serverIdconsole.log(state.wx_imgSId)},fail: function (res) {console.log('上传接口调用失败')}})}, 2000)
2.下载图片接口
// 下载图片接口(serverId)DOWNLOADIMAGE (serverId) {wx.downloadImage({serverId: state.wx_imgSId, // 需要下载的图片的服务器端ID,由uploadImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {console.log('下载接口调用成功')var localId = res.localId // 返回图片下载后的本地IDconsole.log(localId)// this.$store.commit('newLocalId', localId)// 获取本地图片接口wx.getLocalImgData({localId: localId,success: function (res) {console.log('获取图片接口调用成功')var localData = res.localData // localData是图片的base64数据,可以用img标签显示console.log(localData)},fail: function (res) {console.log('获取图片接口调用失败')}})},fail: function (res) {console.log('下载接口调用失败')}})},
基于vue-cli的微信网页开发中的js-sdk的使用相关推荐
- 基于svelte3+sass仿微信网页版聊天|svelte.js 桌面聊天实例SvelteWebChat
svelte-webchat:基于svelte3+svelteKit仿微信mac网页版聊天实战案例. 采用了最新前端svelte.js框架,基于svelte3+svelteKit+sass+svelt ...
- 微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
- html微信开发样式,微信网页开发样式库
概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一.在微信网页开发中使用 WeUI,有如下优势: 1.同微信客户端一致的 ...
- 微信hash ajax,基于vue hash模式微信分享#号的解决
看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出 ...
- 微信网页开发wx.chooseImage多图上传、预览(已解决)
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
- H5微信网页开发总结(授权,分享,地图)
H5微信网页开发总结(网页授权,JS-SDK分享.地图) 目录: 网页授权 分享 地图 参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_ ...
- 微信网页开发配置整理
真是人越大记忆越差,断断续续做了几个微信小程序和微信h5项目,然鹅小程序的开发流程有些都忘了,最近刚做完一个微信h5网页开发的项目,所以赶紧记录下开发中需要注意的点,给自己往后回顾,同时也给第一次接入 ...
- 微信网页开发 分享功能剖析
微信网页开发 分享功能剖析 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 步骤二:引入J ...
- 微信昵称乱码 mysql_微信网页开发获取用户昵称乱码 微信昵称包含emoji表情乱码的解决方案...
微信网页开发获取用户昵称乱码 微信昵称包含emoji表情乱码的解决方案如下: 问题产生原因:由于数据库及属性一致设为utf8,而utf8只支持1-3个字节.当用户昵称为emoji表情时,获取用户基本信 ...
最新文章
- 无法访问linux mysql_远程无法访问linux Mysql解决方案(转)
- 区块链软件公司用区块链技能重塑科学出书社
- 01背包问题+完全背包问题+多重背包问题
- python字典进行大写转化_python之字典的增删改查
- 【自用】 VS2017 部分快捷键
- Vue(八)发送跨域请求
- 上下双刘海设计感受下!夏普新旗舰亮相:骁龙855加持
- 分布式一致性算法-paxos详解与分析
- yolov3 python接口_darknetyolov3调用Python接口来检测和保存批处理图像,DarknetYoloV3,python,进行,批量,图片,并...
- 【ACL2020】今日放榜,779篇论文被接收,姚班校友陈丹琦首日演讲
- 监控服务器ssh登录,并发送报警邮件
- FFTW3在VS环境下的安装(亲测)
- 如何使用DotfuscatorPro_4.9对软件进行加密
- C# 线程同步 信号量 Semaphore
- Unity 基础知识参考
- 利用nginx搭建http和rtmp协议的流媒体服务器,用nginx搭建http/rtmp/hls协议的MP4/FLV流媒体服务器...
- 指纹识别 matlab
- 408 操作系统 操作系统概述
- 编程语言数值型和字符型数据的概念
- 计算机网络--七层协议/五层协议