跳转小程序


关于微信小程序的跳转

小程序跳转小程序

wx.navigateToMiniProgram(Object object)

wx.navigateToMiniProgram({
    appId: '',
    path: 'page/index/index?id=123',
    extraData: { // 传递参数,目标小程序可在 App.onLaunch,App.onShow 中获取到这份数据。如果跳转的是小游戏,可以在 wx.onShow、wx.getLaunchOptionsSync 中可以获取到这份数据数据。
        foo: 'bar'
    },
    envVersion: 'develop', // develop,trial,release
    success(res) {
        // 打开成功
    },
    fail(err) {
        // 打开失败
    },
})

小程序内嵌h5跳转小程序

web-view

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// 小程序页面跳转
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.navigateBack()
wx.miniProgram.switchTab({url: '/path/to/page'})
wx.miniProgram.reLaunch({url: '/path/to/page'})
wx.miniProgram.redirectTo({url: '/path/to/page'})
// 向小程序发送消息,会在以下特定时机触发组件的message事件:小程序后退、组件销毁、分享、复制链接(2.31.1)
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
// 获取当前环境
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

h5跳转小程序

sdk

  1. 第一步:用户同意授权,获取code

    在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(已认证服务号,默认拥有scope参数中的snsapi_base和snsapi_userinfo 权限),引导关注者打开如下页面:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
    若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。
    尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问,
    用户同意授权后
    如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。

  2. 第二步:通过code换取网页授权access_token

    首先请注意,这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。
    尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起
    https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

  3. 刷新access_token(如果需要)

    由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。
    https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

  4. 拉取用户信息(需scope为 snsapi_userinfo)

    如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。
    https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

  5. 附:检验授权凭证(access_token)是否有效

    https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

  6. 页面引入sdk

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  1. 页面内容
<wx-open-launch-weapp id="launch-btn" username="" path="">
    <template>
        <div>
            <button>跳转小程序</button>
        </div>
    </template>
</wx-open-launch-weapp>
// 所有需要使用JS-SDK的页面必须先注入配置信息
initFn() {
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名
        jsApiList: [] // 必填,需要使用的JS接口列表
    })
    wx.ready(() =>{
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    })
    wx.error(function(res){
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    })
}

scheme

  1. 请求获取scheme

    https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN

  2. 页面跳转
<a href="weixin://dl/business/?t=scheme" rel="external nofollow">跳转小程序</a>

文章作者: Ron.
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Ron. !
  目录