当前位置:首页 > JS逆向 > 【微信小程序】小程序当中的需求:页面跳转、数据绑定······_微信小程序 跳转绑定页面怎么设置(1)

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

一叶知秋2024-05-12 19:15:34JS逆向2

img
img

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

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

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

+ display: flex
+ flex-direction: row/column
+ justify-content:…
+ align-item:…
  • 小程序开发

    • 组件(标签)
      • text
      • view
      • image
    • 样式
      • rpx

🌐今日概要

  • 指令
  • api
  • 页面

🌐今日内容

1. 跳转
1.1 对标签绑定点击事件
<view bindtap="clickMe" data-nid="123" data-name="SD" >
点我跳转
</view>

Page({
  ...
  /\*\*
 \* 点击绑定的事件
 \*/
  clickMe:function(e){
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
  }
})

1.2 页面跳转
wx.navigateTo({
	url: '/pages/redirect/redirect?id='+nid
})

跳转到的页面如果想要接受参数,可以在onLoad方法中接受。

redirect.js

Page({
/\*\*
 \* 生命周期函数--监听页面加载
 \*/
  onLoad: function (options) {
    console.log(options);
  }
})

1.3 通过标签跳转
<navigator url="/pages/redirect/redirect?id=666">
跳转到新页面
</navigator>

2.数据绑定
<html>
	...
	
	<div id="content"></div>
	
	<script>
 var name = "李业迟到";
 $('#content').val(name);
 </script>
	
</html>

  • vue.js
<html>
	<div id="app">
        <div>{{message}}</div>
    </div>

    <script>
        new Vue({
          el: '#app',
          data: {
            message: '老男孩教育Python'
          }
        })
    </script>
	
</html>

2.1 基本显示
  • wxml
<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

img
img
img

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

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

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

l

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

  • js

[外链图片转存中…(img-W2P1h2zm-1715003577212)]
[外链图片转存中…(img-6n9zTR2W-1715003577212)]
[外链图片转存中…(img-cFvpY2RM-1715003577212)]

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

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

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

扫描二维码推送至手机访问。

版权声明:本站部分文章来自互联网采集,请查看免责申明

本文链接:https://blog.yyzq.team/post/338398.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。