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

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

示例代码:

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

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


相关文章
|
4月前
|
小程序 定位技术
【微信小程序-原生开发】TDesign 实战模板——个人信息编辑页
【微信小程序-原生开发】TDesign 实战模板——个人信息编辑页
44 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的学院个人信息管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的学院个人信息管理系统附带文章源码部署视频讲解等
30 1
|
6月前
|
小程序 数据安全/隐私保护 容器
电商小程序07显示用户个人信息
电商小程序07显示用户个人信息
|
小程序 API 数据安全/隐私保护
微信小程序常用个人信息获取(上)
第一篇文章:微信小程序登录流程解析的评论区,大家的留言给了作者很大的写作分享动力,本文继续新知识的学习,讲述微信小程序常用个人信息获取,附上示例代码供大家快速上手。
微信小程序常用个人信息获取(上)
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
500 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
590 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
114 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
79 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
196 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
68 5

热门文章

最新文章

下一篇
无影云桌面