1.微信小程序的代码构成
2.创建一个项目
.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件小程序配置app.jsonapp.json是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。QuickStart项目里边的app.json配置内容如下{"pages":["pages/index/index","pages/logs/logs","pages/flex/flex","pages/login/login","pages/teachers/teachers"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首页"},{"pagePath":"pages/logs/logs","text":"日志"}]}}工具配置project.config.json通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。WXML模板从事过网页编程的人知道，网页编程采用的是HTML+CSS+JS这样的组合，其中HTML是用来描述当前这个页面的结构，CSS用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中WXML充当的就是类似HTML的角色。打开pages/index/index.wxml，你会看到以下的内容:viewclass="container"viewclass="userinfo"buttonwx:if="{{!hasUserInfocanIUse}}"open-type="getUserInfo"bindgetuserinfo="getUserInfo"获取头像昵称/buttonblockwx:elseimagebindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"/imagetextclass="userinfo-nickname"{{userInfo.nickName}}/text/block/viewviewclass="usermotto"textclass="user-motto"{{motto}}/text/view/view3.和HTML非常相似，有标签、属性等等构成。但是也有很多不一样的地方例如：在这里面是没有div标签的用的是view
WXSS样式WXSS具有CSS大部分的特性，小程序在WXSS也做了一些扩充和修改。新增了尺寸单位。在写CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。提供了全局的样式和局部样式。和前边app.json,page.json的概念相同，你可以写一个app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式page.wxss仅对当前页面生效。此外WXSS仅支持部分CSS选择器JS交互逻辑一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写JS脚本文件来处理用户的操作。view{{msg}}/viewbuttonbindtap="clickMe"点击我/button点击button按钮的时候，我们希望把界面上msg显示成"HelloWorld"，于是我们在button上声明一个属性:bindtap，在JS文件里边声明了clickMe方法来响应这次点击操作：Page({clickMe:function(){this.setData({msg:"HelloWorld"})}})
