小程序和APP、H5之间的跳转

小程序和app之间跳转
小程序方面需要用户主动触发才能打开 APP,不由 API 来调用;

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

当小程序从 APP 分享消息卡片的场景打开(场景值 1036) 或从 APP 打开的场景打开时(场景值 1069),小程序才会获得打开 APP 的能力,此时用户点击按钮可以打开分享该小程序卡片/拉起该小程序的 APP。即小程序不能打开任意 APP,只能 跳回 APP

APP 需要接入 OpenSDK,Android 第三方 app 需要处理 ShowMessageFromWX.req 的微信回调,iOS 则需要将 appId 添加到第三方 app 工程所属的 plist 文件 URL types 字段。

小程序和h5之间跳转
h5主动唤起小程序:使用wx-open-launch-weapp开放标签,

 wx.config({
    debug: false, /** 生产环境需要关闭debug模式   测试环境下可以设置为true  可以在开发者工具中查看问题 */
    appId: getMsg.appId, /** appId通过微信服务号后台查看 */
    timestamp: getMsg.timestamp, /** 生成签名的时间戳 */
    nonceStr: getMsg.nonceStr, /** 生成签名的随机字符串 */
    signature: getMsg.signature, /** 签名 */
    jsApiList: [ ],
    openTagList: ['wx-open-launch-weapp']
    在页面中引入
      <wx-open-launch-weapp
                class="launchBtn"
                id="launch-btn"
                appid='xxxxxxxxxx'
                :env-version="enVersion"
                :path="'pages/transfer/index?shopId='+storeInfo.mbkId+'&phone='+tel+'&accessToken='+accessToken"
            >
                    <script type="text/wxtag-template">
                    <style>
                        .chatBtn {
                            height:48px; 
                            font-size: 16px;
                            background: transparent;
                            border:none;
                            color: #333333;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            margin:0 auto
                        }
                        </style>
                    <button class="chatBtn" >进入店铺</button>
                    </script>
            </wx-open-launch-weapp>

在这里插入图片描述

小程序跳转到h5,用到的是小程序的web-view(个人类型的小程序暂不支持使用,业务域名需要配置,开发过程可以设置不校验域名),建议另外新建一个页面,单独放置可以返回上一页的

 <web-view src="https://test.com/index.html"></web-view>

h5跳回小程序:在内嵌的网页里引入js,调用wx.miniProgram.navigateTo跳转小程序方法,可在url后拼接要传的参数:

 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 <script>
    wx.miniProgram.navigateTo({url: '/index/index?id=123'})
 </script>

或者参考 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

h5跳转到app

微信H5不能直接跳转到APP的相应页面,只能引导下载APP,或者打开app

如果已经下载了app

 window.location.href = 'app的协议'

如果没下载

window.location.href = 'app的下载地址'

无法直接判断本地是否安装了 app,所以我们需要采取其他方式解决这个需求。
采用设置一个延迟定时器 setTimeout 的方式,第一时间尝试唤起 app,如果 1000ms 没有唤起成功,则默认本地没有安装 app,1000ms 以后,将会触发下载行为。

window.location.href = 'app的协议'
setTimeout(function() {
 window.location.href = 'app的下载地址'
}1000)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值