淘宝小程序踩坑记录

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

编译相关

用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

相关推荐
前端百草阁几秒前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish2 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple2 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five3 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫5414 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普5 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省5 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_9856 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
契机再现7 分钟前
babel与AST
javascript·webpack·typescript