1.view代替原来的div标签
<view hover-class="h-class">点我试试</view>
2.text文本标签
-
只能嵌套text
-
长按文字可以复制（只有该标签有这个功能）
-
可以对空格 回车 进行编码
-
长按文字复制 selecttable
-
对文本内容进行解码 decode
3.image标签
-
微信小程序打包上线不能超过2M,使用图片的时候用外网图片。
-
image组件存在默认宽320px，高度240px。
-
mode 决定 图片内容 和图片标签 宽高做适配。
-
scaleToFill 默认值 不保持纵横缩放图片，使图片的高度完全拉伸填满image 元素。
-
aspectFit 保持宽高比 确保图片的长边显示出来。
-
aspectFill 保持纵横比缩放，只保证图片的短边完全显示出来，少用。
-
widthFix 以前web图片 宽度指定之后 高度会按比例来调整，常用。
-
bottom。。类似以前backgroud-position
-
小程序图片 直接支持懒加载 在标签加上 lazy-load
-
lazy-load会判断 当图片出现在视口上下三屏的高度之内，小程序会自己开始加载图片
<image mode="bottom" lazy-load src=""/>
4.swiper标签
-
外层容器 swiper，每一个轮播项 swiper-item。
-
swiper默认宽度100%，高度150px（无法实现由内容撑开），图片存在高度和宽度320*240。
-
先找出原图的宽高，给swiper定宽高
-
swiper宽度 / swiper高度 =原图宽 /原图高 ；swiper高度 =swiper宽原图宽 /原图高度；
-
autoplay 自动轮播；interval修改轮播时间；circular衔接轮播；
-
indicator-dots显示指示器分页器索引器；indicator-color指示器未选择颜色；indicator-active-color 选中时指示器的颜色
5.navigator导航标签
-
块级元素 默认会换行，url要跳转的页面路径：相对或者绝对路径。
-
target 跳转当前还是其他小程序页面；默认自己seft，其他页面miniprogram。
-
open-type跳转的方式：
-
默认navigate 保留当前页面，跳转到应用的某个页面，不能是tabbar页面
-
redirect 关闭当前页面，跳转到应用的某个页面，不能是tabbar页面
-
switchTab 跳转到tabbar页面，并关闭其他非tabbar页面
-
reLaunch 关闭所以页面，打开到应用内的某个页面
6.text-rich富文本标签
-
nodes属性来实现，标签接收字符串/对象/对象数组
-
常用标签字符串（如图）支持的标签看官网
7.button按钮标签
外观属性
-
size 大小，值default默认大小，mini小尺寸。
-
type颜色，值default灰色，primaryl绿色，warn红色。
-
plain 按钮是否镂空，背景透明。
开发能力
-
open-type：
-
concact 直接打开 客服对话功能，需要在微信小程序的后台配置。
-
share转发当前的小程序到微信朋友中。不能分享到朋友圈。
-
getPhoneNumber获取当前用户手机号码信息。结合一个事件来使用，不是企业账号没有权限
-
绑定一个事件 bindgetphonenumber。
-
在事件的回调函数中 通过参数来获取信息。
-
获取的信息已经加密过了（需要用户自己搭建小程序后台服务器，在后台服务器进行解析手机号码，返回小程序中）
-
getUserInfo获取当前用户的个人信息。
-
使用方法类似手机号码
-
可以直接获取，不存在加密字段
-
launchApp在小程序中 直接打开app。
-
先在app中通过某个链接打开小程序
-
在小程序再通过这个功能重新打开app
-
京东app和京东小程序
-
openSetting 打开小程序内置的授权页面。
-
授权页面只会出现，用户曾经点击过的 权限
-
feedback 打开小程序内置的意见反馈页面。
-
只能通过真机调试来打开
-
type颜色，值default灰色，primaryl绿色，warn红色。
-
plain 按钮是否镂空，背景透明。
open-type的contact的实现流程
-
将小程序的appid由测试号改为自己的appid
-
登录小程序官网，添加“客服-微信”
7.icon图标
-
type图图标类型：success，success_no_circle,info,warn,waiting,cancel,download,search,clear
-
size图标的大小，color图标的颜色。
<icon type="success" size="60" color="yellow"></icon>
8.radio单选框
-
radio标签 必须和父元素 'radio-group' 来使用
-
value 选中的单选框的值
-
需要给 radio-group 绑定 bindchange 事件
-
在页面显示选中的值
<radion-group bindchange="handleChange"> <radio value="male" color="red">男</radio> <radio value="female" color="red">女</radio> </radio-group> <view>您选中的性别：{{gender}}</view>
js：
page({ data:{ gender:"" }, handleChange(e){ //1.获取单选框中的值 let gender = e.detail.value; //2.把值赋给 data中的数据 this.setData({ //gender:gender 同下 gender }); } })
9.checkbox复选框
-
checkbox标签 必须和父元素 'checkbox-group' 来使用
-
value 选中的单选框的值
-
需要给 checkbox-group 绑定 bindchange 事件
-
在页面显示选中的值
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" vx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>您选中的水果：{{checkedList}}</view>
js：
page({ data:{ list:[ { id:0, name:"苹果", value:"apple" }, { id:1, name:"葡萄", value:"grape" }, { id:3, name:"香蕉", value:"bananer" }, ], checkedList[] }, handleItemChange(e){ //1.获取复选框中的值 const checkedList= e.detail.value; //2.把值赋给 data中的数据 this.setData({ //checkedList:checkedList同下 checkedList }); } })
