0.0 Preparation
Micro channel small program emergence greatly reduces the threshold of micro entrepreneurship of individual developers, do not need back-end technology, do not need the server and domain name of these chaotic front operation, only need to know the front-end technology, can release a belongs to their own lightweight application, it is the Gospel of front-end developers 😁
Now in fact, more popular when micro channel games, small program heat ranking has long been small game screen. However, the development stack of small games is larger than that of small programs, and requires more manpower and resources. It is currently under study and will be discussed later.
Before you start, you need to prepare a mailbox to create an applet account. A mailbox can and can only create a small program, which makes people a little difficult to understand, each to create a small program to apply for an email account, the same is true for small games, so I don’t know how many email accounts I have now.
0.1 creative
While the cost of research and development has dropped dramatically, it still takes a lot of ingenuity to make a successful, popular little program. According to incomplete statistics, now the market has released a small program has millions of 😨, want to stand out in so many small works of all kinds, or your work is very creative, poke in the pain point of some people, or you go astray, do a fish through the net 😂
Small games, by contrast, are a more creative battleground. 2048, surround nerve cat, jump these delicate little things that let a person shine at the moment, are the representative that creativity wins. However, I am also a product of exam-oriented education, and the creative areas of the brain are only active when dreaming. If you come up with an interesting idea that works, you’re halfway to millions of users. One of my colleagues said that he wanted to make a real-time social small program, so that users can achieve barrier-free communication. I thought at that time, such an ideal person how and I did a colleague 😂
0.2 technology
The running environment of the applets
The running environment of the small program can be summed up in a word: the enemy situation is quite complex.
In iOS, the javascript code of the logic layer of small program runs in JavaScriptCore, and the view layer is rendered by WKWebView. The environment is iOS8, iOS9, iOS10
On older versions of Android, the javascript code in the applet logic layer runs in X5 JSCore, and the view layer is rendered by X5 based on the Mobile Chrome 57 kernel
On the new version of Android, the javascript code for the applets logic layer runs in V8, and the view layer is rendered by our own XWeb engine based on the Mobile Chrome 67 kernel
On wechat developer tools, the javascript code of the logic layer of the small program is run in Nw.js, and the view layer is rendered by Chromium 60 Webview
That is to say, everything is subject to the object, the performance of the wechat developer tools and the performance of the real machine is not the same, the performance of the real machine on different machines will vary from machine 😂
In addition, because it is parasitic on wechat, wechat has made a layer of encapsulation and added some additional restrictions, such as
JS code execution using EVAL is not supported
Creating functions using new Function is not supported
That is, it doesn’t allow dynamic execution of JS code, which, to be honest, does block a lot of manipulation. Under the eaves, people have to bow. Given the huge flow inlet and fission capacity provided by wechat, let’s make do 😑
These are all limitations, compatibility issues, and the nice thing is that CSS3 and ES6 features can be used almost anywhere, remember basically.
Technology stack
As we all know, the browser’s Web technologies are HTML, CSS and JS. Applets are like browsers, but they are not browsers. So his technologies are WXML, WXSS and JS 😂. There are no new technologies, just web standards and localisation. The front end is basically seamless.
When we develop web, we don’t write native HTML, CSS and JS directly. Instead, we use some frameworks and libraries to improve development efficiency, such as jquery, vue and React. The same is true for small programs, which usually don’t write native WXML, WXSS directly. Of course, you can write directly if you like, but it can quickly become difficult to maintain as the project iterates. The whole point of software engineering is to control complexity. There are some great frameworks on Github like Wepy and MPvue.
Front-end technology + small program official documents + framework documents, basically these three can hold a small program
Say my small program official documents after reading, less than an hour to read a simple tutorial, feel very simple, simply small case. Then I read the applets’ frameworks, components, and apis. Oh, my God, I just read the contents of a thick book. I watched it off and on for nearly a month, and then BARELY watched it again. Ha ha, nothing is as simple as it seems! But if you’re just getting started and don’t need many advanced features, you don’t need to read that many chapters.
0.3 Actual Development
Debugging preview
To do a good job, he must sharpen his tools. When you’re developing the Web, you can preview it in any browser you like. Because the host of small program is wechat, so small program can only run in wechat. Fortunately, the wechat team is still quite to the force, specially developed a preview debugging tool for developers, that is, wechat developer tools. After modifying the code, you can see the effect on the tool in real time. However, the effect on the tool is not the effect on the real phone, just like the simulation device mode of the Chrome developer tool, although it is close, but the difference is a thousand miles 😂. This tool is commonly used and practical functions are quite many, it is recommended to be familiar with, the document is here, of course, the fastest way to be familiar with point or point, where do not understand point where 😁
Choose a framework
The only major framework choices are Wepy and MPvue, both of which are in line with the most popular vue.js. After careful consideration and multi-directional comparison, I finally chose WEpy because WEpy has several more stars than MPvue. The WEpy documentation is here. With nearly a year of Wepy, I found a lot of pits, maybe I expect him to be like Vue, the expectation is too high 😂. Vue does not support any of its more advanced features, and some implementations are the reverse of vUE. But what else is there to do, create your own framework? I am really shallow. There was a time when I was so frustrated that I decided to switch to MPvue, but I was so smart that I googled mpvue and found that there were only so many more pits than Wepy. I quickly convinced myself that I’d better make do with Wepy.
Next is to write code development, here directly omit one hundred thousand words, specific development details will not say ha, development-debug-… – Development-debug, infinite loop, everyone knows that
Potholes encountered during development
- [WEpy] When routing to the same page multiple times, variables on the page will pollute each other
- Wepy components are static components, resulting in the need to declare a tag in the JS components for each instantiation
- Wepy calls this.$apply() to update the view after updating the data. To be exact, this
- [small program] file download, Webview, Ajax need to configure the security domain name in the small program management background, otherwise they will fail.
- The postMessage mechanism is triggered only at certain times, that is, outside of these times, the WebView and THE URL cannot communicate at all
- [small program] Use input type=’file’ in web-view flash back
- Small program pit can be taken out alone to write a thousand words composition, there is time to sum up again, here is no longer an example 😂
0.9 Submit to wechat for review
At this point the functionality has been developed and tested. Next is to let the user see we worked so hard to complete work, although may be unpopular, even to be crazy, but the bigger may be a small program that users do not visit your 😂, unless you have your own marketing channels, such as the public, such as weibo, otherwise WeChat users even billions, of your small application users are hard to break the zero ha ha.
Whatever it is, release it first. First of all, you need to click the upload button on the toolbar of wechat developer tool to upload the small program code. After the successful upload, you can go to the micro channel public platform small program management background to interrogate your small program. Select the version just uploaded in version management, and then fill in some information to submit for review. Initial submission for review usually takes 1 to 2 working days, and subsequent iterations usually take 1 to 2 hours.
Wechat audit is quite strict, the audit specification is here. A common approach is to filter sensitive content through a back-end interface as it is submitted for approval, get by, and release sensitive content when it is posted online. Ha ha as long as the mind does not slide, the way is more than difficult.
1.0 Release online
Finally, finally, finally, the applet has been approved and can be posted online. After approval, it will not be automatically published online, you need to manually click on the release. After Posting online, you can go to any entry on wechat to search for your small program.
It’s a great relief that we’ve taken the first step of the long journey, and the next step is to figure out how to market and operate the applet, but it’s just the beginning.