gogoWebsite

write sth. upfront

1, Explanatory Video

/course/detail/26572

2, Supporting Notes

The accompanying notes will be given for free on csdn, so feel free to follow along and the notes will be updated continuously.
/qiushi_1990

3, support Brother Stone 😊

3-1, Access to Source Code and Supporting Resources

At present, the source code and supporting some of the resources are temporarily not free, if there is a need for students can chat privately stone brother, take the rice to exchange.

3-2, Notes eBook

Notes I have also organized a set of e-books, you can also chat privately with Brother Stone to obtain the e-book version of the supporting notes. The e-book notes are convenient for checking the knowledge points at a later stage.

4. Questions and answers (●'◡'●)

In addition, Brother Stone provides supporting answering services. Of course, the knowledge pay era stone brother answer is to meter, after all, stone brother energy is limited, stone brother is also to eat bread. Stone brother has launched a monthly, yearly answer service. You have any problems in the learning process, or encounter any programming problems in the work, you can come to the stone brother!
Stone can currently answer the following questions

• Problems with small programs
• Problems with cloud development
• Problems with Java, springboot, Javaweb
• Problems in the area of graduation
• Problems with Android app development
• Problems with html+css+JavaScript
• Problems with front-end development
• Problems with back-end development
• Interviewing for a job

First, recognize the small program cloud development

1-1, Introduction to Cloud Development

• Small program - cloud development is a professional small program development service launched by the WeChat team in conjunction with Tencent Cloud.

• Developers can use cloud development to quickly develop small programs, small games, public web pages, etc., and natively connect to WeChat's open capabilities.

• Developers do not need to build servers and can directly use the APIs provided by the platform for business development without authentication.
  applet

• Cloud development, also referred to as tcb, is the official WeChat to us based on the Tencent cloud cloud server. Currently cloud development includes: cloud database, cloud function, cloud storage, cloud call. Later chapters will specifically explain these several.

Official Documentation:/miniprogram/dev/wxcloud/basis/

1-2, Cloud Development vs. Traditional Servers

The advantages of cloud development over traditional servers are listed below

With the above comparison, we can see that if you want to create a small program's backend quickly, using cloud development is a good choice.

1-3, Serverless Development Model

To get a deeper understanding of applet cloud development, you need to know what the Serverless development model is, because that's what we use for our applet cloud development
The official video talks about it: /community/business/doc/000e8697e481208a2e3b31d6a5680d
So we're going to dive into the Serverless development model next

1-3-1, Evolution of front-end development models

Having finished the stages above, you can see that every change in the front-end development paradigm has been due to some transformative technology. First it was AJAX, and then it was . So what is the next transformative technology? Needless to say, I think the next generation of front-end development model is Serverless!

In fact, Serverless has been associated with the front-end for a long time, we just may not have perceived it.
1, CDN: I believe that we have used CDN, we have completed the development of static files deployed directly to the CDN, through the CDN for content distribution, network acceleration, in this process, the front-end does not need to care about how many nodes of the CDN, how to do load balancing, and do not need to know how much the QPS of the CDN. So from this perspective, CDN is a serverless implementation.
2, then for example, object storage, and CDN, we only need to upload files to the object storage, you can use it directly, do not need to care about how it access to the file, how to control permissions, so the object storage for the front-end is Serverless.
3, and even some third-party API services, also Serverless, because we use, do not need to care about the server.

1-3-2, What is Serverless?

From a technical perspective, Serverless is a combination of FaaS and BaaS.
Simply put, FaaS (Function as a Service) is a platform for running functions, such as Cloud Function in Cloud Development, Function Computation in AliCloud, Lambda in AWS, and so on.

BaaS (Backend as a Service) on the other hand, are some back-end cloud services, such as cloud development databases, object storage, message queues and so on. Utilizing BaaS can greatly simplify our application development.

Serverless, on the other hand, can be understood as running in FaaS and using BaaS functions.

1-3-3, Key Features of Serverless

1, event-driven ---- function in the FaaS platform, you need to drive the function execution through a series of events.
2, stateless ---- because each time the function is executed, a different container may be used
3, no operation and maintenance ---- using serverless we do not need to care about the server, and do not need to care about the operation and maintenance, which is the core of serverles ideas;
4、Low Cost ---- Using Serverless costs very little because we only have to pay for each function run. If the function does not run, no money is spent and no server resources are wasted excessively

1-3-4, serverless development process

As you can see by the chart above
1, Traditional development process.
In the traditional development process, we need the front-end to write the page, the back-end engineer to write the interface. After the back-end interface is written, the interface is deployed, and then the front-end and back-end tuning. After the coordination is completed, and then test, on-line. After online, we also need operation and maintenance engineers to maintain the system. The whole process involves a number of different roles, the link is long, communication and coordination is also a problem.

2, and based on Serverless, the back-end has become very simple , the previous back-end application is split into a function , you only need to write the function and deployed to the Serverless service can be, and then do not have to care about any server operation and maintenance operations. The threshold of back-end development has been drastically reduced. Therefore, only a front-end can complete all the development work.
Of course, the front-end based on Serverless to write the back-end, it is best to have some knowledge of the back-end. Involving complex back-end systems or scenarios where Serverless is not applicable, you still need a back-end developer.

1-3-5, Value from serverless

1. Reducing operational complexity

Serverless architecture decouples the software application from the server, and the server is no longer the focal point of the user's application development and operation. Users no longer need to plan the number and specifications of servers in advance before the application is launched. In the operation and maintenance process, users no longer need to continuously monitor and maintain the status of specific servers, but only need to care about the overall status of the application. The overall complexity of application operation is reduced, and users can focus more on the experience and improvement of the software application and other areas that can bring higher business value.
2. Reducing operating costs
Servers are no longer a managed resource of concern to users, the complexity of operations decreases, and the amount of time and manpower needed to be invested in application operations will be greatly reduced. In the best case scenario, a few application administrators can manage an application system that handles a large number of requests.

3. Shorten the time to market of products
Under Serverless architecture, the functions of an application are deconstructed into a number of fine-grained stateless functions, the boundaries between functions become clearer, and the coupling between functional modules is greatly reduced. This makes the development of software applications more efficient and the iteration cycle of application development shorter.

1-3-6, Serverless-based applet development

