Global Configuration (app.json)

The app.json file in the root directory of the applets is used for global configuration of wechat applets, determining the path of page files, window performance, setting network timeout, setting multiple tabs, etc.

For full configuration items, see Applet Global Configuration

Here is an app.json file with some common configuration options:

{
  "pages": [
    "pages/index/index"."pages/home/home"]."window": {
    "navigationBarBackgroundColor": "# 000000"."navigationBarTextStyle": "white"."navigationBarTitleText": "Little Deng Science"
  },
  "tabBar": {
    "selectedColor": "#8B7500"."list": [{"pagePath": "pages/index/index"."text": "Home page"."iconPath": "static/tabbar/index1.png"."selectedIconPath": "static/tabbar/index2.png"
      },
      {
        "pagePath": "pages/home/home"."text": "I"."iconPath": "static/tabbar/home1.png"."selectedIconPath": "static/tabbar/home2.png"}}}]Copy the code

Pages

Pages Describes and develops related configuration items. For details, see the official document pages Configuration

Window

Window Describes and develops related configuration items. For details, see the official document: Window Configuration

Component (label)

For information about component development, please refer to the official website of wechat applets

text

Write text messages, similar to span tags

view

Container, similar to a div tag

image

The picture

Flex layout (non-applets specific, generic layout)

A very convenient layout. Remember the following four styles in containers:

display: flex;                 // flexlayoutflex-diretion: row; // Specify the direction of the main axis; row/columnjustify-content: space-around; // The arrangement of elements in the main axis:flex-star/flex-end/space-around/space-between/center
align-items: center; // The elements are arranged in the auxiliary direction:flex-star/flex-end/space-around/space-between/center
Copy the code

For example, to layout flex for menu, write it as follows:

.menu {
  display: flex;
  flex-direction: row; // display by line/*flex-direction: column; // display */ by column
}
Copy the code

Index. WXML examples of code:

<! --pages/index/index.wxml--</view> <view class="menu">
  <view class="item">
    <image src="/static/gift/gift1.png"> < / image > < text > presents a < / text > < view > < the view class =" item "> < imagesrc="/static/gift/gift2.pngGift "> < / image > < text > 2 < / text > < view > < the view class =" item "> < imagesrc="/static/gift/gift3.png"> < / image > < text > present three < / text > < view > < the view class =" item "> < imagesrc="/static/gift/gift4.png</image> <text> </view> </view>Copy the code

Index. WXSS code examples:

.menu { 
  height: 1500rpx; 
  border: 1rpx solid #bbbbbb;
  display: flex;

  Row /column */
  flex-direction: column;

  Flex-start /center/space-around/space-between/flex-end */
  justify-content: space-around;

  Flex-start /center/space-around/space-between/flex-end */
  align-items: center;
}
.menu .item {
  display: flex;
  flex-direction: column;
}
Copy the code

The renderings are as follows:

style

pixel

  • Px: Not recommended to some extent

  • RPX: small program recommended, compatible with different devices automatically pull up.

    • The page width is set to 750rpx

Continue to modify the Flex layout and style, and the resulting image looks like this:

Code warehouse

Small program development from the entry to the actual combat, continuous update in……

Code repository address: miniprogram-practice, there is a need to download their own learning.