記一次微信小程式轉位元組跳動小程式的經驗

chikrDesign發表於2020-11-09

公司最近有個需求是把已經存在的用微信原生開發的微信小程式轉為位元組跳動小程式(以下簡稱頭條小程式).因為給的開發時間太短,重寫基本不可能.遂 google 尋找可以方便快速將微信小程式轉為頭條小程式的方法.現將整個過 ...

 

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

2. 準備工作

  • 1.申請位元組跳動開發者賬號
  • 2.申請頭條小程式,配置相關賬號許可權
  • 3.小程式類別如果為特殊類別,確認是否需要相關資質
  • 4.配置相關域名,注意:必須為https
  • 5.主體認證申請
  • 6.申請開通支付
  • 7.下載開發工具

3. 技術選型

3.1. 如何做?

上面已經說了,從 0 開發是不可能的.所以我們需要一個工具可以把小程式的原始碼轉為頭條小程式的程式碼.經過各方調研,有以下三種工具.

3.2. taro? uniApp? wx2bat?

名稱特性語法風格官網
taro京東出品,一種類react的語法的小程式開發框架,支援一套程式碼轉為微信小程式,H5,百度小程式,支付寶小程式,快應用,ReactNative,位元組跳動小程式,QQ 輕應用.可以看到功能還是很強大的,並且支援將原生開發的微信小程式轉為taro小程式reacthttps://taro.aotu.io/
uniApp也是宣稱一套程式碼打包為不同平臺的東西,是一種類vue語法的實現.文件沒有taro寫得好,目前社群也沒有其他框架成熟.瞭解不是很多,這裡就不在贅述了vuehttps://uniapp.dcloud.io/
wx2bat自己開發,使用最簡單的一個工具,它主要做的事情:將 wxml 字尾名改為 ttml,將 wxss 字尾名改為 ttss,將 wxml 中 wx: 改為 tt,將 js 中 wx: 改為 tt:.同時支援轉為百度小程式,支付寶小程式各個平臺的原生語法https://www.npmjs.com/package/wx2bat

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

  • tarouniApp

  • wx2bat

1.可以看到使用 wx2bat優點是比較快速方便,省了中間層的程式碼.而 tarouniApp則加了一層雖然比較麻煩,但是卻可以支援更多的平臺.

2.經過本人實踐(只試驗了 taro),發現錯誤很多,轉換的程式碼編譯後有漏檔案的現象,而且錯誤頻頻,不停的再解決BUG.考慮到開發時間不充足,遂考慮使用wx2bat來做轉換.

實操下來發現成本較低,有一些簡單的語法不相容,稍微修修改改專案就可以快速的跑起來.遂採用wx2bat來解決此次需求

3.3. 轉換結果

通過wx2bat我們已經可以方便快速的將微信小程式轉為頭條小程式了.一些修改的細節參見我的github或者npm或者個人站,地址如下所示:
iplaycodex

3.4. 遇到的坑

雖然說頭條小程式的90%的api 和微信小程式是差不多的,但是還是有一些差異性.需要我們進行手動修改.現歸納總結如下所示:
  • 微信小程式的 .wxs 字尾檔案在頭條小程式中不支援!
  • 上面已經說了頭條小程式 .wxs檔案不支援.那自然.wxs中宣告的函式在模板中是不能使用的
  • 頭條小程式不支援在 {{插槽}}中使用函式,更別說過濾器這種東西了,這一點特別坑!
  • 微信小程式互跳的相關邏輯程式碼需要刪除!(即A 微信小程式開啟 B 微信小程式)
  • 微信,wechat等微信的關鍵字要全部刪掉,否則可能會稽核被拒
  • 獲取使用者資料的按鈕上的 bindgetuserinfo 方法不支援,需要改為普通的bindtap
  • 授權登入這裡和微信小程式差不多,不需要過多的修改~
  • 支付的話,頭條小程式支援的比較多,例如支付寶.這裡需要根據需求自行修改
  • 如果你的專案中有搜尋框需要接入敏感詞過濾!!!(我們的專案因為這個稽核被拒)
  • 對於使用者輸入非法提醒的toast不能自己隨意寫,要寫頭條給的提醒文字,例:因相關法律和要求,相關搜尋結果不予展示
  • 等等...

4. 總結

到這裡專案應該已經可以差不多跑起來了,通過在轉換後的頭條小程式程式碼上修修改改進行二次開發,可以很快速的將微信小程式轉為頭條小程式.接下來就是需要對整個專案進行迴歸測試了~這裡就不再贅述了~

文章轉載自:segmentfault  作者:iplaycodex

相關文章