两万字：讲述微信小程序之组件

最新推荐文章于 2024-03-15 15:09:22 发布
最新推荐文章于 2024-03-15 15:09:22 发布
阅读量1.5k 收藏 17
点赞数 27
分类专栏： 微信小程序 文章标签： 前端 微信小程序 javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbcyllqj/article/details/127197146
版权

我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于微信小程序专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~

目录

前言

组件书写的格式

所有组件有哪些及码文结合解释

一、视图容器

1.view

·hover-class：

​编辑

·hover-stop-propagation：

没有设置·hover-stop-propagation这个属性时

​编辑

 设置·hover-stop-propagation这个属性时

​编辑

 ·hover-start-time

 ·        

 2.swiper（轮播）

 当然这里有一些常用的属性例如：

 由以上两个演示我们可以看出什么不同？

注意到wxml里面的结构了吗？

注意

3.scroll-view（可滚动视图）

以上表格中是我们开发时最常用的几个属性

微信小程序中具体的写方式的方法常见的几种：

1.通过calss写样式

 2.通过id写样式

 3.通过组件名写样式

4.通过wxml内部写样式

 4.movable-area（可移动、放大区域，父组件）

5.movable-view（可移动、放大区域，子组件）

 常用的几个属性

6.cover-image目前原生组件均已支持同层渲染，建议使用 image 替代

7.cover-view目前原生组件均已支持同层渲染，建议使用 view 替代

二、基本内容

1.icon（图标）

2.progress（进度条）

常有的几个属性

3.text（文本组件）

3.表单组件（常常与JavaScript结合完成逻辑事件）

1.button（按钮）

2. checkbox（多选项目）

3.checkbox-group（多项选择器，内部由多个checkbox组成。）

 4.form（表单）

5.input（输入框）

type类型：

 confirm-type类型：

 举例：

1.右下角按钮为“发送”

 2.右下角按钮为“搜索”

 3.右下角按钮为“下一步”

 4.右下角按钮为“前往/开始”

 5.右下角按钮为“完成”

 6.picker（从底部弹起的滚动选择器）

举例：

1.selector：普通选择器

 2.multiSelector：多列选择器

 3.time：时间选择器

 4.date：日期选择器

5. region：省市区选择器

 

7.radio(单选项目)

8.radio-group(单项选择器，内部由多个 radio 组成)

 9.slider（滑动选择器）

10.switch（开关选择器）

 11.textarea（多行输入框）

 4.媒体组件

1.image（存放图片组件）

2.video（存视频组件）

3.camera（系统相机）

前言

        组件是视图层的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序后，界面中的图片、文字等都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。

组件书写的格式

<标签名称 属性="值">内容</标签名称>

所有组件有哪些及码文结合解释

一、视图容器

1.view

属性类型默认值必填说明最低版本
hover-classstringnone否指定按下去的样式类。当 hover-class="none" 时，没有点击态效果1.0.0
hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timenumber50否按住后多久出现点击态，单位毫秒1.0.0
hover-stay-timenumber400否手指松开后点击态保留时间，单位毫秒1.0.0

·hover-class：

解释：这个属性时当我们写了两个样式的时候，当我们开打开发者工具时看到的时样式1，但是当我们点击样式1的时候会变化成样式2的效果。

wxml：

<view class="lqj1" hover-class="lqj2"></view>

wxss：

.lqj1{
  background-color: red;//背景为红色
  width: 300rpx;//宽度
  height: 300rpx;//高度
}
.lqj2{
  background-color: blue;//背景为蓝色
  width: 300rpx;//宽度
  height: 300rpx;//高度
}

效果：

·hover-stop-propagation：

解释：是否阻止父组件的点击状态，就是当我们两个view组件成嵌套关系时，尤其是当父view的样式面积较大而子view的样式面积较小时，会出现当我点击子view时父view也跟着变化，所以此属性的设置可以消除此问题。

没有设置·hover-stop-propagation这个属性时

wxml：

<view class="lqj3" hover-class="lqj4">
  <view class="lqj1" hover-class="lqj2"></view>
</view>

wxss：

.lqj1{
  background-color: red;
  width: 300rpx;
  height: 300rpx;
}
.lqj2{
  background-color: blue;
  width: 300rpx;
  height: 300rpx;
}
.lqj3{
  background-color: chartreuse;
  width: 600rpx;
  height: 600rpx;
}
.lqj4{
  background-color: darkmagenta;
  width: 600rpx;
  height: 600rpx;
}

 效果：我们会发现问题，就是：但点击子组件时，子组件在变化的同时父组件也在变化

 设置·hover-stop-propagation这个属性时

wxml：

<view class="lqj3" hover-class="lqj4" >
  <view class="lqj1" 
  hover-class="lqj2"
  hover-stop-propagation="true">
  </view>
</view>

wxss：

.lqj1{
  background-color: red;
  width: 300rpx;
  height: 300rpx;
}
.lqj2{
  background-color: blue;
  width: 300rpx;
  height: 300rpx;
}
.lqj3{
  background-color: chartreuse;
  width: 600rpx;
  height: 600rpx;
}
.lqj4{
  background-color: darkmagenta;
  width: 600rpx;
  height: 600rpx;
}

 效果：我们会发现问题，就是：但点击哪个组件，就只有被点击的组件变化

 ·hover-start-time

