Cloud Development Mini Program Project Practical Combat One

Traditional development model of small programs

Cloud development model

What is Serverless?

Cloud Development and Serverless

What is Mini Program Cloud Development?

Cloud development advantages and basic capabilities

Cloud development advantages

• Go online quickly
• Focus on core business
• Independently develop a complete WeChat applet
• No need to learn a new language, only need to master Javascript
• No need for operation and maintenance, saving costs
• Elastic scaling
• Data Security

Cloud development basic capabilities

Cloud development activation and console function

1. First create a new cloud development project:
   
2. Click the cloud development button in the upper left corner to enter the console:
   

Code structure initialization

The basic library debug version of the latest change:

then filled environment ID code:

Open the app.jsonfile and add the following code:

"tabBar":{
    
    
    "color": "#474747",
    "selectedColor": "#d43c43",
    "list":[{
    
    
      "pagePath": "pages/playlist/playlist",
      "text":"音乐",
      "iconPath": "images/music.png",
      "selectedIconPath": "images/music-actived.png"
    },{
    
    
      "pagePath": "pages/blog/blog",
      "text":"发现",
      "iconPath": "images/blog.png",
      "selectedIconPath": "images/blog-actived.png"
    },{
    
    
      "pagePath": "pages/profile/profile",
      "text":"我的",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-actived.png"
    }
  ]
  },

Debugging can see that the basic functions of the coordinate bar are almost achieved:

Code specification

• Try to use let / constto define the variables, do not use var, because varthere are cross-level scope, and letdoes not, and consthas a protective effect on the variable does not change in the future;
• When creating an object, use const obj = {}, not const obj = new Object();
• When creating an array, use const arr = [], not const arr = new Array();
• The life cycle function that monitors the initial rendering of the page is generally not used onReady: function() {}, but used onReady() {};
• const person = { userName: userName, age: 33 }It can be abbreviated const person = { userName, age: 33 }, and the abbreviated attribute is best placed first;
• Method of calling cloud function: (First upload and deploy the method to the server)

wx.cloud.callFunction({
    
    
	name: 'login'
}).then((res) => {
    
    
	console.log(res)
	this.setData({
    
    
		openid: res.result.openid
	})
})

• There is no need to add a semicolon at the end of each line of code;