一、访客管理
访客管理是当有朋友到家里做客时，通过在线填写申请单的方式向门卫进行报备，并请求门卫放行。
1.1 访客邀请
填写访客邀请单，需要用户保持登录的状态。
首先来获取表单的数据
-
获取到访的房屋信息，仍然用到了
van-action-sheet组件，获取数据通过坚挺select实现：// visitor_pkg/pages/form/index.js Page({data: {houseList: []},onLoad() {// 获取房屋列表this.getHouseList()},// 获取房屋列表async getHouseList() {// 调用接口const { code, data: houseList } = await wx.http.get('/house')// 检测接口是否调用成功if (code !== 10000) return wx.utils.toast()// 渲染数据this.setData({houseList})},// 获取用户选择的房屋selectHouseInfo(ev) {// 记录获取的数据this.setData({houseId: ev.detail.id,houseInfo: ev.detail.name,})}, }) -
获取到访日期，仍然用到了
van-datepicker组件，通过监听confirm事件获取选择的时间：// visitor_pkg/pages/form/index.js Page({data: {currentDate: Date.now(),maxDate: Date.now() + 1000 * 3600 * 24 * 3,},// 获取用户选择的日期selectDateInfo(ev) {// 记录获取的时间并隐藏弹层this.setData({visitDate: wx.utils.dataFormat(ev.detail),dateLayerVisible: false,})}, })在选择时间的时候要求只能提前3天进行申请，即时间的最大值距离今天不能超过 3 天。
其次对表单的数据进行验证：
// visitor_pkg/pages/form/index.js
// 导入验证插件
import wxValidate from 'wechat-validate'
Page({behaviors: [wxValidate],data: {name: '',gender: 1,mobile: '',houseId: '',visitDate: '',},rules: {name: [{required: true, message: '访客姓名不能为空!'},{pattern: /[\u4e00-\u9fa5]{2,5}/, message: '访客姓名只能为中文!'},],mobile: [{required: true, message: '访客手机号不能为空!'},{pattern: /^1[3-8]\d{9}$/, message: '请填写正确的手机号码!'},],houseId: [{required: true, message: '请选择到访的房屋!'}],visitDate: [{required: true, message: '请选择到访的日期!'}],},
})
最后提交表单的数据
// visitor_pkg/pages/form/index.js
// 导入验证插件
import wxValidate from 'wechat-validate'
Page({behaviors: [wxValidate],data: {// ...},rules: {// ...},onLoad() {},getHouseList() {},// 提交表单数据async goPassport() {// 验证表单数据if (!this.validate()) return// 获取接口需要的数据const { name, gender, mobile, houseId, visitDate } = this.data// 调用接口const {code,data: { id },} = await wx.http.post('/visitor', { name, gender, mobile, houseId, visitDate })// 检测接口是否调用成功if (code !== 10000) return wx.utils.toast()// 跳转到访客详情页面wx.reLaunch({url: '/visitor_pkg/pages/passport/index?id=' + id,})},
})
填写完访客邀请后跳转到访客详情页面。
1.2 访客详情
获取访客详情有两种情况：
-
用户保持登录状态，根据 ID 调用接口获取访客详情的数据
接口文档地址
参考示例代码如下：
// visitor_pkg/pages/passport/index.js Page({data: {passport: {}},onLoad({id}) {// 获取访客详情this.getPassport(id)},// 获取访客详情（通行证）async getPassport(id) {// 检测是否存在 idif (!id) return// 调用接口const { code, data: passport } = await wx.http.get('/visitor/' + id)// 检测接口是否调用成功if (code !== 10000) return wx.utils.toast()// 渲染数据this.setData({ passport })}, })把接口返回的详情数据渲染到页面当中：
<view class="passport"><view class="countdown"><van-count-down wx:if="{{passport.validTime > 0}}" time="{{passport.validTime * 1000}}" /><view wx:else class="van-count-down">00:00:00</view><view class="label">通行证有效时间</view></view><view class="qrcode"><image src="{{passport.url}}"></image><view wx:if="{{passport.validTime === -1}}" class="mask">二维码失效</view></view><view class="description"><view class="house">{{passport.houseInfo}}</view><view class="tips">将此二维码分享给访客，访客扫码即可开门</view></view> </view> <view class="toolbar"><button class="button-share" open-type="share"><text class="enjoy-icon icon-share"></text><text class="text">分享给朋友</text></button><button class="button-save"><text class="enjoy-icon icon-save"></text><text class="text">保存到本地</text></button> </view>访客详情中的二维码有时效性，当过期后数据
validTime的值为 -1，此时将不会再展示倒计时组件了，同时二维码上方出现一个半透明的蒙层。 -
用户打开的分享页面（新用户未登录）
访客详情页面是允许用户分享给朋友的，此种情况下被分享的用户可能是新用户或处于未登录的状态，此时要获取访客详情数据需要借助另外一个接口，传递的参数为 encryptedData，这个数据在第1次分享时被拼凑到了分享页面的URL后面：
// visitor_pkg/pages/passport/index.js
Page({data: {},onLoad() {},// 自定义分享onShareAppMessage() {// 获取加密数据const { encryptedData } = this.data.passportreturn {title: '查看通行证',path: '/visitor_pkg/pages/passport/index?encryptedData=' + encryptedData,imageUrl: 'https://enjoy-plus.oss-cn-beijing.aliyuncs.com/images/share_poster.png',}},
})
当打开页面检测到 URL 中包含了 encryptedData 数据，则表明是通过分享打开的页面，然后调用接口获取访客详情的数据：
接口文档地址
// visitor_pkg/pages/passport/index.js
Page({onLoad({ id, encryptedData }) {// 获取访客详情this.getPassport(id)this.getPassportShare(encryptedData)},async getPassport(id) {},async getPassportShare(encryptedData) {// 检测是否存在 idif (!encryptedData) return// 调用接口const { code, data: passport } = await wx.http.get('/visitor/share/' + encryptedData)// 检测接口是否调用成功if (code !== 10000) return wx.utils.toast()// 渲染数据this.setData({ passport })},
})
此种情况下渲染数据时就不允许用户再次分享页面了，需要把分享按钮隐藏起来：
<view class="toolbar" wx:if="{{passport.encryptedData}}"><button class="button-share" open-type="share"><text class="enjoy-icon icon-share"></text><text class="text">分享给朋友</text></button><button class="button-save"><text class="enjoy-icon icon-save"></text><text class="text">保存到本地</text></button>
</view>
1.3 保存图片
小程序提供了保存图片到相册的 API，调用 API 来把二维码保存到相册当中。
<view class="toolbar" wx:if="{{passport.encryptedData}}"><button class="button-share" open-type="share"><text class="enjoy-icon icon-share"></text><text class="text">分享给朋友</text></button><button bind:tap="saveQRCode" class="button-save"><text class="enjoy-icon icon-save"></text><text class="text">保存到本地</text></button>
</view>
wx.getImageInfo 通过图片路径来读取图片信息，调用该 API 时需要在小程序管理后台添加 download 域名。
wx.getImageInfo({src: 'https://domain.com/path/xxx.jpg',success(result) {console.log(result)}
})
wx.saveImageToPhotosAlbum 将图片保存到相册，第一次调用会弹出授权窗口。
wx.saveImageToPhotosAlbum({filePath: '待保存的图片路径（通过 wx.getImageInfo 读取到的）',success(result) {console.log(result)}
})
结合项目组合使用这两个 API 来保存图片到相册
// visitor_pkg/pages/passport/index.js
Page({data: {},onLoad() {},// 保存二维码async saveQRCode() {try {// 读取图片信息const { path } = await wx.getImageInfo({// 二维码的图片路径src: this.data.passport.url,})// 保存图片到相册wx.saveImageToPhotosAlbum({ filePath: path })} catch (err) {wx.utils.toast('保存图片失败，稍后重试!')}}
})
1.4 访客列表
在用户保持登录状态时调用接口获取访客列表的数据，此接口支持分页获取数据。
接口文档地址
首先来获取不分页时的列表数据
参考示例代码如下所示：
// visitor_pkg/pages/list/index.js
Page({data: {visitorList: [],isEmpty: false,},onLoad() {// 获取访客列表this.getVisitorList()},// 访客列表接口async getVisitorList(current = 1, pageSize = 5) {// 调用接口const {code,data: {rows: visitorList},} = await wx.http.get('/visitor', {current, pageSize})// 检测接口是否调用成功if (code !== 10000) return wx.utils.toast()// 渲染数据this.setData({isEmpty: visitorList.length === 0,visitorList,})},
})
渲染访客列表数据：
<block wx:if="{{!isEmpty}}"><scroll-view show-scrollbar="{{false}}" enhanced scroll-y><view class="visitor"><view class="visitor-title">我的访客</view><view class="visitor-list"><van-cell-groupwx:for="{{visitorList}}"wx:key="id"border="{{false}}"bind:tap="goPassport"><van-cell size="large" title="{{item.houseInfo}}"><text wx:if="{{item.status === 1}}" class="tag success">生效中</text><text wx:if="{{item.status === 0}}" class="tag cancel">已失效</text></van-cell><van-cell title="访客姓名" border="{{false}}" value="{{item.name}}" /><van-cell title="手机号码" border="{{false}}" value="{{item.mobile}}" /><van-cell title="访问日期" border="{{false}}" value="{{item.visitDate}}" /></van-cell-group></view></view></scroll-view>
</block>
<view wx:else class="blank">您还没有访客记录，请点击<navigator hover-class="none" class="link" url="/visitor_pkg/pages/form/index">添加</navigator>
</view>在渲染数据时注意列表为空时要给用户一段提示内容，通过 isEmpty 进行判断，访客邀请有两个状态：
- 0 表示生效中，对应的类名为
success - 1 表示已失效，对应的类名为
cancel
其次来分页获取数据，先监听 bind:scrolltolower 事件，当用户滚动页面到达底部时再去请求分页的数据：
<block wx:if="{{!isEmpty}}"><scroll-viewbind:scrolltolower="getMoreVisitor"show-scrollbar="{{false}}"enhancedscroll-y><view class="visitor">....</view></scroll-view>
</block>
<view wx:else class="blank">您还没有访客记录，请点击<navigator hover-class="none" class="link" url="/visitor_pkg/pages/form/index">添加</navigator>
</view>scrolltolower 事件有可能会在短时间内被重复触发，此种情形下会通过节流函数来避免无意义的请求，节流函数的创建可以使用第三方的库 miniprogram-licia
# 安装 miniprogram-licia
npm install miniprogram-licia
安装完成后再执行 npm 构建就可以使用了。
// visitor_pkg/pages/list/index.js
// 导入 licia 提供的节流函数
import { throttle } from 'miniprogram-licia'
Page({data: {},onLoad() {// 事件回调函数this.getMoreVisitor = throttle(() => {// 创建了节流函数}, 100)}
})
节流函数创建好之后就可以分页获取数据了，先来记录下当前的页面，然后每次调用时将页码加1，最后把新的数据追加到页面中渲染：
Page({data: {// ...},onLoad() {// 事件回调函数this.getMoreVisitor = throttle(() => {// 创建了节流函数this.getVisitorList(++this._current)}, 100)},// 访客列表接口async getVisitorList(current = 1, pageSize = 5) {// 调用接口const {code,data: { rows: visitorList },} = await wx.http.get('/visitor', { current, pageSize })// 检测接口是否调用成功if (code !== 10000) return wx.utils.toast()// 渲染数据this.setData({isEmpty: visitorList.length === 0,visitorList: this.data.visitorList.concat(visitorList),})// 记录下来当前的页面this._current = current},
})
还要考虑所有分页的数据都请求完后就无需再次请求了，可以对比当前页码 current 和总页码 pageTotal 来判断是否还有更多的数据：
Page({data: {// ...},onLoad() {// 事件回调函数this.getMoreVisitor = throttle(() => {// 没有更多数据了...if(!this.data.hasMore) return// 创建了节流函数this.getVisitorList(++this._current)}, 100)},// 访客列表接口async getVisitorList(current = 1, pageSize = 5) {// 调用接口const {code,data: { pageTotal, rows: visitorList },} = await wx.http.get('/visitor', { current, pageSize })// 检测接口是否调用成功if (code !== 10000) return wx.utils.toast()// 渲染数据this.setData({hasMore: current < pageTotalisEmpty: visitorList.length === 0,visitorList: this.data.visitorList.concat(visitorList),})// 记录下来当前的页面this._current = current},
})
到此享+生活的开发就结束了！