一、安装微信小程序开发工具·
下载地址：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
<form bindsubmit="formBindsubmit" bindreset="formReset">
<view style="display:flex;margin-top:30px;">
<button class='stdbtn' formType="submit" >保存</button>
<button class='stdbtn' formType="reset" >重置</button>
</view>
</form>
bindsubmit="formBindsubmit" bindreset="formReset"
提交时绑定的函数，重置时绑定的函数，bindsubmit和bindreset是固定语法
<view style="display:flex;margin-top:30px;">
View相当于div ，style 等同于指定css样式
<button class='stdbtn' formType="submit" >保存</button>
<button class='stdbtn' formType="reset" >重置</button>
Formtype=”submit” 类似 submit button, Formtype=”reset” 类似 reset button, 其中 class 即为在 wxss 设置引用的样式单键值
（2）Text
<text class="stdtitle" decode="{{true}}" space="{{true}}">这是一个标签</text>
类似asp.net中的label控件，decode是否允许有html编码比如输出 ，这个不设置程序会报错，space是否允许输出空格位
（3）input
<input name='cid' disabled='true' value='{{cid}}' style='display:none' class='stdinput'></input>
类似asp.net中的TextBox控件，value相当于值即 Text属性
设置type='digit' 表示只能输入数值，其它type请百度
（4）image
<image src='{{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-group style='width:400rpx' name='actState'>
<label class="stdradio" decode="{{true}}" space="{{true}}">正式发布
<radio value='正式发布' checked='{{state1}}'></radio></label>
<label class="stdradio" decode="{{true}}" space="{{true}}">暂不发布
<radio value='暂不发布' checked='{{state2}}'></radio></label>
</radio-group>
类似asp.net中的RadioButtonList控件，内置label为显示标签，radio为每个无线按钮，value为提交的数据 checked为是否选中true或false。
（6）textarea
<textarea maxlength='2000' name='actDescript' style='width:400rpx' placeholder='' class='stdinput' value='{{actDescript}}'></textarea>
类似asp.net中的TextBox控件的多行文本模式，maxlength是允许输入的最大长度，name是可以给控件起个名字，这些属性适用于大部分控件。该控件可参照input区别在于可以输入多行文本。
（7）picker
<picker style='width:570rpx' class="stdlabel" name='startDate' mode="date" value="{{dateValue}}" start="1900-01-01" end="2999-12-12" bindchange="datePickerBindchange">点此选择开始日期 {{dateValue}}
</picker>
<picker style='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是选择后发生的事件，这个事件也是适用于大多数控件
<picker name='{{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
<button class='stdbtn' bindtap=’deleteinfo’>保存</button>
