我是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-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-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-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-area （默认值：false）解释：当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

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

常用的几个属性

·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（图标）

·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（进度条）

常有的几个属性

·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（多选项目）

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

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

举例

说明：当前我们只是演示静态的组件内容，以后会讲到他与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（输入框）

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

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

type类型：

举例：

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类型：

举例：

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-text                解释：选择器的标题，仅安卓可用

·mode                         解释：选择器类型

mode的类型包括：

举例：

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(单选项目)

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

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

wxml：

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

效果：

​

9.slider（滑动选择器）

·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（多行输入框）

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)}
})

效果显示：

两万字：讲述微信小程序之组件相关推荐

1. 一步步教你实现微信小程序自定义组件

   一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34   作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...

2. 微信小程序自定义组件(二)

   微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...

3. 微信小程序 MinUI 组件库系列之 abnor 异常流组件

   MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...

4. 微信小程序 常用组件

   欢迎体验个人小程序 表情小作坊 轻松定制表情包 三连图 文字转图片 吃什么都行 解决广大用户吃饭选择恐惧症的问题 微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧 https://mp.w ...

5. 微信小程序父组件向子组件传递数据

   @微信小程序父组件向子组件传递数据 具体步骤如下 首先使用微信开发者工具创建两个页面,父页面(即父组件)名为index,子页面(即子组件)名为Search. 先在index.js中定义一个名为sour ...

6. 微信小程序之组件 —— 微信小程序教程系列（19）

   什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...

7. 微信小程序 MinUI 组件库系列之 abnor 异常流组件 1

   MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...

8. 微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）

   微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...

9. taro微信小程序时间组件picker的使用--省市区三级联动

   微信小程序时间组件实现三级联动 项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明 相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...

最新文章

1. html语言区别大小写吗,用HTML语言制作静态网页基础问题1.标注是否区分大小写？2.下 爱问知识人...
2. 和平精英android怎么写符号,和平精英名字特殊符号怎么打 和平精英名字特殊符号输入方法...
3. ECMAScript5 Array新增方法
4. 井下三专两闭锁的内容_局部通风机三专两闭锁具体规定
5. 算法工程师，『工程』二字怎么破？
6. 我的成长笔记20210325（一天写了247条用例）
7. 怎样在spyder中暂停程序的运行
8. canvas.clipPath canvas.clipRect() 无效的原因
9. 洛谷P1005 矩阵取数游戏
10. 一个APP从启动到主页面显示经历了哪些过程？跳槽薪资翻倍
11. Android SDK Tools 历史版本下载
12. c语言编译器tc2.0,Wintc软件下载
13. Db2数据库：日期函数DATE函数
14. 今年，我只赚了一点点
15. 假设有一段英文，其中有单词中间的字母i误写为I，请编写程序进行矫正。
16. 关于assert函数的调用警告：implicit declaration of function 'ASSERT' is invalid in C99
17. about dream
18. 时尚主题快闪视频相册视频案例制作教程（可转载）
19. DHCP分配ip地址。0.0.0.0与255.255.255.255
20. otis电梯服务器tt使用说明_奥的斯电梯服务器使用说明

热门文章

1. 计算机操作系统读书笔记
2. App推广拉新的6大方式，你都玩得转吗？
3. 学习记录297@python全字符匹配
4. python扇贝单词书_扇贝单词如何创建自己的单词书
5. 解决小程序Uncaught ReferenceError: __wxConfig is not define的问题
6. 小论文撰写中常用单词的N种说法
7. 计算机机房内宜配置灭火器,GB／T 9361-2011_计算机场地安全要求（8页）-原创力文档...
8. 湖南科技大学研究生院计算机学院,湖南科技大学计算机科学与工程学院
9. 组织打羽毛球活动的一些心得
10. linux关闭内存插槽,linux 统管理中的查看内存插槽数、最大容量和频率