1, the current domestic use of Serverless more scenes may be small program development. The specific implementation is the small program cloud development, Alipay small program and WeChat small program provide cloud development function.
2, in the traditional small program development, we need to front-end small program development; back-end development of the server side. Small program back-end development and other back-end application development, the essence is the same, need to care about the application of load balancing, backup redundancy, monitoring and alarming some of the deployment of operations and maintenance operations. If the development team is very small, it may also need the front-end to realize the server side.
But based on cloud development, you only need to let the developer focus on the implementation of the business, by a front-end can complete the entire application of the front-end and back-end development. Because cloud development encapsulates the back-end as a BaaS service, and provides the corresponding SDK to the developer, the developer can use various back-end services like calling functions. The operation and maintenance of the application is also transferred to the service provider that provides cloud development.
Below are some examples of development using Paypal Cloud respectively, the functions are those defined in the FaaS service.

Load Balance means spreading execution across multiple operating units, such as web servers, FTP servers, enterprise-critical application servers, and other mission-critical servers, to accomplish tasks together.
Backup Redundancy: Backups are taken in order to prevent data loss due to damage to storage devices caused by natural or social pests.

1-3-7, Generic Serverless Architecture

The bottom layer of this is the backend microservice (Backend) that implements the complex business. The FaaS layer then implements the business logic through a series of functions and provides services directly to the front end. For front-end developers, the front-end can write functions to implement the server-side logic.

At the same time, whether in the back-end, FaaS or front-end, we can go to call the BaaS services provided by the cloud computing platform, greatly reducing the difficulty and cost of development. Small program cloud development is an example of calling BaaS services directly on the front end.

In a nutshell serverless - less is more
With Serverless, we don't need to pay too much attention to server-side operations and maintenance, we don't need to care about areas we're not familiar with, we just need to focus on the development of the business, focus on the implementation of the product. We need to care less, but we can do more.

Second, the installation and use of WeChat developer tools

Before we develop a small program, we first need to install the small program developer tool, today we will teach you to install the small program developer tool.

2-1, in fact, it is very simple, just go to the official website of the applet, and then click on the tools, as shown in the figure below.

Of course, you can also go directly to the download via the following link
/miniprogram/dev/devtools/

2-2, download the installation package as follows

It doesn't matter if you have a window or mac computer, just double click on the installer to realize the installation.

Just wait for the installation

Installation completed

2-3, Access to Developer Tools

The first time it is accessed, it is as follows

Click on the plus sign in the image above and let's create a new item

After completing the configuration in the image above, click New. The project will be created. The project after creation is shown in the figure below.

This way we have completed the installation of the applet developer tools, and we can start writing code for the applet later.

Third, registration of small programs

Although we can use the test number to create a small program, but the test number has a lot of features will be limited, such as the cloud development we are going to talk about, it must be a registered small program can be used, so today we will talk about the registration of small programs.

Actually, the official registration steps are very detailed

Official registration file:/miniprogram/introduction/

WeChat small program registration address:/
Once inside, click Register Now

When you enter the registration page, follow the instructions step by step.

Points to note.

• If you're just learning, you can sign up for a personal app.
• If you want to commercial, you want to use WeChat payment, take the user's cell phone number and other complex functions, you can register the enterprise small program, but the enterprise small program must have a business license to register!
• One email address can only register for one applet
• One ID card can register 5, personal small programs
• One business license can register 50 business applets

IV. Creation and initialization of cloud development environments

Today we will formally create their first cloud development project, before creating a cloud development, there are a few considerations

• 1, you must register the small program before you can open the cloud development
• 2, a small program can create two cloud development environment

4-1, Creating an Initial Project

We have to access the applet developer tool before we can open the cloud development service. The latest version of the developer tool has an additional template selection when creating a project, if you are using the latest version of the developer tool, just choose not to use templates in the template selection.

The latest version of the development tool does not use templates

If you are using the latest version of the developer tools, there will be an additional template selection when you create a project, always remember to choose not to use templates here.

And create ordinary small program, as shown in the figure above, it should be noted that here you must fill in their own appid, you can not use the test number. The appid can be obtained as shown in the following figure.

About appid

If you don't create a project with your own appid, the following problem will occur, so be sure to go ahead and register an applet and then use your own appid.

Since the official cloud development update is so fast, some students may encounter problems like the following

No Not using cloud services Selection. What to do at this time. Stone has also updated the course to give you the solution.

4-2, there is no "no cloud service" option solution (optional)

If you have the problem above, read this section again, if you don't have such a problem, just skip it.

I have a blank project template for you in the supporting materials. All you need to do is download this template to your desktop and unzip it.

Then just click Import and import the project.

Then as shown below, remember to change the appid to your own.

4-3,Open Cloud Development

• 1, click the arrow in the picture below, if you didn't use your own appid when you created the project in the first step, there won't be the cloud shown by the arrow in the picture below.
  
• 2,Name the cloud development environment
  
  Waiting to be created
  
  Created Successfully
  
• 3,Get the id of the cloud development environment
  

4-4,Initialize Cloud Development Environment(****Important)

Write the environment id in it, and note that you need to use your own cloud development environment id here.

• Before initializing the cloud development environment, go to the cloud development console and get the cloud development environment id as follows
  
  The environment id here is recommended to be copied directly, not handwritten, it's easy to make mistakes.

• After getting the environment id, go and do the initialization of the cloud development environment as follows
  

When you create a good cloud development, initialization may take a little time, so if there is an initialization error, remember to close the developer tools, wait a few minutes and then reopen it.

V. Cloud Development ~ Cloud Database

Official Documentation: /miniprogram/dev/wxcloud/guide/database/

5-1, Creating a New Collection (Data Table) in the Database

Let's take a new product list as an example

5-2, Database Rights Management

To allow users to query the product data we created, you need to change the permissions to readable by all users

5-3, Database additions, deletions and modifications

5-3-1, Query get()

• traditional writing
  
• ES6 Concise Writeup
  
  Recommended second writing style
  

5-3-2, Conditional Query where()

5-3-3, query single data doc()

doc is used to query a single piece of data. For example, the product details page.
The parameter used in doc is the _id field in our data.

5-3-4, Adding Data add()

Data can be added through add.

5-3-5, update data update()

Modify the data already in the database, combining the doc to modify a single piece of data.

5-3-6, Deleting data remove()

Delete data, combined with doc to delete single data

5-4, Comprehensive case of additions, deletions and changes

• 1, can view the product list
• 2, more dynamic add goods
• 3, can enter the product details page
• 4, the ability to delete a product
• 5, can modify the price of a product

5-4-1 List Jump Details data-

• 1, define data in wxml - the data to be bound
  
• 2. Get the bound data in the click method in the js page.
  
• For example, the printout is as follows
  

5-4-2, list jump details and carry product ids

• 1, list jump page to detail page
  
• 2, get the id data carried by the list when jumping page
  

