使用wx |
您所在的位置：网站首页 › 微信开放标签打开app › 使用wx |
使用wx
|
1、安装weixin-js-sdk npm install --save weixin-js-sdk
引用：var wx = require('weixin-js-sdk'); 因为需要用到的地方比较多，我这边在main.js里全局引用： Vue.prototype.$wx = require('weixin-js-sdk')别的地方需要用到wx的时候，就用this.$wx就可以 因为wx-open-launch-app样式特别难调，有很多不同样式的地方都有用到打开app功能，所以干脆就做了一个透明层，覆盖在我们需要用到的地方，那既然为了省事，再方便点，直接封装一个组件吧，用的时候引用一下组件就可以。 废话不多说，写组件： 新建一个openApp.vue文件 import axios from 'axios' import { jump } from '../utils/jump.js' // 跳转下载 export default { components: {}, data() { return { dataStr: '传给app端的数据' } }, created() { this.wechatInit() }, methods: { /** * @description: 打开错误 * @param {*} * @return {*} */ handleError() { jump() }, /** * @description: 打开成功 * @param {*} * @return {*} */ handleLaunch() {}, /** * @description: 接口获取开放标签需要的参数 * @param {*} * @return {*} */ wechatInit() { axios({ method: 'get', url: 'https://xxx（后端接口，（手动马赛克））', params: { url: encodeURIComponent(window.location.href.split('#')[0]) }, headers: { Authorization: 'token（手动马赛克）' } }).then((res) => { if (res.data) { const data = res.data.data this.$wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '公众号id（手动马赛克）', // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signature: data.signature, // 必填，签名 jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表 openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] }) this.$wx.ready(function () { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 console.log('hello') }) } else { console.log('获取微信签名失败') } }) this.$wx.error(function (res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log(res, 'err') }) } } } .open_app { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; #launch-btn { display: block; } }然后在我们需要用到的地方引用组件： import openApp from './../components/openApp.vue' export default { components: { openApp: openApp }, data() { return {} }, methods: {} } .des_detail { /* 必须设置position: relative;不然会位置飘出父层 */ position: relative; width: 100px; height: 50px; background: rgb(95, 157, 228); }可以F12看一下有没有引用组件成功
|
注意，需要在配置的域名下才能看到效果，不能本地查看，需要部署。 测试的时候，将debug置为true，就能看到弹窗注册结果成功还是失败，弹出config:ok时，代表wx打开app相关配置成功了。
好了，这一历劫至此完结，撒花。【本文地址】
今日新闻 |
推荐新闻 |