Demo 项目地址
https://github.com/zce/weapp-demo
Clone or Download（需准备GIT环境）
没有git环境，可以直接下载
安装开发环境 下载地址Windows 64位
Windows 32位
macOS
安装过程对于Windows用户直接双击下一步的方式安装即可，此处注意我们使用的版本是官方最新的版本（不需要破解），可以不用AppID，也就是说没有资格的开发者也可以测试。
环境测试以及演示项目安装完成过后通过打开我们已经完成的应用测试环境是否正常
开发者工具安装完成后，打开并使用微信扫码登录。
选择创建“项目”，填入你在公众平台的AppID，如果没有的话可以点击无AppID。
设置一个本地项目的名称（非小程序名称），比如WeApp Demo，并选择一个本地文件夹作为存储目录。
接下来点击新建项目就可以在主界面中预览到我们的豆瓣电影示例了
希望是一个从零到一的转换过程~
创建项目接下来创建一个新的项目，理解小程序项目的基本结构和一些基础语法。
官方的开发工具为此准备了一个QuickStart项目。在创建过程中，如果选择的文件夹是个空文件夹，开发者工具会提示：是否需要创建一个quick start项目。选择是，开发者工具会自动帮助我们在开发目录里生成一个简单的项目。
借助官方的QuickStart项目完成最基本的Hello world，理解小程序项目的基本结构，学习基础操作与语法。
项目结构 └─ empty-folder/ ·································· 项目所在目录 ├─ pages/ ······································ 页面目录 │ ├─ index/ ··································· index页面 │ │ ├─ index.js ······························ index页面逻辑 │ │ ├─ index.wxml ···························· index页面结构 │ │ └─ index.wxss ···························· index页面样式 │ └─ logs/ ···································· logs页面 │ ├─ logs.js ······························· logs页面逻辑 │ ├─ logs.wxml ····························· logs页面结构 │ └─ logs.wxss ····························· logs页面样式 ├─ utils/ ······································ 公共脚本目录 │ └─ util.js ·································· 工具脚本 ├─ app.js ······································ 应用程序逻辑 ├─ app.json ···································· 应用程序配置 └─ app.wxss ···································· 应用程序公共样式我简单的画了一个结构图：
[图片上传失败...(image-3dad5-1562469242180)]
页面结构每个页面组件也分为四个文件组成：
[page-name].js页面逻辑文件，用于创建页面对象，以及处理页面生命周期控制和数据处理
[page-name].json设置当前页面工作时的window的配置，此处会覆盖app.json中的window设置，也就是说只可以设置window中设置的属性
[page-name].wxmlwxml指的是Wei Xin Markup Language
用于定义页面中元素结构的，语法遵循XML语法，注意是XML语法，不是HTML语法，不是HTML语法，不是HTML语法
[page-name].wxsswxml指的是Wei Xin Style Sheet
用于定义页面样式的，语法遵循CSS语法，扩展了CSS基本用法和长度单位（主要就是rpx响应式像素）
项目配置[图片上传失败...(image-3b6317-1562469242180)]
相关链接：
官方文档
生成配置文件
小程序中的配置文件分为两种：
全局配置文件，根目录下的app.json
页面配置文件，每个页面目录下的[page-name].json
app.json