【b站计算机拓荒者】【2025】微信小程序开发教程 - chapter3 项目实践 - 2信息采集

1 首页功能跳转

# 1 创建页面
	-信息采集 collection
	-人脸识别 face
	-语音识别 voice
	-活动 activity
	-心率检测 heart
	-积分商城 points
	## app.json
	{
    "pages": [
        "pages/index/index",
        "pages/welcome/welcome",
        "pages/my/my",
        "pages/notice/notice",
        "pages/activity/activity",
        "pages/collection/collection",
        "pages/face/face",
        "pages/voice/voice",
        "pages/heart/heart",
        "pages/points/points"
    ],
   }

# 2 首页：index.wxml和index.js加入跳转逻辑
	## 1 pages\index\index.wxml
	<!-- 快捷入口 -->
    <van-grid column-num="3">
        <van-grid-item icon="photo-o" text="信息采集" bind:click="gotoCollection"/>
        <van-grid-item icon="photo-o" text="社区活动" bind:click="gotoActivity"/>
        <van-grid-item icon="photo-o" text="人脸检测" bind:click="gotoFace"/>
        <van-grid-item icon="photo-o" text="语音识别" bind:click="gotoVoice"/>
        <van-grid-item icon="photo-o" text="心率检测" bind:click="gotoHeart"/>
        <van-grid-item icon="photo-o" text="积分商城" bind:click="gotoPoints"/>
    </van-grid>
	## 2 pages\index\index.js
	Page({
    gotoCollection(){
        wx.navigateTo({
          url: '/pages/collection/collection',
        })
    }, 
    gotoActivity(){
        wx.switchTab({
            url: '/pages/activity/activity',
        })
    }, 
    gotoFace(){
        wx.navigateTo({
            url: '/pages/face/face',
        })
    }, 
    gotoVoice(){
        wx.navigateTo({
            url: '/pages/voice/voice',
        })
    }, 
    gotoHeart(){
        wx.navigateTo({
            url: '/pages/heart/heart',
        })
    }, 
    gotoPoints(){
        wx.navigateTo({
            url: '/pages/points/points',
        })
    }
})

2 首页轮播图和公告接口

2.1 后端接口

跳过。

2.2 小程序前端

死图片死公告写活，跳过。

# index.js的onLoad请求后台接口获取轮播图图片等信息
# 注意此时的启动页还是广告页

2.3 补充-公共方法

# 接口url可以在公共文件里统一处理

1 新建setting.js文件

const rootUrl = 'http://127.0.0.1:8000/smart';

module.exports = {
    welcome: rootUrl+'/welcome/',
    banner: rootUrl+'/banner/',
}

2 引入js文件

