微信小程序相机组件的使用
微信小程序相机组件的使用
- 新增相机组件,支持自定义拍照及录像界面
- 录音功能优化,支持更多格式和操作方式,支持自定义录音时长、采样率码率,支持边录边传
- 小程序内音频播放功能升级,支持更多格式和操作方式
- video、map及canvas功能持续优化,cover-view支持简单的动画效果
- onLaunch 及 onShow 时部分跳转小程序场景增加返回 referrerInfo.appId
二、关于组件更新和API更新的情况
![](/assets/blank.gif)
camera
组件是由客户端创建的原生组件,它的层级是最高的。可使用 cover-view
cover-image
覆盖在上面。
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
//index.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function (res){if (wx.createCameraContext()) {this.cameraContext = wx.createCameraContext('myCamera')} else {// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示wx.showModal({title: '提示',content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'})}},
startTakePhoto:function(){this.cameraContext.takePhoto({})
},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},pause:function(){wx.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})}
})00:00.container {
position: relative;
top: 50%;
height: 50px;
margin-top: -25px;
display: flex;
}
.camera{
height:1080rpx;
width: 750rpx;
}
.pause,.time {
flex: 1;
height: 100%;
}
.time {
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: white;
line-height: 50px;
}
.img {
width: 40px;
height: 40px;
margin: 5px auto;
}
五、最后效果如图
微信小程序相机组件的使用相关推荐
- 微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文 微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看 微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
- 微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败)
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
- 微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
- 小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
- 微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
- uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
- php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...
- 手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图 由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
最新文章
- 【LINUX】——linux如何使用Python创建一个web服务
- div img span 垂直居中问题
- MapReduce编程实战之“初识”
- mac版lightroom cc_Photoshop问世30周年 Mac和iPad版获重要更新
- np.c_与np.r_
- mfc判断文件是否被读写_迅为干货|标准io之一个字符的读写函数
- [vue] 怎么使css样式只在当前组件中生效?
- Photoshop 入门教程「9」如何增加画布的空间?
- TP5实践小总结(1)
- IT人员必学最基础知识(一)——总括
- Ubuntu——笔记本插入耳机没有声音的解决方案
- 图书馆管理系统 Java
- September 2006
- MM-DD-RRRR / MM-DD-YYYY 的区别 (Date format)
- Bootstrap第一章初识
- oracle的并行原理
- 计算机1为什么代表高电平,高电平为什么表示1,低电平为什么表示0?
- oracle显示无效的月份,Oracle插入失败:无效的月份
- Unhandled promise rejection --解决办法
- Unity(12)-场景切换