常见组件(标签)

https://developers.weixin.qq.com/miniprogram/dev/component/

1.view 代替以前的div标签

2.text

1.文本标签,类似span标签

2.只能㠌套自已text

3.长按文字可以复制(只有该标签有这个功能) 加了就可以复制了

4.可以对空格回车进行编码加了空格就可以显示了,decode可以解析的有   < > & '    ****

属性

类型

默认值

必填

说明

最低版本

selectable

boolean

false

否

文本是否可选 (已废弃)

1.1.0

user-select

boolean

false

否

文本是否可选，该属性会使文本节点显示为 inline-block

2.12.1

space

string

否

显示连续空格

1.4.0

decode

boolean

false

否

是否解码

1.4.0

3.image

图片图床:就是一个在网络上存储图片的地方

路过图床:https://imgchr.com/

SM.MS图床:https://sm.ms/

如果打算长期稳定使用请优先选择七牛云或者又拍云（存储在国内都需要有已备案域名），其次推荐的就是路过图床和SM.MS图床.

1.src 图片用外网地址

2.图片大小默认宽320px*高240px

3.mode 图片裁剪、缩放的模式,决定图片内容和图片标签宽高做适配

4.lazy-load 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

4.轮播图

1.swiper 轮播图的外层容器****

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-item 轮播图的轮播项****

wxml

5.navigator

1.导航标签相当于a标签

2.url 跳转路径(相对路径或绝对路径)

3.open-type="switchTab" 跳转方式

open-type 的合法值

值

说明

最低版本

navigate

对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能,默认值,保留当前页面(有返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面

redirect

对应 wx.redirectTo 的功能,关闭当前页面(无返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面****

switchTab

对应 wx.switchTab 的功能,跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

reLaunch

对应 wx.reLaunch 的功能,关闭所有页面，打开到应用内的某个页面,随便哪个页面都可跳(包括tabBar** )**

1.1.0

navigateBack

对应 wx.navigateBack 的功能,关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

1.1.0

exit

退出小程序，target="miniProgram"时生效

2.1.0

6.rich-text

1.富文本标签,相当于vue中的v-html

2.nodes属性来实现

1.接收标签字符串(常用)小区平台

">

2.接收对象数组

7.button

　 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 打开“意见反馈”页面

8.icon

1.字体图标

2.属性

属性

类型

默认值

必填

说明

最低版本

type

string

是

icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

1.0.0

size

number/string

23

否

icon的大小

1.0.0

color

string

否

icon的颜色，同css的color

1.0.0

9.单选框标签使用

1.radio 单选框

2.radio-group 单项选择器

3.两个标签配合使用

4.案例:  单选框男和女

1.radio标签与父元素单项选择器radio-group来使用

2.value选中的单选框的值

3.给单项选择器radio-group绑定change事件(关键字:** bindchange="事件名称")**

4.需要在页面中显不选中的值

5.代码:

男 女
显示选中的值:{{gender}}

wxml

Page({

/**
* 页面的初始数据
*/
data: {
gender:""
},
handlechange(e){
// 1.获取单选框中的值
let gender=e.detail.value
// 2.把值赋给data中的gender
this.setData({
gender
})
}
})

js

10.单选框标签使用

1.checkbox 多选框

2.checkbox-group 多项选择器

3.两个标签配合使用

4.案例代码:

{{item.name}}
选中的值:{{checkedlist}}

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.进行赋值
this.setData({
checkedlist
})
}
})

js

11.component 自定义组件标签

1.创建组件

1.根目录下新建文件夹(新建文件夹点击资源管理器最下面空白处)  component****

2.再创建一个文件夹(组件名)

3.创建组件(四个文件),右击创建component 创建

2.注册组件:哪一个页面使用就在哪一个页面的json文件的 usingComponents 中注册

3.使用组件:在注册组件对应的wxml中使用

12.小程序生命周期

1.应用生命周期:指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发

2.页面生命周期

小程序相关的框架(不分先后顺序)

1.腾讯 wepy 语法类似vue

2.美团 mpvue 语法似拟vue

3.京东 taro 类似 react

4.滴滴 chameleon

5.uni-app 类似vue

6.原生框架 MINA