Small micro-channel application development Start Basics

Here with a "finger-guessing game" applet example description:
register, download a small program account opening tool is relatively simple, not repeat them here.

• First, development tools

Name is called micro-channel Developer Tools, the official website can be downloaded, development tools interface as follows:
interface has three areas: the preview area, including simulation, edit the code area, debugging zone, corresponding to the upper left corner three green button.

• Second, the file type

A total of four file types:

1.wxml: micro letter template file, similar to web development html file.

2.wxss: micro-channel stylesheet file, scheduled for page styles.

3.js: script files, write the code logic in this.

4.json: Static data configuration file.

• Third, the project structure

There are two very important documents:
1. File app.json- global profile applet
code example below

{
  "pages": [
    "pages/index/index"
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#363527",
    "navigationBarTitleText": "石头剪刀布",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

This document key management applet global configuration, including applets Page path, interface style (title, background color, font color), network time-out, the bottom of the tab and so on;

Each folder JSON, defined within the file folders wxml interface style, you can override the global style of app.json

2.project.config.json- Developer Tools Configuration

This file is used to define the customization of developer tools, such as screen color, build configuration, and so on.

Npm all know we used to download the tripartite library will generate a package.json file, download this file records all nice library name and version information, if we change the computer, in fact, not downloaded before the file copy in the past, but only Download a copy package.json perform again can be restored tripartite library you need.

So project.config.json so similar, it saves your configuration for developer tools, if you change your computer, you can set up your initial development of direct reduction habits through this document.

• IV page jump
  1 enters the first program, the inlet app.json control file, as shown, the inlet of pages / index / index.wxml file

{
  "pages": [
    "pages/index/index",（说明：第一行的这个页面代表小程序的入口）
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#363527",
    "navigationBarTitleText": "石头剪刀布",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

2. Go to the second page of how
to set up a button in pages / index / index.wxml file to a jump button binding event, then click to jump to another page.

index.wxml files, code sample

        <navigator url="../ts/ts" 
        hover-class="navigator-hover"
         open-type="switchTab">我是个按钮demo
         </navigator>

• Five new page

Best practice is to:
1. Add an array app.json directly in the pages of a page file path
2. Press ctrl + s, save
pages folder will automatically generate a new page, doing so is more convenient and insurance.