【微信小程序】小程序当中的需求：页面跳转、数据绑定······_微信小程序 跳转绑定页面怎么设置(1)
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事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
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
l
<view bindtap="getLocalPath">{{localPath}}</view>
- js
[外链图片转存中…(img-W2P1h2zm-1715003577212)]
[外链图片转存中…(img-6n9zTR2W-1715003577212)]
[外链图片转存中…(img-cFvpY2RM-1715003577212)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
