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

微信小程序 - 相关知识

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

微信开发:前端 + 后端

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

注:(这里在拍照测试时将用到电脑自带摄像头, 相机镜头朝向的测试可通过微信开发者工具中的预览 完成测试)
在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页