vue使用wx-open-launch-weapp

vue 同时被 2 个专栏收录
16 篇文章 0 订阅
35 篇文章 0 订阅

官方文档

此功能的开放对象

  1. 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。(二级域名也需要配)
  2. 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

如果你的代码遇到页面不出现按钮的问题

  1. 查看 openTagList 是否为 [‘wx-open-launch-weapp’] ,官网默认给的wx-open-launch-app
  2. 官网例子中template标签要替换为 <script type="text/wxtag-template"><script>
  3. path可以不传,但是传一定要加html后缀

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

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

下面是实测可用代码,替换接口就ok。 username替换成你的小程序原始ID

<template>
    <div style="width: 100%; height: 100%;">
        按钮按钮:
        <wx-open-launch-weapp          
            username="gh_"          
            path="/pages/index/index.html"
        >       
        <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 '@/assets/js/api.js'
export default {
    methods: {
        wxmini(){
        	// 获取密钥
            openWxmini({url:window.location.href}).then(res=>{
                let {appId,nonceStr,signature,timestamp} = res.result
                wx.config({ // eslint-disable-line
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
                    appId, // 必填,公众号的唯一标识
                    timestamp, // 必填,生成签名的时间戳
                    nonceStr, // 必填,生成签名的随机串
                    signature,// 必填,签名
                    jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表
                    openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
                });
                /* eslint-disable */
                wx.ready(function () {
                    console.log('ready')
                });
            })
        }
    },
    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.wxmini
        document.body.appendChild(oScript);
    },
}
</script>

<style>

</style>
  • 4
    点赞
  • 9
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值