May 22, 2021 Mini Program Cloud Development Study Guide
2. Essential tools and cloud development documentation
3. Experience cloud development template snr
4. Launch cloud development services
6. Deploy and upload cloud functions
7. npm package manager with dependent modules
8. Get openid with cloud function login
9. Create a new cloud function
10.. Experience uploading images
11.. Experience the front-end operation database
If you want to develop a complete project for free and quickly, cloud development with small programs may be the best option. Cloud development of small programs uses primarily front-end development knowledge.
Small program registration is very convenient, open the small program registration page, in accordance with the requirements to fill in personal information, verify the mailbox and mobile phone number, scan QR code binding your microsignal can be, 3 minutes or so time can be done.
Registration of small programs can not use the registration of WeChat public number, WeChat open platform mailbox Oh, that is, you need to use a different mailbox.
When we register successfully, you can automatically log into the background management page of the small program, if you accidentally turn off the background page, you can also click on the small program background management login page to log in.
The login pages for the small program and WeChat Public Number are the same page, and they will jump according to your different registration email address.
After entering the background management page of the small program, click on the development of the left menu to enter the settings page, and then click on the development settings, you can see the AppID (small program ID) in the developer ID, which we will be useful.
Note that the ID (AppID) of the applet is not your registered mailbox and userna name, you need to go to the background to view it
You can download the appropriate version according to your computer operating system, pay attention to choose a stable version of stable Build developer tools.
Developer tools: Small program developer tool download address
As with any programming study, official technical documentation is the most worth reading reference. Technical documentation we only need to spend about five minutes to understand the general structure, first follow our teaching steps after learning to see it is not too late.
Technical documentation: Cloud development documentation
Because the cloud development of small programs is constantly adding new features, updates are very frequent, so make sure that your developer tools are up-to-date Oh (otherwise will report a lot of strange and strange errors), such as you have previously downloaded to sync to the latest line
After installing the developer tool, we log in to the developer tool using WeChat Broom, and then use the developer tool to create a new project for a small program:
Click on the new confirmation to see the cloud development QuickStart gadget in the developer tool simulator and the source code of the small program in the editor.
Next, we click on the preview icon in the toolbar of the developer tool and we'll pop up a QR code, which we can see on our phone using WeChat to scan the QR code.
If you don't use WeChat login developer tools, and your WeChat is not the developer of the small program can not preview Oh.
Operate the small program on your phone (or simulator) and click every key in the app to see how it reacts. We'll find a lot of places that show "call failure" and so on, which is normal, and we'll go through a series of actions to keep the little program from reporting errors.
Click on the "Cloud Development" icon of the WeChat Developer Tool, click "Open" in the pop-up box, and after agreeing to the agreement, a dialog box will pop up to create the environment. You'll be asked to enter the environment name and environment ID, as well as the underlying environment quota for the current cloud development (the base quota is free and enough for you to use).
It is recommended that your environment name can be automatically generated using xly, environment ID, when your cloud development environment problems, you can provide your environment ID, the cloud development team will have someone to answer for you.
After filling in the requirements of the dialog box prompt, click create, will initialize the environment, the environment after the success of the initialization will automatically pop up the cloud development console, so that our cloud development services are turned on. You can spend about two minutes familiar with the interface of the cloud development console.
Click the settings icon in the cloud development console window to find the environment name and environment ID on the tab of the environment variable.
When the cloud development service is turned on, we can see your environment name in the name of the cloudfunctions folder in the source code of the small program. If the name of the cloudfunctions folder does not display the environment name, but the "unseeded environment," you can right-click the folder, select More Settings, and then click the Settings small icon to select the environment and determine.
Open the app in the source code folder miniprogram in the developer tool .js find the following code:
wx.cloud.init({ // 此处请填入环境 ID, 环境 ID 可打开云控制台查看 env: 'my-env-id', traceUser: true, })
Change to your environment ID at env: 'my-env-id', e.g. env: 'xly-snoop'
NodeJS is a running environment that runs JavaScript on the service side, and the server environment used for cloud development is NodeJS. npm is the Node Package Manager, through which we can easily install the dependent packages required for cloud development.
npm is an essential package (module) manager for front-end development, and its main function is to manage packages, including installation, uninstall, update, view, search, publish, etc., and other programming languages have similar package managers, such as Python's Pip, PHP's comcoser, Java's maven. We can think of package managers as windows software management centers or mobile application centers, but they use a visual interface, package managers use command line Command Line.
Download address: Nodejs download address
You can download the corresponding NodeJS installation package according to the computer's operating system and install it (do not modify the installation directory when installing, don't care about direct next installation). Open the computer terminal (Windows PC is the cmd command prompt, Mac computer is terminal Terminal), then enter line by line and follow Enter to execute the following code:
node --versionnpm --version
If you display v10.15.0 and 6.11.3 (perhaps your version number will be different), your Nodejs environment has been successfully installed.
Learn to program carefully, one letter, one word, one punctuation do not make mistakes Oh. Notice that when you lose the command above, there is a space behind the node and npm, and there are two short bars.
There is a small cloud in the cloudfuntions folder icon, indicating that this is the root of the cloud function. E xpand the cloudfunctions and we can see that there are login, openapi, callback, echo folders, these are the cloud function directories. The miniprogram folder, on the other hand, is a page file for a small program.
Cloudfunctions are cloud functions, miniprograms are small program pages, which is not static, that is, you can also modify the names of these folders, depending on the project profile project.config.json in the following configuration items:
"miniprogramRoot": "miniprogram/", "cloudfunctionRoot": "cloudfunctions/",
但是你最好是让放小程序页面的文件夹以及放云函数的文件夹处于平级关系且都在项目的根目录下，便于管理。
Using one of the cloud function directories with the right mouse button, such as login, select open in the right-click menu, enter the following code in the terminal after opening, and press Enter to enter:
npm install
如果显示“npm不是内部或外部命令”，你需要关闭微信开发者工具启动的终端，而是重新打开一个终端窗口，并在里面输入 cd /D 你的云函数目录进入云函数目录，比如 cd /D C:\download\tcb-project\cloudfunctions\login进入login的云函数目录，然后再来执行npm install命令。
At this time will download the cloud function dependent module, after downloading, and then right-click login cloud function directory, click "Create and deploy: all files", then the local cloud function will be uploaded to the cloud, upload successfully in the login cloud function directory icon will become a small cloud.
Clicking on the "Cloud Development" icon on the toolbar of the developer tool opens the cloud development console, and clicking on the cloud function icon in the cloud development console will allow us to see the "login" cloud function we uploaded in the list of cloud functions.
Let's then follow this process and upload all other cloud functions, such as openapi, to perform the same steps as above, summarized below:
Right-click cloud function directory, select open in the terminal, enter npm install command to download dependent files, and then right-click on the cloud function directory, click "Create and deploy: all files" in the cloud development console - cloud function - cloud function list to see if the cloud function was deployed successfully.
login、openapi、echo、callback这些云函数在后面都会用到的哦，一定要确定自己部署上传成功，不然后面会报错的哦。
Why do you want to perform npm install in the cloud function directory instead of elsewhere? T his is because npm install downloads the dependencies in the configuration file package.json in the cloud function directory, which represents the modules that the current cloud function needs to rely on. Where is package.json, where to perform npm install, no package.json, no dependencies, you can't download ah.
The dependent modules downloaded by the npm install command are placed in the node_modules folder, where you can open the npm install command and check which modules are downloaded in the node_modules folder on your computer.
Since npm install is a download module, where does it come from? In the case of wx-server-sdk, we can see the case of wx-server-sdk at the following link:
https://www.npmjs.com/package/wx-server-sdk
Why does package.json rely on a module wx-server-sdk, but node_modules download so many modules in the folder? This is because wx-server-sdk also relies on three packages of tcb-admin-node, protobuf, jstslib, and these three packages rely on other packages, children and grandchildren, so there are many modules.
node_modules folder is so large (dozens of M to hundreds of M are possible), will it affect the size of the small program? T he size of the applet is only related to the miniprogram folder, and when you deploy and upload all the cloud functions to the server, it doesn't matter if you delete the entire cloudfuntions folder. The same dependencies (e.g., all rely on wx-server-sdk) once deployed to the cloud function, you can choose not to upload node_modules when, because it has already been uploaded.
Once we've uploaded the cloud function login deployment, we can click to get the openid in the simulator and on the phone (you need to re-click on the preview icon and scan the QR code).
Openid is the unique identity of a small program user, that is, each small program user has a unique openid. C lick "Click to get openid" and if you display "User id succeeds" and a string of letters and numbers on the User Management Guide page, you will be successful in deploying and uploading the login cloud function. If getting openid fails, you'll need to resolve the deployment upload of the login cloud function to do the following steps.
Call the interpretation of the cloud function
The home page of the applet is "pages/index/index", which we can see from the app.json configuration item or the page path in the lower left corner of the emulator. There is this code in index.wxml:
<button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>
That is, when you click the "click to get openid" button, the bindtap-bound event handler onGetOpenid is triggered, and the onGetOpenid event handler (found in index.js finds the event handler onGetOpenid contrast understanding) calls the wx.cloud.callFunction () interface (open technical documentation comparison understanding) in index.js.js
Technical documentation: Call the cloud function wx.cloud.callFunction
The method of calling a cloud function is simple, you only need to fill in the name name of the cloud function name (here login) and the parameters that need to be passed (there are no upload parameters here), you can make the call. Add the following code to print the res object in the success callback function:
console.log('调用login云函数返回的res',res)
添加完成之后记得保存代码哦，文件修改没有保存会在标签页有一个小的绿点。可以使用快捷键（同时按）Ctrl和S来保存（Mac电脑为Command和S）。
Once compiled, click on the "Click to get openid" button and you'll see the full res object, which has three parameters:
After the event handler onGetOpenid called the cloud function successfully, three things were done:
The userConsole page simply takes the openid out of globalData and renders it to the page via setData.
Small task: Do you understand why wx.cloud.callFunction() is the API of the small terminal? T hink about why cloud development has the difference between a small terminal API and a service-side API? It doesn't matter how much you can understand, it doesn't matter, there's more to help you understand.
Why does the result object returned by calling the cloud function login contain the results of the object, appid, userInfo? I t depends on how the cloud function is written. Use the developer tool to open the index of the login cloud function (in the cloudfuntions folder) .js.
exports.main = (event, context) => {}
This is the writing of an arrow function where the object and context are parameters. We changed the two print logs to the following code, which is equivalent to a note on where exactly the print went:
console.log('服务端打印的event',event)console.log('服务端打印的context',context)
After saving, right-click on the index.js file, select the cloud function incremental upload: (update file), update the login cloud function, let's click on the "click to get openid" button, where is the printed result? I nside the cloud function log of the cloud development console (note that it is not the console of the developer tool). Open the cloud development console - cloud function - log, filter by function name, select login cloud function, you can see the logging of the cloud function called, we can find in the log:
In the return results we can see the data returned by the return
Small tasks: Compare the results of cloud function log printing in the cloud development console with the results printed by the developer tool console to gain insight into the object, context object, result object, and return result, which is a more important knowledge point of cloud function.
It is important to take advantage of the fact that the printed logs of the cloud functions are displayed in the logs of the cloud development console. As long as it's a print log, it doesn't matter whether it's displayed in the developer tool console or in the cloud development console.
The getWXContext() API is a tool class API on the server side of cloud development that returns the openid of the small program user, the appid of the small program, the unionid of the user of the small program, and so on. To say so much, it's better to print directly, and add a line of print information below:
const wxContext = cloud.getWXContext()console.log('getWXContext返回的结果',wxContext)
After saving, right-click on the index.js file, select the cloud function incremental upload: (update file), update the login cloud function, let's click on the "click to get openid" button, and then go to the cloud function log of the cloud development console to see what results are returned at the bottom.
Technical documentation: getWXContext().
Understand the returned results against the technical documentation.
Note that a small program user unionid is only available if there is a public number or mobile app with the same subject under the developer account and the user is authorized to sign in to the public number or mobile app.
The return statement terminates the execution of the function and returns a specified value to the function caller. F our values are returned here, and before that we called the login cloud function, which is the caller of the function, so the res object of the event handler onGetOpenid's callback function is exactly what this return returns. That being the case, let's add a little more to the return, such as some of our previous data structure cases, and change the return function to the following code:
let lesson = "云开发技术训练营"; let enname = "CloudBase Camp"; let x = 3, y = 4, z = 5.001, a = -3, b = -4, c = -5; let now = new Date(); return { movie: { name: "霸王别姬", img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp", desc: "风华绝代。" }, movielist:["肖申克的救赎", "霸王别姬", "这个杀手不太冷", "阿甘正传", "美丽人生"], charat: lesson.charAt(4), concat: enname.concat(lesson), uppercase: enname.toUpperCase(), abs: Math.abs(b), pow: Math.pow(x, y), sign: Math.sign(a), now: now.toString(), fullyear: now.getFullYear(), date: now.getDate(), day: now.getDay(), hours: now.getHours(), minutes: now.getMinutes(), seconds: now.getSeconds(), time: now.getTime(), event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, }
After saving, right-click on the index.js file, select the cloud function incremental upload: (update file), update the login cloud function, let's click on the "click to get openid" button, and then go to the cloud function log of the cloud development console to see what results are returned at the bottom.
Here we have repeatedly mentioned updating the index.js file after the choice of cloud function incremental upload: (update file), update login cloud function, I hope you will pay attention to the usual time, this is also a small program cloud development service side and small program side a very big difference.
Right mouse button cloud function root directory, in the pop-up window to select a new Node.js yun function, such as input sum, press Enter confirmed, WeChat developer tools will be on-premises (your computer) to create a sum cloud function directory, but also in the online environment to create a corresponding cloud function (i.e. automatically deployed, can be seen in the cloud development console cloud function list)
Open the index .js under the sum cloud function directory, add sum:event.a-event.b, go to the return function (delete the extra content), and remember to select the cloud function incremental upload: (update the file), update the sum cloud function.
return { sum:event.a+event.b, }
This a and b are variables, but what is different from the previous one is that we don't declare a and b on the service side because we can declare variables on the small terminal.
Clicking on the Developer Tool Simulator's "Quick New Cloud Function" will jump to the addFunction page and open addFunction.wxml, and we see that the test cloud function is bound to the TestFunction event handler.
<view class="list-item" bindtap="testFunction"> <text>测试云函数</text></view>
Let's look at .js function in the addFunction .js to see how the variables on the small terminals a and b are associated with the variables on the service side, and how the results are rendered to the page. TestFunction calls the cloud function sum also through wx.cloud.callFunction, the difference is that there are a and b in data:
data: { a: 1, b: 2},
Data is filled in with the parameters passed to the cloud function, that is, the parameters of the small terminal are passed to the cloud function, and then the cloud function is processed and then returned to the res object, we can print the res object in the success callback function:
console.log("sum云函数返回的对象",res)
After compiling, we click on the test cloud function and you'll see the printed results in the console, res.result.sum is 3. A ssigning res.result.sum directly to result via setData renders the number, so what is this res.result? What is JSON.stringify()?
result: JSON.stringify(res.result)
We can print res.result, and JSON.stringify (res.result)
console.log("res.result是啥", res.result)console.log("JSON.stringify(res.result)是啥", JSON.stringify(res.result))
Res.result is an object, while JSON.stringify (res.result) is a json format, and JSON.stringify() converts a JavaScript value (object or array) into a JSON string because the object will be displayed if rendered directly to the page.
Small tasks: Pass the parameters of the small program to the cloud, is there a little wx.request feeling? I t's the equivalent of writing a data API through a cloud function and calling it on the small terminal. Create a new cloud function, deploy all kinds of mathematical operations to the cloud, and then call these algorithms by passing parameters, and render the results to the page.
Use the emulator and mobile phone to click on the upload image button of the quickStart app for cloud development, select a picture and open it, if the file storage guide page shows the path to the upload success and file, as well as a thumbnail of the picture, indicating that your picture will be uploaded to the cloud development server.
Click on the storage icon of the cloud development console and you can go to the storage management page to see the image you uploaded before, and click on the image name to see some information about the image, such as file size, format, uploader's OpenID, and storage location, download address, and File ID. Copy the download address link and you'll be able to see this picture in your browser.
It's worth noting that because the QuickStart app named all images uploaded by the Upload Image button my-image, uploading images in the same format will be overwritten, i.e. no matter how many pictures you upload in the same format, you'll only see the last updated image in the background. Later we will teach you how to modify the code so that the picture will not be overwritten.
We can use the download address as a picture bed, that is, you can put the download address of the picture into other web pages pictures can be displayed. Cloud-stored pictures also have a FileID (both cloud file ID, starting with cloud://) that can only be used in specific scenarios for small programs, and only some of the components' properties support it, and pasting links to browsers is not open.
Technical documentation: Component support
For example, we enter the following code in index.wxml on the index page, and the FileID of your cloud storage picture in the src property of the image component, which can be displayed.
<image src="你的图片的FileID"></image>
But if you log out of the developer tool, the picture won't show up and will be misnumed, so don't use the fileID of the picture as a picture bed, FileID has another use. Experience service-side calls for cloud calls
Re-click on the developer tool's preview icon, then scan the QR code with your phone, click on the service side call in the cloud call to develop QuickStart on the phone, you can send template messages and get the small program code.
Click to get the small program code, if the display call failed, indicating that your openapi cloud function was not successfully deployed, you need to deploy successfully first Oh. If the call is successful, you will be able to get your small program code, which will also be saved to the storage of cloud development.
Send template messages, can only be previewed in mobile WeChat test Oh, the use of WeChat developer tools is not able to send template messages, and the console will also report errors
Click to send a template message and your WeChat will receive a service notification, which is a successful purchase notification from your small program. This is WeChat template message, many WeChat public number, small programs will have such a function, the use of small program cloud development, we can also easily customize their own service notifications (later will teach you how to customize).
Click on the weChat developer tool's cloud development icon, open the cloud development console, click on the database icon to enter the database management page, click on the collection name to the right of the icon, you can create a collection of data, here we just need to add a collection of counters (without adding data) can be.
Expand the miniprogram folder in the editor of the developer tool, open the databaseGuide.js file in databaseGuide under the pages file, and find onAdd: function (), onQuery: function (), onCounter Inc: Function (), onCounterDec: function (), onRemove: function () select the green block of code, and then press the shortcuts Ctrl and/) at the same time (Mac computer shortcuts are Command and /), you can bulk uncomment the code.
It's a one-line comment from JavaScript, the front-end programming language, and the code on the // line doesn't execute, and we use shortcuts to bulk uncomment the code for the entire code to take effect. The reason it's green is that WeChat developer tools highlight the syntax we do to make it clearer to us.
The above functions are the front-end page of the small program to operate the database, click on the developer tool simulator cloud to develop the front-end operation database in QuickStart,
In step 1 (the database guidelines are marked), we will get the user's openid, that is, you do not get openid is not able to operate the database through the front end of the small program Oh step 2, we need to create a collection of data in the database management page in the cloud development console (no data added); T he onAdd method is called and a new record is added to the counters collection (previously it was hard to manually add wood?). ) , we can go to the database management page of the cloud development console to see if the counters collection has a record, you can click a few more new records button, and then go to the cloud development console to see what has changed in the database. T hat is, the small program front page adds records to the database through the onAdd method. S tep 4, click the button to query the record, then call is the onQuery method can get in the small program step 3 we store in the database data step 5, click the counter button and number, you can update the value of count, click the button will call the countInc method, and click on the number onCounterDec method, such as we click on the plus sign to 7, and then go to the database management page to view the latest record (that is, the last one), Its count is updated from the original 1 to 7 (refresh button first), we click the -number button to 5, and then the database management page to see what has changed (click to refresh button) Step 6, click the delete record button, will call the onRemove method, then delete the database's latest record (that is, the record in step 5).
We learned from the actual battle that onAdd, onQuery, onCounter Inc, onCounterDec, and onRemove in the databaseGuide .js file can implement the front-end page of the small program to manipulate the database.
These functions can be understood in conjunction with databaseguide .js documentation and cloud development technical documentation about the contents of the database. (As for how the front end operates the database, we'll go into more detail later, just to understand the general logic here)
In the previous JavaScript chapter we learned that data and data storage is very important, and with the database, the data generated by functions can be more durable than the cache storage, and above we implemented the data to add (add), delete (delete), modify (modify, update), query (query and render to the page), not only that, the cache capacity is also relatively limited, at most 10M, and the database can store hundreds of G or more, can see its importance.
Cloud development QuickStart template applet has a lot of extra pages, this we just need to miniprogram folder under the pages, images, components, style folder files empty, as well as app.json page configuration items in the page to delete the page, the app.wxss style code are deleted is a new beginning. This is one of the methods, and you can also use the following method (recommended for learning).
Based on projects that are not developed using the cloud, of course, we can also convert projects that did not use cloud development in the previous section to use cloud services, starting with a new folder at the root of the small program, such as cloudfunctions, and then adding the path configuration of the cloud function folder at project.config.json.
"cloudfunctionRoot": "cloudfunctions/",
Then create a new miniprogram folder, put files other than project.config.json, such as pages, utils, images, apps.js, app.json, etc., into the miniprogram folder, and add the miniprogram configuration at project.config.json:
"cloudfunctionRoot": "cloudfunctions/","miniprogramRoot":"miniprogram/",
值得一提的是，云函数部署上传成功，我们就可以一直调用，只要你的小程序的appid以及环境ID没有变，你创建再多的小程序项目，都可以直接调用部署好的云函数，比如前面的login、echo、callback、sum等云函数。也就是说云函数一旦部署成功，它就一直在云端服务器里，哪怕你把小程序本地的云函数都删掉也没有关系。
When the new and configured cloud function root directory for the cloudfunctions folder, the cloud function root directory does not have a cloud function, we can right-click on the cloud function root cloudfunctions folder to select the list of synchronous cloud functions, you can list all cloud functions in the cloud (this is just a list), and to modify the contents of the cloud function, we can right-click on one of the cloud function directory to choose to download the cloud function.
In addition, we need the app .js small program to use wx.cloud.init() in the lifecycle function of the app of the small program to initialize cloud development capabilities:
onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ env: '你的环境ID', traceUser: true, }) } },
Cloud development capabilities globally only need to be initialized once, where the traceUser property is set to true, which records user access to user management and can be seen in the operational analysis of the cloud development console- user access.
In code that initializes cloud development capabilities on the small terminal, knowledge of the wx.cloud as well as the underlying library version is involved. For wx.cloud, we can enter it directly in the console of the developer tool, as we learned about wx objects in the console before:
wx.cloud
to understand what properties and methods an object has. We can see that there are the following methods:
CloudID: ƒ () //用于云调用获取开放数据callFunction: ƒ () //调用云函数database: ƒ () //获取数据库的引用deleteFile: ƒ () //从云存储空间删除文件downloadFile: ƒ () //从云存储空间下载文件getTempFileURL: ƒ () //用云文件 ID 换取真实链接init: ƒ () //初始化云开发能力uploadFile: ƒ () //上传文件至云存储空间
As for the basic library, there are three places to pay attention to its existence, usually when developing need to pay attention to
Developer tool project.config.json has such a property libVersion, which can also be in the developer toolbar in the upper right corner of the details of the local settings of the debug base library, it is recommended to switch to the latest, switch the value of libVersion will also be modified to switch version; The technical documentation indicates the minimum version supported by its base library, while the Small Program Cloud Development SDK is more than 2.2.3.