微信小程序获取用户信息,获取位置,for指令,获取图片

获取用户信息

第一种官方不推荐
<!-- 获取用户名 -->

<view>当前用户名:{{name}}</view>

<view>获取用户头像

 <image src="{{path}}" style="height:200rpx;width:200rpx"></image>

</view>

<view bindtap="getUsrName">获取房前用户名:</view>
 data: {
    message:"大白菜",
    name:'',
    path:'/img/mryhtx.png'
  },
      
  changData:function(){
    // 获取数据
    console.log(this.data.message);
    //修改数据 (错误  后端修改)
    // this.data.message="沙雕大白菜";
    // 前端正确修改方式
    this.setData({message:"大沙雕大白菜"})
  },
      
  getUsrName:function(){
  var that = this;
  console.log('sdf');
  // 调用微信接口,获取当前用户信息
  wx.getUserInfo({
    success: function(res) {
      console.log('success',res)
      // 获取用户名和头像
      that.setData({
        // 用户名
        name:res.userInfo.nickName,
        // 头像
        path:res.userInfo.avatarUrl
      })
    }, 
    file:function(res){
      // 调用失败后触发
    }
  })
}
第二种官方推荐的方法
<button open-type="getUserInfo" bindgetuserinfo="xxxx" >获取用户信息 </button>
 xxxx:function(){
  wx.getUserInfo({
    success: function(res) {
      console.log('success',res)
      // 获取用户名和头像
    },
    file:function(res){
      // 调用失败后触发
    }
  })
//手动授权
wx.openSetting(){}
获取用户位置
<view bindtap="getLocalPath">{{localPath}}</view>
Page({
  data: {
  localPath:"当前位置信息"
  },
 	getLocalPath:function(){
    var that=this;
  wx.chooseLocation({
    success:function(res){
      that.setData({localPath:res.address});
    },
  })
}
})
for指令
//<text>商品列表展示:</text>
//<view>
  //<view wx:for="{{dataList}}">{{index}}-{{item}}</view>
//</view>

<text>商品列表展示:</text>
<view>
  <view wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="x">{{idx}}-{{x}}</view>
</view>

<view>
  {{userInfo.name}}
  {{userInfo.age}}
</view>
<view>
  <view wx:for="{{userInfo}}">{{index}}-{{item}}</view>
</view>
// pages/goods/goods.js
Page({
  data: {
    dataList:[],//列表
    userInfo:{//字典
     name:'',
     age:
    }
  }
})
获取图片
<!--pages/publish/publish.wxml-->
<text>pages/publish/publish.wxml</text>
<view bindtap="uploadImage">请上传图片</view>
<view class="container">
  <image wx:for="{{imageList}}" src="{{item}}"> </image>
</view>
Page({
  data: {
  imageList:[]
  },
  uploadImage:function(){
    var that=this;
   wx.chooseImage({
     count: 9,
     siceType:,
     sourceType	:,
     success:function(res){
      
      // that.setData({
      //   imageList:res.tempFilePaths
      // });
      //
      that.setData({
      imageList:that.data.imageList.concat(res.tempFilePaths)
      });
     }
   });
  }
})
.container image{
  width: 200rpx;
  height:200rpx;
  padding:5rpx;
}
  • 注意事项:图片只是上传到内存
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大白菜程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值