自学内容网 自学内容网

微信小程序又双叒叕改获取头像昵称的接口了

官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
https://developers.weixin.qq.com/miniprogram/dev/component/input.html

tips:
如果调试这个接口时报错或者点着没反应,需要在开发工具中把基础库版本调至2.21.2或以上,我这边没有2.21.2选了2.21.4
获取昵称的输入框在开发环境中是没有效果的
在这里插入图片描述
wxml

<form bindsubmit="subs">
  <view class="bodyer">
    <button class="cha" open-type="chooseAvatar" bindchooseavatar="to_cha">
      <image src="{{avatar_url?avatar_url:'/imgs/avatar.png'}}" mode="widthFix" />
      <input type="text" name="avatar" value="{{avatar_path}}" style="display: none;" />
    </button>
    <view class="boxs tit">申请以下获得权限</view>
    <view class="boxs tips">获取你的公开信息</view>
    <input type="nickname" placeholder="请输入昵称" name="nick" />
    <button class="sub" form-type="submit">授权登录</button>
  </view>
</form>

wxss

page {
  text-align: center;
}

.cha {
  width: 128rpx;
  margin-top: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
}

.cha image {
  width: 128rpx;
  border-radius: 300rpx;
  overflow: hidden;
}

.boxs {
  margin: 30rpx;
}

.tit {
  font-weight: bold;
  margin-top: 60rpx;
}

.tips {
  color: #999999;
}

input {
  width: 350rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 30rpx auto;
  border: 1rpx solid #dedede;
  border-radius: 10rpx;
  overflow: hidden;
}

.sub {
  width: 570rpx !important;
  height: 88rpx !important;
  line-height: 88rpx !important;
  margin-top: 80rpx !important;
  margin-bottom: 80rpx !important;
  padding: 0 !important;
  border-radius: 100rpx !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background: linear-gradient(to right, #db011a 0%, #ff604a 100%) !important;
}

js

var app = getApp();
var that;

Page({
data: {
avatar_path: "",
avatar_url: "",
},

onLoad(options) {
that = this;

},

onShareAppMessage() {

},

onShareTimeline() {

},

// 上传头像
to_cha: function (e) {
app.f_up(e.detail.avatarUrl, {}, function (params) {
that.setData({
avatar_path: params.path,
avatar_url: params.url,
});
});
},

// 提交
subs: function (e) {
var data = e.detail.value;
app.request_api("/index/my/m_up", data, function (params) {
if (params.code == 0) {
wx.showToast({
title: "登录成功",
});
setTimeout(() => {
wx.redirectTo({
url: "/pages/cert_sel/cert_sel",
});
}, 1500);
} else {
wx.showToast({
title: params.msg,
icon: "none",
});
}
});
},
});

部分app.js

var app;
var that;

App({
  // 文件上传
  f_up: function (file_path, data = {}, callback = false) {
    wx.showLoading({
      title: "上传中...",
      mask: true,
    });
    var usf = wx.uploadFile({
      url: app.globalData.api_url + "/index/base/upload",
      filePath: file_path,
      name: "file",
      formData: data,
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        "Cookie": "session_id",
        "X-Requested-With": "XMLHttpRequest",
      },
      success: function (params) {
        var params1 = JSON.parse(params.data);
        if (params1.code == 0) {
          if (callback != false) {
            callback(params1);
          }
        } else {
          wx.showModal({
            title: "上传失败",
            content: params1.msg,
            showCancel: false,
          });
        }

        setTimeout(() => {
          wx.hideLoading();
        }, 100);
      },
    });
    usf.onProgressUpdate(function (params) {
      wx.showLoading({
        title: "上传中..." + params.progress + "%",
        mask: true,
      });
    });
  },

  // 图片选择
  m_sel: function (types, len = 1, callback = false) {
    wx.chooseMedia({
      count: len, //可选择最大文件数 (最多100)
      type: types, //文件类型,all是全部文件类型
      success: function (params) {
        wx.showLoading({
          title: "上传中...",
          mask: true,
        });
        var isup = 0;
        var res = [];
        params.tempFiles.forEach(function (vo, key) {
          app.f_up(vo.tempFilePath, {}, function (params1) {
            res.push(params1);
            setTimeout(() => {
              isup++;
              if (isup == params.tempFiles.length) {
                wx.hideLoading();
                callback(res);
              }
            }, 100);
          });
        });
      },
    });
  },

  globalData: {
    api_url: "http://test.cc",
    openid: "",
    wid: 0,
  },
});

上传接口

// 上传
function upload()
{
set_time_limit(0);
ini_set("max_execution_time", 0);
ini_set("memory_limit", -1);

$name = trim(input("name")); //获取文件名
$file = request()->file("file"); //获取上传的文件
if (!$file) {
$res["msg"] = "文件大小超限";
$res["code"] = 1;
return json($res);
}

$path_ul = "./Uploads/file/"; //移动到框架应用根目录/public/Uploads/目录下
$infos = $file->move($path_ul);
if (!$infos) {
$res["msg"] = $file->getError();
$res["code"] = 1;
return json($res);
}

if (!$name) {
$name = $infos->getInfo("name"); //获取原始文件名
}

$path = $infos->getSaveName();
$path = str_replace("\\", "/", $path); //\(反斜杠)替换为/(斜杠)
$path = ltrim($path_ul, ".") . ltrim($path, "/");
$urls = request()->domain() . $path;

$res = [];
$res["name"] = $name;
$res["path"] = $path;
$res["url"] = $urls;
$res["field"] = $path . "|" . $name;
$res["code"] = 0;
return json($res);
}

原文地址:https://blog.csdn.net/qq_19716091/article/details/131009183

免责声明:本站文章内容转载自网络资源,如侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!