闲来无事,随便找个微信小程序,改造成字节跳动的小程序玩玩:

下载最新小程序源码

https://github.com/EastWorld/wechat-app-mall

解压缩后,删除 node_modules 和 miniprogram_npm 文件夹,这些文件都是用不到的

修改 project.config.json 文件里的 appid,改为你自己的头条小程序的 appid

删除广告位

全局搜索 <ad 然后删除所有微信小程序的广告位

直接用头条小程序开发工具打开

image.png

兼容改造

全局样式调整

app.wxxx -> app.ttss 以及头部导入 weui 的地方也要修改
weui.wxss -> weui.ttss

apifm-wxapi 模块

因为头条小程序暂时还不支持npm模块,可以要修改 apifm-wxapi 模块的应用方式:

  1. app.js
  1. const WXAPI = require('apifm-wxapi')
  2. 改为
  3. const WXAPI = require('utils/apifm-wxapi')
  1. pages 和 template 文件夹 下的所有 js 文件
  1. const WXAPI = require('apifm-wxapi')
  2. 全局批量替换为
  3. const WXAPI = require('../../utils/apifm-wxapi')
  1. 下载最新的 apifm-wxapi.js 文件

https://github.com/gooking/apifm-wxapi/blob/master/src/index.js
下载最新的 apifm-wxapi.js 文件,存放在 utils 目录下

ES6 支持

如果控制台报错:

  1. Uncaught ReferenceError: regeneratorRuntime is not defined
  2. at eval (auth.js:3)
  3. at eval (auth.js:55)
  4. at te (eval at window.loadTmaScript (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/simulator-sdk/dist/preload/bgPreload.5b60a3b353d7604dbca0.js:278), <anonymous>:1:10248)
  5. at eval (eval at window.loadTmaScript (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/simulator-sdk/dist/preload/bgPreload.5b60a3b353d7604dbca0.js:278), <anonymous>:1:9886)
  6. at eval (app.js? [sm]:3)
  7. at te (eval at window.loadTmaScript (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/simulator-sdk/dist/preload/bgPreload.5b60a3b353d7604dbca0.js:278), <anonymous>:1:10248)
  8. at Q (eval at window.loadTmaScript (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/simulator-sdk/dist/preload/bgPreload.5b60a3b353d7604dbca0.js:278), <anonymous>:1:9435)
  9. at eval (app-service.js:24)
  10. at eval (<anonymous>)
  11. at window.loadScript (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/simulator-sdk/dist/preload/bgPreload.5b60a3b353d7604dbca0.js:278)
  12. at <anonymous>:1:1
  13. at WebFrame.(:20002/static/dist/common/anonymous function) [as executeJavaScript] (/Applications/bytedanceide.app/Contents/Resources/electron.asar/renderer/api/web-frame.js:56:27)
  14. at EventEmitter.electron.ipcRenderer.on (/Applications/bytedanceide.app/Contents/Resources/electron.asar/renderer/web-frame-init.js:36)
  15. at EventEmitter.emit (events.js:182)

那么,需要取消 “ES6转ES5” 的勾选

image.png

列表循环方法

头条小程序的列表渲染方法:
https://microapp.bytedance.com/dev/cn/mini-app/develop/framework/view/ttml-list-draw

所以要全局搜索替换原来的列表循环方法 (wx:for-items) —> (tt:for),同时删除 wx:key

登录授权

全局搜索 WXAPI.login_wx 批量替换为 WXAPI.login_tt

新用户注册

微信的弹框授权,改为头条的授权方式,可以直接进行弹框,所以原来微信小程序提示用户登录的弹出框,可以直接改为强制弹框要求授权注册

用户注册接口方法改为 WXAPI.register_tt

生成小程序码接口

WXAPI.wxaQrcode 方法改为 WXAPI.ttaQrcode

富文本解析工具

https://gitee.com/sootou/wxParse-for-toutiao

全局替换
wxParse.wxml —> ttParse.wxml
wxParse.wxss —> wxParse.ttss