微信小程序开发（二）
目录
跳转（非tabbar的页面）
对标签绑定点击事件
页面跳转
通过标签跳转
数据绑定
基本显示
数据更新
获取用户信息
方式一
方式二：（和方式一效果相同，但是比较推荐）
获取用户位置信息
for指令
跳转（非tabbar的页面）
对标签绑定点击事件
下方的代码对应如下页面，可以看到代码中在“广场”那一行
广场 bindtap是一个小程序中用于绑定组件点击事件的属性。它可以在组件上设置，当组件被点击时会触发相应的事件处理函数。
我的昵称
我的账号：12345678
服务
收藏
广场
设置
页面跳转
在对应的js文件中，写了如下代码：
wx.navigateTo 是一个小程序API，用于跳转到新页面，并将新页面加入当前页面栈中。在新页面中，用户可以返回上一个页面。
clickMe:function(e){
var nid = e.currentTarget.dataset.nid;
console.log(nid);
var name = e.currentTarget.dataset.name;
console.log(name);
wx.navigateTo({
url: '/pages/jump/jump?id='+nid,
})
}这段代码是在js文件中写出对应的 `clickMe` 的函数，当用户点击“广场”时会被触发。函数从点击元素的数据集中获取 `nid` 和 `name` 的值，然后将它们记录到控制台。然后，使用 `wx.navigateTo` 方法，函数将导航到一个新页面，该页面的 URL 包括 `nid` 值作为查询参数。（这个新界面的URL是pages文件夹下jump文件中的jump.wxml页面）
点击“广场”之后，界面跳转到设置的URL，并且在下方输出想要的nid或者name：
获取想要的nid（使用jump.js文件中的onLoad监听函数）：
onLoad 函数是小程序页面的生命周期函数之一，当一个页面被加载时，onLoad 函数会被触发执行。它的作用是在页面加载时，进行一些初始化操作，例如获取从其他页面传来的数据，或进行一些当前页面数据的初始化等操作。
通过标签跳转
，可以通过设置 url 属性来跳转到指定的页面或网页。
通过以下代码也能成功跳转：
广场
url：表示要跳转的目标页面路径或网页链接。
target：表示在何种应用内打开目标页面或网页。默认值为 self，表示在当前小程序中打开；还可以设置为 miniProgram，表示在其它小程序中打开；或者设置为 h5，表示在网页中打开。
open-type：表示跳转方式的类型。常见的值包括 navigate（对应小程序的页面栈导航，保留当前页面可以返回）、redirect（替换当前页面，不可返回）、switchTab（切换 Tab 页）、reLaunch（关闭所有页面，打开到应用内的某个页面），以及 getPhoneNumber、getUserInfo 等用户信息授权操作。
hover-class：表示当用户鼠标悬停在该组件上时应用的样式类。数据绑定
基本显示
在wxml中：
数据：{{message}} 展示数据，在js中
Page({
/**
* 页面的初始数据
*/
data: {
message:890,
name: "",
path:"/pages/static/head.jpeg"
},数据更新
在wxml中：
数据：{{message}}
修改数据：
Page({
/**
* 页面的初始数据
*/
data: {
message:890,
name: "",
path:"/pages/static/head.jpeg"
},
changeData:function(){
//获取数据
console.log(this.data.message);
//修改数据
this.setData({message:"123"})
},获取用户信息
方式一
在wxml中
获取当前用户名 js：
getUserName:function(){
var that =this;
//调用微信的接口，获取当前用户信息
wx.getUserInfo({
success:function(res){
//调用成功后触发
console.log(res)
that.setData(
{name:res.userInfo.nickName,
path:res.userInfo.avatarUrl}
);
},
fail:function(res){
//调用失败后触发
}
})
},点击“获取当前用户名”几个字之后，会获取用户姓名和微信头像
获取到用户名和头像
方式二：（和方式一效果相同，但是比较推荐）
wxml
js
xxxx:function(){
var that =this;
wx.getUserInfo({
success:function(res){
//调用成功后触发
console.log(res)
that.setData(
{name:res.userInfo.nickName,
path:res.userInfo.avatarUrl}
);
},
fail:function(res){
//调用失败后触发
}
})
},获取用户位置信息
wxml
位置:{{localPath}} js
data: {
localPath:"请选择位置",
},
getlocalPath:function(){
var that = this;
wx.chooseLocation(
{success:function(res)
{
that.setData({localPath:res.address});
},
}
)
},点击“位置”后：
选择完位置将自动显示
for指令
wxml：
商品列表
{{index}} - {{item}}
{{idx}}-{{x}}
{{userInfo.name}}
{{userInfo.age}}
{{index}}-{{item}}
js
Page({
/**
* 页面的初始数据
*/
data: {
dataList:["1","2","3"],
userInfo:{
name:"liming",
age:"18"
}
},结果：
总结：本文主要介绍了微信小程序跳转和数据绑定两方面的内容