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

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

一叶知秋2024-05-09 21:08:11JS逆向6

})


##### 1.2 页面跳转



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


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


redirect.js



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


##### 1.3 通过标签跳转



跳转到新页面

#### 2.数据绑定



...
<div id="content"></div>

<script>

var name = “李业迟到”;
$(‘#content’).val(name);


* vue.js

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


##### 2.1 基本显示


* wxml

 

数据1:{{message}}

* 展示数据

 

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

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



##### 2.2 数据更新


* wxml

 

数据2:{{message}}

点击修改数据

* 修改数据

 

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



#### 3.获取用户信息


##### 3.1 方式一


* wxml

 

获取当前用户名

* js

 

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



##### 3.2 方式二


* wxml

 

授权登录

* js

 

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



##### 3.3 示例


* wxml

 

当前用户名:{{name}}

当前头像:

获取信息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

 

{{localPath}}

* js

 

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



#### 5. for指令


* wxml

 

商品列表

{{index}} - {{item}}
{{idx}} - {{x}}


{{userInfo.name}}
{{userInfo.age}}


{{index}} - {{item}}

* js

 

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



#### 6.获取图片


* wxml

 

img
img
img

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

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

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

6.获取图片

  • wxml
<!--pages/publish/publish.wxml-->


[外链图片转存中...(img-foVbI3EV-1714734837606)]
[外链图片转存中...(img-DtI9UyN2-1714734837607)]
[外链图片转存中...(img-r4eXOSWF-1714734837607)]

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

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

**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

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

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

本文链接:https://www.yyzq.team/post/337810.html

分享给朋友:

发表评论

访客

看不清,换一张

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