5-4-3, Query Product List

5-4-4, Add Products and Refresh Product List

5-4-5, Update commodity data

The user enters a new price and the update method is called to update the data.

When we have a successful update, a log is printed as shown below.

Only when the updated in stats is 1, it means that a data was successfully updated.
If this item was not created by you, when you do an update operation on this item, the printed updated is 0.

This time on behalf of the update did not succeed. This is because of the operation of the permissions problem, to solve this problem, we have to use the cloud function, here we put it here, in the back of the cloud function chapter will do specific explanations.

5-4-6, pop-up window prompts to confirm deletion

Deletion of data by the user is a dangerous operation, so it is best to give the user a friendly reminder before the operation.
Official popup documentation: /miniprogram/dev/api/ui/interaction/

5-4-7, Deletion of Merchandise

5-4-8, Permission Issues When Updating and Deleting

If this item is not created by you, when you do a delete or update operation on this item, although it will also return success, you can see that the number of items we update or delete is 0.

In fact, this time also means that there is no update or deletion success, here is because of the problem of operation authority, because this data is not created by you. So you can only do query operations on this data, but can not do modify and delete operations. To solve this problem, we need to use the cloud function. The latter part of the cloud function to explain, I will do a specific explanation.

Let's move on to more advanced database operations.

5-6, Common Shortcuts

We usually use some shortcuts when we are developing in order to improve the efficiency of writing code. The commonly used shortcuts in our small program development tools are as follows.
Settings - "Shortcut Key Settings

Then click on the following shortcuts to see all of them

If you don't like the default shortcuts, you can reset the shortcuts yourself. Because of the shortcut is more, I do not enumerate here, I take out some common shortcuts to give you a general talk, I here to window computer as an example, if you mac computer, you can go to see the developer tools default shortcuts. More than a few times to see the commonly used to remember on the line.

shortcut combination	descriptive
Ctrl+a	unanimous
Ctrl+c	Copy the selection
Ctrl+v	Paste the copied content
Ctrl+z	Undo current edit
Ctrl+s	Save and compile the project
Ctrl+b	Recompile the project
Ctrl+x	Truncate the selection
Ctrl+/	Add a comment
Ctrl+Shift+k	Delete the current line
Ctrl+Shift+f	global search
Ctrl+f	Current In-Page Search
Ctrl+Shift+h	Global search and replace text
Ctrl+h	Search and replace text within the current page
Shift+Alt+F	Formatting Code
Shift+Alt+⬆	Copy current line up
Shift+Alt+⬇	Copy the current row down
Alt+⬆	Move the current line up one line
Alt+⬇	Move the current line down one line

There may be slight differences in the shortcuts on some computers, so the shortcuts that come with the developer tools by default will prevail.

5-7, Database Sorting orderBy

The orderBy method accepts two parameters when doing the sorting

• 1, sort by that field
• 2, sorting rules (ascending or descending). Asc for asc, desc for desc.

If we list the items in ascending order from lowest to highest price

If we sort the items in descending order according to their price.

5-8, return the specified number of data limit

limit is used to specify the upper limit of the number of query result sets, for example, if we have 100 pieces of data and only want to return the first 20, we can use limit(20) to specify that only 20 pieces of data will be returned.

For example, to return only 3 pieces of data is written as follows

• Note: Limit has a default and maximum limit of 20 on the applet side, and a default and maximum limit of 1000 on the cloud function side.

5-9, paging method skip

skip specifies that the query returns results from the specified sequence of results after the beginning of the return, often used in paging. For example, we have 100 pieces of data, you want to start from the 10th return data, can be realized by skip (10)

• Skip can be used in conjunction with the limit method we learned above to achieve the paging effect.
  

Let's say we have 100 pieces of data and return 20 pieces of data at a time. Then it can be returned in 5 pages.

• Page 1 limit(20).skip(0)
• Page 2 limit(20).skip(20)
• Page 3 limit(20).skip(40)
• Page 4 limit(20).skip(60)
• Page 5 limit(20).skip(80)

5-10, Command database operator

I door above to learn the database add, delete, change and check, but these are the most basic and simple operation, if we want to realize the complexity of the data query operation, what should we do?
for example

• Looking for items with a price greater than 100?
• Inquiring about students younger than 18?
• How can I modify multiple pieces of data at the same time?
• How to delete multiple pieces of data at the same time?

If we want to realize these complex operations, we need to use the Command database operator in the database, which is the following one

Official Documentation: /miniprogram/dev/wxcloud/reference-sdk-api/database/

5-10-1, gt query for data greater than a specified value

For example, querying all items with a price greater than 5

5-10-2, gte query for data greater than or equal to a specified value

For example, querying for items greater than or equal to $5

5-10-3, lt query less than the specified value of the data

For example, check all products with price less than 5

5-10-4, lte query for data less than or equal to a specified value

For example, query the price less than or equal to 5 dollars of all products

5-10-5, and queries that satisfy multiple conditions simultaneously

For example, query price greater than 5 less than $ 10 all products

VI. Cloud Development ~ Cloud Functions

6-1, Recognizing Cloud Functions

Official Documentation: /miniprogram/dev/wxcloud/guide/

Let's take a look at the official introduction to cloud functions

In fact, in layman's terms, cloud functions also run on servers, only compared to our traditional development language. WeChat officially provides us with a foolproof one-click deployment. That is to say you only need to spend your mind on the business logic code writing. No need to care about writing how to deploy, no need to care about security issues, no need to care about authentication issues.

Let's take getting the openid as an example to see the comparison of the implementation of cloud function, php, Java

• php get user openid
  
  If you use php to get the openid you must go through the following steps
• 1, go to the background of the applet to get the appid and appSecret
• 2, request the corresponding interface of WeChat
• 3, decode the data after acquiring it
• 4, buy servers, configure servers
• 5, buy a domain name, domain name filing, configuration https
• 6, deploy php code to server
• 7, small program side call php interface

Java get openid and above the same php steps, is also the need for the above 7 steps. And we use the cloud function to get openid it, it only takes a simple 3 steps on the line, the amount of code can be significantly reduced!

6-1-1, Cloud function to get openid

With the cloud function, it's just 3 steps

• 1, write a cloud function
• 2, one-click deployment of cloud functions
• 3, call the cloud function

Take a look at the cloud function code, which only requires 10 lines of code, and you can easily fix it

6-2, Advantages of Cloud Functions

Let's compare the cloud function with the cloud database from the previous chapter.

