拍照微信小程序项目实例

好的，以下是一个拍照微信小程序项目实例的基本流程：

1. 在微信开发者工具中新建一个小程序项目，选择“小程序”模板。

2. 在 app.json 文件中添加以下代码来配置小程序页面：

{
  "pages": [
    "pages/index/index",
    "pages/camera/camera"
  ],
  "window": {
    "navigationBarTitleText": "拍照小程序"
  }
}

这里我们定义了两个页面，分别是首页和相机页面。

3. 在 index 页面中添加一个按钮，点击后跳转到相机页面。

<view class="container">
  <button class="btn" bindtap="takePhoto">拍照</button>
</view>

4. 在相机页面中添加以下代码，来实现拍照功能：

<camera device-position="{{cameraPosition}}" flash="{{flash}}" binderror="error" style="width: 100%; height: 100%;"></camera>

<button class="btn" bindtap="takePhoto">拍照</button>
<button class="btn" bindtap="changeCamera">切换摄像头</button>
<button class="btn" bindtap="changeFlash">切换闪光灯</button>

这里我们使用了微信小程序原生的 camera 组件来调用手机摄像头，同时添加了三个按钮来控制摄像头和闪光灯。

5. 在相机页面的 js 文件中添加以下代码，来实现拍照功能：

Page({
  data: {
    cameraPosition: 'back',
    flash: 'off'
  },
  takePhoto() {
    const ctx = wx.createCameraContext();
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempImagePath,
          success: function (data) {
            wx.showModal({
              title: '保存成功',
              content: '图片已保存到相册',
              showCancel: false,
              confirmText: '知道了'
            })
          },
          fail: function (err) {
            console.log(err)
          }
        })
      }
    })
  },
  changeCamera() {
    const position = this.data.cameraPosition === 'back' ? 'front' : 'back';
    this.setData({
      cameraPosition: position
    })
  },
  changeFlash() {
    const flash = this.data.flash === 'off' ? 'on' : 'off';
    this.setData({
      flash: flash
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

这里我们使用了 wx.createCameraContext() 方法来获取 camera 组件的上下文对象，然后调用 takePhoto() 方法来拍照并保存图片到相册中。

6. 最后，在 app.wxss 文件中添加以下代码，来美化按钮样式：

.btn {
  display: block;
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 20rpx;
  margin: 20rpx auto;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}

至此，一个简单的拍照微信小程序项目就完成了。