1.重点讲解小程序中常用的布局组件view,text,rich-text,button,image，navigator，icon,swiper,radio,checkbox.

view代替原来的div标签viewhover-class="h-class"点击我/viewtext文本标签

2.2.只能嵌套text3.长按文字可以复制(只有此标签有这个功能)4.可以对空格回车进行编码参数：

textselectabledecodetext123lt;/text

3.页面输出：

image图片标签

4.参数：

src指定要加载的图片的路径注意：图片存在默认的宽度和高度320*240mode决定剪裁和缩放模式小程序的图片支持懒加载lazy-loadlazy-load会自己判断当图片出现在视口上下三屏的高度之内的时候自己开始加载图片imagemode="bottom"lazy-loadsrc="https://avatar.csdnimg.cn/7/6/0/2_weixin_44523860_1580302061.jpg"/swiper轮播图轮播图外层容器swiper每一个轮播项swiper-itemswiper标签存在默认样式1width100%2height150px3swiper高度无法实现由内容撑开

5.处理方式：先找出原图的宽度和高度等比例给swiper定宽度和高度原图的宽度和高度1125x352pxswiper宽度/swiper高度=原图的宽度/原图的高度swiper高度=swiper宽度x原图的高度/原图的宽度swiper宽度100vwheight:100vwx352/1125

6.部分常用参数：autoplay自动轮播interval修改轮播时间circular衔接轮播indicator-dots显示指示器分页器索引器indicator-color指示器的未选择的颜色indicator-active-color选中的时候的指示器的颜色

swiperautoplayinterval="1000"circularindicator-dotsindicator-color="#0094ff"indicator-active-color="#ff0094"swiper-itemimagemode="widthFix"src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg"//swiper-itemswiper-itemimagemode="widthFix"src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"//swiper-itemswiper-itemimagemode="widthFix"src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg"//swiper-item/swiper

7.参考如下样式：calc可以用于辅助计算

swiper{width:100%;/*height:calc(100vw*352/1125);也可以*/height:31.28vw;}image{width:100%;}navigator链接标签

8.补充：target要跳转到当前的小程序还是其他的小程序的页面

self默认值自己小程序的页面miniProgram其他的小程序的页面navigatorurl="/pages/demo/demo"跳转/navigatornavigatoropen-type="redirect"url="/pages/demo/demo"跳转redirect/navigatornavigatoropen-type="switchTab"url="/pages/index/index"switchTab直接跳转到tabbar页面/navigatornavigatoropen-type="reLaunch"url="/pages/index/index"reLaunch可以随便跳/navigatorrich-text富文本标签

9.类似vue的v-html，可以将字符串解析为对应标签nodes属性来实现1接收标签字符串2接收对象数组

10.wxml

rich-textnodes="{{html}}"/rich-text

11.js文件1标签字符串最常用的

Page({data:{html:'divstyle="color:bule;"aaa/div',}})

12.2对象数组

Page({data:{html:[{//1div标签name属性来指定name:"div",//2标签上有哪些属性attrs:{//标签上的属性classstyleclass:"my_div",style:"color:red;"},//3子节点children要接收的数据类型和nodes第二种渲染方式的数据类型一致children:[{name:"p",attrs:{},//放文本children:[{type:"text",text:"hello"}]}]}]}})button标签

13.一、外观的属性

size控制按钮的大小default默认大小mini小尺寸type用来控制按钮的颜色default灰色primary绿色warn红色plain按钮是否镂空，背景色透明loading文字前显示正在等待图标button默认按钮/buttonbuttonsize="mini"mini默认按钮/buttonbuttontype="primary"primary按钮/buttonbuttontype="warn"warn按钮/buttonbuttontype="warn"plainplain按钮/buttonbuttontype="primary"loadingloading按钮/button

14.二、button开发能力open-type：

contact直接打开客服对话功能需要在微信小程序的后台配置只能够通过真机调试来打开share转发当前的小程序到微信朋友中不能把小程序分享到朋友圈getPhoneNumber获取当前用户的手机号码信息结合一个事件来使用不是企业的小程序账号没有权限来获取用户的手机号码1绑定一个事件bindgetphonenumber2在事件的回调函数中通过参数来获取信息3获取到的信息已经加密过了需要用户小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了getUserInfo获取当前用户的个人信息1使用方法类似获取用户的手机号码2可以直接获取不存在加密的字段launchApp在小程序当中直接打开app1需要现在app中通过app的某个链接打开小程序2在小程序中再通过这个功能重新打开appopenSetting打开小程序内置的授权页面，授权页面中只会出现用户曾经点击过的权限feedback打开小程序内置的意见反馈页面，只能够通过真机调试来打开

15.wxml

buttonopen-type="contact"contact/buttonbuttonopen-type="share"share/buttonbuttonopen-type="getPhoneNumber"bindgetphonenumber="getPhoneNumber"getPhoneNumber/buttonbuttonopen-type="getUserInfo"bindgetuserinfo="getUserInfo"getUserInfo/buttonbuttonopen-type="launchApp"launchApp/buttonbuttonopen-type="openSetting"openSetting/buttonbuttonopen-type="feedback"feedback/button

16.js部分，通过e获取对应信息

Page({//获取用户的手机号码信息getPhoneNumber(e){console.log(e);},//获取用户个人信息getUserInfo(e){console.log(e);}})ico字体图标

17.wxml

icontype="cancel"size="60"color="#0094ff"/iconradio单选框radio标签必须要和父元素radio-group来使用value选中的单选框的值需要给radio-group绑定change事件需要在页面中显示选中的值

18.wxml

radio-groupbindchange="handleChange"radiocolor="red"value="male"男/radioradiocolor="red"value="female"女/radio/radio-groupview您选中的是:{{gender}}/view

19.js获取数据并存储

Page({data:{gender:""},handleChange(e){//1获取单选框中的值letgender=e.detail.value;//2把值赋值给data中的数据this.setData({//gender:gendergender})}})checkbox多选框checkbox标签必须要和父元素checkbox-group来使用value选中的单选框的值需要给checkbox-group绑定change事件需要在页面中显示选中的值

20.wxml

viewcheckbox-groupbindchange="handleItemChange"checkboxvalue="{{item.value}}"wx:for="{{list}}"wx:key="id"{{item.name}}/checkbox/checkbox-groupview选中的水果:{{checkedList}}/view/view

21.js模拟数据及存储页面勾选的元素

Page({data:{list:[{id:0,name:"",value:"apple"},{id:1,name:"",value:"grape"},{id:2,name:"",value:"bananer"}],checkedList:[]},//复选框的选中事件handleItemChange(e){//1获取被选中的复选框的值constcheckedList=e.detail.value;//2进行赋值this.setData({checkedList})}})