Use cloud development to achieve a resource navigation small program, to achieve the function is very simple: all users can view and recommend resources, recommended resources related information will be displayed in the way of a list.

The main purpose is to help you quickly understand the small program development process and cloud development technology, learn a more efficient way of small program development.

Technology selection

First choose small program development technology. The process of developing a applet is similar to that of developing a website, in that you write front-end (interface interaction) and back-end (request processing logic) code.

The front end

As for the front end, I choose to use Taro framework + Taro UI development. Taro is a cross-end development framework based on React, which supports writing a set of code and automatically generating WeChat applet, H5, APP and other applications. In addition, the framework provides function encapsulation for many complex functions, which can greatly improve development efficiency. Taro UI is based on Taro UI library and provides many off-the-shelf components, such as image uploads, selectors, etc., to meet common development needs.

The back-end

The backend is simple. The traditional way is to use the backend development framework provided by programming languages, such as Java’s SpringBoot, PHP’s Laravel, Python’s Django, etc., but often need to build their own servers, databases, logs, monitoring, operation and maintenance, etc. For only the front end or want to quickly develop small program students, it is a nightmare!

So I choose a more efficient and convenient way, Tencent small program cloud development!

What is cloud development?

Small program cloud development is a professional small program development service jointly launched by WeChat team and Tencent cloud, which helps people to quickly develop small programs, games, official website, etc., and get through the open ability of WeChat native.

What are the advantages of cloud development?

1. Developers do not need to build back-end servers, but only need to use various capabilities provided by the platform (such as cloud database, cloud storage, audio and video, AI, etc.) to quickly develop businesses.

  1. Secure and easy access: no need to manage certificates, signatures, secret keys, directly call WeChat API. Reuse WeChat private protocol and link to ensure business security.
  2. Multi-end reuse: support environment sharing, a backend environment can develop multiple small programs, public accounts, web pages, etc., convenient reuse of business code and data.
  3. Unlimited development languages and frameworks: Developers can develop code in any language and framework, build it as a container, and quickly host it to the cloud.
  4. Billing by volume, lower cost, support automatic expansion capacity
  5. Extensibility: Support for one-click deployment of static websites and cloud CMS management of data content

Among them, what attracts me most is the efficiency and convenience of cloud development. There is no need to build a server, build a database, or deal with the complex logic of connecting with WeChat. Instead, I just need to focus on the implementation of the functions themselves.

For example, query data, a few lines of code to do!

Application development

The following is to develop the small program, including the initial project construction, front-end page development, access to the cloud development and other steps.

Project structures,

First, refer to the Quick Start section of the Taro framework’s official documentation to install the Taro command-line tool and initialize a small application.

Note that during initialization you will be asked to select a template. In this case, select Cloud Development. Taro will automatically generate sample code containing Cloud Development with the following directory structure:

The front-end development

In total, we need to create two pages, resource list page and recommended resource page. The components we need to use are list, form, input field, button, image upload, and so on.

Taro UI supports all of the above components. Follow the official documentation access of Taro UI, copy the component code into the page and modify it, and you can quickly develop these two pages.

The sample code for the resource list page is as follows:

<View className='list'> <! > < atList > {resourcesView} </ atList > <! OnClick ={() => navTo(xx)}> < value='add'/> </AtFab> </View>

To view the page, open the WeChat developer tool:

After the page development is completed, we set up the back-end service so that users can insert and read data through the interface.

Access to cloud development

Different from building back-end services, using cloud development will be simpler and faster, directly click cloud development in WeChat developer tools, open the environment, each user can enjoy a certain number of free environment!

In the cloud development interface, resources such as cloud database, cloud storage and cloud function can be monitored and managed.

We can create a resource table in the cloud database to read and write resource data. The cloud development console supports visual database management, such as records, indexes, data permissions, etc., which is very convenient!

