Mini program development-Learn how to start developing and basic configuration of mini programs

If the applet is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), you can use the tabBar configuration item to specify the performance of the tab bar and the corresponding page displayed when the tab is switched.

Start development and basic settings of mini program

• WeChat development documentation: https://developers.weixin.qq.com/miniprogram/dev/

• Download WeChat Developer Tools
  

• Download address: https://developers.weixin.qq.com/miniprogram/dev/devtools /download.html

• New project
  

• 

• ## Note: If you have an APPID, remember to fill it in. If not, just click on the mini program. Remember to check the normal startup template;

## Basic configuration
#If the applet is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), you can specify the tab bar through the tabBar configuration item Performance, and the corresponding page displayed when tab switching.
#Tip:
• 1. When position is set to top, the icon will not be displayed

  2. The list in tabBar is an array, and only at least 2 can be configured , up to 5 tabs, tabs are sorted in the order of the array.
  
  

Example:

• 
  

-
Example:
Accepts an array, each item is a string, to specify which pages the mini program consists of. Each item represents the [path file name] information of the corresponding page, and the first item in the array represents the initial page of the mini program. Adding/reducing pages in the mini program requires modifying the pages array.
Example:
Attributes       Type     Required  Description
pages       String Array  Yes   set the page path

• ##window      Object     No    Set the window performance of the default page

• tabBar    Object     No   set the performance of the bottom tab

• networkTimeout Object      No   Set the network timeout

• debug     Boolean    No   Set whether to enable debug mode

• Configuration documentation: https:// developers.weixin.qq.com/miniprogram/dev/framework/config.html

• The app.json file is used to globally configure the WeChat applet and determine the path and window of the page file. performance, set network timeout, set multiple tabs, etc.

• The following is an app.json that contains all configuration options:

{
  "pages": [    "pages/index/index",    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true}

• app.json configuration item list

• pages Set the page path

{
  "pages":[
    //"pages/页面文件夹名/页面.wxml名",    "pages/index/index",    "pages/logs/logs"
  ]}

• window is used to set the status bar, navigation bar, title, and window background color of the mini program.

"window":{    "backgroundTextStyle":"light",//默认：dark ，下拉 loading 的样式，仅支持 dark/light    "navigationBarBackgroundColor": "#f1f1f1",//默认：#000000， 导航栏背景颜色，如"#000000"
    "navigationBarTitleText": "京东",//   导航栏标题文字内容    "navigationBarTextStyle":"black",//默认：white 导航栏标题颜色，仅支持 black/white    "backgroundColor":"#f1f1f1",//默认：#ffffff，   窗口的背景色
  },

• tabBar

"tabBar": {  "position":"bottom",//默认：bottom，  可选值 bottom、top
  "borderStyle":"white",//默认：black， tabbar上边框的颜色， 仅支持 black/white
  "color":"#f10215",//tab 上的文字默认颜色
  "selectedColor": "#f10215",//tab 上的文字选中时的颜色
  "backgroundColor":"#ffffff",//tab 的背景色
  //tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
  "list": [
    {      "pagePath": "pages/index/index", //页面路径，必须在 pages 中先定义
      "text": "首页", //tab 上按钮文字
      "iconPath": "images/index.png", 
        //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
      "selectedIconPath": "images/index_b.png" 
        //选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
    },
    {      "pagePath": "pages/category/category",      "text": "分类",      "iconPath": "images/category.png",      "selectedIconPath": "images/category_b.png"
    },
    {      "pagePath": "pages/cart/cart",      "text": "购物车",      "iconPath": "images/cart.png",      "selectedIconPath": "images/cart_b.png"
    },
    {      "pagePath": "pages/user/user",      "text": "我的",      "iconPath": "images/user.png",      "selectedIconPath": "images/user_b.png"
    }
  ]
}

• For specific configuration, please see the development manual:

  https://developers.weixin.qq.com/miniprogram/dev/framework/config .html

  Related articles:

  Developing WeChat mini programs from scratch (1)

  Develop WeChat Mini Programs from Scratch (2)

  Related videos:

  WeChat Mini Program Primary Development Video Tutorial-Free Online Video Tutorial

The above is the detailed content of Mini program development-Learn how to start developing and basic configuration of mini programs. For more information, please follow other related articles on the PHP Chinese website!