微信小程序自定义拍照页面及跨页面setData数据

1、简介:最近需求要实现一个点击拍摄身份证上传的功能,思路就是在表单页面点击,跳转到拍摄页面,拍摄页面要展示身份证框,提交后要把数据返回表单页.

2、拍摄页面要展示身份证框,就是在camers之上放张图片。

复制代码
  <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error">
    <cover-view class="id_m">
      <!-- 这是拍照轮廓图(如果是人像拍照则替换图片即可) -->
      <cover-image class="img" src="https://img-blog.csdnimg.cn/2020081419131165.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70#pic_center"></cover-image>
      <!-- END -->
      <!-- 这是文字提示(不需要删除即可) -->
      <cover-view class="tips_txt">请将头像面放到框内,并调整好光线</cover-view>
      <!-- END -->
    </cover-view>
  </camera>
复制代码

效果图:

2、跨页面setData数据:拍完照发起请求,要把请求的数据返回表单页(参考:https://blog.csdn.net/weixin_44198965/article/details/107821802)

复制代码
//获取页面栈
let pages = getCurrentPages()
//获取上一个页面
let beforPage = pages[pages.length - 2];
//设置数据
beforPage.setData({
      data
})
//返回上一页
  wx.navigateBack({
      delta: 1,
})
复制代码

 

posted @   Pavetr  阅读(819)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示