一、vconsole 手机端控制台
安装:npm install vconsole --save-dev
调用(index.vue/main.js):
import VConsole from 'vconsole/dist/vconsole.min.js'
let vConsole = new VConsole()
二、JSSDK使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
步骤二:引入JS文件
安装:npm install weixin-js-sdk
使用:import wx from "weixin-js-sdk"
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,可在App.vue页面调用)。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
实例:
三、调起微信相册和摄像头,实现图片上传
jsApiList: [
"chooseImage",
"getLocalImgData",
],//需先配置JS-SDK,参考第二条
import wx from "weixin-js-sdk";
wx.chooseImage({
//拍照或从手机相册中选图接口
count: 1, //最多可以选择的图片张数
needResult: 1,
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
success: function (data) {
let localIds = data.localIds[0]; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
wx.getLocalImgData({ //获取本地图片接口
localId: localIds, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
},
fail: function (res) {
alert("显示失败");
},
});
},
fail: function (res) {},
});
微信文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#16
四、微信导航
jsApiList: [
"openLocation",
"getLocation",
],//需先配置JS-SDK,参考第二条
import wx from "weixin-js-sdk";
wx.openLocation({
latitude: 22.757162, // 纬度,浮点数,范围为90 ~ -90
longitude: 113.301084, // 经度,浮点数,范围为180 ~ -180。
name: "中建壹品鄂旅投东湖学府展厅", // 位置名
address: "广东省佛山市顺德区Y922与容英路交叉口东南方向60米", // 地址详情说明
scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
});