manipulate	the cloud function (math.)	Cloud Database
Return data ceiling	100 articles	20 articles
Updated data	All can be updated	Only those created by yourself can be updated
Delete data	All can be deleted.	Only those created by yourself can be deleted
operating environment	Running in a cloud environment	Runs locally in the applet
Realization of functional richness	It's very rich.	Only database additions, deletions and modifications can be realized

• Take a look at how the official documentation describes the cloud function
  Cloud function belongs to the management side, the code running in the cloud function has unrestricted database read/write permissions and cloud file read/write permissions. It should be noted that the environment in which the cloud function runs is the management side, and it has nothing to do with whether the WeChat user corresponding to the incoming openId in the cloud function is the administrator/developer of the app.

6-3, Cloud Function Call Demo

Official documentation: /miniprogram/dev/wxcloud/reference-sdk-api/functions/

6-3-0, Initialize the environment of cloud function

• 1, create a parallel folder cloud and pages
  
• 2, in which the cloud function is configured in the directory cloud
  Add the following configuration to it
  Then click save and we have a cloud in front of our cloud folder
  
  This means that we have succeeded in initializing the cloud function.
• A new cloud function
  
• The following problem occurs when only one cloud function is created.
  
  Solution: Simply create a new blank file in the cloud folder.

6-3-1, Cloud function to get openid

There are two ways to write a call to a cloud function

• 1, traditional success and failure
  
• 2, write then and catch with promise
  

6-3-2, Import and export of data

• Data export, do data backup
  
  For example, import as json data as follows
  
• Data import, in order to create some data in large quantities quickly.
  For the convenience of paid users, I have prepared 108 data in advance, paid users can go directly to download it!
  
  Download the json file of the 108 pieces of data and import it into the database as follows
  

6-3-3, Cloud function to get data

Note: The cloud function has to be redeployed whenever there is a change, otherwise the cloud function will not take effect.

A problem was encountered as follows

Reason for occurrence: If you have two cloud development environments, occasionally the problem shown above will occur.
Problem solving: there are two kinds

• 1, specify which cloud development environment you want to use in the cloud function
  
• 2, use the DYNAMIC_CURRENT_ENV constant (this is recommended)
  
  We'll compare this to a query in an applet that calls the database directly.
  

6-3-4, Cloud Function Modification Data

Native applets will have problems calling database modifications directly

• You can only modify the data you created, there is no way to modify the data created by others.
  

• How to solve it? You can solve this problem by modifying it with the cloud function.

• 1, first create the cloud function update0129
  

• 2, call the cloud function on the line to modify the
  

6-3-5, Cloud Functions Delete Data

• 1, to create a cloud function to remove the product remove0129
  
• 2, call this cloud function to delete the operation
  

6-3-6, Submitting Data to Cloud Functions

• 1, create a cloud function and deploy it
  
• 2, call the cloud function
  

6-4, Frequently Asked Questions about Using Cloud Functions

6-4-1, no initialization of environment variables inside the cloud function

The solution is as follows:
Using DYNAMIC_CURRENT_ENV

code segment

({
  env: cloud.DYNAMIC_CURRENT_ENV 
})

VII, Cloud Development ~ Cloud Storage

First take a look at the official description of cloud storage:
Official Documentation: /miniprogram/dev/wxcloud/guide/

To put it plainly, cloud storage is a cloud storage space that can be used to store videos, audios, pictures and files. If your small program needs to use video playback, audio playback, image display, file upload and download functions, you can use our cloud storage.

• When using cloud storage to store files, there are some rules for naming file names that it is recommended to look at.
  

7-1, Cloud Development Console Management Files

The console also makes it easy to manage files.

7-2, Uploading images to cloud storage

We need to select an image before we upload it, so here we use an image selection function

Corresponding official documentation: /miniprogram/dev/api/media/image/

Then just call the file upload api interface

official document：/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/

7-3, Adding Product Pictures to Product Lists

Now that we've learned about the image upload function, we can revamp our previous product listings by adding product images to our product listings.

7-4, Uploading Video to Cloud Storage

You also need to select the video before uploading it, the code for selecting the video is as follows

The corresponding official documentation is as follows: /miniprogram/dev/api/media/video/

After selecting the video, the same file upload api is called, as the video is also a file.

7-5, upload word, excel files to cloud storage

7-5-1, Select files before uploading

Remember to set the type to file when selecting a file.

Corresponding official documentation: /miniprogram/dev/api/media/image/

• Here's something to keep in mind.
  On the computer emulator it's selecting the files on your computer, on your phone when you run the applet to select files it's selecting the files in your chat logs.

7-5-2, Uploading Files

After selecting the file above, we still need to call uploadFile to upload the file.

7-6, download file

Using download files
/miniprogram/dev/wxcloud/reference-client-api/storage/

7-7, download and open word, excel, pdf

Using Open File
/miniprogram/dev/api/file/

Eight, the list of drop-down refresh

8-1, turn on page drop-down refreshing

We need to set the enablePullDownRefresh property to true in the corresponding json of the fetch page to enable pull down refresh.

Since our refresh animation defaults to white dots, we also have to set the page background color in the json to see the animation.

8-2, listen for refresh in Page's onPullDownRefresh.

Listen for a pull-down refresh in the onPullDownRefresh method in the page.

8-3, Requesting the latest data when the user scrolls down to refresh

8-4, stop refreshing after successful data request

When we refresh the dropdown, the refresh animation usually takes a long time to end, normally it should end when the data request is successful. So we use the () method to end the refresh animation.
Official documentation: /miniprogram/dev/api/ui/pull-down-refresh/

The code example is as follows

Nine, paged loading of lists

9-1, up to 20 entries at a time for small program databases

Limitations of applet database api and cloud function call data
When you call the cloud database directly from the applet side, you can get up to 20 items each time, and when you call the cloud database in the cloud function, you can get up to 100 items each time. So we have to do paging loading when we have a lot of data.

9-2, Core Methods for Pagination Loading

When we do paging loading, we mainly use the skip and limit methods, corresponding to the official documents are as follows

• skip: how many items are loaded per page
  /miniprogram/dev/wxcloud/reference-sdk-api/database/collection/
• limit: Load data from page/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/

In fact, this skip and limit I have done in the section of the database to explain the initial, this section we will use the specific paging to load the case to do comprehensive explanation

9-3, importing 108 pieces of data

9-3-1, Downloading Data Sources

These 108 data are prepared by Stone in advance for paid subscribers/annual subscribers, if you don't pay, you can just go to the database and create the 108 data yourself.

9-3-2, Importing to a Data Table

Here I am importing to the num data table and the import is successful as below:

9-3-3, don't forget to modify table permissions

