淘宝小程序踩坑记录

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

编译相关

用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

相关推荐
black^sugar11 分钟前
纯前端实现更新检测
开发语言·前端·javascript
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL2 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据2 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
2402_857583492 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake3 小时前
Vue3之性能优化
javascript·vue.js·性能优化
Swift社区3 小时前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript
少年姜太公3 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
初遇你时动了情3 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js