// pages\welcome\welcome.js
import api from '../../config/setting'
Page({
    /**
     * 页面的初始数据
     */

3 替换url

 // 向后端发送请求 -- 获取广告页 -- 赋值给img
 wx.request({
          url:api.welcome, // 'http://127.0.0.1:8000/smart/welcome',
          method: 'get',
          success:(res)=>{
              if(res.data.code === 100) {
                  this.setData({
                      img: res.data.result
                  })
              } else {
                  wx.showToast({
                      title:'网络请求异常'
                  })
              }
          },
          fail: (error)=>{
              wx.showToast({
                  title:'网络请求异常'
              })
          }
      });

3 信息采集页

3.1 小程序前端

up又不想写了，我也不写，跳过。
找来了资料，直接一个copy操作 - 5月26日

效果

3.2 后端接口

不写，跳过。

3.3 引入矢量图

可以看chapter2 小程序核心的part 3，不写了，跳过。

3.4 打通接口//删除功能

# 1 删除确认，添加模态对话框

# 2 删除成功，刷新页面

删除方法

// pages\collection\collection.js
doDeleteRow(e) {
    wx.showModal({
        title: "确认是否删除",
        complete: (res)=>{
            if(res.cancel) {
                return;
            }
            if(res.confirm) {
                // 删除
                var nid = e.currentTarget.dataset.nid;
                wx.showLoading({
                  title: '删除中',
                  mask: true
                });
                wx.request({
                    url: api.welcome,
                    method: 'get',
                    success: (res)=>{
                        // 刷新当前页面，需要自定义
                        this.refresh();
                    },
                    complete: ()=>{
                        wx.hideLoading();
                    }
                })
            }
        }
    })
}

1 删除确认模态对话框

2 删除确认，删除中

3 接口成功或失败，loading关闭。

3.5 提交后返回信息采集页

# p16
# 1 提交创建个人信息后返回信息采集页，此时后台数据新增一条，返回信息采集页，由于没有刷新，因此没有最新数据

# 2 在onShow方法里执行refresh方法（自定义方法）刷新页面

    onShow() {
        this.refresh(); // 自定义方法
    },

4 信息采集详情页

4.1 小程序端-拍照页面-camera

# 1 实现拍照页面，调取手机的相机功能

# 2 点击form的相机图标，进入camera页面

# 3 camera标签 
	-https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
	-<camera class="camera"  device-position="{{ backFront ? 'back' : 'front' }}"  flash="off" frame-size="medium" ></camera>
	## 系统相机，扫描二维码等功能。
	## 默认前置摄像头，按钮控制摄像头翻转

# 4 具体代码见项目，git地址见最后（尚未上传git）。

# 5 要把拍的照片--》返回给上个页面，这部分可以看下面的代码实现

摄像头翻转和拍照方法实现
wxml

<!--pages/camera/camera.wxml-->
<camera class="camera"  device-position="{{ backFront ? 'back' : 'front' }}"  flash="off" frame-size="medium" ></camera>

 
<view class="function">
  <view class="switch"> </view>
  <view class="record" bindtap="takePhoto">
    <image src="/images/record_on.png"></image>
  </view>
  <view class="switch" bindtap="switchCamera">
    <image src="/images/rotate-camera-white.png"></image>
  </view>
 </view>

js

Page({

    data: {
      backFront: true
    },
    // 摄像头翻转
    switchCamera() {
      this.setData({
        backFront: !this.data.backFront,
        // src: ''
      })
    },
    // 拍照takePhoto
    takePhoto() {
	      const ctx = wx.createCameraContext()
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          // 如果当前页面的data中有src属性---》得到的就是图片地址
          // 要把拍的照片--》返回给上个页面
          // src: res.tempImagePath
          var pages = getCurrentPages() // 取到当前打开的所有页面
          var prevPage = pages[pages.length - 2] // 拿到上个页面对象
          prevPage.setData({
            avatar: res.tempImagePath
          }) 
          // 跳到上个页面
          wx.navigateBack({});
        }
      })
    },
    error(e) {
      console.log(e.detail)
    }, 
  })

wxss省略。
拍照功能的官网示例

// camera.js
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

效果

跳转关系

4.2 小程序端-采集页面-form

# 1 onLoad()里请求接口，获取网格下拉数据

# 2 双向数据绑定
	-<input placeholder="请填写姓名" placeholder-class='txt' model:value="{{name}}" bindinput="bindNameChange" />

# 3 可以注意下picker上拉选择，用法不太一般
	-https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

# 4 上传文件，wx.uploadFile()

# 5 上传成功，跳转会上一页

<!--pages/form/form.wxml-->
<view class="avatar">
  <image src='{{avatar}}' bindtap="bindToCamera"></image>
</view>

<view class="form">
  <view class="row-group">
    <input placeholder="请填写姓名" placeholder-class='txt' model:value="{{name}}" bindinput="bindNameChange" />
  </view>

  <view class="picker-group">
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" range-key="name">

      <view wx:if="{{ index > -1}}" class="picker-txt picker">当前网格：{{objectArray[index].name}}</view>
      <view wx:else class="picker-txt" >请选择网格</view>
      
    </picker>
  </view>
  <view>
    <button class="submit" bindtap="postUser" > 提 交 </button>
  </view>
</view>

js

  // 上传图片
  postUser(e) {
    wx.showLoading({
      title: '提交中',
      mask: true
    })
    // 上传文件
    wx.uploadFile({
      url: api.welcome,
      filePath: this.data.avatar,  
      name: 'avatar',  // 文件名字
      formData: {  // 数据部分，姓名和网格
        name: this.data.name,
        area: this.data.objectArray[this.data.index].id // 选中了那个区域的id
      },
      success: (res) => {
        // 跳转回上一页
        wx.navigateBack({})
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  }

wx.navigateTo()实现。

4.3 后端接口

# 1 当前登录用户负责的网格 
# 2 提交接口

不写，跳过。