• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

UNIAPP - H5跳转微信小程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

准备工作,见传送门:UNI-APP 开发微信公众号(H5)JSSDK 的使用方式 - DCloud问答

主要是导入 jweixin 和配置注册信息 

 

 

1. main.js添加以下代码

 

 

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

 

2. 示例

 

如果 <script type="text/wxtag-template"> 标签需要放入图片,传统的渲染实现不了 需要用

用微信小程序原生的渲染方式

<img src="{{item.xx}}" />

 

 

<template>
    <view class="content">
        <!-- 样式类的话貌似只能在style的内联样式或行内样式才生效 -->
        <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError" username="gh_cxxxxx" path="pages/index/index.html">
            <script type="text/wxtag-template">
                 <style>
                  .btn { padding: 12px;opacity:0 }
                </style>
                <button class="btn">打开小程序</button>
            </script>
        </wx-open-launch-weapp>
    </view>
</template>

<script>
// 这里做个示例,实际上的jweixin sdk是需要你看第一步通过npm或yarn安装
import wx from \'jweixin-module\';

export default {
    data() {
        return {};
    },
    onLoad() {
        this.getConfig();
    },
    methods: {
        // wx api 注册
        getConfig() {
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: appId, // 必填,公众号的唯一标识,填自己的!
                timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
                nonceStr: nonceStr, // 必填,生成签名的随机串
                signature: signature, // 必填,签名,见附录1
                jsApiList: [\'wx-open-launch-weapp\'],
                openTagList: [\'wx-open-launch-weapp\'] // 跳转小程序时必填
            });

            wx.ready(res => {
                console.log(res);
                this.$nextTick(() => {
                    let btn = document.getElementById(\'launch-btn\');
                    btn.addEventListener(\'launch\', e => {
                        console.log(\'success\');
                    });
                    btn.addEventListener(\'error\', e => {
                        alert(\'小程序打开失败\');
                        console.log(\'fail\', e.detail);
                    });
                });
            });

            wx.error(res => {
                // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
                console.log(res);
            });
        },
        // 监听跳转
        handleLaunch() {
            console.log(\'跳转\');
        },
        // 监听错误
        handleError() {
            console.log(\'失败\');
        }
    }
};
</script>

<style></style>

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序和H5之间相互跳转发布时间:2022-07-18
下一篇:
微信小程序中跳转另一个小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap