WePY cloud development practice in Linux command query applet

Hello everyone, today I will share with you the WePY cloud development practice in the Linux command query applet.

Why WePY

First of all, let me share why you should choose WePY?

When I started selecting the project, the underlying frameworks I could choose from included WePy, MPVue, Taro, and MinUI. These frameworks are well-engineered frameworks that can help with long-term maintenance of mini-program projects. Among them, Taro was excluded from the beginning because it used React, which I was not familiar with. After I looked at MPVue, I found that it is more of a mini-program conversion tool for Web developers, rather than a Vue-like tool for mini-program developers, so I also ruled it out. MinUI was ruled out because it only provides a componentized solution and support for npm, ES6/ES7, and other commands still have to continue to use the functions of the mini-programs. It does not provide more support, and the entire ecosystem is not yet rich.

In the end, I chose WePY. Before I started, I researched WePY to see what advantages it has. In general, I think the advantages of WePY are as follows:

1. Provides a componentization solution similar to Vue: Componentization development can improve the maintainability of the project. As your development cycle becomes longer, componentization will greatly affect your development experience.

2. Provides support for ES6/ES7 syntax: JavaScript's criticized callbacks have a more elegant implementation in ES6 and ES7.

3. Provides Vue ecosystem: Unlike MinUI's solitary fight, WePY has many Vue community ecosystem products, such as WePY-Redux, RxWX and other Vue tools that everyone is accustomed to using, which makes the development process smoother and the development experience more consistent.

4. Optimization of native API: Among the interfaces officially provided by the mini program, many provide callback modes and do not provide Promise. When we use them, we often need to re-package them ourselves, which is troublesome. In WePY, WePY officials have encapsulated a layer for us. You can directly use the methods encapsulated by WePY, reducing the workload of encapsulation.

5. Vue accustomed data setting: In WePY, you can use the syntax of this.xxx=xxx to perform assignment operations. Compared with the native setData method, it has a more comfortable syntax and is more maintainable.

6. Computed methods are provided: When developing mini-programs, we inevitably need to format the data. In traditional mini-program development, we need to map the data and then modify it. However, after using WePY, we can use computed properties to format and adjust the data, which greatly improves the readability of the code.

The above are the advantages of WePY that I value. Next, let me talk about how to use cloud development in WePY.

Cloud Development in WePY

I have written many mini-programs and taught some mini-program courses. People often ask me, can XXX be used in XXX? In this scenario, can cloud development be used in WePY?

The answer is of course yes.

When looking at this issue, you should first figure out what exactly cloud development provides?

Cloud development provides data storage, file storage and computing power

This does not conflict with WePY's positioning of providing the ability to develop WeChat applets in a componentized manner. Therefore, WePY and cloud development do not conflict, and you can use cloud development in WePY.

Enabling cloud development in WePY projects

Since WePY itself does not provide a cloud development template (but you can now use the wepy init cloudkits/wepy-tcb-demo command to initialize a WePY project that includes a cloud development example), we need to add cloud development to the project ourselves.

As for cloud development itself, it is integrated into the wx. namespace, so you can directly use wx.cloud.xxx to call various cloud development commands without configuration. In addition, what is special is that you need to specify the cloud function directory to ensure that the WeChat applet developer tool can recognize the cloud function directory.

It should be noted here that, because the cloud development command itself supports Promise and Callback, you can directly use wx.cloud to call it instead of using wepy.cloud. WePY has not officially packaged it for cloud development.

You can create a new directory cloudfunctions in the root directory of the mini-program project, then add a new configuration item cloudfunctionRoot in project.config.json and set its value to cloudfunctions. In this way, the WeChat Mini Program developer tool can recognize that this directory is a cloud function directory and add a special directory name to it.

It should be noted here that the cloud function should be placed outside the source code directory src of the mini program, otherwise it will cause compilation errors. I tried to find the configuration item in wepy.config.js about shielding the compilation check directory, but I couldn't find it, so I directly put this directory in the project root directory, at the same level as the src of the cloud function and mini program source code.

In this way, you have completed the reference of applet cloud development in WePY.

Pitfalls encountered during development

This assignment should set data first

When developing with WePY, we use this.xxx to modify the value of the data. However, when I first started developing, the first problem I encountered was that I could not set the value of the data using this.xxx, and I could not get the corresponding value in the mini program interface.

Later I found out that if you want WePY to update and manage data for you, you need to put the data to be passed to the page in the data object in the page instance, so that WePY can help you update and manage the data. Since this was not mentioned in the documentation, I was stuck.

After analyzing WePY, I understood this approach. Since WePY does not use setData, but directly calls this.xxx to make modifications, WePY needs to know which variables should be sent to the page. Otherwise, passing all the data in this to the page will cause the transmission time to be too long, which may easily cause the applet to exit. At this time, the method of using data to limit data can be understood.

How to handle the management of pure mobile data?

Up to now, Cloud Development does not provide any management method other than the official WeChat Mini Program console, which greatly restricts us when building applications.

In order to provide better service, we decided to modify the product model. At first we considered a model where users submit translations and the team reviews them, but we had to consider the lack of management and development costs. We decided to adjust the model and switch to community self-purification. We fully open the editing capabilities and any user can submit data. At the same time, it is also possible to implement an application that is completely maintained by the community in the country.

However, this kind of data that can be submitted by anyone is likely to be exploited by others, so we introduced the content security interface officially provided by WeChat Mini Program to perform text security testing, so as to avoid the impact of some illegal and unlawful content on the Mini Program as much as possible.

If you use this interface, you will know that access_token is required when calling the interface. WeChat's access_token acquisition interface has both address restrictions for initiating calls (it cannot be called in mini-programs) and interface request frequency restrictions (requests too quickly may result in failure to obtain Token). Therefore, we decided to use cloud functions to handle this part of the functionality.

We use the got library in the cloud function to request the interface provided by WeChat to obtain access_token and detect content security. Also, to ensure that access_token requests are not made too frequently, we have added some code to cache the token.

const result = await cache.get(); // cache is a reference to the corresponding collection const now = (new Date).valueOf();
const nextTime = now + 5400000;
let accessToken = ''
if (!result.data.length) {
 console.log("Enter the initial acquisition process")
 const result = await got(accessTokenUrl)
 accessToken = JSON.parse(result.body).access_token
 await cache.add({
  data: {
   token: accessToken,
   time: nextTime
  }
 })
} else {
 if (result.data[0].time > now) {
  console.log("Already have a valid token")
  accessToken = result.data[0].token
 } else {
  console.log("The existing token is invalid")
  const tokenResult = await got(accessTokenUrl)
  accessToken = JSON.parse(tokenResult.body).access_token
  await cache.doc(result.data[0]._id).update({
   data:{
    token: accessToken,
    time: nextTime
   }
  })
 }
}

Through the above code, a token is stored in the cloud database and compared with its expiration time. If it is found that the token is about to expire, the token is updated to ensure that the request can be made normally.

Summarize

Looking back at the entire mini-program development process, the convenience of WePY made the entire development process extremely smooth, and the advantage of rapid iteration of cloud development helped the entire application go online quickly. The total development time from the Linux applet to the official release is no more than 24 hours!