微信小程序----用户位置获取&信息获取&图片上传_mac上微信小程序发送图片地址-CSDN博客

本文链接：https://blog.csdn.net/qq_52385631/article/details/123011441

本文介绍了如何在微信小程序中获取用户位置信息、获取并显示用户头像昵称，以及实现图片上传功能。通过HTML、app.json配置和JavaScript代码展示了关键步骤和数据格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 用户位置获取

1.1 html

<view bindtap="getLocation">
      <view wx:if="{{address}}">{{address}}</view>
      <view wx:else>请选择位置</view>
 </view>

1.2 app.json添加配置

{
  "pages": [
    "pages/index/index"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

1.3 js

data: {
    address: "",
  },
      
getLocation: function () {
    wx.chooseLocation({
      success: (res) => {
        this.setData({
          address: res.address
        })
      }
    });
  },

1.4 res数据格式

2. 用户信息获取

2.1 html

<view>用户名称:{{ userInfo.nickName }}</view>
<view>
用户头像
<image src="{{ path }}" style="width: 150rpx;height: 150rpx;"></image>
</view>
<button  bindtap="getUserProfile"> 获取头像昵称 </button>

2.2 js

data: {
    userInfo: "",
    path:"/static/1.png",
  },
  getUserProfile: function () {
      // 替换this，里面的this指向不是data，而是调用的函数
    var that = this;
    wx.getUserProfile({
       // 获取信息的介绍
      desc: '骗你钱的',
      success: function (res) {
        // console.log('正确',res)
        that.setData({
          userInfo: res.userInfo,
          path:res.userInfo.avatarUrl,
        })
      },
      fail: function (res) {
        console.log('错误的详细', res)
      }
    })
  },

2.3 res信息格式

3. 图片上传

3.1 html

<view bindtap="uploadImages">点我上传图片</view>
<view class="contain">
  <image wx:for="{{ imagePathList }}" src="{{ item }}"></image>
</view>

3.2 css

.contain image{
  width: 150rpx;
  height: 150rpx;
  padding: 5rpx;
}

3.2 js

data: {
    imagePathList: ["/static/1.png", "/static/1.png"]
  },
  
uploadImages: function () {
    var that = this
    wx.chooseImage({
      count: 9, // 最多可选择上传的图片 
      sizeType: ['original', 'compressed'], // 图片的像素 原图/压缩图
      sourceType: ['album', 'camera'],     // 图片上传的位置
      success: function (res) {
        console.log(res)
        // 给当前图片列表换成图片数据
        // that.setData({
        //   imagePathList:res.tempFilePaths
        // })
        // 给当前图片列表添加图片数据
        that.setData({
          imagePathList: that.data.imagePathList.concat(res.tempFilePaths)
        })
        
      
      }
    })
  },