解释：当组件有hover-class这个属性时，点击组件时多久才会从样式1变换到样式2

wxml：

<view class="lqj1" 
  hover-class="lqj2"
  hover-start-time="500">
</view>

wxss：

.lqj1{
  background-color: red;
  width: 300rpx;
  height: 300rpx;
}
.lqj2{
  background-color: blue;
  width: 300rpx;
  height: 300rpx;
}

效果：当点击组件时会发现，组件没有立即从样式1变换到样式2，而是等了500毫秒

 ·        

解释：当组件有hover-class这个属性时，点击后从样式1变换到样式2之后，在样式2停留多长时间，再变回原来的样式1

wxml：

<view class="lqj1" 
  hover-class="lqj2"
  hover-stay-time="1000">
</view>

wxss：

.lqj1{
  background-color: red;
  width: 300rpx;
  height: 300rpx;
}
.lqj2{
  background-color: blue;
  width: 300rpx;
  height: 300rpx;
}

效果：点击会发现，从样式1变换到样式2后，再样式2停留了一段时间才变回到了原来的样式1

 2.swiper（轮播）

属性类型默认值必填说明
indicator-dotsbooleanfalse否是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
currentnumber0否当前所在滑块的 index1.0.0
intervalnumber5000否自动切换时间间隔1.0.0
durationnumber500否滑动动画时长1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0
verticalbooleanfalse否滑动方向是否为纵向1.0.0
previous-marginstring"0px"否前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值1.9.0
next-marginstring"0px"否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值1.9.0
snap-to-edgebooleanfalse否当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素2.12.1
display-multiple-itemsnumber1否同时显示的滑块数量1.9.0
easing-functionstring"default"否指定 swiper 切换缓动动画类型2.6.5

 当然这里有一些常用的属性例如：

·indicator-dots        解释：是否显示面板指示点

·autoplay                解释：是否自动切换

·interval                  解释：自动切换时间间隔

·circular                 解释：是否采用衔接滑动

·duration（可不设置，默认值为500ms）                解释：滑动动画时长

一般在真正开发的时候轮播的效果会把上面的几个经常用的属性结合到一起用，下面我会把这几个常用的属性写到一起，来解释：

1.带有circular属性的演示

wxml：

<swiper indicator-dots="true"
        autoplay="true"
        interval="1000"
        circular="true"
        duration="600">
  <swiper-item><view class="lqj1"></view></swiper-item>
  <swiper-item><view class="lqj2"></view></swiper-item>
  <swiper-item><view class="lqj3"></view></swiper-item>
</swiper>

wxss：

.lqj1{
  background-color: red;
  width: 100%;
  height: 600rpx;
}
.lqj2{
  background-color: blue;
  width: 100%;
  height: 600rpx;
}
.lqj3{
  background-color: chartreuse;
  width: 100%;
  height: 600rpx;
}

效果展示：

 2.不带circular属性的演示

wxml：

<swiper indicator-dots="true"
        autoplay="true"
        interval="1000"
        duration="600">
  <swiper-item><view class="lqj1"></view></swiper-item>
  <swiper-item><view class="lqj2"></view></swiper-item>
  <swiper-item><view class="lqj3"></view></swiper-item>
</swiper>

wxss：

.lqj1{
  background-color: red;
  width: 100%;
  height: 600rpx;
}
.lqj2{
  background-color: blue;
  width: 100%;
  height: 600rpx;
}
.lqj3{
  background-color: chartreuse;
  width: 100%;
  height: 600rpx;
}

效果显示：

 由以上两个演示我们可以看出什么不同？

答案：1.的演示结果在显示到最后一个蓝色轮播块的时候后快速往前轮播到第一张红色轮播块，然后再一次的重复轮播

           2.的演示结果在显示到最后一个蓝色轮播块的时候，"很丝滑"的进入另一轮重复轮播

这也是·circular ——是否采用衔接滑动起到的效果！

注意到wxml里面的结构了吗？

要想实现一个轮播的效果，我们采用的组件之间嵌套的方式：

<swiper>
     <swiper-item>要显示的内容（图片或其他）</swiper-item>
</swiper>

注意

<swiper>与<swiper-item>这两个都是组件哦~但是他们只能以上面的方式存在，所以我们可以把它们称作"上阵父子兵"

3.scroll-view（可滚动视图）

属性类型默认值必填说明
scroll-xbooleanfalse否允许横向滚动1.0.0
scroll-ybooleanfalse否允许纵向滚动1.0.0
scroll-topnumber/string否设置竖向滚动条位置1.0.0
scroll-leftnumber/string否设置横向滚动条位置1.0.0

以上表格中是我们开发时最常用的几个属性

·scroll-x （默认值：false）               解释：允许横向滚动

·scroll-y（默认值：false）                解释：允许纵向滚动

·scroll-top                                          解释：设置竖向滚动条位置（因为横向的滚动条只能设置上下位置）

·scroll-left                                          解释：设置横向滚动条位置（因为纵向的滚动条只能设置左右位置）

