微信公眾號(hào)weixin-js-sdk使用方法總結(jié)
更新時(shí)間：2022年12月09日 14:12:08 作者：sunly_
最近做了一個(gè)活動(dòng)頁(yè)面,需要自定義微信分享的標(biāo)題、詳情、縮略圖和url,使用到了jssdk,這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)weixin-js-sdk使用方法的相關(guān)資料,需要的朋友可以參考下
記錄微信公眾號(hào)開(kāi)發(fā)過(guò)程中遇到的問(wèn)題以及解決方案：
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'; //接口請(qǐng)求封裝
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;
}
// 當(dāng)前是否是微信環(huán)境
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, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: res.data.signature, // 必填，簽名
jsApiList: [
'updateAppMessageShareData', // 自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容
'updateTimelineShareData', // 自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容（1.4.0）
'scanQRCode', // 掃一掃
'getLocation', // 獲取地理位置
'openLocation', // 使用微信內(nèi)置地圖查看位置接口
'chooseImage', //拍照或從手機(jī)相冊(cè)中選圖接口
'closeWindow', //關(guān)閉當(dāng)前網(wǎng)頁(yè)窗口接口
]
})
wx.ready(res => {
// 微信SDK準(zhǔn)備就緒后執(zhí)行的回調(diào)。
resolve(wx, res)
})
wx.error(err => {
reject(wx, err)
})
}
})
})
}
// 微信分享
wxShare(shareObj) {
this.wechat().then((wx, res) => {
wx.ready(() => {
wx.updateAppMessageShareData({
title: shareObj.title, // 分享標(biāo)題
link: shareObj.link, // 分享鏈接
desc: shareObj.desc, // 分享描述
imgUrl: shareObj.imgUrl,
success: function() {},
cancel: function() {}
});
wx.updateTimelineShareData({
title: shareObj.title, // 分享標(biāo)題
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, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
}).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', // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
})
})
}
// 使用微信內(nèi)置地圖查看位置接口
openLocation(data) {
return new Promise((resolve, reject) => {
this.wechat().then((wx, res) => {
this.toPromise(wx.openLocation, {
latitude: data.latitude, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
longitude: data.longitude, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
name: '', // 位置名
address: '', // 地址詳情說(shuō)明
scale: 1, // 地圖縮放級(jí)別,整型值,范圍從1~28。默認(rèn)為最大
infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
})
})
}
// 拍照或從手機(jī)相冊(cè)中選圖接口
chooseImage() {
return new Promise((resolve, reject) => {
this.wechat().then((wx, res) => {
this.toPromise(wx.chooseImage, {
count: 1, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
})
})
}
// 關(guān)閉當(dāng)前網(wǎng)頁(yè)窗口接口
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);
}
});
});
}
// 如果你需要添加新的方法，請(qǐng)查下步驟5
}
export default new AuthWechat();3、main.js
import wechat from '@/utils/wechat.js'
Object.assign(Vue.prototype, {
'$wechat':wechat
})
4、頁(yè)面調(diào)用方式
<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">使用微信內(nèi)置地圖查看位置</u-button>
<u-button type="primary" @click="chooseImage">拍照或從手機(jī)相冊(cè)中選圖</u-button>
<u-button type="primary" @click="closeWindow">關(guān)閉當(dāng)前網(wǎng)頁(yè)窗口</u-button>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
latitude: '',
longitude: '',
}
},
onShow() {
if(this.$wechat.isWeixin()){
let shareObj = {
title: '測(cè)試2', // 分享標(biāo)題
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標(biāo)簽的src屬性顯示圖片
})
},
closeWindow(){
this.$wechat.closeWindow()
},
},
}
</script>
上邊內(nèi)容僅記錄了一部分API的使用方式。如果你需要其他功能，如預(yù)覽圖片，可直接用下面這種方式復(fù)制到
5、如果你需要用到其他功能，在這里按照這種方式接著定義新的方法：
示例預(yù)覽圖片：this.toPromis(wx.方法名，參數(shù))
記得在config中添加jsApiList:[‘previewImage’]
previewImage(images) {
// 1.如果需要有返回值，就封裝一層Promise，
return new Promise((resolve, reject) => {
this.wechat().then((wx, res) => {
this.toPromise(wx.previewImage, {
current: '', // 當(dāng)前顯示圖片的http鏈接
urls: [] // 需要預(yù)覽的圖片http鏈接列表
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
})
})
// 2.如果不需要返回值，這里直接在wx.ready中實(shí)現(xiàn)具體的功能
this.wechat().then((wx, res) => {
wx.ready(() => {
wx.previewImage(images);
})
})
}
頁(yè)面中調(diào)用預(yù)覽圖片
let images = {
current:'http://****',
urls:[
:'http://****',
:'http://****'
]
}
this.$wechat.previewImage(images)
以上內(nèi)容及代碼均經(jīng)過(guò)測(cè)試，可直接復(fù)用！??！
總結(jié)
到此這篇關(guān)于微信公眾號(hào)weixin-js-sdk使用方法的文章就介紹到這了,更多相關(guān)微信公眾號(hào)weixin-js-sdk使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)jQuery的append功能
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過(guò)查找資料, 封裝一個(gè)可以實(shí)現(xiàn)同樣效果的方法.2021-05-05
檢查JavaScript對(duì)象屬性是否存在的方法小結(jié)
在前端開(kāi)發(fā)面試,面試官提出了一個(gè)經(jīng)典的JavaScript問(wèn)題：“在JavaScript中,如何檢查對(duì)象是否包含某個(gè)屬性？請(qǐng)你詳細(xì)介紹幾種不同的方法,并解釋它們的區(qū)別,”這個(gè)問(wèn)題考驗(yàn)?zāi)銓?duì)JavaScript的基礎(chǔ)掌握情況,讓我們進(jìn)入這個(gè)面試場(chǎng)景,需要的朋友可以參考下2024-09-09
js求數(shù)組最大值的八種具體實(shí)現(xiàn)方法
數(shù)組如何求最大值,想必很多的朋友都不會(huì)吧,下面這篇文章主要給大家介紹了關(guān)于使用js求數(shù)組最大值的八種方法具體實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了使用js做的一個(gè)簡(jiǎn)單的彈出框且有關(guān)閉按鈕,需要的朋友可以參考下2014-05-05
詳解小程序BackgroundAudioManager踩坑之旅
這篇文章主要介紹了詳解小程序BackgroundAudioManager踩坑之旅,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁(yè)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁(yè)的方法,涉及javascript點(diǎn)擊按鈕載入頁(yè)面的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了BootStrap selectpicker 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js獲得參數(shù)的getParameter使用示例,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了js實(shí)現(xiàn)圖片翻書(shū)效果,代碼簡(jiǎn)單，效果很棒，感興趣的小伙伴們可以參考一下2015-08-08
本文通過(guò)實(shí)例詳細(xì)向我們分析了javascript原型鏈維護(hù)和繼承的問(wèn)題，十分的詳盡，十分的全面，這里推薦給大家。2014-11-11