淘宝小程序踩坑记录

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

编译相关

用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

相关推荐
熊的猫31 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
说私域1 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165022 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼4 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