下面我把开发中用到的两种滚动条的进行分别展示：

1.横向(注意设置横向的时应在scroll-view{}中写入 white-space: nowrap;并且在每一个子组件的样式中写入：display: inline-block;)

wxml：

<scroll-view scroll-x="true">
  <view class="lqj1">元素1</view>
  <view class="lqj2">元素2</view>
  <view class="lqj3">元素3</view>
  <view class="lqj4">元素4</view>
</scroll-view>

wxss:

scroll-view{
  height: 100%;
  width: 100%;
  background-color: darkorange;
  white-space: nowrap;
}
.lqj1{
  display: inline-block;
  background-color: red;
  width: 500rpx;
  height: 300rpx;
}
.lqj2{
  display: inline-block;
  background-color: blue;
  width: 500rpx;
  height: 300rpx;
}
.lqj3{
  display: inline-block;
  background-color: chartreuse;
  width: 500rpx;
  height: 300rpx;
}
.lqj4{
  display: inline-block;
  background-color: darkmagenta;
  width: 500rpx;
  height: 300rpx;
}

效果展示：

 

2.纵向

wxml:

<scroll-view scroll-y="true">
  <view class="lqj1">元素1</view>
  <view class="lqj2">元素2</view>
  <view class="lqj3">元素3</view>
  <view class="lqj4">元素4</view>
</scroll-view>

wxss:

scroll-view{
  height: 600rpx;
  width: 200rpx;
}
.lqj1{
  display: inline-block;
  background-color: red;
  width: 500rpx;
  height: 300rpx;
}
.lqj2{
  display: inline-block;
  background-color: blue;
  width: 500rpx;
  height: 300rpx;
}
.lqj3{
  display: inline-block;
  background-color: chartreuse;
  width: 500rpx;
  height: 300rpx;
}
.lqj4{
  display: inline-block;
  background-color: darkmagenta;
  width: 500rpx;
  height: 300rpx;
}

效果演示：

 

微信小程序中具体的写方式的方法常见的几种：

1.通过calss写样式

wxml：

<view class="lqj1"></view>

 wxss：

.lqj1{
  display: inline-block;
  background-color: red;
  width: 500rpx;
  height: 300rpx;
}

 2.通过id写样式

wxml：

<view id="lqj1"></view>

wxss：

#lqj1{
  display: inline-block;
  background-color: red;
  width: 500rpx;
  height: 300rpx;
}

 3.通过组件名写样式

wxml：

<view></view>

 wxss：

view{
  display: inline-block;
  background-color: red;
  width: 500rpx;
  height: 300rpx;
}

4.通过wxml内部写样式

wxml：

<view style="background-color: red;width: 500rpx;height: 300rpx;"></view>

这里注意：

用的是组件名写样式

wxml中有组件名（例如上面的<scroll-view></scroll-view>）我们可以直接在wxss中写入组件名进行样式的编写，这一种写样式的方法！

举例：

wxml：

<scroll-view scroll-x="true"></scroll-view>

 wxss：

scroll-view{
  height: 100%;
  width: 100%;
  background-color: darkorange;
  white-space: nowrap;
}

 4.movable-area（可移动、放大区域，父组件）

属性类型默认值必填说明最低版本
scale-areaBooleanfalse否当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area1.9.90

·scale-area （默认值：false）解释：当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

5.movable-view（可移动、放大区域，子组件）

属性类型默认值必填说明最低版本
directionstringnone否movable-view的移动方向，属性值有all、vertical、horizontal、none1.2.0
inertiabooleanfalse否movable-view是否带有惯性1.2.0
out-of-boundsbooleanfalse否超过可移动区域后，movable-view是否还可以移动1.2.0
xnumber/string否定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画；单位支持px（默认）、rpx；1.2.0
ynumber/string否定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画；单位支持px（默认）、rpx；1.2.0
dampingnumber20否阻尼系数，用于控制 x 或y改变时的动画和过界回弹的动画，值越大移动越快1.2.0
frictionnumber2否摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值1.2.0
disabledbooleanfalse否是否禁用1.9.90
scalebooleanfalse否是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内1.9.90
scale-minnumber0.5否定义缩放倍数最小值1.9.90
scale-maxnumber10否定义缩放倍数最大值1.9.90
scale-valuenumber1否定义缩放倍数，取值范围为 0.5 - 101.9.90
animationbooleantrue否是否使用动画2.1.0

 常用的几个属性

·direction                解释：movable-view的移动方向，属性值有all、vertical、horizontal、none

·inertia  （默认值：false）                    解释：movable-view是否带有惯性

·scale        （默认值：false）                解释：是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内

wxml：

<movable-area class="lqj5">
  <movable-view direction="all"out-of-bounds="true"scale="true">
  </movable-view>
</movable-area>

wxss：

movable-view{
  height: 200rpx;
  width: 200rpx;
  background-color: darkorange;
}
.lqj5{
  background-color: darkmagenta;
  width: 500rpx;
  height: 500rpx;
}

展示效果：

6.cover-image目前原生组件均已支持同层渲染，建议使用 image 替代

7.cover-view目前原生组件均已支持同层渲染，建议使用 view 替代

二、基本内容

1.icon（图标）

