【微信小程序】小程序当中的需求：页面跳转、数据绑定······_微信小程序 跳转绑定页面怎么设置(1)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

<view>数据1：{{message}}</view>

• 展示数据

// pages/bind/bind.js
Page({

  /\*\*
 \* 页面的初始数据
 \*/
  data: {
    message:"沙雕李业",
  }
)}

2.2 数据更新

• wxml

<view>数据2：{{message}}</view>

<button bindtap="changeData">点击修改数据</button>

• 修改数据

Page({
  data: {
    message:"沙雕李业",
  },
  changeData:function(){
    // 修改数据
    this.setData({ message: "大沙雕李业"});
  }
})

3.获取用户信息

3.1 方式一

• wxml

<view bindtap="getUserName">获取当前用户名</view>

• js

  getUserName:function(){
  	// 调用微信提供的接口获取用户信息
    wx.getUserInfo({
      success: function (res) {
        // 调用成功后触发
        console.log('success',res)
      },
      fail:function(res){
        // 调用失败后触发
        console.log('fail', res)
      }
    })
  },

3.2 方式二

• wxml

<button open-type="getUserInfo" bindgetuserinfo="xxxx">授权登录</button>

• js

 xxxx:function(){
    wx.getUserInfo({
      success: function (res) {
        // 调用成功后触发
        console.log('success', res)
      },
      fail: function (res) {
        // 调用失败后触发
        console.log('fail', res)
      }
    })
  }

3.3 示例

• wxml

<!--pages/login/login.wxml-->
<view>当前用户名：{{name}}</view>
<view>
当前头像：<image src="{{path}}" style="height:200rpx;width:200rpx;"></image>
  </view>
<button open-type="getUserInfo" bindgetuserinfo="fetchInfo">获取信息button</button>

• js

// pages/login/login.js
Page({

  /\*\*
 \* 页面的初始数据
 \*/
  data: {
      name:"",
      path: "/static/default.png"
  },
  fetchInfo:function(){
    var that = this;
    wx.getUserInfo({
      success:function(res){
        console.log(res);
        that.setData({
          name:res.userInfo.nickName,
          path:res.userInfo.avatarUrl
        })
      }
    })
  },
  /\*\*
 \* 生命周期函数--监听页面加载
 \*/
  onLoad: function (options) {

  },

  /\*\*
 \* 生命周期函数--监听页面初次渲染完成
 \*/
  onReady: function () {

  },

  /\*\*
 \* 生命周期函数--监听页面显示
 \*/
  onShow: function () {

  },

  /\*\*
 \* 生命周期函数--监听页面隐藏
 \*/
  onHide: function () {

  },

  /\*\*
 \* 生命周期函数--监听页面卸载
 \*/
  onUnload: function () {

  },

  /\*\*
 \* 页面相关事件处理函数--监听用户下拉动作
 \*/
  onPullDownRefresh: function () {

  },

  /\*\*
 \* 页面上拉触底事件的处理函数
 \*/
  onReachBottom: function () {

  },

  /\*\*
 \* 用户点击右上角分享
 \*/
  onShareAppMessage: function () {

  }
})

注意事项：

+ 想要获取用户信息，必须经过用户授权（button）。
+ 已授权
+ 不授权，通过调用wx.openSetting

 
```
// 打开配置，手动授权。
// wx.openSetting({})

```

4.获取用户位置信息

• wxml

<view bindtap="getLocalPath">{{localPath}}</view>

• js

  data: {
      localPath:"请选择位置",
  },
  getLocalPath:function(){
    var that = this;
    wx.chooseLocation({
      success: function(res) {
        that.setData({localPath:res.address});
      },
    })
  },

5. for指令

• wxml

<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>
  <view wx:for="{{dataList}}" >{{index}} -  {{item}}</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>

• js

  data: {
    dataList:["白浩为","海狗","常鑫"],
    userInfo:{
      name:"alex",
      age:18
    }
  },

6.获取图片

• wxml

<!--pages/publish/publish.wxml-->
<view bindtap="uploadImage">请上传图片</view>
<view class="container">
  <image wx:for="{{imageList}}" src="{{item}}"></image>
</view>

• js

  data: {
    imageList: ["/static/hg.jpg", "/static/hg.jpg"]
  },

  uploadImage:function(){
    var that = this;

    wx.chooseImage({
      count:9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:function(res){
        // 设置imageList，页面上图片自动修改。
        // that.setData({
        // imageList: res.tempFilePaths
        // });

        // 默认图片 + 选择的图片； 
        that.setData({
          imageList: that.data.imageList.concat(res.tempFilePaths)
        });
      }
    });
  },

注意：图片目前只是上传到了内存。

---

🌐总结

• 标签（组件）

  • text
  • view
  • image
  • navigator，跳转到其他页面（默认只能跳转到非tabbar页面）
  • button，按钮（特殊：建议获取用户信息时）

• 事件

  • bindtap

  <view bindtap="func"></view>
  
  <view bindtap="func" data-xx="123"></view>
  
  

  func:function(e){
  	e.currentTarget.dataset
  }
  
  

• api

  • navigateTo

  wx.navigateTo({
  	url: '/pages/redirect/redirect?id='+nid,
  })
  
  

  • openSetting

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

direct/redirect?id='+nid,
})

```
+ openSetting

 
```

[外链图片转存中…(img-PYKbt1Ss-1715366365010)]
[外链图片转存中…(img-87wEfbAD-1715366365010)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！