記一次微信小程序轉字節(jié)跳動小程序的經(jīng)驗

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：141

公司最近有個需求是把已經(jīng)存在的用微信原生開發(fā)的微信小程序轉為字節(jié)跳動小程序(以下簡稱頭條小程序).因為給的開發(fā)時間太短,重寫基本不可能.遂 google 尋找可以方便快速將微信小程序轉為頭條小程序的方法.現(xiàn)將整個過程歸納總結如下,方便沒有做過的同學可以快速上手,也方便自己記錄.畢竟好記性不如爛筆頭~Orz...

2. 準備工作

1.申請字節(jié)跳動開發(fā)者賬號
2.申請頭條小程序,配置相關賬號權限
3.小程序類別如果為特殊類別,確認是否需要相關資質(zhì)
4.配置相關域名,注意:必須為https
5.主體認證申請
6.申請開通支付
7.下載開發(fā)工具

3. 技術選型

3.1. 如何做?

上面已經(jīng)說了,從 0 開發(fā)是不可能的.所以我們需要一個工具可以把小程序的源碼轉為頭條小程序的代碼.經(jīng)過各方調(diào)研,有以下三種工具.

3.2. taro? uniApp? wx2bat?

名稱	特性	語法風格	官網(wǎng)
taro	京東出品,一種類`react`的語法的小程序開發(fā)框架,支持一套代碼轉為`微信小程序`,`H5`,`百度小程序`,`支付寶小程序`,`快應用`,`ReactNative`,`字節(jié)跳動小程序`,`QQ 輕應用`.可以看到功能還是很強大的,并且支持將`原生開發(fā)的微信小程序`轉為`taro`小程序	react	`https://taro.aotu.io/`
uniApp	也是宣稱一套代碼打包為不同平臺的東西,是一種類`vue`語法的實現(xiàn).文檔沒有`taro`寫得好,目前社區(qū)也沒有其他框架成熟.了解不是很多,這里就不在贅述了	vue	`https://uniapp.dcloud.io/`
wx2bat	自己開發(fā),使用最簡單的一個工具,它主要做的事情:將 `wxml` 后綴名改為 `ttml`,將 `wxss` 后綴名改為 `ttss`,將 `wxml` 中 `wx:` 改為 `tt`,將 `js` 中 `wx:` 改為 `tt:`.同時支持轉為百度小程序,支付寶小程序	各個平臺的原生語法	`https://www.npmjs.com/package/wx2bat`

總結：
經(jīng)過上面的分析和總結,我們可以得出一個結論:上述 3 種轉換方式大概的實現(xiàn)思路如下所示:

taro和uniApp

wx2bat

1.可以看到使用wx2bat優(yōu)點是比較快速方便,省了中間層的代碼.而taro和uniApp則加了一層雖然比較麻煩,但是卻可以支持更多的平臺.
2.經(jīng)過本人實踐(只試驗了 taro),發(fā)現(xiàn)錯誤很多,轉換的代碼編譯后有漏文件的現(xiàn)象,而且錯誤頻頻,不停的再解決BUG.考慮到開發(fā)時間不充足,遂考慮使用wx2bat來做轉換.

實操下來發(fā)現(xiàn)成本較低,有一些簡單的語法不兼容,稍微修修改改項目就可以快速的跑起來.遂采用wx2bat來解決此次需求