属性类型默认值必填说明最低版本
typestring是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear1.0.0
sizenumber/string23否icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。1.0.0
colorstring否icon的颜色，同 css 的color1.0.0

 

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

·size                解释：icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。

·color              解释：icon的颜色，同 css 的color（支持rbg及颜色名）

wxml：

<icon type="success"size="100rpx"></icon>（单选）已选择
<icon type="success_no_circle"size="100rpx"></icon>（多选）已选择
<icon type="info"size="100rpx"></icon>提示
<icon type="warn"size="100rpx"></icon>强力警告
<icon type="waiting"size="100rpx"></icon>等待
<icon type="cancel"size="100rpx"></icon>停止
<icon type="download"size="100rpx"></icon>下载
<icon type="search"size="100rpx"></icon>搜索图标
<icon type="clear"size="100rpx"></icon>关闭

效果展示：

2.progress（进度条）

属性类型默认值必填说明最低版本
percentnumber否百分比0~1001.0.0
show-infobooleanfalse否在进度条右侧显示百分比1.0.0
border-radiusnumber/string0否圆角大小2.3.1
font-sizenumber/string16否右侧百分比字体大小2.3.1
stroke-widthnumber/string6否进度条线的宽度1.0.0
colorstring#09BB07否进度条颜色（请使用activeColor）1.0.0
activeColorstring#09BB07否已选择的进度条的颜色1.0.0
backgroundColorstring#EBEBEB否未选择的进度条的颜色1.0.0
activebooleanfalse否进度条从左往右的动画1.0.0
active-modestringbackwards否backwards: 动画从头播；forwards：动画从上次结束点接着播1.7.0
durationnumber30否进度增加1%所需毫秒数2.8.2
bindactiveendeventhandle否动画完成事件2.4.1

常有的几个属性

·percent                解释：百分比0~100（percent="xxx"）xxx是输入的数字如：输入20，进度条会以20%的进度渲染

·show-info   （默认值）          解释：在进度条右侧显示百分比

·border-radius                解释：圆角大小（与wxss样式属性一样）

·font-size（默认值：16）解释：右侧百分比字体大小（与wxss样式属性一样）

·stroke-width（默认值：6）                     解释：进度条线的宽度

wxml：

<progress percent="30" show-info="true" border-radius="20rpx" font-size="50rpx" stroke-width="20"></progress>

效果演示：（当然以后开发熟悉了以后，可以通过js中一些逻辑事件函数来控制动态）

 

3.text（文本组件）

解释：此组件只能存放及字母及数字

3.表单组件（常常与JavaScript结合完成逻辑事件）

1.button（按钮）

解释：此组件的样式与wxss中规定的样式一致，此组件可以通过绑定点击事件与JavaScript之间联系完成开发者想要的逻辑事件

举例：

wxml：

<view>智障是{{name}}</view>
<button bindtap="dianji">点我出现</button>

js：

// pages/shouye/shouye.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:''

  },
  dianji:function(){
    this.setData({
      name:'lqj'
    })
  }
  
})

效果显示：

2. checkbox（多选项目）

属性类型默认值必填说明最低版本
valuestring否checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value1.0.0
disabledbooleanfalse否是否禁用1.0.0
checkedbooleanfalse否当前是否选中，可用来设置默认选中1.0.0
colorstring#09BB07否checkbox的颜色，同 css 的color1.0.0

·checked（默认值）                解释：当前是否选中，可用来设置默认选中

3.checkbox-group（多项选择器，内部由多个checkbox组成。）

属性类型默认值必填说明最低版本
bindchangeEventHandle否checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的 checkbox 的value的数组]}1.0.0

 举例

说明：当前我们只是演示静态的组件内容，以后会讲到他与JavaScript之间的通信（数据的传输）

wxml：

<checkbox-group>
  <checkbox></checkbox>
  <checkbox></checkbox>
  <checkbox></checkbox>
  <checkbox></checkbox>
</checkbox-group>

效果展示：

 4.form（表单）

将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

他作为一个与JavaScript相结合使用的组件，我们之后会仔细的讲到！现在我们只知道这个概念就ok！

5.input（输入框）

属性类型默认值必填说明
valuestring是输入框的初始内容1.0.0
typestringtext否input 的类型1.0.0
passwordbooleanfalse否是否是密码类型1.0.0
placeholderstring是输入框为空时占位符1.0.0
placeholder-stylestring是指定 placeholder 的样式1.0.0
placeholder-classstringinput-placeholder否指定 placeholder 的样式类1.0.0
disabledbooleanfalse否是否禁用1.0.0
maxlengthnumber140否最大输入长度，设置为 -1 的时候不限制最大长度1.0.0
cursor-spacingnumber0否指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离1.0.0
auto-focusbooleanfalse否(即将废弃，请直接使用 focus )自动聚焦，拉起键盘1.0.0
focusbooleanfalse否获取焦点1.0.0
confirm-typestringdone否设置键盘右下角按钮的文字，仅在type='text'时生效1.1.0
always-embedbooleanfalse否强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)2.10.4
confirm-holdbooleanfalse否点击键盘右下角按钮时是否保持键盘不收起1.1.0
cursornumber是指定 focus 时的光标位置1.5.0
selection-startnumber-1否光标起始位置，自动聚集时有效，需与 selection-end 搭配使用1.9.0
selection-endnumber-1否光标结束位置，自动聚集时有效，需与 selection-start 搭配使用1.9.0
adjust-positionbooleantrue否键盘弹起时，是否自动上推页面1.9.90
hold-keyboardbooleanfalse否focus时，点击页面的时候不收起键盘2.8.2
safe-password-cert-pathstring否安全键盘加密公钥的路径，只支持包内路径2.18.0
safe-password-lengthnumber否安全键盘输入密码长度2.18.0
safe-password-time-stampnumber否安全键盘加密时间戳2.18.0
safe-password-noncestring否安全键盘加密盐值2.18.0

