⼩程序（五）-常见组件（标签）
常见组件(标签)
代替以前的div标签
  1.⽂本标签，类似span标签
  2.只能㠌套⾃已text
  3.长按⽂字可以复制(只有该标签有这个功能) <text selectable>加了就可以复制了<text/>
  4.可以对空格回车进⾏编码<text decode>加了空格就可以显⽰了<text/>,decode可以解析的有   < > & '    
属性类型默认值必填说明最低版本
selectable boolean false否⽂本是否可选 (已废弃)
user-select boolean false否⽂本是否可选，该属性会使⽂本节点显⽰为 inline-block
space string否显⽰连续空格
decode boolean false否是否解码
图⽚图床：就是⼀个在⽹络上存储图⽚的地⽅
如果打算长期稳定使⽤请优先选择七⽜云或者⼜拍云（存储在国内都需要有已备案域名），其次推荐的就是路过图床和SM.MS图床.
  1.src 图⽚⽤外⽹地址
  2.图⽚⼤⼩默认宽320px*⾼240px
  3.mode 图⽚裁剪、缩放的模式，决定图⽚内容和图⽚标签宽⾼做适配
  4.lazy-load 图⽚懒加载，在即将进⼊⼀定范围（上下三屏）时才开始加载
<image mode="heightFix" src="s3.ax1x/2021/01/12/sJ64Wd.jpg"/>
4.轮播图
  1 轮播图的外层容器
1.默认宽width100% ⾼height=150px
2.⽆法实现由图⽚内容撑开，需换算图⽚的⾼度
    3.autoplay ⾃动轮播
    4.interval="1000" 轮播间隔时间
    5.circular 轮播衔接滑动
    6.indicator-dots 是否显⽰⾯板指⽰点(索引器/分页器/指⽰器)
    7.indicator-active-color="red" 显⽰指圆点选中的颜⾊
    8.indicator-color="#0094ff" 显⽰指圆点未选的颜⾊
  2. 轮播图的轮播项
<swiper autoplay  circular interval="1000" indicator-dots indicator-active-color="red" indicator-color="#0094ff">
<swiper-item><image src="img.alicdn/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
<swiper-item><image src="aecpm.alicdn/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"/></swiper-item>
<swiper-item><image src="img.alicdn/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
</swiper>
wxml
  1.导航标签相当于a标签
  2.url 跳转路径(相对路径或绝对路径)
  3.open-type="switchTab" 跳转⽅式
open-type 的合法值
值说明最低版本navigate对应或的功能，默认值，保留当前页⾯(有返回按钮)，跳转到应⽤内的某个页⾯，不能跳到 tabbar 页⾯
redirect对应的功能，关闭当前页⾯(⽆返回按钮)，跳转到应⽤内的某个页⾯，不能跳到 tabbar 页⾯
switchTab对应的功能，跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯
reLaunch对应的功能，关闭所有页⾯，打开到应⽤内的某个页⾯，随便哪个页⾯都可跳(包括tabBar )
navigateBack对应的功能，关闭当前页⾯，返回上⼀页⾯或多级页⾯。可通过获取当前的页⾯栈，决定需要返回⼏层。
exit退出⼩程序，target="miniProgram"时⽣效
  1.富⽂本标签，相当于vue中的v-html
  2.nodes属性来实现
    1.接收标签字符串(常⽤)<rich-text nodes="<h1>⼩区平台<h1>"></rich-text>
    2.接收对象数组
  1.按钮标签外观属性size type
  2.开发能⼒属性 open-type
  　1.contact 客户开发流程
    1.要将测试号appid改为⾃已的appid
      2.去注册获取⾃已的appid(如果绑字⽤了⾃已的邮箱，可以先到设置/账号与安全/更多安全设置/邮件地址下解除绑定)
    3.登录进⼊开发/开发管理/开发设置/复制开发者appID
    4.修改⼩程序开发编辑器中的appid (这个要保密)
      5.在⼩程序后台的功能到客服===>添加⼀个客户的号(⾃已⽤的就可以了) 
  　2.share 转发
      3.getPhoneNumber 获取⽤户⼿机号
      4.getUserInfo 获取⽤户信息
      5.feedback 打开“意见反馈”页⾯
  1.字体图标
  2.属性
属性类型默认值必填说明最低版本type string是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size number/string23否icon的⼤⼩
color string否icon的颜⾊，同css的color
9.单选框标签使⽤ 
  1 单选框
　单项选择器
  3.两个标签配合使⽤
  4.案例:  单选框男和⼥
  1.radio标签与⽗元素单项选择器radio-group来使⽤
  2.value选中的单选框的值
  3.给单项选择器radio-group绑定change事件(关键字: bindchange="事件名称")
  4.需要在页⾯中显不选中的值
  5.代码:
<radio-group bindchange="handlechange">
<radio color="red" value="m">男</radio>
<radio value="f">⼥</radio>
</radio-group>
<view>显⽰选中的值:{{gender}}</view>
wxml
Page({
/**
* 页⾯的初始数据
*/
data: {
gender:""
},
handlechange(e){
// 1.获取单选框中的值
let gender=e.detail.value
// 2.把值赋给data中的gender
this.setData({
gender
})
}
})
js
10.单选框标签使⽤ 
　多选框
　多项选择器
  3.两个标签配合使⽤
  4.案例代码:
<view>
<checkbox-group bindchange="handitemchange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox> </checkbox-group>
</view>
<view>选中的值:{{checkedlist}}</view>
wxml
Page({
data: {
list:[
{
id:0,
name:"苹课",
value:"apple"
},
{
id:1,
name:"⾹蕉",
value:"bananer"
},
{
id:2,
name:"葡萄",
value:"grage"
}
],
// 3.定义⼀个数组存放选中的值
checkedlist:[]
},
// 多选柜的选中事件
handitemchange(e){
// 1.获取选中的值
const checkedlist=e.detail.value
// 2.进⾏赋值
jquery自动轮播图代码this.setData({
checkedlist
})
}
})
js
t ⾃定义组件标签
  1.创建组件
    1.根⽬录下新建⽂件夹(新建⽂件夹点击资源管理器最下⾯空⽩处)  component
    2.再创建⼀个⽂件夹(组件名)
    3.创建组件(四个⽂件)，右击创建component 创建
  2.注册组件：哪⼀个页⾯使⽤就在哪⼀个页⾯的json⽂件的 usingComponents 中注册
  3.使⽤组件：在注册组件对应的wxml中使⽤
  1.应⽤⽣命周期：指的是组件⾃⾝的⼀些函数，这些函数在特殊的时间点或遇到⼀些特殊的框架事件时被⾃动触发
  2.页⾯⽣命周期
⼩程序相关的框架(不分先后顺序)
1.腾讯 wepy 语法类似vue
2.美团 mpvue 语法似拟vue
3.京东 taro 类似 react
4.滴滴 chameleon
5.uni-app 类似vue
6.原⽣框架 MINA

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。