小程序的内置组件

小程序中常用的布局组件：

view,text,rich-text,button,image,icon,swiper,radio,checkbox等。
复制代码

1. view标签 相当于 div标签

2. text标签 只能嵌套text标签 长按文字可以复制【selectable】（只有这个标签有这个功能） 可以对回车,空格进行编码 (decode)

3. image标签 （打包上线的大小不能超过2M，使用图片的时候统一使用外网图片）

   1. 图片存在默认的宽高（320px * 240px）

   2. mode 决定 图片内容 和 图片标签 做适配

      scaleToFill 默认值 不保持纵横比，拉伸至标签定义的宽高

      aspectFit 保持宽高比，保证图片的长边完全显示（常用 轮播图）

      aspectFill 短边完全显示

      widthFix 宽度不变，高度自动变化，保持原宽高比不变

      top，left，bottom，right 背景图定位

   3. 小程序中的图片 直接支持 懒加载

      lazy-load 会自己判断 当图片出现在视口的上下三屏之内的时候，自己开始加载图片

4. swiper标签 ---》 轮播图

   swiper高度 = swiper的宽度 * 图片的高度 / 原图的宽度

   <swiper autoplay interval="1000" circular indicator-dots>
       // 图片存在默认宽高  320 * 240
   	<swiper-item><image model="widthFix" src="" /></image></swiper-item>
   </swiper>
   复制代码
   

5. navigator 导航组件 (块级元素，默认换行)

   <navigator url="/pages/homepage/index" open-type="navigate"></navigator>
   复制代码
   

6. rich-text(富文本标签，将字符串解析成对应标签，相当于v-html)

   // 1 标签字符串
   <rich-text nodes="{{ html }}"></rich-text>
   
   // 2 对象数组
   <rich-text nodes="{{ html.model }}"></rich-text>
   复制代码
   

7. button 按钮

   大小（size:mini/default），颜色(type:default/primary/warn)，是否镂空（plain），是否在文字前有加载loading（loading），开发能力（opentype）

   开放能力（opentype）:

   1. concat 直接打开 客服对话 功能，需要在小程序的后台配置

      1. 将小程序的appid由测试号改为自己的appid
      2. 登录微信小程序官网，添加 客服 - 微信

   2. share 转发当前小程序到微信朋友中 ，不能把小程序转发到朋友圈中

   3. getPhoneNumber 获取当前用户的手机号码，结合事件来使用，不是企业的小程序账号 没有权限来获取用户的手机号码

   4. getUserInfo获取用户的个人信息

   5. launchApp在 小程序 中直接打开 app

   6. openSetting 打开小程序内置的授权页面

      只会出现用户点击过的权限

   7. feedback 打开小程序内置的意见反馈页面

8. icon

   type：类型 success，success_no_circle,info,warn,wating.success_no_circle,info,warn,waiting，cancel,downkload，search，clear

   size：大小 number / string

   color：颜色

9. radio 单选框

   <radio-group bindchange="handleChange">
   	<radio color="red" value="male">男</radio>
       <radio color="red" value="female">女</radio>
   </radio-group>
   <view>选中的是： {{ gender }} </view>
   
   data：{
   	gender: ""
   },
   handleChange(e) {
   	// 获取单选框选中的值
   	let gender = e.detail.value;
   	// 把值赋值给data中的数据
   	this.setData({
   		gender // 相当于 gender：gender
   	})
   }
   复制代码
   

10. checkbox 多选框

    <checkbox-group bindchange="handleChange">
    	<checkbox value="{{ item.value }}" wx:for="{{ list }}" wx:key="id">{{ item.name }}		     </checkbox>
    </checkbox-group>
    <view>选中的是： {{ checkedList }} </view>
    
    checkedList:[]
    handleChange(e) {
    	let checkedList = e.detail.value;
    	this.setData({
    		checkedList
    	})
    }