1***@qq.com
1***@qq.com
  • 发布:2021-06-10 15:25
  • 更新:2023-12-06 14:45
  • 阅读:7951

uniapp h5打开微信小程序

分类:uni-app

官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62,必须是认证公众号。

  1. 到微信公众号后台配置JS接口安全域名:设置与开发 - 公众号设置 - 功能设置 - JS接口安全域名,写 www.xxx.com
  2. 通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信公众号APPID&secret=微信公众号APPSECRET 获取Access token
  3. 通过https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 获取ticket
  4. 签名生成:
    ①拼接string :jsapi_ticket={上面接口获取的ticket}&noncestr={随机字符串}&timestamp={当前时间戳}&url={js接口安全域名(如果后面不加参数要这么写: http://www.xxx.com/ 注意最后面的/ )}
    ②sh1加密string得到signature
    ③以上步骤为后端生成,生成后返回 appId、timestamp、nonceStr、signature给前端。
  5. 前端安装模块 npm install jweixin-module --save
  6. main.js 添加一行代码 Vue.config.ignoredElements.push('wx-open-launch-weapp')
  7. 标签
    <wx-open-launch-weapp id="launch-btn" username="公众号id" path="/pages/index/index.html">  
                <script type="text/wxtag-template">  
                    <style>  
                        .btn {  
                            border-radius: 30px;  
                            width: 300px;  
                            height: 40px;  
                            font-size: 28px;  
                            border: none !important;  
                            color: #FFFFFF;  
                            background:#44ea76;  
                        }  
                    </style>  
                    <button class="btn" type="default">打开小程序</button>  
                </script>  
            </wx-open-launch-weapp>

    js

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

    要在js安全域名上并且在真机上访问才有效果,如果没效果或者是有错误的弹窗出现说明wx.config配置不正确,这种方式只能在微信网页里才能用!!

外部浏览器h5打开微信小程序方法:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html
1.通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信小程序APPID&secret=微信小程序APPSECRET 获取Access token
2.通过POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN 获取到URL Scheme

  1. 通过location.href = 'weixin://dl/business/?t=接口取到' 调用就可以。h5好像是要https才能打开~
7 关注 分享
1***@qq.com 几维信息科技 dev_pz 8***@qq.com 3***@qq.com DCloud_UNI_OttoJi 喜欢技术的前端

要回复文章请先登录注册

3***@qq.com

3***@qq.com

楼主写得挺好的,很好用,赞一个
2023-12-06 14:45
1***@163.com

1***@163.com

你好,开放按钮没有显示,请问是什么情况呢
<wx-open-launch-weapp id="launch-btn" username="gh_cea100f8813a" path="pages/index/index.html">
<script type="text/wxtag-template">
<style>
.btn {
border-radius: 30px;
width: 300px;
height: 40px;
font-size: 28px;
border: none !important;
color: #FFFFFF;
background:#44ea76;
}
</style>
<button class="btn" type="default">打开小程序</button>
</script>
</wx-open-launch-weapp>
2023-10-19 15:04
每日聚福

每日聚福

h5 可以直接打开微信吗?
2022-08-25 10:03
云开发接单

云开发接单

username="公众号id" 错了,是小程序的username,是gh_开头的
2022-07-25 10:48
8***@qq.com

8***@qq.com

赞一个,很详细
2022-02-18 16:57
wanghexu

wanghexu

回复 i***@igojo.cn :
开发工具不支持这个组件,暂时只支持真机调试,可以查看我写的文章,里面有提到
2022-01-12 15:10
i***@igojo.cn

i***@igojo.cn

没用啊,不认识这个标签 wx-open-launch-weapp
2021-09-08 11:10