ヒント:記事作成後に目次を自動生成することもできますが、生成方法については右のヘルプを参照してください。
記事ディレクトリ
序文
提示:这里可以添加本文要记录的大概内容:
参考リンク
WeChat アプレットはアバターとニックネームをアップロードし、永続的に保存します
ユーザーのアバター、ニックネーム、携帯電話番号を取得するための WeChat アプレットの最新バージョン
ミニ プログラム イメージを Base64 ソリューションに変換 (複数のソリューション)
提示:以下是本篇文章正文内容,下面案例可供参考
1. アバターコードを取得する
wxmlコード
<!-- 获取头像和名字 -->
<view style="margin: 20rpx 0;display: flex;flex-direction: column;align-items: center;">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{
{avatarUrl}}" style="width: 100rpx;height: 100rpx;" mode="aspectFit"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称" />
</view>
js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
avatarUrl: defaultAvatarUrl,
},
// 获取路径
onChooseAvatar(e) {
const {
avatarUrl } = e.detail
this.setData({
avatarUrl,
})
}
})
2. 利用手順
1. アバターをクリックします
WeChat アバターをクリックします。印刷されたリンクは一時的なリンクなので、外部ブラウザにコピーすると失敗します。
WeChat アバターをクリックしても、写真をアップロードしても、写真を撮っても、パスが表示されます。
http://tmp/DXGZXiE0qJ0Teb5748474b9a6cf28e2dd60c91f22c42.jpeg
外部ブラウザは開けませんが、WeChat 開発者ツールでプレビューを開くことができます
2.画像をbase64形式に変換し、バックエンドに送信します。
コードは次のとおりです(例)。
// 图片转64代码
base64(url, type) {
return new Promise((resolve, reject) => {
wx.getFileSystemManager().readFile({
filePath: url, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => {
// resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
resolve(res.data)
},
fail: res => reject(res.errMsg)
})
})
},
成功時の解決戻り値には、data:image/png を追加する必要があるものと、追加しないものがあります。
バックグラウンド取得に問題があるかどうかによって異なります。ここでは、バックグラウンド取得に Base64 プレフィックスは必要ありません。注釈を保存しておきました
アバターのパスを取得する方法は以前に書いたので、base64 変換方法と組み合わせて使用します。
// 获取头像
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.setData({
avatarUrl,
})
console.log(avatarUrl, "avatarUrl");
// 执行图片转base64方法
this.base64(avatarUrl, "png").then(res => {
console.log(res, 'base64路径') //res是base64路径
this.setData({
'form.base64': res
})
})
console.log(avatarUrl, '1');
},
// 图片转64
base64(url, type) {
return new Promise((resolve, reject) => {
wx.getFileSystemManager().readFile({
filePath: url, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => {
// resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
resolve(res.data)
},
fail: res => reject(res.errMsg)
})
})
},
form.base64 は
要約する
すべてのコードは
wxml
<!--pages/mine/user-edit/user-edit.wxml-->
<!-- 用户授权头像昵称页面 -->
<view class="userInfo-container">
<view style="background-color: #F7F7F7;height: 20rpx;"></view>
<van-cell-group>
<van-cell title-width="400rpx">
<view slot="title" class="cell-title">
头像<text style="color: #999;font-size: 22rpx;">(点击上传头像或更换头像)</text>
</view>
<view class="cell-value">
<button class="cell-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image src="{
{avatarUrl}}" mode="aspectFill"></image>
</button>
</view>
</van-cell>
<van-cell title-width="400rpx">
<view slot="title">
昵称<text style="color: #999;font-size: 22rpx;">(点击使用微信昵称或填写昵称)</text>
</view>
<input type="nickname" value="{
{form.nickName}}" class="weui-input" bindinput="onChangeInput" placeholder="请输入昵称" />
</van-cell>
<van-cell title="手机号">
<input wx:if="{
{form.phone}}" type="nickname" value="{
{form.phone}}" class="weui-input" bindinput="onChangeInput" disabled />
<button wx:else="" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" size="mini">一键获取</button>
</van-cell>
</van-cell-group>
<view style="color: #C8C9CC; font-size: 24rpx;padding: 10rpx 30rpx;">
为杜绝垃圾信息,手机号绑定后不可更改。敬请谅解!
</view>
<!-- <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号码</button> -->
<view class="form-btn">
<van-button type="primary" round block color="#F24129" bindtap="onSave">确定</van-button>
</view>
<!-- <input type="nickname" class="weui-input" placeholder="请输入昵称" /> -->
<image src="{
{img}}" mode="aspectFill"></image>
</view>
スタイル
/* pages/mine/user-edit/user-edit.wxss */
.userInfo-container{
/* margin: 20rpx 0; */
background-color: #f7f7f7;
height: 100vh;
}
.cell-title{
line-height: 100rpx;
}
.cell-value{
display: flex;
justify-content: flex-end;
}
.cell-btn {
padding: 0;
width: 100rpx;
height: 100rpx;
margin: 0;
}
.cell-btn image{
width: 100rpx;
height: 100rpx;
}
/* 提交按钮 */
.form-btn{
margin: 20rpx;
}
jsコード
// pages/mine/user-edit/user-edit.js
var app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
/**
* 页面的初始数据
*/
data: {
// 头像
avatarUrl: defaultAvatarUrl, // 头像链接
form: {
nickName: "", // 用户昵称
base64: "", // 图片
phone: "", // 手机号
},
img: "",
},
// 获取头像
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.setData({
avatarUrl,
})
console.log(avatarUrl, "avatarUrl");
// 执行图片转base64方法
this.base64(avatarUrl, "png").then(res => {
console.log(res, 'base64路径') //res是base64路径
this.setData({
'form.base64': res
})
})
console.log(avatarUrl, '1');
},
// 图片转64
base64(url, type) {
return new Promise((resolve, reject) => {
wx.getFileSystemManager().readFile({
filePath: url, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => {
// resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
resolve(res.data)
},
fail: res => reject(res.errMsg)
})
})
},
// 输入昵称
onChangeInput(e) {
// console.log(e.detail.value, '昵称');
this.setData({
"form.nickName": e.detail.value
})
},
// 点击确定
onSave() {
console.log(this.data.form);
// 说明手机号不存在,必须先授权手机号
if (!this.data.form.phone) {
wx.showToast({
title: '请先授权手机号',
icon: 'none',
duration: 1500
})
return
}
let data = {
yh_img: this.data.form.base64,
yh_name: this.data.form.nickName,
user_id: wx.getStorageSync('openid')
}
app.http.request("/purchase/usereid", data, "POST").then(res => {
console.log(res, '提交头像和名字');
if (res.code == 100) {
// this.setData({
// img: res.data.yh_img
// })
wx.showToast({
title: '修改成功',
icon: 'success',
duration: 1500
})
setTimeout(() => {
let pages = getCurrentPages(); //页面栈
let beforePage = pages[pages.length - 2];
var obj = JSON.parse(JSON.stringify(beforePage)).options
let query = ""
let aUrl = []
let fnAdd = function (key, value) {
return key + '=' + value
}
for (var k in obj) {
aUrl.push(fnAdd(k, obj[k]))
}
query = aUrl.join('&')
wx.switchTab({
url: '/' + beforePage.route + "?" + query
})
wx.reLaunch({
url: '/' + beforePage.route + "?" + query
})
}, 1500)
}
})
},
// 允许授权手机号
getPhoneNumber(e) {
console.log(e, '执行方法');
console.log(e.detail.errMsg, '返回信息'); //
console.log(e.detail.iv, '加密算法的初始向量'); //加密算法的初始向量
console.log(e.detail.encryptedData, '包括敏感数据在内的完整用户信息的加密数据'); //包括敏感数据在内的完整用户信息的加密数据
if (e.detail.encryptedData && e.detail.iv) {
wx.checkSession({
//监测登录是否过期
success: () => {
let data = {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
session_key: wx.getStorageSync('sessionKey'),
user_id: wx.getStorageSync('openid'),
}
app.http.request("/Phone/phoneadd", data, "POST").then(res => {
console.log(res, '添加手机号到后台');
this.getUserPhone()
})
},
fail: () => {
// session_key 已经失效,需要重新执行登录流程
}
})
}
},
// 获取自己电话
getUserPhone() {
app.http.request("/Phone/phonelist", {
user_id: wx.getStorageSync('openid'),
}, "POST").then(res => {
console.log(res.data, '自己的电话');
wx.setStorageSync('userphone', res.data)
this.setData({
"form.phone": res.data
})
})
},
// 获取用户原有信息
getUserInfo() {
app.http.request("/Userlist/userlist", {
user_id: wx.getStorageSync('openid'),
}, "POST").then(res => {
console.log(res, '用户信息');
if (res.code == 100) {
this.setData({
avatarUrl: res.data.yh_img,
'form.nickName': res.data.yh_name,
'form.phone': res.data.yh_phone
})
if(this.data.form.nickName=="微信用户"){
this.setData({
'form.nickName': "",
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
// 如果没有用户id
if (!wx.getStorageSync('openid')) {
wx.navigateTo({
url: '/pages/login/index'
})
} else {
this.getUserInfo()
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})