淘宝小程序踩坑记录

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

编译相关

用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

相关推荐
devincob5 小时前
js原生、vue导出、react导出、axios ( post请求方式)跨平台导出下载四种方式的demo
javascript·vue.js·react.js
编程社区管理员5 小时前
React 发送短信验证码和验证码校验功能组件
前端·javascript·react.js
葡萄城技术团队5 小时前
迎接下一代 React 框架:Next.js 16 核心能力解读
javascript·spring·react.js
全马必破三5 小时前
React“组件即函数”
前端·javascript·react.js
課代表5 小时前
JavaScript 中获取二维数组最大值
javascript·max·数组·递归·array·最大值·二维
码起来呗5 小时前
基于微信小程序的旅游攻略分享互动平台设计与实现-项目分享
微信小程序·小程序·旅游
rising start6 小时前
五、CSS盒子模型(下)
前端·javascript·css
2501_915106327 小时前
App HTTPS 抓包 工程化排查与工具组合实战
网络协议·ios·小程序·https·uni-app·php·iphone
不吃香菜的猪7 小时前
el-upload实现文件上传预览
前端·javascript·vue.js
qq_427506088 小时前
基于Vue 3和Element Plus实现简单的钩子函数管理各类弹窗操作
前端·javascript·vue.js