字节跳动小程序开发小结

1,878 阅读3分钟

微信源码一键搬家

字节开发

开发流程:注册与认证->开发小程序->发布上线

支持的宿主:今日头条、今日头条极速版、抖音

小程序开发者平台

字节小程序文档

小程序目录结构

.
├── app.js //小程序逻辑
├── app.json //小程序公共配置
├── app.ttss //小程序公共样式表
├── project.config.json //项目配置
└── pages
   └── pageA
       ├── pageA.ttss //页面样式表
       ├── pageA.js  //页面逻辑
       ├── pageA.json  //页面配置
       └── pageA.ttml  //页面结构

小程序组件&api演示

image

开发中需要注意的地方

  1. 开发设置:配置域名白名单
  2. 微信小程序中有的组件、api等,在字节小程序中不支持(没有observers、cover-view、cover-image,echarts-for-weixin需要修改)

功能接入

分享

配置分享模板

开发者平台 -> 选择对应小程序 -> 设置 -> 分享设置 -> 添加新分享 image

小程序内接入转发

Page({
  ...
  onShareAppMessage (option) {
    // option.from === 'button'
    return {
      title: '这是要转发的小程序标题',
      desc: '这是默认的转发文案,用户可以直接发送,也可以在发布器内修改',
      path: '/pages/index/index?from=sharebuttonabc&otherkey=othervalue', // ?后面的参数会在转发页面打开时传入onLoad方法
      imageUrl: 'https://e.com/e.png', // 支持本地或远程图片,默认是小程序icon
      templateId: '这是开发者后台设置的分享素材模板id',
      success () {
        console.log('转发发布器已调起,并不意味着用户转发成功,微头条不提供这个时机的回调');
      },
      fail () {
        console.log('转发发布器调起失败');
      }
    }
  }
});

分享内容优先级

场景优先级
端内分享代码指定 > 模板指定 > 平台默认
端外分享模板指定 > 平台默认

支付

开发者平台申请开通

image

  • 小程序收银台
  • 微信、支付宝API支付

前端接入

tt.pay({
  orderInfo,
  service: 1,//1收银台;3微信API;4支付宝API
  },
  success(res) {
    if (res.code == 0) {
      // 支付成功处理逻辑,只有res.code=0时,才表示支付成功
      //  0:支付成功
      //  1:支付超时
      //  2:支付失败
      //  3:支付关闭
      //  9:订单状态未知
      // 但是最终状态要以商户后端结果为准,前端可轮询商户服务端获取准确的微信支付/支付宝的订单状态
        let count = 0

        let timer = setTimeout(() => {
            // 自行选择轮询次数
            if (count > 3) {
                clearTimeout(timer)
                // 商户根据自身需求处理轮询完未成功的状态
                return
            }
    
            // 商户前端根据 out_order_no 请求商户后端查询微信/支付宝支付订单状态
            tt.request({
                url: "<your-backend-url>",
                success(res) {
                    // 商户后端查询到的微信/支付宝订单状态
                },
                fail(err) {
                    // 处理请求失败
                }
            });
    
            count++
        }, 500)
    }
  },
  fail(res) {
    // 调起收银台失败处理逻辑
  },
});

虚拟物品在ios上不支持支付,支付金额不能超过1元

激励视频

仅支持抖音端

接入流程

开通流量主 → 创建广告位 → 获取广告位 ID → 嵌入代码 → 提交审核上线小程序 image

代码示例

var videoAd = tt.createRewardedVideoAd({
    adUnitId: "g1u8fbou4kl18r87jo"
});
videoAd.onLoad(()=>{
  console.log('广告组件成功拉取广告素材')
})
videoAd.onClose((res) => {
  if (res.isEnded) {
    // 给予奖励
  }
});
//显示广告
videoAd.show()

自定义数据分析

image

代码示例

tt.reportAnalytics('index_show', {
});

验证埋点事件

注册设备 → 选择验证事件 → 验证埋点

让更多的人看到我们的小程序

流量入口

今日头条 image 抖音 image

配置小程序别名&搜索标签词

image

配置open字节如意

image

短视频挂载