微信小程序常用个人信息获取(下)

简介: 第一篇文章:微信小程序登录流程解析的评论区,大家的留言给了作者很大的写作分享动力,本文继续新知识的学习,讲述微信小程序常用个人信息获取,附上示例代码供大家快速上手。

示例代码:

wx.chooseImage({
  count: 1, //用户可上传的图片数量
  sizeType: ['original', 'compressed'], //用户可选原图、压缩图
  sourceType: ['album', 'camera'], //用户可选图片来源
  success (res) {
    console.log("打印本地临时文件路径列表",res.tempFilePaths);
  }
})

使用场景:上传证件资料
注意事项:
1、如果要上传图片到云存储空间,可以通过wx.cloud.uploadFile()实现,在这不再展开;
2、如果要上传图片到开发者服务器,则用wx.uploadFile()实现上传,后端再进一步获取(如通过PHP的$_FILES)

wx.chooseImage({
  count: 1, //用户可上传的图片数量
  sizeType: ['original', 'compressed'], //用户可选原图、压缩图
  sourceType: ['album', 'camera'], //用户可选图片来源
  success: (res) => {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 开发者服务器接口地址,
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'xxx': 'xxx'
      },
      success : (res) => {
        //打印返回的数据
      }
    })
  }
})

3、类似的接口还有wx.chooseMedia(),从手机相册选择图片、视频或使用相机拍摄

wx.chooseMedia({
  count: 1,
  mediaType: ['image','video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30, //拍摄视频最长拍摄时间,单位秒
  camera: 'back',
  success: (res) => {
    console.log("临时文件地址",res.tempFiles[0].tempFilePath);
    console.log("临时文件大小",res.tempFiles[0].size);
  }
})


   

08q


   

摄像头

接口1说明:调起摄像功能
是否需要授权:
页面截图: 

31.jpg

示例代码:

<!-- wxml -->
<!-- device-position="front"为前摄;
flash(闪光灯)的值可为auto(自动)、on(打开)、off(关闭)、torch(常亮) -->  
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<image mode="widthFix" src="{{src}}"></image>
<!-- js -->
takePhoto() {
  //创建 camera 上下文 CameraContext 对象
  const ctx = wx.createCameraContext();
  ctx.takePhoto({
    quality: "high",
    success: (res) => {
      this.setData({
        src: res.tempImagePath //照片地址赋值
      })
    }
  })
}

使用场景:人脸识别
注意事项:1、同一页面只能有一个camera组件,不需要点击事件触发授权窗口;
2、拍摄照片接口为takePhoto,需要先创建CameraContext 对象,见示例代码

接口2说明:调起扫码功能
是否需要授权:否
页面截图: 

32.png


示例代码:

wx.scanCode({
  onlyFromCamera: true, //是否只能从相机扫码(是否不允许从相册选择图片)
  success: (res) => {
    console.log("内容",res.result);//常为网址或空
    console.log("类型",res.scanType);//QR_CODE、WX_CODE等等
      }
})

使用场景:扫码

   

09q


   

手机号码

接口说明:获取用户手机号码
是否需要授权:
页面截图: 

333.jpg


示例代码:

<!-- wxml -->
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
<!-- js -->
getPhoneNumber (e) {
  console.log("加密算法的初始向量",e.detail.iv);
  console.log("加密数据",e.detail.encryptedData);
  console.log("云ID", e.detail.cloudID);
}

使用场景:获取联系方式
注意事项:
1、button组件的open-type值需要设置为getPhoneNumber,用户允许授权之后触发bindgetphonenumber事件返回相关加密信息和云ID;
2、后续在开发者服务器结合加密数据解密手机号,或通过云函数结合cloudID获取手机号码


   

10q


   

通讯录信息

接口说明:返回联系人姓名和电话
是否需要授权:否(需要用户选择联系人才返回信息)
页面截图: 

34.jpg


示例代码:

wx.chooseContact({
  success: (res) => {
    console.log("姓名",res.displayName);
    console.log("电话号码",res.phoneNumber);
  }
})

使用场景:获取联系方式
注意事项:
部分安卓机返回特定联系人的所有手机号;

console.log("选定联系人手机号",res.phoneNumberList);


   

11q


   

设备信息


接口说明:返回用户的设备信息
是否需要授权:否
页面截图: 


35.jpg


示例代码:

wx.getSystemInfo({
  success (res) {
    console.log("设备品牌", res.brand);
    console.log("设备型号", res.model);
    console.log("屏幕宽度", res.screenWidth);
    console.log("屏幕高度", res.screenHeight);
    console.log("语言设置", res.language);
    console.log("微信版本", res.version);
    console.log("操作系统及版本", res.system);
    console.log("客户端平台", res.platform);
    console.log("客户端基础库版本", res.SDKVersion);
    console.log("蓝牙开关", res.bluetoothEnabled);
    console.log("Wi-Fi开关", res.wifiEnabled);
    console.log("宿主环境", res.host);
  }
})

使用场景:处理兼容性
注意事项:
1、异步版本为wx.getSystemInfoAsync;
2、如果是刚推出的新机型,获取的设备品牌可能为unknown,需要等待微信适配

本文作者:朱顺意,文章技术相关交流,可添加微信号:475333435

声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。


相关文章
|
6天前
|
小程序 数据安全/隐私保护 容器
电商小程序07显示用户个人信息
电商小程序07显示用户个人信息
|
小程序 API 数据安全/隐私保护
微信小程序常用个人信息获取(上)
第一篇文章:微信小程序登录流程解析的评论区,大家的留言给了作者很大的写作分享动力,本文继续新知识的学习,讲述微信小程序常用个人信息获取,附上示例代码供大家快速上手。
微信小程序常用个人信息获取(上)
|
6天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
6天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
6天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
6天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
6天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
6天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
6天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
18 0
|
6天前
|
小程序
开发小程序只要几百块?
开发小程序只要几百块?
775 0

热门文章

最新文章