Each environment has a unique ID to distinguish it, and you can introduce the cloud development SDK at the front end and pass in the environment ID to initialize it.

init > >{// environment id env: 'xx',})

Then, you can directly call in the front end of the cloud development provided by the operation of the database interface, such as insert data, query data, do not have to develop their own background!

For example, insert data:

const db =; Db.collection ('resource').add({data}).then(res => {// return res; }). Catch (err => {// fail console.error(err); });

When recommending resources, we need to let users upload pictures. Previously, we needed to find a place to store them by ourselves. Now we can directly call cloud storage in the front end with a few lines of code:

Const res = await UploadFile ({cloudPath: 'Upload to Cloud'), filePath: 'Upload to Cloud' PictureUrl,}) // Get picture ID, can be downloaded or directly show picture = res.fileid;

You can manage files, configure permissions, cache, and more in the cloud storage from the Cloud Development Console:

If the default interface provided by cloud development cannot meet the needs, you can write your own background interface and deploy it to Tencent cloud as a cloud function. Then you can request it in the front end, similar to developing your own back end.

For example, if you deploy a login function, you can get the unique ID of the user in the applet. In the console, you can also see the call log of the function, administrative permissions and so on.

Implement no login call

Once you have followed the above process, you will be able to recommend and present resources in the WeChat developer tool. But if you put this little program online and share it with other users, there will be access issues and all functions will be disabled!

This is because in order to ensure the security of resources and flexibly control the authority of resource invocation, cloud development has formulated security rules, and non-logged users are not allowed to access them by default.

If we share a small program in Moments and have to ask our friends to log in to see the list of resources, then the user experience will be too bad, so now we will implement a no-login call.

Small program cloud development takes into account a variety of scenarios and therefore provides the Unlogged mode.

In the unlogged mode, there is no login state of the user, and the application scenarios are as follows:

1. Single page mode: small program/game sharing to Moments is opened

  1. Web Unlogged Mode: In a Web environment where there is no login

This mode is off by default. You need to manually enable unlogged access for the cloud environment in “Cloud Console – Settings – Permission Settings”.

Once unlogged mode is enabled, client (front end) permissions must be controlled using security rules, i.e. access to cloud functions, databases, and file stores must pass through security rules.

Therefore, in addition to enabling unlogged access outside the cloud in the console, security rules must be selected and configured in the permission Settings for the cloud database, cloud storage, and cloud functions.

Security rules have their own syntax. Take a cloud database as an example, select a custom security rule to see the original rule:

read, write, doc, auth Expressions for the < span > true < / span > allow access, namely the current logged-in user must is the founder of this data to be read and write.

If you want to allow all users to read and write to all resources, you can simply set the expression value to true:

Modify the security rules of cloud storage. The original rules are as follows:

resource = true = true = true resource = true = true

login allows all users to access, while other functions allow only logged users to access: login allows all users to access;

The security rules are very flexible and can be used reasonably to increase the security of resources and escort the application security while meeting the demand of resource invocation.

Finally, through this article, we understand the development process of small program, as well as the usage of small program cloud development, the way of no-logon resource invocation. Thinking is more important than code, and I strongly recommend that you give cloud development a try to feel efficient and make your own application easily!

Product introduction

Cloud development (TCB) is the cloud native integrated development environment and tool platform provided by Tencent Cloud. It provides developers with high availability, automatic elastic expansion of back-end cloud services, including computing, storage, hosting and other serverless capabilities, which can be used for integrated cloud development of a variety of end-end applications (small programs, Official account, Web application, Flutter client, etc.), which helps developers to build and manage back-end services and cloud resources in a unified way, avoiding tedious server construction, operation and maintenance in the application development process, and allowing developers to focus on the implementation of business logic with lower development threshold and higher efficiency. Open cloud development: product documentation: technical documentation: technology exchange and Q group: 601134960 Latest news pay attention to WeChat public account [Tencent Yunyun Development]