一、安装微信小程序开发工具·
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
二、申请一个测试号
三、运行微信web开发者工具 ，选择新建或打开过的项目
四、构成小程序一个功能模块的四大文件组成
一般以一个目录为模块名，如创建一个usercenter子目录，目录下的文件名尽量与目录名一致，四个文件分别为：
Usercenter.js 类似于服务器脚本程序，所有程序编写都在这里，语法类似js
Usercenter.json 是一个配置文件，如在手机端顶端显示一个标题，或其它样式
Usercenter.wxml 类似于aspx前台页面，放置所有控件等元素的界面容器
Usercenter.wxss 类似于 css文件，用于渲染 wxml 中设定的元素的样式，语法类似css
五、重点控件介绍
（1）form及配套 button
<formbindsubmit="formBindsubmit"bindreset="formReset">
<viewstyle="display:flex;margin-top:30px;">
<buttonclass='stdbtn'formType="submit">保存</button>
<buttonclass='stdbtn'formType="reset" >重置</button>
</view>
</form>
bindsubmit="formBindsubmit"bindreset="formReset"
提交时绑定的函数，重置时绑定的函数，bindsubmit和bindreset是固定语法
<viewstyle="display:flex;margin-top:30px;">
View相当于div ，style 等同于指定css样式
<buttonclass='stdbtn'formType="submit">保存</button>
<buttonclass='stdbtn'formType="reset">重置</button>
Formtype=”submit” 类似 submit button, Formtype=”reset” 类似 reset button, 其中 class 即为在 wxss 设置引用的样式单键值
（2）Text
<textclass="stdtitle"decode="{{true}}"space="{{true}}">这是一个标签</text>
类似asp.net中的label控件，decode是否允许有html编码比如输出 ，这个不设置程序会报错，space是否允许输出空格位
（3）input
<inputname='cid'disabled='true'value='{{cid}}' style='display:none'class='stdinput'></input>
类似asp.net中的TextBox控件，value相当于值即 Text属性
设置type='digit' 表示只能输入数值，其它type请百度
（4）image
<imagesrc='{{QrCodeBase64}}'bindtap='saveToPhotosAlbum'data-id='1'style='{{q1}};height:100px;width:100px'/>
类似asp.net中的Image控件，src可以是网址常量或一个变量，bindtap类似于onclick事件，这个事件基本适用于所有控件， data-id 自定义参数 data-为固定写法，id为自定义，这个值可以通过点击事件获取。
注意：区分大小写，网址也是一样
（5）radio-group
<radio-groupstyle='width:400rpx' name='actState'>
<labelclass="stdradio"decode="{{true}}"space="{{true}}">正式发布
<radiovalue='正式发布'checked='{{state1}}'></radio></label>
<labelclass="stdradio"decode="{{true}}"space="{{true}}">暂不发布
<radiovalue='暂不发布'checked='{{state2}}'></radio></label>
</radio-group>
类似asp.net中的RadioButtonList控件，内置label为显示标签，radio为每个无线按钮，value为提交的数据 checked为是否选中true或false。
（6）textarea
<textareamaxlength='2000'name='actDescript'style='width:400rpx'placeholder=''class='stdinput'value='{{actDescript}}'></textarea>
类似asp.net中的TextBox控件的多行文本模式，maxlength是允许输入的最大长度，name是可以给控件起个名字，这些属性适用于大部分控件。该控件可参照input区别在于可以输入多行文本。
（7）picker
<pickerstyle='width:570rpx'class="stdlabel"name='startDate'mode="date"value="{{dateValue}}"start="1900-01-01"end="2999-12-12"bindchange="datePickerBindchange">点此选择开始日期 {{dateValue}}
</picker>
<pickerstyle='width:570rpx'class="stdlabel"mode="time"name='startTime'value="{{timeValue}}"start="00:00"end="24:00" bindchange="timePickerBindchange">
{{timeValue}}
<text>点此选择开始时间</text>
<view>点此选择开始时间</view>
点此选择开始时间
</picker>
类似asp.net中的DropDownList控件, 它分很多种模式 mode=date是调用手机的日期选择功能（只能选日期），mode=time是时间。 start和end可以设定日期或时间范围， bindchange是选择后发生的事件，这个事件也是适用于大多数控件
<pickername='{{item.sysfName}}' maxlength='{{item.fLength}}' bindchange='iselect'data-index="{{index}}" value="{{array[index].id}}" range="{{array}}" range-key="{{'name'}}" placeholder='' class="stdlabel">已选择 </picker>
Range是数据源属性，需要提供json数组格式, 供用户选择对应的值，value为值，range-key是显示的值
数据源举例：（来源区分数组和对象数组，都是json格式）
1、不需要区分value和text的单一选项的数组
TypeList:["请选择类型","类型一","类型二","类型三"],
2、带value和text的数组对象：
ArrayList:[
{ id: 0, name:"请选择类型"},
{ id: 1, name:"类型一"},
{ id: 2, name:"类型二"},
{ id: 3, name:"类型三"}
]
（8）switch
<switch type='switch' name='allowSignUp' style='width:400rpx' bindchange='switchSignUpPanel' checked='{{allowSignUp}}'></switch>
类似asp.net中的CheckBox控件, 以一种开关的形式显示
（9）button
<buttonclass='stdbtn' bindtap=’deleteinfo’>保存</button>
