微信小程序跳转第三方网页、第三方小程序。
微信小程序跳转第三方网页
最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到携程的h5页面。查了下携程的页面为https://m.ctrip.com(跳转第三方h5时只能是https的根页面)。其步骤为下图所示。
- 跳转代码示例
goXieCheng(){ uni.navigateTo({//此处为uniapp跳转方法,原生应为wx.navigateTo url: '/pages/tabbar/tourist/trip/railwayDetails/xiechengH5/xiechengH5' });//这里新建一个模块跳转过去,此处为该模块地址 },
- 新模块中使用web-view标签,并配置src为目标地址。
<web-view src="https://m.ctrip.com/html5/"></web-view>
- 点击开发并配置业务域名。
跳转第三方网页的问题
其实这里并不能添加成功,因为小程序在跳转第三方页面配置业务域名时需要将一个校验文件放置在跳转页面服务器的根目录下。(这里也就是需要将下载好的校验文件放置在携程服务器的根目录下~ 开玩喜呢么这不是…)。所以,如果想在小程序内跳转第三方的h5页面,除非能跟第三方进行沟通将校验文件放置进去,不然就收购对方吧,tx也行吧(笑~)附上社区中的图
微信小程序跳转第三方小程序
总之,跳转到h5页面基本是不可能实现了,现在考虑小程序跳转小程序。这个其实比较简单了,步骤为下:
- 先获取需要跳转的小程序的appid(我这里获取到了携程的小程序appid)获取方法如下:
打开目标小程序 -> 点击右上角… -> 点击小程序名称进入详情页 -> 再次右上角… -> 点击更多资料 ->完成 - 跳转代码,示例如下
goXieCheng(){
uni.navigateToMiniProgram({ //这里用uniapp的跳转方法,原生应该是wx.navigateToMiniProgram
appId: 'wx0e6ed4f51db9d078',//这里的appid为目标小程序的appid,此处为携程小程序
success(res) {
// 打开成功
console.log(res)
},
fail(err){
// 打开失败
console.log(err)
}
})
},
- 配置允许跳转的小程序appid(最多好像是10个):
"mp-weixin" : {
/* 小程序特有相关 */
"navigateToMiniProgramAppIdList" : [ "wx0e6ed4f51db9d078" ],
}, //此处为uniapp的配置。原生应在app.json中配置即可
之后就能正常跳转了。