"JAVA applet combat" micro-channel developer tools helloworld (c)

The first small demo program to run, need to use development tools of choice

Development tools to download and install

https://mp.weixin.qq.com/cgi-bin/wx click development tool, choose their own system version to download, install on it

Installed open

1. Open the downloaded files after installation

1. Selecting a corresponding installation directory

1. Wait for the installation

1. Installed

1. Open the file after installation

Development tools

1. Scan QR code

1. Select the applet

1. Select installation directory
   > similar eclipse project path

4. Open the default interface

Did web development are very familiar with the Google Chrome browser, it felt like he was right. Later in use in the detailed description of the function of a button, in fact, it is not very complicated.

1. Compile Preview
   > Click the Compile button on the tool, you can see the performance of the applet on the left side of the simulator interface tool, you can click the Preview button, swept away to experience your first small program on your mobile phone by sweeping micro-letter .

The directory structure (a)

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE

1. app.js
   

   app.json is the current global configuration applet, applet including all pages path, interface performance, network timeout, the bottom of the tab and so on.

2. app.json
   

   In fact, it used to represent such logs.json and applets in pages / logs directory page associated configuration. If you style the entire applet is blue, then you can declare in app.json inside the top color is blue can be. The actual situation may not be so, you may applet inside each page has a different color to distinguish between different functional modules, so we provide page.json, so that developers can independently define the attributes of each page, for example, just said top color, whether to allow the pull-down refresh and so on.

3. wxcss
   

   WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
   提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
   此外 WXSS 仅支持部分 CSS 选择器。

4. project.config.json
   

   通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

目录结构（二）

wxml 等基本等同咱们开发的html，wxss是等同css, 通过这三个文件基本的就可以构成咱们的页面了。基本页面的构成就需要这3个文件。

目录结构（三）

utils 常用公共js的抽象。

目录结构（四）

在page内定义的一个logs文件夹，以后开发的时候可能需要定义很多个名称的文件夹。

微信小程序的文件和普通web前端的区别

PS：这就是大致的工具介绍，后面循序渐进慢慢的搞透，搞熟悉。