·value （string字符串类型）               解释：输入框的初始内容

·type        （string字符串类型）          解释：input 的类型

type类型：

text文本输入键盘
number数字输入键盘
idcard身份证输入键盘
digit带小数点的数字键盘
safe-password密码安全输入键盘 
nickname昵称输入键盘

举例：

wxml：

  <input type="number" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput1'placeholder="请输入bumber型"/>
  <input type="digit" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput2'placeholder="请输入digit型"/>
  <input type="idcard" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput3'placeholder="请输入idcard型"/>
  <input type="text" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="请输text入型"/>

js：

  dianjiinput1:function(e){
    console.log(typeof(e.detail.value))
    console.log(e)
  },
  dianjiinput2:function(e){
    console.log(typeof(e.detail.value))
  },
  dianjiinput3:function(e){
    console.log(typeof(e.detail.value))
  },
  dianjiinput4:function(e){
    console.log(typeof(e.detail.value))
  },

效果展示：

​

 confirm-type类型：

合法值说明
send右下角按钮为“发送”
search右下角按钮为“搜索”
next右下角按钮为“下一个”
go右下角按钮为“前往”
done右下角按钮为“完成”

 举例：

1.右下角按钮为“发送”

wxml：

  <input type="text" confirm-type="send" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>

效果：

​

 2.右下角按钮为“搜索”

wxml：

  <input type="text" confirm-type="search" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>

 效果：

​

 3.右下角按钮为“下一步”

wxml：

  <input type="text" confirm-type="next" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>

效果：

​

 4.右下角按钮为“前往/开始”

wxml：

  <input type="text" confirm-type="go" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>

效果：

​

 5.右下角按钮为“完成”

wxml：

  <input type="text" confirm-type="done" style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="文本输入键盘"/>

效果：

​

 6.picker（从底部弹起的滚动选择器）

属性类型默认值必填说明
header-textstring否选择器的标题，仅安卓可用2.11.0
modestringselector否选择器类型1.0.0
disabledbooleanfalse否是否禁用1.0.0
bindcanceleventhandle否取消选择时触发1.9.90

·header-text                解释：选择器的标题，仅安卓可用

·mode                         解释：选择器类型

mode的类型包括：

selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
region省市区选择器

举例：

1.selector：普通选择器

wxml：

<view>
  <view>普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view>
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>

js：

Page({
    data: {
        array: ['剑豪', '剑圣', '剑姬', '剑魔'],
        objectArray: [
      {
        id: 0,
        name: '剑豪'
      },
      {
        id: 1,
        name: '剑圣'
      },
      {
        id: 2,
        name: '剑姬'
      },
      {
        id: 3,
        name: '剑魔'
      }
    ],
    index: 0,
    },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
})

效果展示：

​

 2.multiSelector：多列选择器

wxml：

<view>
  <view>多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>

js：

Page({
    data: {
            multiArray: [['英雄联盟', '地下城与勇士'], ['上路', '打野', '中路', 'ADC', '辅助',], ['诺手', '狗头']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: '英雄联盟'
        },
        {
          id: 1,
          name: '地下城与勇士'
        }
      ], [
        {
          id: 0,
          name: '上路'
        },
        {
          id: 1,
          name: '打野'
        },
        {
          id: 2,
          name: '中路'
        },
        {
          id: 3,
          name: 'ADC'
        },
        {
          id: 3,
          name: '辅助'
        }
      ], [
        {
          id: 0,
          name: '诺手'
        },
        {
          id: 1,
          name: '狗头'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = ['上路', '打野', '中路', 'ADC', '辅助'];
            data.multiArray[2] = ['诺手', '狗头'];
            break;
          case 1:
            data.multiArray[1] = ['鬼剑', '枪剑', '魔法师'];
            data.multiArray[2] = ['红眼', '阿修罗'];
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['诺手', '狗头'];
                break;
              case 1:
                data.multiArray[2] = ['狮子狗','螳螂','豹女','蜘蛛'];
                break;
              case 2:
                data.multiArray[2] = ['亚索', '冰女','卡牌','艾克'];
                break;
              case 3:
                data.multiArray[2] = ['烬', '卡沙', '女枪','卢锡安'];
                break;
              case 4:
                data.multiArray[2] = ['泰坦', '莫甘娜', '派克', '日女'];
                break;
            }
            break;
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['红眼', '阿修罗'];
                break;
              case 1:
                data.multiArray[2] = ['机械', '前线'];
                break;
              case 2:
                data.multiArray[2] = ['逐风', '元素', '嗜血'];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        break;
    }
    console.log(data.multiIndex);
    this.setData(data);
  },
})

