淘宝小程序踩坑记录

最近搞了一套淘宝小程序配合淘宝店铺直接跳转,类似于扭蛋机那种机制,真是一路坎坷,一步一个坑,这里记录一下(前端);淘宝小程序文当中心

编译相关

用uni-app没有淘宝小程序独有的编译环境,只能自定义编译环境,用支付宝小程序的环境去编译,自定义常量;在package.json里面配置;

常量区分支付宝和淘宝,因为用支付宝环境编译出来的MP-ALIPAY是同时支持支付宝小程序和淘宝小程序的,因为我们也有支付宝小程序所以需要区分这两个;

复制代码
"uni-app": {
    "scripts": {
      "mp-taobao": {
        "title": "淘宝小程序",
        "env": {
          "UNI_PLATFORM": "mp-alipay",
          "NAME": "mp-taobao"
        },
        "define": {
          "MP-TAOBAO": true
        }
      },
      "mp-zhifubao": {
        "title": "支付宝小程序",
        "env": {
          "UNI_PLATFORM": "mp-alipay",
          "NAME": "mp-zhifubao"
        },
        "define": {
          "MP-ZHIFUBAO": true
        }
      }
    }
  }

淘宝运动相关

我们需要获取淘宝步数,用户进来要获取淘宝运动权限,但是这里跟微信小程序不太一样,IOS和安卓也是有些区分的;

淘宝步数的所有API都需要在真机上才能测试,在淘宝小程序工具上不可用,又因为真机上不能看console,所以所有的返回值都需要alert出来,这点有些麻烦;

先介绍一下关于淘宝运动的相关API:

  • 淘宝步数相关的api需要在小程序后台申请对应的权限包,否则用不了,直接提工单申请;

    -

  • my.tb.getStepsHistory获取历史步数

  • my.tb.getDailySteps获取当天步数

  • my.tb.requestStepsAuthorization申请步数权限,仅限IOS可以用;

  • my.tb.supportStepCount判断手机是否支持计步;

    getTbRunData() {
    let today = Date.now()
    let after = today - 24 * 60 * 60 * 1000 // t-1 天
    let before = today - 30 * 24 * 60 * 60 * 1000 // t-30 天
    console.info({startTime: this.formatDate(before, 'YYYYMMDD'), endTime: this.formatDate(after, 'YYYYMMDD')})
    const app = getApp()
    my.authorize({
    scopes: 'scope.getStepsStatus',
    success: (res) => {
    // 申请步数权限(唤起系统权限设置半层仅IOS支持)
    if (app.globalData.isIOS) {
    my.tb.requestStepsAuthorization({}, (requestStepsAuthorization) => {
    console.log('requestStepsAuthorization=====', requestStepsAuthorization)
    })
    }

    复制代码
              // 获取历史步数
              my.tb.getStepsHistory(
                {
                  startTime: this.formatDate(before, 'YYYYMMDD'),
                  endTime: this.formatDate(after, 'YYYYMMDD')
                }, 
                (e) => {
                  this.stepsHistoryList = e.stepsHistory || e.stepsHistoryList || []
                  setTimeout(() => {  
                    this.uploadTbRun()
                  }, 200)    
                  // 上传步数
                  // my.alert({
                  //   content: '3' + JSON.stringify(e.stepsHistory),
                  // })
                  //  my.alert({
                  //   content: '4' + JSON.stringify(e.stepsHistoryList),
                  // })
              })
            },
            fail: (res) => {
              this.$toast && this.$toast('获取淘宝步数权限失败!')
            }
          })
        },

通过my.authorize申请scope.getStepsStatus权限,会唤起授权淘宝运动的半层,

但是如果用户关闭了系统隐私里面的淘宝运动权限,淘宝小程序实时监控不到的,不像微信小程序那样一直弹框提醒;

my.tb.requestStepsAuthorization 这个API的作用主要是IOS系统,淘宝打开淘宝小程序,如果此前用户从未授权过系统隐私里面的淘宝步数,这个api会唤起授权半层,但是仅此一次,不论用户是否允许都不会再唤起,只能用户手动去修改

针对安卓系统,官方给出的结论是只要调用my.authorize且从没有打开过系统隐私的淘宝运动,就会唤起这个半层,但是我这边试了不好使,唤不起来;实在没办法只能弹框告诉用户,安卓手机每个机型隐私设置位置还不一样很麻烦;

这里有个小Tips: 可以直接让用户去淘宝 乐运动 小程序里面取开启,这个是淘宝自己的小程序安卓也可以唤起那个半层,如下图

其他

  • uni-app里面配置的淘宝头编译之后,丢失部分信息,主要是淘宝特有的头设置字段,需要手动设置一下;

    复制代码
      "navigationBarForceEnable": true,
      "navigationBarTextStyle": "black",
      "showNavigationBarLogo": true
  • 淘宝小程序分享之后,头部错位,这个问题主要是淘宝小程序分享设置的path导致的,主流小程序是带有/的,淘宝不能带,带了就有问题,要去掉最前面的/

  • 淘宝小程序的商品点击直接跳转到淘宝店铺的商详,可用API,超级丝滑;

    // #ifdef MP-TAOBAO
    my.tb.openDetail({
    itemId: slide.shopProductId,
    success: (res) => {
    // my.alert({ content: "success" });
    },
    fail: (res) => {
    // my.alert({ content: "fail - " + res.error });
    }
    })
    // #endif

  • 淘宝店铺跳转淘宝小程序,需要淘宝小程序的链接,淘宝小程序的链接要在小程序上线后的二维码下面有个复制链接的功能,就是小程序链接;

  • 如果小程序链接不想直接到首页,想到别的页面可以在生成的链接后面拼page字段,设置启动页面, 在小程序链接后面添加 page 参数,page后面的参数放入链接前需先encode; 参考示例:https://m.duanqu.com/?_ariver_appid=20000067\&page=pages%2Ftest%2Ftest%3Fname%3DTom%26age%3D23

相关推荐
牧濑红莉14 小时前
网络安全竞赛pwn全解及第一道ai的wp
javascript·.net
kyriewen15 小时前
别再用AI debug了——这5种bug越修越烂
前端·javascript·ai编程
顾昂_16 小时前
内存泄漏排查和 Chrome DevTools 使用教程
前端·javascript·面试
An_s17 小时前
rust开发wasm与浏览器(js)交互
javascript·rust·wasm
山河木马18 小时前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学
悦儿遥遥雨118 小时前
PXE + Kickstart 无人值守批量部署系统
linux·javascript·nginx
清秋18 小时前
全网最全 ECMAScript 攻略( 更新至 ES2026)
前端·javascript·编程语言
Hilaku19 小时前
为什么 AI 写前端时,总是优先选择 React,而不是 Vue?
前端·javascript·程序员
黄华SJ520it21 小时前
柯尔嫚商城模式开发:从概念到实现的完整指南
小程序·系统开发
不简说21 小时前
拖拽DIY表格插件来了!sv-print 七月更新:这次真的能自己拼表格了
前端·javascript·前端框架