微信公众号：weixin-js-sdk使用总结

JS-SDK说明文档
网页授权说明文档
微信公众号授权登录参考方案
http接口请求封装参考方案

记录微信公众号开发过程中遇到的问题以及解决方案：

1、安装weixin-js-sdk

npm install weixin-js-sdk

2、封装wechat.js

import wx from 'weixin-js-sdk' // 引入微信js-sdk
import http from '@/utils/axios.js'; //接口请求封装class AuthWechat {signLink() {if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {window.entryUrl = document.location.href}return /(Android)/i.test(navigator.userAgent) ? document.location.href : window.entryUrl;}// 当前是否是微信环境isWeixin() {return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;}/*** 初始化wechat(分享配置)*/wechat() {return new Promise((resolve, reject) => {let url = this.signLink()http.post('Users/shareSign', {url: url}).then(res => {if (res.code == 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, // 必填，签名jsApiList: ['updateAppMessageShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容'updateTimelineShareData', // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）'scanQRCode', // 扫一扫'getLocation', // 获取地理位置'openLocation', // 使用微信内置地图查看位置接口'chooseImage', //拍照或从手机相册中选图接口'closeWindow', //关闭当前网页窗口接口]})wx.ready(res => {// 微信SDK准备就绪后执行的回调。resolve(wx, res)})wx.error(err => {reject(wx, err)})}})})}// 微信分享wxShare(shareObj) {this.wechat().then((wx, res) => {wx.ready(() => {wx.updateAppMessageShareData({title: shareObj.title, // 分享标题link: shareObj.link, // 分享链接desc: shareObj.desc, // 分享描述imgUrl: shareObj.imgUrl,success: function() {},cancel: function() {}});wx.updateTimelineShareData({title: shareObj.title, // 分享标题link: shareObj.link, // 分享链接desc: shareObj.desc, // 分享描述imgUrl: shareObj.imgUrl,success: function() {},cancel: function() {}});})})}// 扫一扫scanQRCode() {return new Promise((resolve, reject) => {this.wechat().then((wx, res) => {this.toPromise(wx.scanQRCode, {needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有}).then(res => {resolve(res);}).catch(err => {reject(err);});})})}// 获取地理位置接口getLocation() {return new Promise((resolve, reject) => {this.wechat().then((wx, res) => {this.toPromise(wx.getLocation, {type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'}).then(res => {resolve(res);}).catch(err => {reject(err);});})})}// 使用微信内置地图查看位置接口openLocation(data) {return new Promise((resolve, reject) => {this.wechat().then((wx, res) => {this.toPromise(wx.openLocation, {latitude: data.latitude, // 纬度，浮点数，范围为90 ~ -90longitude: data.longitude, // 经度，浮点数，范围为180 ~ -180。name: '', // 位置名address: '', // 地址详情说明scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转}).then(res => {resolve(res);}).catch(err => {reject(err);});})})}// 拍照或从手机相册中选图接口chooseImage() {return new Promise((resolve, reject) => {this.wechat().then((wx, res) => {this.toPromise(wx.chooseImage, {count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有}).then(res => {resolve(res);}).catch(err => {reject(err);});})})}// 关闭当前网页窗口接口closeWindow() {this.wechat().then((wx, res) => {wx.ready(() => {wx.closeWindow();})})}toPromise(fn, config = {}) {return new Promise((resolve, reject) => {fn({...config,success(res) {resolve(res);},fail(err) {reject(err);},complete(err) {reject(err);},cancel(err) {reject(err);}});});}// 如果你需要添加新的方法，请查下步骤5
}export default new AuthWechat();

3、main.js

import wechat from '@/utils/wechat.js'
Object.assign(Vue.prototype, {'$wechat':wechat
})

4、页面调用方式

