博客

vue实现H5跳转小程序

公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅。

1. 适用环境

• 微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上

2. 微信SDK

• 引入https://res.wx.qq.com/open/js/jweixin-1.6.0.js*（注意要用jweixin-1.6.0.js，低版本不支持，这里掉坑了）*

3. 页面报错找不到模板wx-open-launch-weapp,可以在main.js配置

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

封装request

import axios from 'axios'

const request = axios.create({
  // baseURL: 'http://localhost:8080'
})

request.defaults.responseType = 'json'
request.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
request.interceptors.request.use(function (config) {
  // // 判断用户是否登录
  const token = window.localStorage.getItem('token')
  // // 如果用户已登录就为请求接口统一添加用户 token
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})
request.interceptors.response.use(function (response) {
  return response
}, function (error) {
  return Promise.reject(error)
})

export default request

封装接口()

import request from '@/common/js/request'

//获取微信配置信息--跳转小程序
export const openWxmini = (info) => {
    return request({
        method: 'post',
        url: '服务器地址',
        data: info
    })
}

页面使用

<template>
  <div style="width: 100%; height: 100%;">
    按钮按钮：
    <wx-open-launch-weapp
      username="gh_xxxxxxxx"
      path="pages/login/main.html?user=123"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px}</style>
        <button class="btn">跳转小程序</button>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>

<script>
import { openWxmini } from "@/common/js/auth.js";
export default {
  data() {
    return {};
  },
  created() {
    const oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "https://res2.wx.qq.com/open/js/jweixin-1.6.0.js";
    oScript.onload = this.get_wx;
    document.body.appendChild(oScript);
  },
  mounted() {},
  methods: {
    get_wx() {
      // 获取授权信息
      openWxmini({ url: window.location.href }).then(res => {
        console.log('分享',res)
        // let { appId, nonceStr, signature, timestamp } = res.data;
        wx.config({
          // eslint-disable-line
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId:res.data.app_id, // 必填，公众号的唯一标识
          timestamp:res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr:res.data.noncestr, // 必填，生成签名的随机串
          signature:res.data.signature, // 必填，签名
           jsApiList: ['wx-open-launch-weapp', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo',
                    'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice'],  // 必填，需要使用的JS接口列表
          openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
        /* eslint-disable */
        wx.ready(function() {
          console.log("ready");
        });
      });
    }
  }
};
</script>

<style scoped lang="less"></style>