在微信开发者工具中 实现微信小程序之相机拍照及其相关功能的开发

微信小程序 - 相关知识

技术扩展 - 微信小程序 - 相机拍照功能

微信开发：前端 + 后端

小程序开发 - 准备工作：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 () {​  }})
  
 

注：（这里在拍照测试时将用到电脑自带摄像头， 相机镜头朝向的测试可通过微信开发者工具中的预览 完成测试）