阅读量:0
1.从基础库 2.21.2 开始支持
当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。
根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。具体使用方法
需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。同时将头像和昵称存到本地中。
代码示例
1、wxml
<view class="map" style="background-image: url('{{imageUrl}}/MZWH/pm/bg-01.png')"> <button open-type="chooseAvatar" bindchooseavatar="assd" style="border-radius: 50%;"> <view style="width: 100px; height: 100px; overflow: hidden;"> <image src="{{image}}" style="width: 100%; height: 100%;"></image> </view> </button> <form catchsubmit="formSubmit" catchreset="formReset" report-submit="true" > <view class="name" style="background-color: white;"> <view class="name_text"> 昵称: </view> <view class="input_wrapper"> <input class="input_field" placeholder="请输入昵称" type="nickname" bindinput="formSubmit" /> </view> </view> </form> </view> 2、js
// pages/homePage3/homePage3.js const app = getApp(); const api = require('../../utils/api.js'); const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'; Page({ /** * 页面的初始数据 */ data: { image: defaultAvatarUrl, imageUrl: app.data.imageUrl, isIphoneX:app.data.isIphoneX, area_id:app.data.area_id, nickname: '' }, //用户头像 assd: function (e) { console.log("文件路径：" + e.detail.avatarUrl); let headimg = e.detail.avatarUrl; this.uploadFile(headimg); }, onChooseAvatar(e) { console.log(e.detail); const { avatarUrl } = e.detail this.setData({ avatarUrl, }) }, uploadFile: function(filePath) { console.log("文件路径：" + filePath); wx.uploadFile({ url: '/upload', // 后端服务器 URL filePath: filePath, name: 'file', // 文件字段名 success: (res) => { console.log('文件上传成功：', res.data); // 解析 JSON 数据 let data; try { data = JSON.parse(res.data); } catch (e) { console.error('JSON 解析失败：', e); return; } // 检查解析结果 if (data && data.fileurl) { wx.setStorageSync('headimg', data.fileurl); this.setData({ image: data.fileurl }); } else { console.error('后端返回数据格式不正确：', data); } }, fail: (err) => { console.error('文件上传失败：', err); } }); }, // 用户名处理 formSubmit: function(e) { let nickname = e.detail.value; console.log(e.detail.value) wx.setStorageSync('nickname', nickname); this.setData({nickname}); }, homePage: function () { wx.navigateBack({ delta: 2 }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ area_id: app.data.area_id }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })3、wxss
/* pages/map/map.wxss */ page { height: 100%; width: 100%; } .button { width: 100%; height: 200px; } .button button { width: 25%; height: 100px; margin-top: 50px; background-color: #ffffff; } .button image { width: 150%; height: 100%; } .name { width: 100%; height: 50px; border: 1px solid #cecccc; margin-top: 90px; display: flex; border-radius: 10px; /* 适度减小圆角半径，以保留一定的角度 */ overflow: hidden; /* 确保内容超出部分不显示在圆角区域之外 */ } .name_text { width: 40%; height: 50px; line-height: 50px; font-weight: bold; font-size: 15px; padding-left: 5%; } .input_wrapper { width: 60%; display: flex; align-items: center; } .input_field { width: 100%; height: 100%; padding: 0 10px; border: none; outline: none; background-color: transparent; font-size: 15px; } .enter { width: 100%; display: flex; justify-content: center; margin-top: 100px; } .map { height: 100%; width: 100%; background-size: 100% 100%; -moz-background-size: 100%; background-repeat: repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; } .slideButton { width: 40rpx; height: 40rpx; background-size: 100%; background-color: gray; background-position: center; position: absolute; top: 30rpx; left: 30rpx; border: none; border-radius: 50%; } .mapHome { height: 100%; width: 100%; background-size: 100% 100%; -moz-background-size: 100%; background-repeat: repeat; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; } .buttonView{ display: flex; flex-direction: column; align-items: center; margin-top: 105%; } .buttonViewBig{ display: flex; flex-direction: column; align-items: center; margin-top: 125%; } .mapHome button{ width: 220rpx; animation: dh 3s infinite linear; background-repeat:no-repeat; background-color: transparent; border-style: none; background-size: 100% 100%; -moz-background-size: 100%; background-repeat: repeat; border-radius: 175rpx; } .startButton { width: 260rpx; /* 调整按钮宽度为200rpx */ height: 240rpx; background-image: url('{{imageUrl}}/MZWH/pm/start.png'); background-size: contain; /* 使用contain保持完整显示图片 */ background-repeat: no-repeat; background-position: center; border: none; } @keyframes dh { 0% { opacity: 1 } 50% { opacity: 0.5 } 100% { opacity: 1 } } .mapPoint { position: absolute; top: 170rpx; right: 0; width: 660rpx; } .mapButton { position: absolute; left: 50%; margin-left: -220rpx; bottom: 44rpx; width: 400rpx; } .box { width: 150rpx; height: 150rpx; background-color: #309fdf; border-radius: 100rpx; position: absolute; top: 64%; left: 52%; } .box { animation: dh 2s infinite linear; animation-delay:0.5s; } .box1 { width: 150rpx; height: 150rpx; background-color: #309fdf; border-radius: 100rpx; position: absolute; top: 64%; left: 52%; } .box1 { animation: dh 2s infinite linear; } 手机示例