Change the permissions of the data table (collection) to readable by all users and read/write only by the creator.

9-4, Pull-up to load more listeners

When our list slides to the last piece of data, the following method is executed

So our paging loading is going to be done in onReachBottom.

9-5, Database Paging Load Code Implementation

Direct calls to the database can only load a maximum of 20 pieces of data at a time

Just do a simple list data display in wxml.

wxss make a simple style

The corresponding effects are as follows

9-5-1, Friendly Hints When No More Data Is Available

9-5-2, Friendly Hints for Loading and Load Completion

• loading

   ({
      title: 'Loading...' ,
    })

• Hide Loading

()

9-6, Pagination loading by cloud function

Call the database through the cloud function and load up to 100 pieces of data at a time.

• Cloud functions are not recommended if there are less than 20 entries per page
• If the paging is greater than 20 entries per page, use the cloud function.
  

X. Search function

Today to tell you about the search function of the small program. I use the background database here is the cloud database of the small program cloud development. So we search with the help of cloud development to realize.

Note: The datasheet (collection) where we store the data has to change the permissions as shown below.

10-1, Requirements

For example, I have some data here as follows

I have prepared the data source for you, it's in the video directory of our corresponding chapter, you can add the data one by one by yourself, or of course, you can directly import Stone's data source, I'll teach you to review how to import the data to the cloud development database in the video.

We want to fulfill the following search requirements

• 1, search for data whose title (title) contains 'small stone'
• 2, search title (title) or description (desc) contains 'small stone' data
• 3, search title (title) description (desc) all contain 'small stone' of the data

We know that the database query has a where statement, but where statement is a query of a field all contain the contents of your input can be, so simply use the where statement to do a search, the results are too single. So we are here today to learn the implementation of fuzzy search function. We take the above three requirements as an example to explain one by one.

10-2, Principles of Realization

When we do a fuzzy search, we are actually querying whether a field contains our search term. And fuzzy search requires the use of RegExp, to see what RegExp.

Official Documentation: /miniprogram/dev/wxcloud/reference-sdk-api/database/

• Let's take a look at the official example again
  
  May look at the official example will be a little confused, then we will combine the next specific code to give you an explanation.

10-3, Code Implementation of Fuzzy Search

10-3-1, Fuzzy Search for Individual Fields

• Requirement: Search for data whose title contains 'small stone'.

The code is as follows

The query results are as follows:

You can see that we have successfully queried the data that contains 'small stones' in the title

10-3-2, Fuzzy Search for Multiple Fields (Satisfying One Is Enough)

• Requirements: search title (title) or description (desc) contains 'small stone' data

Since we're querying multiple fields, we're using the command advanced operator here, or

The code is as follows:

Query Results:

Let's analyze these two pieces of data

• 1, the title and description both contain 'Little Rock', which matches the
• 2, although 'Little Rock' isn't in the title, it is in the description, so it fits.
• 3, there's no 'Little Rock' in either title or desc, so it doesn't match.
  

10-3-3, Fuzzy search for multiple fields (to be satisfied simultaneously)

• Requirements: search title (title) description (desc) all contain 'small stone' data

Since we're querying multiple fields, we're using the and in the command advanced operator here

The code is as follows:

Query Results:

Let's analyze these two pieces of data

• 1, the title and description both contain 'Little Rock', which matches the
• 2, while there's no 'small stone' in the desc, there's none in the title, so that doesn't match either.
• 3, there's no 'Little Rock' in either title or desc, so that doesn't match either.
  

10-4, source code

