"api工厂" 使用手册

api接口开箱即用,云后台管理,助力前端,解放后端开发;

不懂编程也能独立开发应用,小步快跑,快速创业!

旨为更懂你!

“天使童装”改造头条小程序


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


下载最新小程序源码


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


const WXAPI = require('apifm-wxapi')

改为

const WXAPI = require('utils/apifm-wxapi')


  1. pages 和 template 文件夹 下的所有 js 文件


const WXAPI = require('apifm-wxapi')

全局批量替换为

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 支持


如果控制台报错:


Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (auth.js:3)
    at eval (auth.js:55)
    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)
    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)
    at eval (app.js? [sm]:3)
    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)
    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)
    at eval (app-service.js:24)
    at eval (<anonymous>)
    at window.loadScript (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/simulator-sdk/dist/preload/bgPreload.5b60a3b353d7604dbca0.js:278)
    at <anonymous>:1:1
    at WebFrame.(:20002/static/dist/common/anonymous function) [as executeJavaScript] (/Applications/bytedanceide.app/Contents/Resources/electron.asar/renderer/api/web-frame.js:56:27)
    at EventEmitter.electron.ipcRenderer.on (/Applications/bytedanceide.app/Contents/Resources/electron.asar/renderer/web-frame-init.js:36)
    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