Introduction to file functions

After creating a cloud developed applet project, you can see the following files in the Explorer:

The folder cloudfunctions contains cloud functions.
The folder miniprogram/images contains the pictures to be inserted in the applet.
The folder miniprogram/pages contains the interfaces of the applet.
app.js/app.json/app.wxss is a global configuration for wechat applets.

Introduction to sub files

Global profile

In the file app JSON, set the path of each interface of the applet. After entering the path here and saving, the corresponding file will be automatically generated. Remember not to delete the last comma. Enter a comma at the end of the code for each line.

"pages": [
    "pages/index/index",
    "pages/getOpenId/index",
    "pages/getMiniProgramCode/index",
    "pages/deployService/index",
    "pages/createCollection/index",
    "pages/uploadFile/index",
    "pages/selectRecord/index",
    "pages/updateRecord/index",
    "pages/updateRecordResult/index",
    "pages/updateRecordSuccess/index",
    "pages/sumRecord/index",
    "pages/sumRecordResult/index"
  ],

The global interface title, title background color, title font color, etc. are set in the following code.

  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "Cloud development QuickStart",
    "navigationBarTextStyle": "black"
  },

Settings of the bottom navigation bar: tabBar control. You will be prompted if you directly enter tab, and then select tabBar. Enter will automatically complete the code.
The navigation bar has a minimum of 2 items and a maximum of 5 items.
Color: no font color is selected in the navigation bar# ccc is gray, as shown in the "shopping cart" in the figure below.
Selected color: select the font color in the navigation bar. As shown in the figure below, the red font "home page".
pagePath: the interface to be displayed when this option is selected.
Text: navigation bar text.
iconPath: the picture to be displayed when the navigation bar is not selected.
selectedIconPath: the picture to be displayed when the navigation bar is selected.
When adding a tabBar control, pay attention to adding commas.

"tabBar": {
    "color": "#ccc",
    "selectedColor": "#FF0000",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "home page",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-actived.png"
    },  {
      "pagePath": "pages/shopcart/shopcart",
      "text": "Shopping Cart",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-actived.png"
    }]
  },

The running interface at the bottom of the applet is shown in the figure below:

pagefile

The files showing the interface are in the pages folder, such as the pages/index folder. There are four files in this folder, and the purpose of each file

• index.js: set the response function of the interface and set the dynamic effect.
• index.json
• index.wxml: the contents of the interface to be displayed are written in this file.
• index.wxss: set the style of the page, such as color, font size, space size, etc.

Here are some common functions:
Display input text:

<view>Hello world!</view>

Insert picture:

<image src="{{img}}"></image>
<image src="/images/database.png"></image>

If elif else statement:

<view wx:if="{{true}}">NameA
</view>
<view wx:else> Please login
</view>

For loop: you need to add two curly braces to indicate the value of the variable. {{[1,2]}} represents a list containing elements 1 and 2. item is a circular element and needs to be displayed in two curly braces.

<view wx:for="{{[1,2]}}" wx:key="index">
  {{item}}
</view>

Draw Box as shown below.

• Yes Set the style of the control through the class attribute in the view in the wxml file. The bindtap and catchtap attributes can set the response when the control is clicked. The bindtap control will not prevent the bubbling event from bubbling upward, and the catchtap control can prevent the bubbling event from bubbling upward. Click the gray Box to execute the function onTapBoxhandler, and click the yellow Box to execute the function onTapChildhandler.
• Yes In the wxss file, you can style the control by referencing class.
• Yes js file, set the corresponding response, here console Log ("child") is the output of child on the console.

/* pages/index/index.wxml Code in*/
<view class="box" bindtap="onTapBoxhandler">
<view class='child' catchtap="onTapChildhandler"></view>
</view>

/* pages/index/index.wxss Code in*/
.box{
  width: 200rpx;
  height: 200rpx;
  background: #ccc;
}
.child{
  width: 50rpx;
  height: 50rpx;
  background: rgb(230, 230, 20);
}

/* pages/index/index.js Code in*/
onTapBoxhandler: function(){
  console.log("Box");
},
onTapChildhandler: function(){
  console.log("child");
},