1、下载微信开发者工具css
1.网页搜索微信小程序，打开第一个官网，左上角点击小程序，开始注册登陆。html
2.下载地址（首页/小程序发布流程/普通小程序开发者程序/蓝色字体 微信开发者工具）json
根据本身的计算机下载相应版本：小程序
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html微信小程序
3.安装好以后在刚刚的网页里点击右上角的头像打开设置页面，得到AppID(小程序ID)数组
2、开始微信
1.打开软件以后选择小程序，输入AppID(小程序ID)，填写项目目录（所在文件夹）以及项目名称，进入项目微信开发
2.刚进入就发现整个界面分为几个部分：模拟器，编辑器，调试器；app
编辑器中已经存在pages文件夹，里面还有index和logs文件夹，除此以外的还有 app.json文件以及 app.js文件，app.json用来设置全局配置，app.js用来描述整个框架的逻辑；框架
index和logs文件夹中都有4个文件，名称都同样的不一样类型的文件。
js文件和网页里面的js文件差很少，用来构造每一个页面的逻辑，也就是函数在这里写；
wxml和html差很少，用各类标签来构造页面的结构，好比一个文本框，按钮等都须要在这个文件里写；
wxss和css差很少，用来辅助wxml丰富页面，写出各类样式而后被wxml里的东西引用；
json就是用来页面配置的。
一个小程序最基本的须要根文件夹（pages）下的app.js和app.json，一个页面须要 .js和 .wxml文件，其余的没有也能够，可是为了实现各类功能，因此会用到其余的文件。
3.pages下的每一个文件夹都意味着一个页面，能够右击新建“目录”，在该目录下新建“component”，会自动生成四个文件，每新建一个页面都须要在app.json中的"pages":[]声明一下，例如：
"pages":[
"pages/login/login",
"pages/regist/regist"
],
必须写在双引号内，内容是页面路径，用逗号隔开，最后一个不须要，也就是说这实际上是个页面数组存放的。
4.wxml
放在一对对的标签里，<view></view>,
例如：
<view class='view'>帐号
<input placeholder='请输入帐号' class='username' bindinput='getUserInput' value='{ {name}}' name='username'>
</input>
</view>
其中<input>是文本输入框；placeholder是指输入框为空时显示的文字；class后面是在wxss文件里写的样式
例如：
.username{
width: 170px;
margin-left: 50px;
}
这是一个类选择器，用一个点加后面的名称 .username，就能够在wxml里引用了；bindinput 表示用哪一个函数，在js文件的Page（{}），用 函数名称：function（）{}，例如：
//获得键盘输入的用户名和密码
getUserInput: function(e){
this.setData({
name:e.detail.value
})
},
value是指这里所用的值，若是是要交互的，也就是说会改变的，那就在js文件page里的data里面设置，例如：
data: {
name:"",
}
调用时用双大括号来括住，{ {name}}；一样，js函数里的this.setData（{}）里的name也是这个变量，e.detail.value是固定写法，表示得到这个文本框的内容，而且赋给name，这就改变了name的值，还有一个方法是this.data也可使用，只不过它没法改变变量的值；
wxml里的name=‘’是这个文本框的id，名字，为以后的后台调用服务；
5.注意：
在wxss里使用分号，在js的data里用冒号不用=，值用双引号引住，函数里的变量用=，在wxml里用空格 =和单引号；
各组件能够查看帮助文档来使用：
https://developers.weixin.qq.com/miniprogram/dev/index.html
（在微信开发者工具里点击开发者文档就能够了）；
若是没法输入中文，点击一下下方的AppData，再点一下其余地方就行了；
wxml里换行的话用<view> </view>，中间是全角空格，必须是全角的，半角的不识别。