【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.jsPage({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

 // 向后端发送请求 -- 获取广告页 -- 赋值给imgwx.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: ''})},// 拍照takePhototakePhoto() {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {// 如果当前页面的data中有src属性---》得到的就是图片地址// 要把拍的照片--》返回给上个页面// src: res.tempImagePathvar 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 提交接口

不写，跳过。