原生小程序常见组件

常见组件

组件文档

view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox。等

text标签

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制（只有该标签有这个功能）
4. 可以对空格 回车 进行编码

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

image标签

image图片文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html)

1. 图片标签，image组件默认宽度 320px、高度 240px
2. 支持懒加载

小程序当中的图片 直接就支持 懒加载 lazy-load

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

<image src="" mode="widthFix" lazy-load></image>

//=>循环结构
<image src="{{item.image_src}}" mode="widthFix" lazy-load></image>

mode属性：

• scaleToFill 拉伸程度 和 图片image样式宽高保持一致

缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

image {
	width: 200px;
	height: 200px;
}

• widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

image {
	width: 100px;
}

• aspectFit

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。（页面轮播图常用）

image {
	width: 200px;
	height: 100px;
}

swiper标签

1. 轮播图外层容器 swiper
2. 每一个轮播项 swiper-item
3. swiper 标签 存在默认样式

width 100%

height 150px

swiper 高度 无法实现由内容撑开

4. 先找出来 原图的宽度和高度，等比例 给 swiper 定 宽度和高度

原图的宽度和高度： 1125 * 352px

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

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

height: 100vw * 352 / 1125

<swiper autoplay interval="1000" circular indicator-dots>
  <swiper-item>
    <image src="" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="" mode="widthFix"></image>
  </swiper-item>
</swiper>

swiper {
  width: 100%;
  height:calc(100vw*352/1125);
}

image {
  width: 100%;
}

navigator标签

navigator文档

1. 块级元素 默认会换行 可以直接加宽度和高度
2. target 要跳转到当前的小程序 还是其他的小程序页面

self 默认值 自己的小程序页面

miniProgram 其它的小程序页面

rich-text富文本标签

1. nodes属性来实现
   • 接收标签字符串（最常用）
   • 接收对象数组（了解）

可以将字符串解析成对应标签，类似vue中v-html功能

借鉴：淘宝

<rich-text nodes="{{html}}"></rich-text>

button标签

button文档

button 开发能力

1. contact 直接打开 客服对话功能 需要在微信小程序的后台配置
   • 将小程序的appid由测试号 改为自己的appid
   • 登录微信小程序官网，添加客服-微信

<button open-type="contact">contact</button>

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

<button open-type="share">share</button>

3. getPhoneNumber 获取当前用户的手机号码信息 结合一个事件使用

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>

不是企业的小程序账号 没有权限来获取用户的手机号码

• 绑定事件bindgetphonenumber

• 在事件的回调函数中，通过参数来获取信息

• 获取到的信息 已经加密过了

  需要用户自己待见小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中 就可以看到信息了

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

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>

• 使用方法 类似 获取用户的手机号码
• 可以直接获取 不存在加密的手段

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

<button open-type="launchApp">launchApp</button>

• 需要先在app中，通过app的某个链接 打开小程序
• 在小程序中再通过这个功能重新打开app
• 找到 京东的app 和 京东的小程序

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

<button open-type="openSetting">openSetting</button>

• 授权页面中 只会出现 用户曾经点击过的 权限

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

<button open-type="feedback">feedback</button>

• 只能通过真机调试来打开

icon图标

icon文档

<icon type="success" size="32" color="#0094ff"></icon>

radio标签

<radio-group bindchange="handleChange">
<radio value="male" color="#0094ff">男</radio>
<radio value="female" color="#0094ff">女</radio>
</radio-group>

<view>选中：{{gender}}</view>

data: {
 gender: ""
},
handleChange(e){
 let gender = e.detail.value;
 this.setData({
   gender
 })
},

• 可以通过color属性来修改颜色
• 需要搭配 radio-group 一起使用

radio标签

checkbox标签

<checkbox-group bindchange="handleCheckbox">
<block  wx:for="{{list}}" wx:key="id">
 <checkbox value="{{item.value}}">{{item.name}}</checkbox>
</block>
</checkbox-group>

<view>选中的水果：{{checkList}}</view>

data: {
 list: [{
     id: 0,
     name: '苹果',
     value: 'apple'
   },
   {
     id: 1,
     name: '榴莲',
     value: 'durian'
   },
   {
     id: 2,
     name: '香蕉',
     value: 'banana'
   },
   {
     id: 3,
     name: '橙子',
     value: 'orange'
   }
 ],
 checkList: []
},
handleCheckbox(e) {
 let checkList = e.detail.value;
 this.setData({
   checkList
 })
},

• 可以通过color属性来修改颜色
• 需要搭配 checkbox-group一起使用