淘宝小程序(商家应用)跳转页面方法集合

前言

淘宝小程序(商家应用)提供了很多跳转的api,比如跳转淘宝店铺首页,跳转商品详情页面,跳转BC客服页面等等。虽然官方不支持跳转h5页,但提供了web-view组件以实现跳转h5功能,以下是本人整理的跳转各种页面的方法。

如果有更多方法或整理有误,欢迎评论补充指正。

跳转应用内某个页面

用官方api my.navigateTo

 my.navigateTo({ url: "/pages/home/index" })}

重定向应用内某个页面

my.redirectTo({ url: '/pages/home/index' })

返回上一页

my.navigateBack()

跳转/跳回某个小程序

跳转某个小程序 ,需要目标小程序appId。

跳转回上一个小程序,只有从上一个小程序跳转到当前小程序时才会调用成功。

my.navigateToMiniProgram({
    appId: '2017072607907880', //目标小程序appId
    extraData: {
        "data1": "test"
    }, //传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据
    path: '', //打开的页面路径,如果为空则打开首页
    success: (res) => {
        console.log(JSON.stringify(res))
    },
    fail: (res) => {
        console.log(JSON.stringify(res))
    }
});

 my.navigateBackMiniProgram({
     extraData: {
         "data1": "test"
     }, //传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据
     success: (res) => {
         console.log(JSON.stringify(res))
     },
     fail: (res) => {
         console.log(JSON.stringify(res))
     }
 });

跳转h5页

淘宝小程序不支持跳转外部H5页面,不过可以用官方web-view组件实现跳转H5页功能

// webLink/index.axml
<view>
  <web-view src="{{src}}"></web-view>
</view>

// webLink/index.js
Page({
  data: {
    src : ''
  },
  onLoad(props) {
    // 参数link为h5链接
    let {link} = props
    this.setData({
      src: link
    });
  },
});

// utils.js
// 跳转webview页面 , url为h5页面链接
 my.navigateTo({
     url: `/pages/webLink/index?link=${url}`
 });

跳转到淘宝店铺首页

用官方api my.tb.navigateToTaobaoPage ,需要店铺id

//实例代码
my.tb.navigateToTaobaoPage({
    appCode:'shop', //指定打开店铺页
    appParams:{
        shopId:"180175726",
        weexShopTab:"shopindexbar",
        weexShopSubTab:"shopindex"
    },
    success: (res) => {
        my.alert({ content: "success - " + res.success })
    },
    fail: (res) => {
        my.alert({ content: "fail - " + res.error })
    }
});

跳转详情页

用官方api my.tb.openDetail ,需要商品id

my.tb.openDetail ({
      itemId: "576308890723", //商品id
      success: (res) => {
        my.alert({ content: "success" });
      },
      fail: (res) => {
        my.alert({ content: "fail - " + res.error });
      },
});

跳转BC客服页

跳转到淘宝店铺客服用api my.tb.openMessage

my.tb.openMessage({
  sellerNick:"商家测试账号", //卖家昵称,就是淘宝店铺名称
  success: (res) => {
    console.log(res);
  },
  fail: (res) => {
   console.log(res);
  },
})
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容