For example, to facilitate the use of everyone, I posted the complete code here, later you use, directly copy the code here, slightly modified on it.

    // I'm going to keep it simple here and just write the search term to death, which should normally be typed by the user
    let searchKey = 'smallstone'
    let db = ()
    let _ =

    ('news')
      .where(_.or([
        {// title
          title: ({ // Use a regular query to implement a fuzzy query on the search
            regexp: searchKey, {// options: 'i', //Size Distinguished Query
            options: 'i', //case-insensitive
          }),
        },
        { // description
          desc: ({
            regexp: searchKey, {
            options: 'i', }), {/description
          }), {/description
        }
      ])).get()
      .then(res => {
        ('Query successful', res)
      })
      .catch(res => {
        ('Query failed', res)
      })

10-5, Get user-entered search terms to display a search list

In fact, to get the user input content, we have spoken many times before, is to use the input component, through the bindinput to get the user to enter the search term, and then click on the search to realize the search function.
The effect to be achieved is illustrated below:

Then we can search for the corresponding keywords and display the corresponding search results on the list.

I'll take you step-by-step through it in the video.

Eleven, cloud development to realize the login registration function

Please follow Stone's video to write the specific code.

11-1, Registration Page

The registration page mainly uses the input component to get user input, the button component to realize the registration function, the registration is mainly to add the account name and password to the cloud development database.

11-2, Landing Page

Login is mainly to get the user to enter the account number and password, and then read the corresponding data from the database, do the account number and password comparison, if the account number and password are the same, you can directly log in successfully!

11-3, Login Successfully Jump to Home Page

After successful login, it will be adjusted to the home page

11-4, Save Login Status

When we usually do login, we need to save the login status for the user after the user has successfully logged in, otherwise the user will have to log in again next time when they enter the application. So we need to save the user's login status.

Twelve, cloud development to achieve the point of the collection of comment function

Please follow Stone's video to write the specific code.

12-1, Common Icons Getting Sites

An Alibaba vector gallery was used here:

12-2, Initializing the Cloud Development Environment in Cloud Functions

({
env: cloud.DYNAMIC_CURRENT_ENV
})

XIII. Simple implementation of the comment function

Please follow the stone brother's video to write the specific code, this section is not in the preparation of notes

Fourteen, CMS web version of the management background

14-1, Preparation for opening cms

As shown in the figure below, you can directly click to open the content management (CMS)

Open cms need you to use pay-per-use in cloud development, if you are the first time to open the cloud development, remember to make the following choices.

If you've started cloud development, remember to change the payment model to pay per volume. If you started cloud development is not a pay-per-volume model.

After clicking open, there will be a pop-up window as below, just click OK. Don't be scared by the payment, the official will send us a certain amount of free credit every month. It's basically enough for learning.

After the above point OK, we just open the pay per volume function, because the use of cms must be opened to pay per volume can be obtained. So we need to click again to open. The following chart

After clicking Open, there will be a pop-up window as below, just click Next.

Then we need to set the account and password to log into the content management background, and then click OK!

Then we wait a few minutes for the content management feature to become available.

After the successful opening, we can enter the management background through the following address.

We will refer to content management as cms

14-2, Notes

• A cloud development environment corresponds to a content management (cms)
• cms open there will be a failure to open the situation, if the opening failed, with a new cloud development environment to open, if the new cloud development environment or not, then you can only go back to register a new small program. A small program can open two cloud development environment.

14-3, Logging in to the Cms Visualization Administration Back Office

After the above is opened, you can log in the management background through the background address. As follows

14-4, Creating a backend project in cms

The first time we log in, we also need to create a project

Just enter the project name and project id yourself

Then click into the project you just created

Here we have created our cmd visualization backend.

14-5, Content Modeling

I'll show you how to create a content model in the video, which actually corresponds to the data tables (collections) in our database.

14-6, Data types

Some of the types we can choose from when adding data types to the content model are as follows

I'll explain some of the common data types in detail in the video

14-7, Data Table (Collection) Management

We can visualize and manage the content model (collection) created above, which is the advantage of cms that allows us to visualize and manage the database.

14-8, consolidated cases

I will combine the cms and cloud development database to teach you to implement a simple news applet with the following function points

• 1, News List
• 2, News Details
• 3, Graphic Mixing
• 4, rich text editor
• 5, rich-text learning

Rich-text official documentation:
/miniprogram/dev/component/

I will teach you step by step in the video to realize this comprehensive case, this comprehensive case can follow the stone brother complete do down, if your small program cloud development of knowledge points will learn almost.

A Practical Case for Cloud Development - The

Hands-on I, cloud development to achieve subscription message push

The previous template message push via formid will go down on January 10, 2020, so we'll have to use subscription messaging.

Let's take a look at the official synopsis of subscription messaging.

Next, we will take the help of cloud development to quickly implement the function of applet message push.

1, get the template ID

This step is the same as our previous template message push, which also adds the template first and then gets the template id

The first step is to open the subscription message function, it is very simple, as follows

Due to the long-term subscription message, currently only to the government and livelihood, medical, transportation, finance, education and other offline public services open, later will gradually support to other offline public service business. Only on the point of offline public services, long-term subscription messages and most developers have no chance.
So we can only use the example of using a one-time subscription message here.

As shown above, we select a one-time subscription template from the public template library. Then edit the template as shown below

Below is the template we added, and the template id below is what we need.

2. Requesting user authorization

When we do subscription message authorization, we can only bring up the authorization popup when the user clicks or the payment is complete, that's the official requirement:

We are using this method here to get the authorization of the user.

• 1, writing code
  
• 2, write code to achieve the click to obtain authorization
  
  The string of characters in the tmplIds in this step is the template id we added ourselves
• 3, click the button to run the effect is as follows
  Clicking on the authorization popup on the developer tools emulator looks like this:
  
  The authorization pop-up on the phone looks like this:
  
  As you can see, the template we added for 'Class Reminder' is shown here.
  For those of you who are careful, you can see that the real machine has an additional 'Always keep the above selection and don't ask again'
  In fact, you yourself carefully more taste. Can also tomorrow, our normal subscription message authorization, the user allows, you can only push a message once. That is, the user allows once, we can push a message to the user, and this permission does not expire. So we can get the user to click allow as many times as possible so that we can send as many messages to the user as possible.

Here after the user's permission, we can push the message to the user, next we will take the help of cloud function of cloud development to realize the message push function.

3,Get user's opneid

First, let's see what the official dad has to say.

As you can see there are two official ways provided, we are using cloud calls here. To put it bluntly, we call the push function in the cloud function.

• Push required parameters
  
  You can see that I use the openapi function here, and need to use the user's opneid, about the openid get, I have written an article before, also recorded a video. About getting the openid, I have written articles and recorded videos before. For the articles, you can go to my historical articles, and for the videos, you can click this one:"Get user openid with the help of cloud function".
  I will not explain in detail the acquisition of openid here, and post the code of the corresponding cloud function for you.
  
  There are a few things to keep in mind when using cloud development
• 1, you need to create a cloud function catalog in the following figure
  
• 2, you need to initialize the cloud development environment in the
  
  As for where to get the environment id for cloud development, I've talked about it many times in my videos, just go straight to my videos or go through my history articles.
  Video on Getting Started with Cloud Development from the Ground Up

4,Use cloud function to realize the message push

We just need to create a cloud function as follows, and then fill in the user's openid, the link to the applet page to jump to, the template content, and the template id. Usually these data should be passed in, for simplicity, I'll write the template content here as fixed.

take note of: When I write the above code, the key of the push content must be consistent with the key in the applet template, otherwise the following error is reported.

• Then look at the place where this cloud function is called
  
  If the user is not authorized, our push will report the following error
  
  If the user has authorized it, we can successfully push it, and the print log after the push is as follows
  
  Remember our authorization on the real machine, if the user just clicked Allow and didn't select Allow All the Time, then I we push successfully once, if we push again, we need the user to re-authorize. Otherwise, it will still report this error
  
  So we user clicks allow once and we can push the message once, for example, I click allow 4 times then I can successfully push it 4 times
  

rendering (visual representation of how things will turn out)

As you can see, we have successfully received the template message for the class reminder, and clicking on it is our specific push message.

I'm actually getting 4 messages in a row here, because I clicked on Allow Push 4 times, so I was able to successfully push 4 times.

Here we have a complete implementation of the template message push function, the following I put the main code posted to you, you can also private message me to get the full source code.

<button bindtap="shouquan" type='primary'> Get authorization to subscribe to messages</button>
<button bindtap="getOpenid"> Get the user's openid and push the message</button>

// Programming Little Rock wechat: 2501902696
Page({
  // Click event to get authorization
  shouquan() {
    ({
      tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], // fill in our generated template id here
      success(res) {
        ('Authorization successful', res)
      },
      fail(res) {
        ('Authorization failed', res)
      }
    })
  },
  // Get the user's openid
  getOpenid() {
    ({
      name: "getopenid"
    }).then(res => {
      let openid =
      ("Getting openid succeeded", openid)
      (openid)
    }).catch(res => {
      ("Failed to get openid", res)
    })
  },
  // Send the template message to the specified user, get the user's openid before pushing it
  send(openid) {
    ({
      name: "sendMsg",
      data: {
        openid: openid
      }
    }).then(res => {
      ("Push message successful", res)
    }).catch(res => {
      ("Push message failed", res)
    })
  }
})

• Push the corresponding cloud function

// Programming Little Rock wechat: 2501902696
const cloud = require('wx-server-sdk')
()
 = async(event, context) => {
  try {
    const result = await ({
      touser: , //which user to push to
      page: 'pages/index/index', //to jump to that applet page
      data: { // what to push
        thing1: {
          value: 'Introductory applet course'
        },
        thing6: {
          value: 'Hangzhou Zhejiang University'
        }, thing6: { value: 'Hangzhou Zhejiang University'
        thing7: {
          value: 'Chapter 1, Section 1'
        }
      },
      templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //templateid
    })
    (result)
    return result
  } catch (err) {
    (err)
    return err
  }
}

I'll be sharing more small program related knowledge out later, so stay tuned.

take note of: Authorization is granted once and only one message can be sent.

5,Send subscription messages to multiple users

// Send subscription messages to multiple users
  sendAll() {
    if (name == null || name == '') {
      ({
        icon: "none",
        title: 'Please enter a course name',
      })
      return
    }
    let users = [
      "oc4sa0Vp_s65LEItm4JSWT5WFQds", "oc4sa0dZ-pSCu95djiLCt7jo97bY
      "oc4sa0dZ-pSCu95djiLCt7jo97bY"
    ]

    (item => {
      ("for loop", item)
      (item, name)
    })
  },
  // Wrapped way method
  sendFun(openid, name) {
    ({
      name: "fasong",
      data: {
        openid: openid,
        name: name
      }
    }).then(res => {
      ("Sent single entry successfully", res)
    }).catch(res => {
      ("Failed to send single entry", res)
    })
  }

Practical two, SMS verification code

Let's take a look at the rendering.

regular SMS

CAPTCHA text message

Today, I was told by the official Cloud Developer that Cloud Developer supports the SMS function, and then I couldn't wait to have a taste of it.

Official Documentation:
/miniprogram/dev/api-backend/open-api/cloudbase/

Going into the official documentation, the benefits of cloud development for our developers are not small.
Not only can you easily use the SMS function, but also gives us 1000 free SMS. It's not worth it. This 1000 SMS is enough for us to learn the small program SMS function, and small program SMS verification code function.
Without further ado, let's get right to the code.

1, the use of cloud development SMS conditions

This pre-requisite is important, and you won't be able to use the cloud-developed SMS feature if the condition isn't met.

Conditions of use

• 1, must be an enterprise small program, the current personal small program can not be used to send text messages
• 2, must open the static website function (later should be gradually liberalized)
• 3, must open the cloud development (this has nothing to say, do not open the cloud development you still use what the cloud development function ah)

After the above conditions are met, we can come to the happy jerk code.

Annual Card Benefits

• 1, you can get all of Stone's current video lessons
• 2, new classes coming out in the next year can also be accessed
• 3, one-on-one question and answer, remote assistance
• 4, you can borrow the stone brother's enterprise small program

If you are interested, you can add the stone brother micro ♥ 2501902696 Note that the annual card

2, open static website function

If you don't open a static website and call SMS sending directly, the following error will be reported.

This error is actually given in the official documentation.

Then we will open the static website function. Before you can turn on the static website feature, you must turn on cloud development and configure the environment for cloud development. I've talked about this many times in Getting Started with Cloud Development. If you don't know it yet, you can check out my previous article or video: /course/detail/26572

Here to open cloud development we take the help of applet developer tools for quick opening.

2-1, Registration of small programs

Here I will not say more, only the appid that has registered the applet can open the cloud development

Once we have registered the applet, we can get the appid, as shown above

2-2, create an applet project

Small program project creation, I will not say more here, I have spoken many times in my previous small program foundation class.Basic Learning in Small Programs

One thing that is emphasized here is that when creating an applet project we must use our own appid not the test number.

If you created it with a test appid in the beginning, you can also replace it with the appid of your own applet in the way shown above.

2-3, Open Cloud Development

I'm not going to explain too much about the opening of cloud development here, I've talked about it many times in my cloud development course. You can go through it.

Simply click on the Cloud Development button in Developer Tools and follow the step-by-step instructions to quickly enable cloud development.

2-4, open static website function

Once we have the cloud development opened above, we can quickly open a static website here.

After clicking on it, just click on Open

There's a condition to open it at this time

We have to change the way we pay for our small program as required, just change our payment method to pay by volume.

Don't worry here, here's pay-as-you-go with free credits every month. These credits are basically enough for us to develop learning


At this time our static website function is opened successfully.

After successful opening, the following picture is shown.

3, write the cloud function for sending SMS

In fact, after the above static website function is opened, we don't need to upload website resources, we can directly come to use the SMS function.
Here we are going to use the Cloud Functions feature of Cloud Development to do the SMS sending function.
Let's take a look at the rendering.

Code writing is also simple

The code to send an SMS is actually quite simple, just the lines above. Here's how to write this cloud function.

3-1, Initializing the Cloud Development Environment id

Create a new directory cloud at the same level as pages to hold the cloud function

Then add the cloudfunctionRoot option to it.

Then select the current environment for cloud

Configure environment variables in

This env environment id requires you to go to the cloud development console to get the

3-2, Creating Cloud Functions

Right click on the cloud directory and create a new cloud function

Then create a new cloud function with a name you can customize to whatever you want. I'll use sendSms here.

3-3, Writing Cloud Functions

I am posting the code here, remember to change the env and the cell phone number to receive the SMS to your own.

const cloud = require('wx-server-sdk')
({
  env: cloud.DYNAMIC_CURRENT_ENV
})
 = async (event, context) => {
  try {
    const result = await ({
      env: 'xiaoshitou-zfl2q',
      content: 'Programming Little Rock has released a new capability',
      phoneNumberList: [
        "+8615611823564"
      ]
    })
    return result
  } catch (err) {
    return err
  }
}

3-4, Deploying Cloud Functions

Once the above cloud function is written, you must remember to deploy the cloud function. Just right click on sendSms and then click on the arrow below.

After a successful upload and deployment, it will look like this

4, call the cloud function to send SMS

Once our above cloud function is written and deployed successfully, we can come to call this cloud function and send SMS.

4-1, Writing wxml files

Write a button button in a wxml file and write a bindtap click event.

4-2, writing js files

Implement the click event of the above button in a js file and then call the cloud function

When calling a cloud function, always remember that the name here must be exactly the same as your cloud function name.

4-3, click on Send SMS

Click to send SMS

After clicking Send SMS, you can see :ok printed in the log.
This means the send was successful.
Then look at your phone again and get the following text message.

By this point our SMS sending functionality is complete.
In fact, the function that should be realized here, has been realized. But we use SMS scenarios are more with SMS to send a verification code. So the next to do an example of sending SMS verification code out to you

5, send verification code SMS

The usual rules. Let's see the rendering first.

We just need to get the cell phone number entered by the user, then click on Get Verification Code, and finally enter the verification code received in the SMS to verify it.

5-1, Writing wxml

The page is relatively simple, just two input boxes and two buttons

5-2, writing js

js is mainly to get the user to enter the cell phone number, and then send a verification code, send a verification code to call the cloud function to achieve the SMS verification code sending function. After the user enters the code, it can be verified.

5-3, send SMS verification code

After the user enters the cell phone number and clicks send, we can see the following text message received on our cell phone.

The user then enters the captcha code obtained and clicks Verify.

You can see that the authentication is successful, after the successful authentication, you can set your own operation, such as after the successful authentication to jump to the login success page.

Here we have implemented the CAPTCHA sending function.

5-4, Method of generating randomized CAPTCHAs

I'm posting the method for generating a random captcha here.

Mixing letters and numbers

  //Get Random CAPTCHA，nOn behalf of several
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    let res = '';
    for (var i = 0; i < n; i++) {
      var id = (() * 35);
      res += chars[id];
    }
    return res;
  }

digital hybrid

  // Get a randomized CAPTCHA, n is the number of digits.
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = (() * 9); var res += chars[id]; let
      res += chars[id];
    }
    return res; }
  }

