- 这节课来学习
wxjssdk，然后应用到我们项目中来，开发微信分享给好友，以及分享到朋友圈功能 - 微信jssdk属于微信公众号开发的范畴，是微信官方提供的一套jsApi方法，通过调用微信提供的方法去实现基于微信环境的一些功能，比如微信分享，语音录制以及发送，可点击链接查看可实现的功能https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
- vue进行微信公众号开发需要用到这个插件
weixin-js-sdk - 先安装它
cnpm install weixin-js-sdk --save
- 下面要封装wxjssdk的初始化方法
- 先把获取微信配置项的接口引入到项目中
- 打开接口文档https://www.showdoc.com.cn/2035654172307363/9606515368231674
- 复制接口路径到api文件夹index.js内
const api = {
GetConfigData:"/api/getConfigData",//获取微信配置
}
- 然后在api/user.js文件内新建api方法
// 获取微信配置项
export function getConfigData(data) {
return request({
url: api.GetConfigData,
method: 'post',
data,
})
}
- 然后在
utils目录下新建js文件wxapi.js - js文件内容如下
import wx from 'weixin-js-sdk'
import { getConfigData } from "@/api/user";
const wxApi = {
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回调函数]
*/
wxRegister(callback) {
// 这边的接口请换成你们自己的
getConfigData({ href: location.href.split('#')[0] }).then(res => {
wx.config({
debug: false, // 开启调试模式
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名，见附录1
jsApiList: [
'updateTimelineShareData',
'updateAppMessageShareData',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'onVoicePlayEnd',
'uploadVoice',
'downloadVoice'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
}).catch((error) => {
console.log(error)
})
wx.ready((res) => {
// 如果需要定制ready回调方法
if (callback) {
callback()
}
})
},
/**
* [ShareTimeline 微信分享到朋友圈]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回调]
* @param {[type]} error [失败回调]
*/
ShareTimeline(option) {
wx.updateTimelineShareData({
title: option.title, // 分享标题
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
option.success()
},
cancel() {
// 用户取消分享后执行的回调函数
option.error()
}
})
},
/**
* [ShareAppMessage 微信分享给朋友]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回调]
* @param {[type]} error [失败回调]
*/
ShareAppMessage(option) {
wx.updateAppMessageShareData({
title: option.title, // 分享标题
desc: option.desc, // 分享描述
link: option.link, // 分享链接
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
option.success()
},
cancel() {
// 用户取消分享后执行的回调函数
option.error()
}
})
}
}
export default wxApi;
- wxapi文件创建完成后，我们简单先来测试下，是否可以请求通接口并且和微信官方取得一个正常的通信
- 在App.vue引入wxapi
import wxapi from '@/utils/wxapi'
- 写一个methods方法供wxapi调用
- methods
wxRegCallback() {
//在这里写一些逻辑
}
- 在mounted生命周期内调用wxapi
wxapi.wxRegister(this.wxRegCallback);
- 下面打开微信开发者工具 ，下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 打开开发者工具，点击【公众号网页项目】，输入我们本地的项目地址
- 可以看到获取微信配置项的接口已经成功触发了，但是有个err报错
- 下面先来认识下几个报错信息
image.png
- 这个报错是jssdk接口域名要么出现了错误，（微信公众号需要配置正确域名），要么就是appid使用的不对（后端的错）
image.png
- 上面这种报错，一般是签名失败或失效
- 引入这种问题的情况有很多，比如下面这篇文章
http://wjhsh.net/zmdComeOn-p-9668440.html - 而如果万事俱备的情况下，微信正常的返回应该是这样的
image.png
- 由于是线上正式的微信公众号，所以本地开发无法进行，下面就借助本地的测试appid，自己搭建后端接口代码
- 打开链接 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
- 微信扫码登录，获取本地测试appid和密钥
- 修改js安全接口域名
image.png
- 打开后端node项目，将
utils/wx.js内的appId和secret换成你本地的测试id和密钥 - 然后cnpm install 安装依赖 启动项目 ，启动命令
nodemon - 如果启动不了 就安装这两个命令
cnpm install nodemon --save
cnpm install nodemon
image.png
- 这样就是启动成功了
- 然后把前端的反向代理的地址改成
http://localhost:6666，然后重启前端项目才生效 - 打开开发者工具
image.png
- 出现这个报错，说明你没有关注测试公众号，扫码关注下你的测试公众号二维码
image.png
- 关注后，在刷新开发者工具页面
image.png
- 这样就是和微信正常通信了
- 下面来新建个页面来学习测试下，微信的jssdk功能
- 新建个test页面
- 新建文件
- 配置路由
- 访问test页面
- 先把wxapi引入过来
import wx from 'weixin-js-sdk'
- 给页面写三个按钮，分别是 开始录音 停止录音 播放录音
<template>
<div>
<van-button type="primary" block @click="startRecord">开始录音</van-button>
<br />
<van-button type="primary" block @click="stopRecord">停止录音</van-button>
<br />
<van-button type="primary" block @click="playRecord">播放录音</van-button>
</div>
</template>
- methods
<script>
import wx from 'weixin-js-sdk'
export default {
data() {
return {
localId: ''
}
},
methods: {
/** 开始录音 */
startRecord() {
wx.startRecord()
},
/** 停止录音 */
stopRecord() {
wx.stopRecord({
success: res => {
this.localId = res.localId
}
})
},
/** 播放录音 */
playRecord() {
wx.playVoice({
localId: this.localId // 需要播放的音频的本地ID，由 stopRecord 接口获得
})
}
},
mounted() {}
}
</script>
- 用开发者工具不好测试播放录音，下面请打出你的手机 在微信内访问
http://192.168.31.70:9020/#/test - 发现不行，是因为我们的JS接口安全域名设置的不对，打开地址https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
- 修改js接口安全域名为你的项目ip前端项目地址
192.168.31.70:9020 - 开发者工具访问
http://192.168.31.70:9020/#/test出现errMsg: "config:ok",就是可以测试了 - 刷新手机页面 ，测试录音、停止、播放，就ok了！
- 下面在测试下录音识别功能
- 新建一个按钮
<van-button type="primary" block @click="translateVoice">识别录音</van-button>
- methods
/** 识别语音 */
translateVoice() {
wx.translateVoice({
localId: this.localId, // 需要识别的音频的本地Id，由录音相关接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
alert(res.translateResult) // 语音识别的结果
}
})
}
- 经过测试 会出现这种报错，说明
translateVoice这个api没在jsApiList数组内引入 - 打开
wxapi.js下的jsApiList数组，引入下translateVoice就ok了
image.png
- 下面是识别后的截图
image.png
- 下面学习下如果获取当前位置，利用wxjssdk的
getLocation,openLocation - 先打开wxapi.js下的jsApiList数组，引入下
getLocation和openLocation - 先写一个按钮 ，获取当前位置的经纬度
<van-button type="primary" block @click="getLocation">获取当前位置</van-button>
<div v-if="latitude" style="text-align: center;">
<p>经纬度：{{latitude}}、{{longitude}}</p>
</div>
- methods
/** 获取当前位置 */
getLocation() {
wx.getLocation({
type: 'gcj02', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
success: (res)=> {
this.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
this.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
}
})
},
image.png
- 在写一个按钮，打开微信内置地图，展示我们的当前位置
<van-button type="primary" block @click="openLocation">打开地图</van-button>
- methods
/** 打开地图 */
openLocation() {
wx.openLocation({
latitude: this.latitude, // 纬度，浮点数，范围为90 ~ -90
longitude: this.longitude, // 经度，浮点数，范围为180 ~ -180。
name: '泸州职业技术学院', // 位置名
address: '四川省泸州市龙马潭区长桥路2号', // 地址详情说明
scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
infoUrl: 'https://baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
})
}
- 打开后，就是你的当前位置了
image.png
- 下面在学习一个 微信扫一扫 的功能
- 先打开wxapi.js下的jsApiList数组，引入下
scanQRCode - 写一个按钮，来调用scanQRCode
<van-button type="primary" block @click="scanQRCode">打开扫一扫</van-button>
<div v-if="result" style="text-align: center">
<p>扫码结果</p>
<p>{{result}}</p>
</div>
- methods
/** 打开扫一扫 */
scanQRCode() {
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
success: (res)=> {
this.result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
}
})
}
image.png
- 下面来学习分享到好友的功能
- 先来看这个文章
https://developers.weixin.qq.com/community/minihome/doc/000ce8ba654df8488d2dfd9ad56c00?jumpto=comment&commentid=000602876580309c882d7aa54564 - 新建一个按钮，分享一些信息给好友
<van-button type="primary" block @click="updateAppMessageShareData">分享给好友</van-button>
- methods
/** 分享给好友 */
//需在用户可能点击分享按钮前就先调用 wx.ready
updateAppMessageShareData() {
wx.ready(function () {
//需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: 'hello,大家好，我是渣渣辉', // 分享标题
desc: '渣渣辉天下无敌', // 分享描述
link: 'https://baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fent.nvwu.com%2FUploadFiles_5361%2F20140731%2F20140731182620723.jpg&refer=http%3A%2F%2Fent.nvwu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672149395&t=9b78c767268cc0179861cdf85c41caf4', // 分享图标
success: function () {
// 设置成功
}
})
})
}
分享出去的是一条链接，这是因为微信的坑，之前发过通告，怪自己没看到
这是一个巨坑啊。
说人话：如果出现这个问题，先把链接收藏了，然后从收藏中打开链接再分享，这样就成功了。
或者：从公众号中打开这个链接，也是正常的。微信在恶心人呢
- 下面来开发 分享到朋友圈的功能
- 新建一个按钮，调用分享到朋友圈的jssdk
<van-button type="primary" block @click="updateTimelineShareData">分享到朋友圈</van-button>
- methods
/** 分享到朋友圈 */
updateTimelineShareData() {
wx.ready(function () {
//需在用户可能点击分享按钮前就先调用
wx.updateTimelineShareData({
title: '泸州职业学院天下闻名', // 分享标题
link: 'http://192.168.31.70:9020/#/test', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: 'http://www.lzy.edu.cn/images/lzy_logo.png', // 分享图标
success: function () {
// 设置成功
}
})
})
}
- 基础董jssdk我们学了好几个，我相信大家都会用了，感兴趣的可以自己都试试，下面的链接是官方demo，可以微信打开试试 http://api.weixin.jiaoyubao.cn/
- 真实项目开发中，分享功能不会这么麻烦的，实际上我们一开始写wxapi.js的时候就已经封装好了 分享 的功能，下面就开始直接调用 就行
-
继续
- 将【分享好友和分享朋友圈功能】应用到实际项目中
- 比如我们在App.vue页面来设置一个公共分享模版
- 打开App.vue
- 在
methods里新建两个方法 - 一个是分享给好友的方法
wxShareAppMessage() {
// 微信自定义分享给朋友
let option = {
title: '我正在使用自己开发的社交软件，快来一起畅聊吧', // 分享标题, 请自行替换
desc: `即时聊天，记录退出即焚，保护您的隐私！还等什么，点进来吧～`, // 分享描述, 请自行替换
link: 'https://jianshu.com', // 分享链接，根据自身项目决定是否需要split
imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png', // 分享图标, 请自行替换，需要绝对路径
success: () => {
//alert('分享成功')
},
error: () => {
// alert('已取消分享')
}
}
// 将配置注入通用方法
wxapi.ShareAppMessage(option)
}
- 一个是分享到朋友圈的方法
wxShareTimeline() {
// 微信自定义分享到朋友圈
let option = {
title: '我正在使用自己开发的社交软件，快来一起畅聊吧', // 分享标题, 请自行替换
link: 'https://jianshu.com', // 分享链接，根据自身项目决定是否需要split
imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png', // 分享图标, 请自行替换，需要绝对路径
success: () => {
//alert('分享成功')
},
error: () => {
// alert('已取消分享')
}
}
// 将配置注入通用方法
wxapi.ShareTimeline(option)
},
- 然后这两个方法要在wxRegCallback方法里调用一下
wxRegCallback() {
//在这里写一些逻辑
this.wxShareTimeline()
this.wxShareAppMessage()
},
这样就实现了，自动调用wx.ready
image.png
- 其实这样写，还是略麻烦一点，如果每个页面都有分享需求，那么该如何优化下呢？
- 试试呢？？
- 用到vuex
- 现在vuex中的actions里新建两个公共方法
wxShareTimeline({commit},data){
// 微信自定义分享给朋友
let option = {
title: data.title, // 分享标题, 请自行替换
link: data.link, // 分享链接，根据自身项目决定是否需要split
imgUrl: data.imgUrl, // 分享图标, 请自行替换，需要绝对路径
success: () => {
//alert('分享成功')
},
error: () => {
// alert('已取消分享')
}
}
// 将配置注入通用方法
wxapi.ShareTimeline(option)
},
wxShareAppMessage({commit},data) {
// 微信自定义分享给朋友
let option = {
title: data.title, // 分享标题, 请自行替换
desc: data.desc, // 分享描述, 请自行替换
link: data.link, // 分享链接，根据自身项目决定是否需要split
imgUrl: data.imgUrl, // 分享图标, 请自行替换，需要绝对路径
success: () => {
//alert('分享成功')
},
error: () => {
// alert('已取消分享')
}
}
// 将配置注入通用方法
wxapi.ShareAppMessage(option)
},
- 记得在vuex文件顶部 要先引入 wxapi
import wxapi from '@/utils/wxapi'
- 然后在你想要调用这俩方法的页面 直接调用
this.$store.dispatch('wxShareAppMessage', {
title: `我正在和${this.$route.query.name}聊天，快来围观～`,
desc: '测试描述',
link: location.href,
imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
})
this.$store.dispatch('wxShareTimeline', {
title: `我正在和${this.$route.query.name}聊天，快来围观～`,
link: location.href,
imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
})
- 但前提 你要引入 这几个文件
- 第一个
import wxapi from '@/utils/wxapi'
- 第二 要在methods新建一个方法
wxRegCallback(){
// 在这里面调用vuex里的方法
}
- 第三步 要调用wxapi里的wxRegister方法
wxapi.wxRegister(this.wxRegCallback)
- 最后，wxRegCallback 方法里这样写
wxRegCallback() {
this.$store.dispatch('wxShareAppMessage', {
title: `我正在和${this.$route.query.name}聊天，快来围观～`,
desc: '测试描述',
link: location.href,
imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
})
this.$store.dispatch('wxShareTimeline', {
title: `我正在和${this.$route.query.name}聊天，快来围观～`,
link: location.href,
imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
})
}
- end!!!