<template><view class="message"><u-button type="primary" @click="scanQRCode">扫一扫</u-button><u-button type="primary" @click="getLocation">获取地理位置</u-button><u-button type="primary" @click="openLocation">使用微信内置地图查看位置</u-button><u-button type="primary" @click="chooseImage">拍照或从手机相册中选图</u-button><u-button type="primary" @click="closeWindow">关闭当前网页窗口</u-button></view>
</template>
<script>export default {components: {},data() {return {latitude: '',longitude: '',}},onShow() {if(this.$wechat.isWeixin()){let shareObj = {title: '测试2', // 分享标题link: 'https://mpm.yoronglife.com/pages/mall/goodsDetail?id=1', // 分享链接desc: '描述2', // 分享描述imgUrl: 'https://mpweb.yoronglife.com/uploads/default/logo.png',}this.$wechat.wxShare(shareObj)}},methods: {scanQRCode(){this.$wechat.scanQRCode().then(res=>{alert(JSON.stringify(res))})},getLocation(){this.$wechat.getLocation().then(res=>{this.latitude = res.latitude;this.longitude = res.longitude;alert(JSON.stringify(res))})},openLocation(){let data = {'latitude' : this.latitude,'longitude' : this.longitude,}this.$wechat.openLocation(data).then(res=>{alert(JSON.stringify(res))})},chooseImage(){this.$wechat.chooseImage().then(res=>{alert(JSON.stringify(res.localIds))// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片})},closeWindow(){this.$wechat.closeWindow()},},}
</script>

上边内容仅记录了一部分API的使用方式。如果你需要其他功能，如预览图片，可直接用下面这种方式复制到

5、如果你需要用到其他功能，在这里按照这种方式接着定义新的方法：
示例预览图片：this.toPromis(wx.方法名，参数)
记得在config中添加jsApiList:[‘previewImage’]

previewImage(images) {// 1.如果需要有返回值，就封装一层Promise，return new Promise((resolve, reject) => {this.wechat().then((wx, res) => {this.toPromise(wx.previewImage, {current: '', // 当前显示图片的http链接urls: [] // 需要预览的图片http链接列表}).then(res => {resolve(res);}).catch(err => {reject(err);});})})// 2.如果不需要返回值，这里直接在wx.ready中实现具体的功能this.wechat().then((wx, res) => {wx.ready(() => {wx.previewImage(images);})})
}页面中调用预览图片
let images = {current:'http://****',urls:[:'http://****',:'http://****']
}
this.$wechat.previewImage(images)

以上内容及代码均经过测试，可直接复用！！！

这篇文章对你有用的话，留个赞吧~~

微信公众号：weixin-js-sdk使用总结相关推荐

微信公众号开发--js关闭浏览器回到公众号对话窗口
使用场景:页面操作结束,需要关闭当前浏览器,回到公众号对话窗口.例如:某项目需求支持用户将openId和系统内userId进行绑定和解绑定,在执行完解绑定后关闭当前微信浏览器回到公众号对话窗口. 完成 ...
vue中开发微信公众号中用js关闭当前浏览器页面
1.引用微信的SDK npm install weixin-js-sdk --save import wx from 'weixin-js-sdk'export default {} 2.关闭微信浏览 ...
微信公众号python_wechat: 微信 Python SDK，支持微信公众号以及企业号的上行消息及 OAuth 接口...
微信公众号Python-SDK 本SDK支持微信公众号以及企业号的上行消息及OAuth接口.本文档及SDK假设使用者已经具备微信公众号开发的基础知识,及有能力通过微信公众号.企业号的文档来查找相关的接 ...
js逆向常用加密 + 微信公众号平台试练
文章目录 js常见的加密方式 Md5加密 DES/AES 加密 RSA加密微信公众号平台js算法改写 js常见的加密方式常见的加密算法基本分为这几类: 线性散列算法(签名算法) MD5 md2 m ...
公众号第三方平台和微信公众号平台的区别与开发步骤
我们知道通过微信公众号平台的开放API可以实现用户个性制定制的功能,我们又知道使用开放API时必须知道AppID(应用ID)和AppSecret(应用密钥),而且还要配置URL(服务器地址).Toke ...
如何爬取微信公众号文章（二）
在如何爬取微信公众号(一)中完成了将爬取公众号文章的元数据存入数据库,其中包括文章的连接.标题.发布时间.摘要和封面图片等信息.下面介绍如何根据文章链接来爬取文章内容. 开发环境 windows 7 ...
微信公众号开发的一些方法总结
概述微信公众号开发,其实就是微信使用者.微信公众号平台和自身服务器的http消息交互:在这一系列过程中,微信公众号平台充当了中介和转发作用(如图1所示).需要注意的是,微信公众号平台向自身服务器转发 ...
微信公众号分享网页注意点
最近自己要做微信分享的防封,就研究一下市面做的分享防封原理,基本分流防封是一个做法. 过程讲述: 通过一个微信公众号分享一个入口,记住这个分享内容网页的内容最好一点违规的都没有,标题和图片可以带有诱导 ...
微信公众号语音录音jssdk
1.开发流程如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk. 使用微信jssdk:微信JS-S ...
使用Senparc.Weixin SDK搭建微信公众号服务程序
之前学过一些关于微信公众号二次开发的教程,偶然的机会接触了Senparc.Weixin SDK,确实是不错的框架,所以想着按照http://www.cnblogs.com/szw/archive/20 ...

微信公众号：weixin-js-sdk使用总结

微信公众号：weixin-js-sdk使用总结相关推荐

最新文章

热门文章