Practice 3, mass texting

We have implemented the function of sending CAPTCHA to a single cell phone above, and then we will teach you how to send group SMS.

The usual rules. Let's see the rendering first.

Official Documentation:
/miniprogram/dev/api-backend/open-api/cloudbase/

Conditions for using cloud development for SMS

This pre-requisite is important, and you won't be able to use the cloud-developed SMS feature if the condition isn't met.

• 1, must be an enterprise small program, the current personal small program can not be used to send text messages
• 2, must open the static website function (later should be gradually liberalized)
• 3, must open the cloud development (this has nothing to say, do not open the cloud development you still use what the cloud development function ah)

After the above conditions are met, we can come to the happy jerk code.

Annual Card Benefits

• 1, you can get all of Stone's current video lessons
• 2, new classes coming out in the next year can also be accessed
• 3, one-on-one question and answer, remote assistance
• 4, you can borrow the stone brother's enterprise small program

If you are interested, you can add the stone brother micro ♥ 2501902696 Note that the annual card

1, write wxml page

For the sake of simplicity, I'm going to define an input box for the cell phone number and a button.

The corresponding code is as follows

2, get the cell phone number entered by the user

I am splitting the cell phone number with * here as shown below.

Then we define a bindinput event to get the user input.

As you can see, we have successfully obtained the cell phone number entered by the user.