效果：

​

 3.time：时间选择器

wxml：

<view>
  <view>时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view>
      当前选择: {{time}}
    </view>
  </picker>
</view>

js：

Page({
    data: {
    time: '12:01'
    },
  bindTimeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },

})

效果：

​

 4.date：日期选择器

wxml：

<view>
  <view>日期选择器</view>
  <picker mode="date" value="{{date}}" start="2000-09-01" end="2050-09-01" bindchange="bindDateChange">
    <view>
      当前选择: {{date}}
    </view>
  </picker>
</view>

js：

Page({
    data: {
        date: '2016-09-01'
    },
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },

})

效果：

​

5. region：省市区选择器

wxml：

<view>
  <view>省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view>
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

js：

    Page({
    data: {
        region: ['广东省', '广州市', '海珠区']
    },
    bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

​

 

7.radio(单选项目)

属性类型默认值必填说明最低版本
valuestring否radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value1.0.0
checkedbooleanfalse否当前是否选中1.0.0
disabledbooleanfalse否是否禁用1.0.0
colorstring#09BB07否radio的颜色，同 css 的color1.0.0

8.radio-group(单项选择器，内部由多个 radio 组成)

举例：单项选择器和多项选择器一样，都是与js的后台相同，但是我们这里先进行静态的编写（之后会讲解js相关）

wxml：

<radio-group>
  <radio></radio>
  <radio></radio>
  <radio></radio>
  <radio></radio>
</radio-group>

效果：

​

 9.slider（滑动选择器）

属性类型默认值必填说明最低版本
minnumber0否最小值1.0.0
maxnumber100否最大值1.0.0
stepnumber1否步长，取值必须大于 0，并且可被(max - min)整除1.0.0
disabledbooleanfalse否是否禁用1.0.0
valuenumber0否当前取值1.0.0
colorcolor#e9e9e9否背景条的颜色（请使用 backgroundColor）1.0.0
selected-colorcolor#1aad19否已选择的颜色（请使用 activeColor）1.0.0
activeColorcolor#1aad19否已选择的颜色1.0.0
backgroundColorcolor#e9e9e9否背景条的颜色1.0.0
block-sizenumber28否滑块的大小，取值范围为 12 - 281.9.0
block-colorcolor#ffffff否滑块的颜色1.9.0
show-valuebooleanfalse否是否显示当前 value1.0.0
bindchangeeventhandle否完成一次拖动后触发的事件，event.detail = {value}1.0.0
bindchangingeventhandle否拖动过程中触发的事件，event.detail = {value}2.18.0

·min                解释：最小值

·max                解释：最大值

举例：

wxml：

<view>
    <view>
        <text>slider</text>
        <text>滑块</text>
    </view>
    <view>
        <view>
            <text>设置left/right icon</text>
            <view>
                <slider left-icon="cancel" right-icon="success_no_circle"/>
            </view>
        </view>

        <view>
            <text>设置step</text>
            <view>
                <slider step="5"/>
            </view>
        </view>

        <view>
            <text>显示当前value</text>
            <view>
                <slider show-value/>
            </view>
        </view>

        <view>
            <text>设置最小/最大值</text>
            <view>
                <slider min="0" max="200" show-value/>
            </view>
        </view>
    </view>
</view>

效果：

​

 

10.switch（开关选择器）

wxml：

第一种样式
<switch type="switch"/>
第二种样式
<switch type="checkbox"/>

 效果：

 11.textarea（多行输入框）

属性类型默认值必填说明最低版本
valuestring否输入框的内容1.0.0
placeholderstring否输入框为空时占位符1.0.0
placeholder-stylestring否指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight1.0.0
placeholder-classstringtextarea-placeholder否指定 placeholder 的样式类1.0.0
disabledbooleanfalse否是否禁用1.0.0
maxlengthnumber140否最大输入长度，设置为 -1 的时候不限制最大长度1.0.0
auto-focusbooleanfalse否自动聚焦，拉起键盘。1.0.0
focusbooleanfalse否获取焦点1.0.0
auto-heightbooleanfalse否是否自动增高，设置 auto-height 时，style.height不生效1.0.0
fixedbooleanfalse否如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true1.0.0
cursor-spacingnumber0否指定光标与键盘的距离。取`textarea`距离底部的距离和`cursor-spacing`指定的距离的最小值作为光标与键盘的距离1.0.0
cursornumber-1否指定 focus 时的光标位置1.5.0
show-confirm-barbooleantrue否是否显示键盘上方带有”完成“按钮那一栏1.6.0
selection-startnumber-1否光标起始位置，自动聚集时有效，需与`selection-end`搭配使用1.9.0
selection-endnumber-1否光标结束位置，自动聚集时有效，需与`selection-start`搭配使用1.9.0
adjust-positionbooleantrue否键盘弹起时，是否自动上推页面1.9.90
hold-keyboardbooleanfalse否focus时，点击页面的时候不收起键盘2.8.2
disable-default-paddingbooleanfalse否是否去掉 iOS 下的默认内边距2.10.0
confirm-typestringreturn否设置键盘右下角按钮的文字2.13.0

wxml：

<view>
  <textarea auto-height placeholder="自动变高" />
</view>
<view>
  <textarea placeholder="提示颜色是红色的" placeholder-style="color:red;"  />
</view>
<view>
  <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view>
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view>
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<view>
  <form bindsubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea"/>
  </form>
</view>

效果：当我们用手机点击时会触发不同的效果！

 4.媒体组件

1.image（存放图片组件）

这里的图片路径是我之前传在我的云端中的

<image src="cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/img/1656144106002.jpg"></image>

2.video（存视频组件）

用法和image相同也是：src导入路径即可

<video src=""></video>

3.camera（系统相机）

功能：

扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 CameraContext.setZoom。

wxml：

<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

 js：

Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

效果显示：

 

淼学派对
关注
  • 27
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 29
    评论
专栏目录
微信小程序
chen_haotao的博客
03-19 3025
微信小程序小结 微信小程序提供了一个简单、高效的应用开发框架和丰富的组件及API。 新建页面在app.json中pages里面创建，显示当前页面新建的页面，应放在pages里面的第一位。 新建的页面应有四个文件:.js文件.json文件.wxss文件.wxml文件 .js文件：书写页面js代码 .wxss文件：书写页面样式代码 .wxml文件：书写页面内容 框架：小程序配置： 全局配置： entryPagePath： 小程序默认启动首页 pages：页面路径列表 window：全局的默认窗口表现 ..
微信小程序入门②基本布局容器的介绍
ABC68675的博客
01-19 1903
基本布局容器的介绍 本文将对块标签view以及行标签text进行简要代码介绍。 一、View标签 在微信开放文档可以清楚地看到view标签的属性以及功能。 地址：https://developers.weixin.qq.com/miniprogram/dev/component/view.html 1、hover-class 创建好以下目录： text.wxml里使用hover-class属性，命名为boxHover <view class="box" hover-class="boxHover"
微信小程序demo组件：canvas股票分时图(源代码+截图)
06-19
微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程
微信小程序map组件
weixin_41544335的博客
12-06 2821
记录一下在使用map组件的时候所遇到的问题 1.map组件中的show-location方法获取的定位点和，getLocation方法所获取的定位点不一致。 在map组件中有一个show-location属性，设置为true，就会显示一个绿色的当前位置的点。 使用getLocation获取当前位置，在markers中标记之后也可以获取当前位置的点 但是一开始两个点不一致。 后来查询之后发现是两个方法所用的坐标系不一致，将getLocation中的type设置为国测局坐标// GPS坐标系 // type:
【微信小程序】原生组件的分层渲染 和 同层渲染
最新发布
qq_17335549的博客
03-15 681
分层渲染就是，小程序原生组件是独立于 webview 的。所以无论如何原生组件的层级都高于 webview。两个层级是完全独立的，因此无法简单地通过使用。微信小程序的原生组件指的是，微信小程序语法中自带的 video 等标签。【这里的原生指的是微信小程序而不是 js】微信小程序的页面是基于 webview 的，其他的原生组件是独立于 webview 的。同层渲染，就是原生组件挂在到 webview 上。控制原生组件和非原生组件之间的相对层级。
cover-view
weixin_51035156的博客
12-25 677
75. <cover-view>组件是可以覆盖在原生组件上的视图，其内部可以包含的组件不包括以下哪个？ A、<canvas> B、<button> C、<cover-image> D、<cover-view> 目前原生组件均已支持同层渲染，建议使用view替代。可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher 只支持嵌套cover-view、cover-i...
微信小程序的渲染层开发
u014695938的博客
06-18 1902
微信小程序的渲染层由 WXML（WeiXin Markup Language）与 WXSS（WeiXinStyle Sheet）编写，并由组件来进行展示。将逻辑层的数据渲染成视图，同时将渲染层的事件发送给逻辑层。WXML 用于描述页面的结构，WXS（WeiXin Script）是微信小程序的一套脚本语言，结合 WXML 可以构建出页面的结构。WXSS是用于描述页面的样式。组件是微信小程序渲染层的基本组成单元。...
记一记小程序的坑
HiddenTroll_的博客
04-18 475
一.自定义 custom-tab-bar 底部导航不显示 原因：当初使用了vant组件中的Tabbar 标签栏 来自定义重构，但是真机调试一直不显示，原来是在最外层包裹了cover-view，导致被样式被忽略 cover-view 基础库 1.4.0 开始支持，低版本需做兼容处理。 覆盖在原生组件之上的文本视图。 目前原生组件均已支持同层渲染，建议使用view替代。可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher 只...
原生组件同层渲染问题 uniapp 微信小程序
biubiubiuPlus的博客
11-04 1704
使用uniapp开发微信小程序，解决原生组件的层级高问题 原生组件：map、video、canvas…… cover-view：覆盖在原生组件上的文本视图 cover-image：覆盖在原生组件上的图片 缺点：不支持嵌套其它组件 微信小程序：部分原生组件实现了同层渲染，在指定的基础库版本上，某些原生组件可无需使用cover-view覆盖 坑： //pages.json文件下的配置，不定不能加"renderingMode": "seperated" "globalStyle": { "navigatio
微信小程序气泡组件
01-27
微信小程序自定义气泡组件由于手机屏幕就那么点大，如果一堆按钮全部并排显示显示或挤在一起会显得比较的臃肿，为解决这个问题。所以编写了这个气泡组件。能根据元素内容的宽高自动计算气泡的定位气泡的内容项可以...
简陋至极：微信小程序日历组件（思路）
03-29
最近在做微信小程序项目，其中涉及到日历。一直以来，遇到日历，就是网上随便找个插件，这次心血来潮，想着自己去实现一下。这次不是封装功能强大，健硕完美的组件，只是记录一下，主体思路。更多功能还得根据项目...
微信小程序的「同层渲染」踩坑记
03-29
背景 近期在开发小程序中，接触最多的就是 canvas 了，期间又因为兼容性的问题，又经历了底层 API 的新旧版的替换，踩的坑可谓令人印象深刻。小程序（微信）的 canvas 与 HTML 标准的 canvas 有较大区别，就连小程序本身的 canvas 底层 API 都有两个大版本的区别（其实远古时期还有一个版本，但年代过于久远就不做考究了）。目前现存的两个版本的区别在于是否支持「同层渲染」。 同层渲染 小程序的内容大多是渲染在 WebView 上的，如果把 WebView 看成单独的一层，那么由系统自带的这些原生组件则位于另一个更高的层级（如 canvas、video）。两个层级是完全独
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
微信小程序后端demo：仿微信：基于node(源代码+截图)
06-19
微信小程序后端demo：仿微信：基于node(源代码+截图)微信小程序后端demo：仿微信：基于node(源代码+截图)微信小程序后端demo：仿微信：基于node(源代码+截图)微信小程序后端demo：仿微信：基于node(源代码+截图)微信...
小程序同层渲染解决原生组件的层级最高的问题
weixin_43831302的博客
12-05 2176
因为在项目中需要用到map这个原生组件，但是在map上又要用到picker和scroll-view这些组件，利用cover-view实现不了这些效果，所以就想到了小程序提出的同层渲染，这是第一次使用，写个小例子记录一下 膳食与营养膳食与营养膳食… 膳食与营养膳食与营养膳食… 膳食与营养膳食与营养膳食… 膳食与营养膳食与营养膳食… {{year}}年{{m...
21-3-29 小程序学习 001
Cang_Ye的博客
03-29 201
组件学习笔记 1、view 类似于HTML 中的div 内置属性： hover-class=“类名” // 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation // 指定是否阻止本节点的祖先节点出现点击态(阻止冒泡) hover-start-time=“时间（毫秒）” // 按住后多久出现点击态，单位毫秒 hover-stay-time=“时间（毫秒）” // 手指松开后点击态保留时间，单位毫秒
记录目前微信小程序遇到的BUG或者不兼容情况-持续更新
牧xin的博客
07-03 1702
使用图表wxcharts时,会出现层级问题 原因是wxcharts使用的是canvas组件,其属于原生组件,有原生组件的限制 解决办法,使用 cover-view 和 cover-image 组件解决其层级最高的限制 当使用cover-view与图表wxcharts同时使用时,进行滚动下滑时 安卓: cover-view正常固定在上方 ios: cover-view跟随一起滚动 没解决,因为并不影响功能 echarts,有时候会出现加载不出来的情况(偶尔) map组件中的标记点marker不支持标记
小程序 movable-view cover-view
ai5945fei的博客
11-05 448
<view>movable-view操作</view> <movable-area class="area"> <movable-view class="view" direction="all"> </movable-view> </movable-area> dircetion 可以拖动的方向 scale 可以双指拖放 inertia 惯性操作 页面高度100%设置 需要先设置page整页样式，注意page..
微信小程序之数据的同步渲染
weixin_51474815的博客
09-07 1706
微信小程序怎么实现的数据同步渲染
微信小程序:仿微信聊天界面源码.rar_
09-05
微信小程序:仿微信聊天界面源码.rar 是一个仿照微信聊天界面的小程序源码压缩文件。该源码文件可以用于开发微信小程序，使得小程序的聊天功能与微信类似。 在微信小程序中，用户可以通过该源码文件来创建一个聊天界面，实现类似微信的聊天功能。通过该源码文件，开发者可以了解和学习微信聊天界面的实现方法和技巧，快速搭建一个类似的聊天界面。 该源码文件中提供了一些常见的聊天功能，比如文字消息的发送和接收，图片消息的发送和接收，语音消息的发送和接收等等。开发者可以根据自己的需求对源码进行修改和扩展，以满足特定的功能需求。 使用该源码文件，开发者只需下载解压后，在微信小程序开发工具中导入该项目，即可实现仿微信聊天界面的小程序。开发者还可以根据自己的需求进行样式和功能的定制，使得聊天界面更加符合自己的设计要求。 总之，微信小程序:仿微信聊天界面源码.rar 是一个可以帮助开发者快速搭建仿微信聊天界面的小程序源码文件，通过学习和使用该源码文件，开发者可以轻松实现微信类似的聊天功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淼学派对

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值