小程序和APPH5之间的跳转

2020-06-02 约 955 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=106489647

小程序和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)

目录

小程序和APPH5之间的跳转

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