But the official documentation has stated that we need to use a set of cell phone numbers when we send a group text message, which means we need to use an array to store the data. But here we have a string. So we need to split the string into an array.

3, split the string into an array

We split a string using the split() method of a string

Of course the timing of the trigger should be when the user clicks on the group send button. So let's define the bindtap click event send for the group button.

You can see that we successfully split the string into an array.

But there's a carriage return key in front of the cell phone number in our array, so to be safe, we need to get rid of that carriage return key before splitting the string.

4, Remove the enter key from the string

The syntax for removing the carriage return key from a string is as follows

String.replace(/[\r\n]/g, "")

You can see that we only need to call the string.replace method, followed by the parentheses followed by the return key corresponding to the regular expression. You don't need to memorize it, just copy it from my notes when you use it later.

You can see that after we remove the enter key, there is no enter key in the split string.

5, Iterate through the array to the cell phone number in front of the +86

If you have read the official document carefully, you can see that the cell phone number we send to the group must start with +86 in front. And the cell phone numbers we send can't be more than 1000 at a time.

So we're going to iterate through the array and add '+86' to the front of each cell phone number.
Of course, there are many ways to achieve this, I use a for loop and a map method to realize the following.

You can see that the map method is a bit more concise. But for newbies the second method may not be well understood. So here you can use that kind of method, not mandatory.

5-1, via a for loop

5-2, via the map method

6, the content of the preparation of group text messages

So the next thing we need to do is to implement the mass mailing feature. For us to successfully implement mass mailing here, we need two elements

• Content of the text message to be sent
• Cell phone number to be sent as a group

There are requirements regarding cell phone numbers and mass mailing content

Our group sending cell phone number here has met the requirements, the next is the content of the group sending. The maximum length of the group sending content can not exceed 60 bytes, a Chinese character is usually 2~3 bytes. That is to say, the content of our SMS can not be more than 20 words, so the group SMS must be fine. Use the least words to attract users.

Here is actually an input to get the user input on the line. I'm not going to talk about it any more, I'll just post the code directly.

Get user input SMS content in js

It's all there now, just one more cloud function to go.

7, write a cloud function for group SMS

The content of the SMS and the cell phone number for the mass mailing have been successfully obtained, we are going to write the cloud function for the mass mailing next.

Cloud function in fact we SMS verification code that section is basically the same, the difference is that the

• SMS verification incoming: verification code + single cell phone number
• Mass incoming is: SMS content + multiple cell phone numbers

The cloud function is edited and remember to redeploy it.

8, call the cloud function to achieve group sending

The above cloud function is edited and deployed, the next step is to call the cloud function to realize the SMS.

The call is actually quite simple.

9, Group demo failed

Next we have to verify the fruits of our labor. As follows, I send this to two cell phone numbers. Why two? I'm learning here to save on SMS bars. Officially, they only send us 1000. So save them.

In fact, there is no difference between group sending two cell phone numbers, and group sending 1000, as long as the group sends two results, then the group sends 1000 is the same.

I worked hard on it, tested it, and got an error.

What the hell, there's clearly no error in the code, programmers are just inexplicably confident sometimes.
The official return field for sending results is as follows

Brother Stone sends the return result as follows

I can't figure it out. Couldn't really be a mistake in the code 。。。。
Luckily, Stone was smarter and translated the error message.

Sending time limit, and I didn't see the official docs say anything about a time limit. Then I went back to the official docs and rummaged around and finally saw this in a corner.

Turns out Stone was too late to write the article 。。。。

I was going to finish the article and record the explanation video for you ，，，， I guess I have to wait for the next day 8-22:00 to continue this article 。。。。

10, group sending demo success

Finally, it's 8:47 the next day, so here's how we'll demonstrate yesterday's mass texting again to see if it works this time.
Let's start with our log

As you can see the log shows two successful sends. So a screenshot of what the received SMS looks like is also given.
The first cell phone number is an Android phone

The second cell phone number is an Apple phone

By this point our group texting feature is complete.