微信小程序 - 相关知识
技术扩展 - 微信小程序 - 相机拍照功能
微信开发：前端 + 后端
小程序开发 - 准备工作：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.jsPage({ /** * 页面的初始数据 */ 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.jsPage({ /** * 页面的初始数据 */ 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.jsPage({ /** * 页面的初始数据 */ 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 () { }})
注：（这里在拍照测试时将用到电脑自带摄像头， 相机镜头朝向的测试可通过微信开发者工具中的预览 完成测试）
