更新记录
1.0.0(2025-11-17)
下载此版本
功能实装
平台兼容性
uni-app(4.51)
| Vue2 |
Vue3 |
Vue2插件版本 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| × |
√ |
1.0.0 |
- |
- |
- |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| 3.7.12 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(4.71)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
微信小程序插件版本 |
| - |
- |
- |
- |
- |
3.7.12 |
1.0.0 |
请注意,此插件版本为vue3,且只兼容wx小程序,如果想要兼容其他端需要自行修改
效果展示:

使用前需要引入我的另一个canvas插件(必需)
https://ext.dcloud.net.cn/plugin?id=18922
这个插件会在此插件内部被调用,不下会报错
使用例子:
<template>
<view class="content">
<Wxcameraminiview @photoschange="photoschange" ref="cameraRef"></Wxcameraminiview>
<button @click="opencamera" >打开相机</button>
<button @click="closecamera" style="margin-top: 20px;" >关闭相机</button>
<view style="width: 100%;display: flex;">
<image v-for="(item,index) in picarr" :src="item" :key="index" style="width: 250px;" mode="widthFix"> </image>
</view>
</view>
</template>
<script>
import Wxcameraminiview from "@/uni_modules/wx-camera-miniview/wx-camera-miniview.vue"
export default {
data() {
return {
title: '你好',
picarr:[]
}
},
components:{
Wxcameraminiview
},
onLoad() {
},
methods: {
opencamera(){
this.$refs.cameraRef.opencameraview()
},
closecamera(){
this.$refs.cameraRef.closecameraview()
},
photoschange(arr){
this.picarr=arr
}
}
}
</script>
<style>
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: aliceblue;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
参数说明:
| 参数名 |
类型 |
说明 |
| opencameraview |
函数 |
打开相机 |
| closecamera |
函数 |
关闭相机 |
| photoschange |
函数 |
在点击拍照时会触发此回调,回调传递一个数组参数,每个元素为照片地址(string),注意:数组每次新增采用头插法,所以新照片链接的位置总是在第一个(下标为0) |