Author: IPlayCodex Warehouse: Github, codePen Blog: Nugget, SegmentFault, Zhihu, Jianshushu, Blogpark, LeetCode Public account: FEZONE contact me: [email protected] Special statement: Original is not easy, unauthorized shall not be reproduced or copied this article, otherwise according to infringement treatment, if you need to reprint or open the public number white list can contact me, respect the original respect for intellectual property rights from me

1. Introduction

Recently, the company has a requirement to convert the existing wechat applets developed by wechat into bytedance applets (hereinafter referred to as Toutiao applets). Rewriting was almost impossible because of the short development time given. Therefore, Google is looking for a convenient way to quickly turn the micro channel small program into a small program. Now the whole process is summarized as follows, convenient for students who have not done it can quickly start, but also convenient for their own records. After all, a good memory is worse than a bad pen

2. Preparation

  • 1. Apply for a Bytedance developer account
  • 2. Apply for the Toutiao applet and configure the account permissions
  • 3. If the small program category is a special category, confirm whether relevant qualifications are required
  • 4. Configure the domain name. Note that the value must behttps
  • 5. Subject authentication application
  • 6. Apply for payment service
  • 7. Download the development tool

3. Technical selection

3.1. 如何做?

As stated above, developing from zero is not possible. So we need a tool that can turn the source code of the small program into the code of the headline small program. After various investigations, there are the following three tools.

3.2. taro? uniApp? wx2bat?

The name of the features Grammar style website
taro Produced by JINGdong, one kindreactSyntax of the applets development framework, support a set of code conversionWechat applets.H5.Baidu applet.Alipay small program.Fast application.ReactNative.Bytedance applet.QQ light applicationYou can see that the functionality is still very powerful, and the support will beNative development of wechat small programtotaroSmall program react https://taro.aotu.io/
uniApp It’s also something that claims that a set of code is packaged for different platforms. It’s a categoryvueSyntax implementation. Documentation is not availabletaroWell written and no other framework has matured in the community at the moment. Understand not a lot, here will not repeat vue https://uniapp.dcloud.io/
wx2bat Self development, using the simplest of a tool, it mainly do things: willwxmlSuffixed tottmlThat will bewxssSuffixed tottssThat will bewxml 中 wx:Instead ofttThat will bejs 中 wx:Instead oftt:At the same time support to Baidu small procedures, alipay small procedures Native syntax for each platform https://www.npmjs.com/package/wx2bat

Conclusion: After the above analysis and summary, we can draw a conclusion: the general implementation ideas of the above three conversion modes are as follows:

  • taroanduniApp

  • wx2bat

1. It can be seen that the advantage of using WX2BAT is relatively fast and convenient, saving the code of the middle layer. Taro and uniApp have added a more cumbersome layer that supports more platforms.

2. Through my practice (I only tested taro), I found that there were many errors. There were file leakage after the compilation of the converted code, and the errors were frequent. Considering the insufficient development time, wX2BAT was considered to do the conversion.

After practical operation, it is found that the cost is low, there are some simple syntax incompatibilities, and a little modification of the project can be quickly run. Hence thewx2batTo address this need

3.3. Transform results

Through WX2BAT we can easily and quickly turn the wechat small program into the headlines small program. For details of some changes, see my Github or NPM or personal site, as shown below: iplaycodex

3.4. Pits encountered

Although toutiao applet 90% of the API and wechat applet are about the same, but there are still some differences. We need to manually modify. The summary is as follows:

  • Micro channel small program.wxsSuffix files are not supported in headlines applet!
  • I already talked about the headline applet.wxsThe file does not support it.wxsFunctions declared in the template are not available in the template
  • Headline appletDoes not support the{{slot}}The use of functions in, let alone filters, is particularly bad!
  • Wechat appletsThe related logic code of mutual jump needs to be removed! (i.e. A wechat applet opens B wechat applet)
  • WeChat.wechatSuch as wechat keywords to delete all, otherwise the audit may be rejected
  • On the button to get user databindgetuserinfoMethod is not supported and needs to be changed to plainbindtap
  • Authorized login here and wechat small program almost, do not need too much modification ~
  • For payment,Headline appletMore supported, for exampleAlipay. You need to modify it according to requirements
  • If you have a search box in your project that needs to be accessedSensitive wordsFilter!!!!!! (Our project was rejected because of this review)
  • For the user to enter an illegal remindertoastCan’t write at will, to write the headline to remind the text, example:Due to relevant laws and requirements, relevant search results will not be displayed
  • And so on…

4. To summarize

Here the project should have almost run up, through the conversion of the headlines small program code to modify the secondary development, can be very fast to micro channel small program into headlines small program. The next step is to do regression testing of the entire project and I won’t go into that here

5. Reference documents

Wechat applet official document Bytedance applet official document WX2bat document

6. Conclusion

❤️ attention + likes + favorites + comments + forwarding ❤️ original is not easy, encourage the author to create better articles ~