微信公眾號weixin-js-sdk使用方法總結(jié)
更新時間：2022年12月09日 14:12:08 作者：sunly_
最近做了一個活動頁面,需要自定義微信分享的標題、詳情、縮略圖和url,使用到了jssdk,這篇文章主要給大家介紹了關于微信公眾號weixin-js-sdk使用方法的相關資料,需要的朋友可以參考下
記錄微信公眾號開發(fā)過程中遇到的問題以及解決方案：
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;
}
// 當前是否是微信環(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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: res.data.appId, // 必填，公眾號的唯一標識
timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
signature: res.data.signature, // 必填，簽名
jsApiList: [
'updateAppMessageShareData', // 自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容
'updateTimelineShareData', // 自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容（1.4.0）
'scanQRCode', // 掃一掃
'getLocation', // 獲取地理位置
'openLocation', // 使用微信內(nèi)置地圖查看位置接口
'chooseImage', //拍照或從手機相冊中選圖接口
'closeWindow', //關閉當前網(wǎng)頁窗口接口
]
})
wx.ready(res => {
// 微信SDK準備就緒后執(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, // 分享標題
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，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
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);
});
})
})
}
// 使用微信內(nèi)置地圖查看位置接口
openLocation(data) {
return new Promise((resolve, reject) => {
this.wechat().then((wx, res) => {
this.toPromise(wx.openLocation, {
latitude: data.latitude, // 緯度，浮點數(shù)，范圍為90 ~ -90
longitude: data.longitude, // 經(jīng)度，浮點數(shù)，范圍為180 ~ -180。
name: '', // 位置名
address: '', // 地址詳情說明
scale: 1, // 地圖縮放級別,整型值,范圍從1~28。默認為最大
infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點擊跳轉(zhuǎn)
}).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, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
})
})
}
// 關閉當前網(wǎng)頁窗口接口
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、頁面調(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">拍照或從手機相冊中選圖</u-button>
<u-button type="primary" @click="closeWindow">關閉當前網(wǎng)頁窗口</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>
上邊內(nèi)容僅記錄了一部分API的使用方式。如果你需要其他功能，如預覽圖片，可直接用下面這種方式復制到
5、如果你需要用到其他功能，在這里按照這種方式接著定義新的方法：
示例預覽圖片：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: '', // 當前顯示圖片的http鏈接
urls: [] // 需要預覽的圖片http鏈接列表
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
})
})
// 2.如果不需要返回值，這里直接在wx.ready中實現(xiàn)具體的功能
this.wechat().then((wx, res) => {
wx.ready(() => {
wx.previewImage(images);
})
})
}
頁面中調(diào)用預覽圖片
let images = {
current:'http://****',
urls:[
:'http://****',
:'http://****'
]
}
this.$wechat.previewImage(images)
以上內(nèi)容及代碼均經(jīng)過測試，可直接復用！??！
總結(jié)
到此這篇關于微信公眾號weixin-js-sdk使用方法的文章就介紹到這了,更多相關微信公眾號weixin-js-sdk使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要分享了footer定位頁面底部的實例代碼，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JS實現(xiàn)返回上一頁并刷新頁面的方法,結(jié)合實例形式分析了javascript針對移動端、PC端瀏覽器的頁面緩存刷新相關操作技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript實現(xiàn)簡單的隱藏式側(cè)邊欄功能示例
這篇文章主要介紹了JavaScript實現(xiàn)簡單的隱藏式側(cè)邊欄功能,涉及javascript結(jié)合定時器針對頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
下面小編就為大家?guī)硪黄钊肜斫釰avaScript中的浮點數(shù)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript庫之vanilla-tilt使用教程(一個平滑的3D傾斜庫)
vanilla-tilt.js是Javascript中一個平滑的3D傾斜庫,可以讓網(wǎng)頁的一些控件變得動態(tài)起來,下面這篇文章主要給大家介紹了關于JavaScript庫之vanilla-tilt使用的相關資料,需要的朋友可以參考下2023-02-02
Js Snowflake(雪花算法)生成隨機ID的實現(xiàn)方法
這篇文章主要介紹了Js Snowflake(雪花算法)生成隨機ID的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
javascript的alert box在java中如何顯示多行
這篇文章主要介紹了javascript的alert box在java中如何顯示多行,需要的朋友可以參考下2014-05-05
Three.js中實現(xiàn)一個OBBHelper實例詳解
這篇文章主要介紹了Three.js中實現(xiàn)一個OBBHelper,本文參考Box3Helper源碼，并寫出一個OBBHelper，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-09-09
JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別實例分析
這篇文章主要介紹了JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別,結(jié)合額實例形式分析了JavaScript直接調(diào)用函數(shù)與call調(diào)用的基本用法、區(qū)別及相關注意事項,需要的朋友可以參考下2020-05-05