阅读 479

字节小程序,和微信小程序的区别

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

前言:字节跳动也出小程序啦,官方是这样介绍的

广大开发者以字节小程序为载体,利用小程序提供的丰富基础能力完成服务搭建,为字节跳动旗下 App 用户提供优质服务,同时也让自身业务完成流量与转化升级

字节跳动系小程序通用,包括抖音小程序

image.png

  • 下文简称字节小程序

大家先看下他的开发者工具,是不是很眼熟,跟我们常用vscode 是不是一样

image.png

一,如何从微信小程序迁移到抖音小程序

1. 如果你是原生开发,可以使用官方提供的迁移工具

工具地址:microapp.bytedance.com/docs/zh-CN/…

    1. 安装: npm i wx-to-tt 建议全局安装 npm i wx-to-tt -g
    1. 使用 wx2tt -i 微信小程序目录source-directory -o 生成字节跳动小程序的目录
wx2tt -i ./wxProjects/demo -o ./ttProjects/demo
复制代码
  • 编译过程如下

image.png

或者使用字节开发者工具的搬家功能

image.png

image.png

  • 结果

image.png

2. 如果你使用uniapp 开发,可以兼容大部分的语法 可以多端差异化编译,相对开发比较友好,uniapp 的命令如下

// 开发环境
dev:mp-toutiao

// 生产环境
build:mp-toutiao
复制代码

如果有不支持的api报错,根据提示修改即可

二,从微信小程序移植到字节跳动小程序的成本和注意事项

字节和微信小程序 api 的差异化,可以看出他们的api还是有一定的区别,左边是微信小程序,右边是字节小程序, 看下图

image.png

image.png

  • 如何对不同的api做兼容处理的例子

uni.getAccountInfoSync()

image.png

解决方案:差异处理,例如

  if (pf === 'mp') {
    const accountInfo = uni.getAccountInfoSync()
    return accountInfo.miniProgram.appId
  } else {
    return ''
  }

复制代码

image.png

问题:

1,微信小程序和字节小程序的不同

  • 相同点,字节基本仿造小程序的运营方式,开发方式,和功能, 开发方面考虑了微信小程序的移植成本和开发者习惯
  • 不同点为:用户,支付,引流,分享,体系api不同, 业务代码api 和兼容性不同
  • 总结:大部分业务代码可用,涉及不同体系的接口需要前后端重新调试

还有下列不同

  • 定位不同

微信小程序:就是依赖于微信开发的,可以在微信群、朋友圈分享,入驻企业电商/餐饮、生活类比较多。 字节跳动也就是头条小程序,主要应用在抖音、今日头条等系列app上,主要是做内容+电商的。

  • 语法,api,体系,平台不同,字节小程序api设计和用户使用习惯上基本参考微信小程序api,但是还是有些不同

2,其他小程序是否可以快速转化为字节小程序

答:基本可以

具体如下

根据原开发框架,和业务逻辑不同,大约为原开发工作量的

  • 10% 到 30%,使用公司uniapp框架的小程序
  • 10% 到 30% ,其他使用原生语法开发的小程序,如果要转化为字节跳动小程序,使用官方转化工具,同uniapp一样的工作量
  • 15到 35% 类似其他框架例如wii wepy 等类vue 语法开发的小程序转化时需要先放到uniapp中,

涉及到的修改列表

  • 账号,开发者,资质申请
  • 业务域名:请求域名白名单的配置
  • 用户体系:用户登录相关的api,用户token失效 前后端重新调试
  • 引流和分享体系:运营方面
  • 支付体系:微信支付相关接口失效,前后端重新调试
  • 订阅信息:重新申请订阅模版
  • 不兼容的api调整
  • 不兼容的样式
  • 业务代码逻辑的修改,转化代码率,根据脚手架和框架不同:原生和uniapp 的大约可以70% 复用业务逻辑代码
文章分类
前端