On November 25, 2018, Hangzhou station successfully closed the Open Talk 2018 Small program developer Salon series activities held by Youpaiyun. This conference attracted more than 200 people to sign up and the attendance rate is as high as 90%. Meanwhile, it also provided thousands of online viewers with a gourmet meal about small program development. Big search car front-end development engineer Xia Xinyu made in the activity “how new people in big search car to write small procedures” to share.
“2018 Small program Developer Salon” is a major event launched by Cloud Open Talk after “2018 Audio and video Technology Salon”. Different from most small program activities focusing on marketing and traffic, this series of activities are more keen on sharing various interesting experiences and beneficial experiences in the process of small program development.
Xia Xinyu is currently doing front-end development in Dasoso, including mobile terminal and small program development. She believes that the choice of technology stack and practical scheme is the best one suitable for her business. Dasouche chose the native framework for its ride-hailing mini program project, and shared some practical experience based on the development of this project, including the use of life cycle, small program routing, setData data-driven time-consuming and other solutions.
The following is the transcript:
Choose the technology stack that works for you
The introduction of micro channel small program has brought a boom, there are many small program applications on the market, big search car in Alipay small program, micro channel small program, Baidu intelligent small program and fast application have developed business. From the point of view of user flow, big search car is more inclined to pay Treasure and micro channel small program. From a macro point of view, the two small programs are compared. From the perspective of service types, alipay small programs extended by Sesame Credit account for a relatively large proportion of commercial small programs, while wechat small programs have great advantages in social contact and content promotion by virtue of the number of users and user activity. From the perspective of development technology, the basic syntax of wechat applets and Alipay applets is very similar. Developers can convert the code of wechat applets into the code of Alipay applets. On the other hand, Alipay small program is open to third-party service providers and enterprise developers, while wechat small program increases the rights of individual developers, but also gives developers more opportunities to practice.
In the interactive business line that Dasoo is running, statistics show that alipay mini program has a higher conversion rate of transactions than wechat mini program, but the current business needs to rely on users to promote and recruit, so choosing wechat mini program with higher user activity is more suitable for Dasoo’s current business.
There are many frameworks for wechat small programs, in addition to the commonly used WePY and mpVue frameworks, as well as the Taro framework launched by JINGdong and The Megalo framework of Netease Kaola.com. These frameworks eventually package the project code into the code supporting the native framework, and are all developed in the direction of multi-end unified development. The WePY framework officially launched by Tencent adopts the syntax of class Vue, which can reduce development costs for developers using class Vue. And the WePY framework handles most of the native asynchronous apis to help developers avoid callbacks. At the same time, WePY framework also optimized data binding and event binding, but also does not achieve two-way data binding capability, and WePY framework is a secondary encapsulation of the native framework, the syntax still supports native syntax.
For example, if your mom asks you to buy soy sauce, you need to know what soy sauce is in the supermarket. Developers need to know at least the basics of developing small programs. You can either walk or ride a bike, which is faster, but only if you can ride a bike, which means the developer has used or studied the Vue framework. In this process, there is no way to ensure its safety factor, is that you use any framework, there will be some of its own rules, will encounter some different pits, we need to experience to feel. So in the actual development, we should consider many factors to choose the framework suitable for their own projects.
Big search car native small program framework practice
Wechat applet divides the application into view layer and logic layer, which respectively run in two independent threads. Each page has its own webView thread and all logical scripts run in the same JSCore thread, so there are no browser objects on the logical scripts and they cannot operate directly on the DOM. In addition, the thread of the same logical script will cause some derivative problems. For example, the timer in the page will not be cleared automatically when jumping to other pages. The developer needs to manually clear these timers to avoid unexpected problems, similar to the DEVELOPMENT mode of SPA.
Small application mode of the operation mode of the independent thread on the rendering accordingly will increase some additional overhead, it needs to view the thread and the logical thread of cross work, page rendering first, the view layer will be initialized to the page, and wait for the logic layer passed the initial data, receive data after the initial data and node tree parsing integration of rendering the view layer, This completes the initial rendering of the page. During the initial rendering of the page, the view layer renders the page into a structure similar to the DOM tree according to the nodes of the page, so the number of nodes of the page also affects the speed of page rendering. We can optimize the use of this node, for example, reduce the use of unnecessary nodes, reduce the use of rich text tag text, in conditional rendering, list rendering, choose to use block tag will not be rendered into the node tree instead of view tag. In addition, in the process of initial rendering, data will have a cross-thread time-consuming problem from the logical layer to the view layer. We can use cache data to initialize data, and then asynchronously request data to reduce the waiting time of users. After the initial rendering of the page is completed, when the data of the view layer needs to be updated, the page will be re-rendered. The re-rendering process is driven by setData data. We need to optimize the use of setData to reduce cross-thread overhead. For example, you can try to update the smallest unit of data at a time, and even extract some frequently updated content into components, so as to achieve local update of the page.
Page rendering of applets is inextricably linked to its life cycle. In the example of the small program, we will initialize the data of the small program, and solve the problem of user login authorization. If in your project, each interface to the user’s state of landing to judge, in order to avoid the first screen page cause multiple user login interface of asynchronous request, we can not in the life cycle of the onLaunch for users to log in, but in the way of the data encapsulation of a request, the user’s state of landing to judge, Do an interface synchronization process, wait for the user login success, and then in a chained way to request other data. In addition, we can skillfully make use of the function that parameters can be obtained in the onLaunch life cycle, and combine the parameters of the server environment in the small program code to judge and switch the project environment, such as some test environment and pre-release environment.
The page instance life cycle is used frequently, and the page onLoad life cycle is executed only when the page onLoad is executed, such as when a page redirection event triggers the page unload. If the user needs to refresh the data every time they enter the page, they can make a data request in the onShow function, or use the drop-down refresh hook function of the page instance to let the user manually refresh the data. A little bit about pull-up loading hook functions. You can use element pseudo-classes to solve the problem of setting container padding. In addition, the loading of data and the onLoad and onShow life cycles of the page are asynchronous when the logical layer is initialized. If we directly fetch the local cache data for data assignment, we will not be able to render the data to the initialized page in time when the page is initially rendered.
There are two types of page jumps for applets: tabbar jumps and other types of jumps. Tabbar can only be jumped using switchTab. Normally, we will concatenate some parameters on the jump URL, but this method cannot be used in the switchTab and navigateBack methods of the applet. However, you can use global variables or local caching to pass parameters. And the page stack of small programs is capped, although the official limit has been increased from 5 to 10, but we still need to optimize when using routing. For example, the memory of the page stack will be wasted due to multiple page jumps caused by the user clicking the page multiple times. By controlling a global Boolean variable, combined with the use of timers, the user can prevent multiple click events within a certain period of time. Similarly, we need to control the user’s clicking to submit the form for several times. We can use the official prompt box function to trigger the showLoading method when the user clicks to display the loading prompt box and prevent the user from interacting with the page. After the data request is completed, the hideLoading method is called to close the prompt box.
Given that setData is time-consuming to use, and that mustache syntax for data binding doesn’t allow you to use JS functions, we can reasonably use WXS scripts that function like the Filters we normally use. WXS runs on the same thread as HTML, reducing cross-thread overhead and replacing some of the data-processing methods in JS files. Because WXS provides only five base libraries and does not have much support for ES6 syntax, you cannot use lets to define variables. In the process of development, I encountered a situation where the use of try and catch syntax will terminate the compilation but no compilation error. Therefore, you should pay attention to the use of try and catch syntax. On the other hand, WXS and JS performance differences also vary on different systems, with more use of performance optimizations on iOS than on Android.
As for the use of several native components provided by wechat, the native form components of the input and Textarea clients have style problems, requiring us to override the default style. Moreover, they have a higher level of view, requiring us to use the cover-view component to remedy the problem. Fortunately, the input component has been officially stratified recently, and will gradually be stratified for other native components in the future.
Vue technology stack combined with applets development
At present, all front-end projects of Dasoche are developed based on Vue technology stack. In addition to some old projects using Vue1, other projects use Vue2 framework. On this basis, Dasoche relies on Vue technology to make a large number of technical precipitation, such as UI component library at each end, various plug-ins such as AB Test plug-in, formed a relatively mature uniform framework of code structure, in addition to CI/CD and scaffolding services to support all front-end projects.
As Vue technology stack takes a relatively large proportion in the front end of Dasso, the Taro framework of JD based on React technology stack mentioned above is not suitable for us. Therefore, Dasoche has planned a small program development solution based on Vue technology stack. It adopts the hybrid development mode of native and H5, and uses the WebView component provided by the native framework and the communication API in some SDK provided by it to carry out unified encapsulation of the API of different platforms. When the underlying encapsulation platform for judgement of the project, then use native grammar development each application platform native plugin support, guarantee a H5 project can normal communication between the native framework and different platforms, thus formed a set of cross-platform application development solutions, can significantly reduce the development cost of small application project.
The use method of this scheme is that we reference plug-ins in different H5 projects to ensure normal communication with the native framework, and then embed them into the native framework for maintenance, so that we can use the development iteration of H5 to promote the development iteration of small programs.
On this basis, combined with the existing TECHNICAL precipitation of H5, this scheme is extended and enabled. Such as providing scaffolding services for small application projects, while the solution can inherit some of our existing technical artifacts such as UI component libraries, various plug-ins, multi-environment switches, automatic deployment, and so on.
You can select categories, channels, and other configuration items when creating a project. You can create a custom applet project with one click.
In an H5 project, you can manually select an applet communication plug-in to make the project available in the applet native framework.
Finally, Xia Xinyu mentioned that developers should pay more attention to the dynamics of the official community in the actual development process, timely follow up the official iteration to ensure that their own projects can be timely maintained, and see the problems of other developers, so that we can learn and make progress together. Although such pit filling experience is not really basic knowledge, nor is it based on the understanding of the bottom layer, but the accumulation of experience, there will always be some qualitative progress, which requires more hands-on experience. As for the choice of technology stack and practice scheme, it is the best for their own business.
Recommended reading:
How to write small program in Dasoo (Speech video + PPT)opentalk.upyun.com
Small program design and operation thinking – er Yeopentalk.upyun.com
