VUE 微信h5基本功能

一、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。默认为最大
  });