在微信开发者工具中 实现微信小程序之相机拍照及其相关功能的开发
微信小程序 - 相关知识
技术扩展 - 微信小程序 - 相机拍照功能
微信开发：前端 + 后端
小程序开发 - 准备工作：JavaScript + HTML + CSS
小程序 - 面向微信框架技术开发
帮助将自己开发的小程序发布上线 - 工程应用能力
掌握小程序的开发工具使用 - 下载 微信开发者工具
如何创建小程序项目
理解小程序项目里面每个开发文件作用
首先我们要掌握小程序的目录结构
pages：放置源代码的地方，如: wxml, wxss, js, json；
utils：封装js代码的地方，公共模块开发的程序都放置到utils里面；
app.json：全局代码配置文件，如：窗口颜色配置；窗口外观配置；
wxml：类似 html，完成界面设计；
wxss：类似 css；
js：标准的javascript文件 ；
其次要知道：
组件：类似 html 里面的标签
API：开发应用一些接口（拍照；地图；媒体；网络）
核心语法：数据绑定
拍照功能开发
第一步：搭建界面，只需要搭建一个拍照界面，则我们要去创建一个home.wxml；home.wxss；home.js ；
在app.json文件里面添加一个路径，则就会创建好拍照界面
{
"pages":[
"pages/home/home",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
第二步：添加素材 - 拍照 图片，手动先创建目录，添加图片 。
第三步：添加具备拍照功能 组件 camera
<camera style="width:100%; height: {{wh}}px;"></camera>// pages/home/home.js
Page({
/** * 页面的初始数据 */
data: {
// 获取设备的高度, 用wh来定义设备高度
wh: 0
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
// 获取设备的信息, 使用微信的开发文档
var sysinfo = wx.getSystemInfoSync();
// 获取设备的高度
var windowHeight = sysinfo.screenHeight; // 屏幕高度
this.setData({
wh: windowHeight
});
},
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function () { },
/** * 生命周期函数--监听页面显示 */
onShow: function () { },
/** * 生命周期函数--监听页面隐藏 */
onHide: function () { },
/** * 生命周期函数--监听页面卸载 */
onUnload: function () { },
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () { },
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () { },
/** * 用户点击右上角分享 */
onShareAppMessage: function () {
}
})第四步：加入拍照功能按钮图标
<camera style="width:100%; height: {{wh}}px;">
<cover-view class='btns-box'>
<cover-image src='/images/album.png'></cover-image>
<cover-image src='/images/camera.png'></cover-image>
<cover-image src='/images/reverse.png'></cover-image>
</cover-view>
</camera>.btns-box
{ display: flex; justify-content: space-around; align-items: center; position: absolute; bottom: 50rpx; width: 100%; z-index: 100;}
.btns-box cover-image
{ width: 150rpx; height: 150rpx;}第五步：拍照功能，提示：调用系统拍照程序；获取图片路径
<camera style="width:100%; height: {{wh}}px;" wx:if="{{src === ''}}">
<cover-view class='btns-box'>
<cover-image src='/images/album.png'></cover-image>
<cover-image src='/images/camera.png' bindtap="takePhotoMySelf"></cover-image>
<cover-image src='/images/reverse.png'></cover-image>
</cover-view>
</camera>
<!-- 加载拍照的图片 -->
<view wx:else>
<image src='{{src}}' style='height: {{wh}}px; width: 100%; display: block;'></image>
<button type='warn'>重拍</button></view>// pages/home/home.js
Page({
/** * 页面的初始数据 */
data: {
// 获取设备的高度, 用wh来定义设备高度
wh: 0,
// 存储拍照的图片地址
src: '' },
// 拍照功能
takePhotoMySelf: function() {
var ctx = wx.createCameraContext();
// 获取拍照权限
var _this = this;
ctx.takePhoto({
quality: 'high',
success: function(res) {
// 返回拍照执行成功函数
console.log(res.tempImagePath); // 拍照图片地址
_this.setData({
src: res.tempImagePath }) } }); },
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
// 获取设备的信息, 使用微信的开发文档
var sysinfo = wx.getSystemInfoSync();
// 获取设备的高度
ar windowHeight = sysinfo.screenHeight;
// 屏幕高度
this.setData({ wh: windowHeight }); },
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function () { },
/** * 生命周期函数--监听页面显示 */
onShow: function () { },
/** * 生命周期函数--监听页面隐藏 */
onHide: function () { },
/** * 生命周期函数--监听页面卸载 */
onUnload: function () { },
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () { },
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () { },
/** * 用户点击右上角分享 */
onShareAppMessage: function () { }})最后一步：查看相册；（核心能够获取图片地址）
<camera style="width:100%; height: {{wh}}px;" wx:if="{{src === ''}}" device-position='{{pos}}'>
<cover-view class='btns-box'>
<cover-image src='/images/album.png' bindtap="choosePhoto"></cover-image>
<cover-image src='/images/camera.png' bindtap="takePhotoMySelf"></cover-image>
<cover-image src='/images/reverse.png' bindtap="takePhotoFront"></cover-image>
</cover-view>
</camera>
<!-- 加载拍照的图片 -->
<view wx:else>
<image src='{{src}}' style='height: {{wh}}px; width: 100%; display: block;' mode='aspectFit'></image>
<button type='warn' bindtap='reChoose'>重拍</button>
</view>// pages/home/home.js
Page({
/** * 页面的初始数据 */
data: {
// 获取设备的高度, 用wh来定义设备高度
wh: 0,
// 存储拍照的图片地址
src: '',
// 摄像头朝向
pos: 'back' },
// 拍照功能
takePhotoMySelf: function() {
var ctx = wx.createCameraContext(); // 获取拍照权限
var _this = this;
ctx.takePhoto({
quality: 'high',
success: function(res) { // 返回拍照执行成功函数
console.log(res.tempImagePath); // 拍照图片地址
_this.setData({
src: res.tempImagePath
})
}
});
},
// 从相册选择照片
choosePhoto: function() {
var _this = this;
wx.chooseImage({
count: 1, // 只选择一张图片
sizeType: ['original'], // 原图选择
sourceType: ['album'], // 本地相册选择照片
success: function(res) { // 选择成功后执行代码
console.log(res);
if(res.errMsg === 'chooseImage:ok' && res.tempFilePaths.length !== 0) {
_this.setData({
src: res.tempFilePaths[0]
})
}
},
});
}, // 重新选择照片
reChoose: function() {
this.setData({
src: '' }) }, // 摄像头朝向
takePhotoFront: function() {
this.setData({
pos: 'front' }) },
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
// 获取设备的信息, 使用微信的开发文档
var sysinfo = wx.getSystemInfoSync();
// 获取设备的高度
var windowHeight = sysinfo.screenHeight;
// 屏幕高度
this.setData({
wh: windowHeight }); },
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function () { },
/** * 生命周期函数--监听页面显示 */
onShow: function () { },
/** * 生命周期函数--监听页面隐藏 */
onHide: function () { },
/** * 生命周期函数--监听页面卸载 */
onUnload: function () { },
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () { },
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () { },
/** * 用户点击右上角分享 */
onShareAppMessage: function () { }})
注：（这里在拍照测试时将用到电脑自带摄像头， 相机镜头朝向的测试可通过微信开发者工具中的预览 完成测试）
