微信小程序开发（二）

目录

跳转（非tabbar的页面）

对标签绑定点击事件

页面跳转

通过标签跳转

数据绑定

基本显示

数据更新

获取用户信息

方式一

 方式二：（和方式一效果相同，但是比较推荐）

获取用户位置信息

for指令

跳转（非tabbar的页面）

对标签绑定点击事件

下方的代码对应如下页面，可以看到代码中在“广场”那一行

<text  bindtap="clickMe" data-nid = "123" data-name="lsc">广场</text>

 bindtap是一个小程序中用于绑定组件点击事件的属性。它可以在组件上设置，当组件被点击时会触发相应的事件处理函数。

<view class="container">
  <image src="/pages/static/head.jpeg"  ></image>
  <text class = "my-text">我的昵称</text>
  <text class = "my-text">我的账号：12345678</text>
</view>
<view class="my-text1">
  <text >服务</text>
  <text >收藏</text>
  <text  bindtap="clickMe" data-nid = "123" data-name="lsc">广场</text>
  <text >设置</text>
</view>

页面跳转

 在对应的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 函数会被触发执行。它的作用是在页面加载时，进行一些初始化操作，例如获取从其他页面传来的数据，或进行一些当前页面数据的初始化等操作。

通过标签跳转

<navigator> 是微信小程序中的一个组件，它可用于实现页面跳转、打开网页等功能。该组件类似于 HTML 中的超链接 <a>，可以通过设置 url 属性来跳转到指定的页面或网页。

通过以下代码也能成功跳转：

  <navigator url ="/pages/jump/jump">广场</navigator>

<navigator> 组件有以下几个常用属性：

url：表示要跳转的目标页面路径或网页链接。
target：表示在何种应用内打开目标页面或网页。默认值为 self，表示在当前小程序中打开；还可以设置为 miniProgram，表示在其它小程序中打开；或者设置为 h5，表示在网页中打开。
open-type：表示跳转方式的类型。常见的值包括 navigate（对应小程序的页面栈导航，保留当前页面可以返回）、redirect（替换当前页面，不可返回）、switchTab（切换 Tab 页）、reLaunch（关闭所有页面，打开到应用内的某个页面），以及 getPhoneNumber、getUserInfo 等用户信息授权操作。
hover-class：表示当用户鼠标悬停在该组件上时应用的样式类。

数据绑定

基本显示

在wxml中：

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

展示数据，在js中

Page({
  /**
   * 页面的初始数据
   */
  data: {
    message:890,
    name: "",
    path:"/pages/static/head.jpeg"
  },

数据更新

在wxml中：

<view>数据：{{message}}</view>
<button bindtap="changeData">点击修改数据</button>

修改数据：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    message:890,
    name: "",
    path:"/pages/static/head.jpeg"
  },
  changeData:function(){
    //获取数据
    console.log(this.data.message);
    //修改数据
    this.setData({message:"123"})
  },

获取用户信息

方式一

在wxml中

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

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

<button open-type="getUserInfo" bindgetuserinfo="xxxx">获取信息</button>

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

<view bindtap="getlocalPath">位置:{{localPath}}</view>

js

  data: {

    localPath:"请选择位置",
  }, 
 getlocalPath:function(){
     var that = this;
    wx.chooseLocation(

      {success:function(res)
        {
          that.setData({localPath:res.address});
        },
      }
    )
  },

点击“位置”后：

选择完位置将自动显示

for指令

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

Page({
  /**
   * 页面的初始数据
   */
  data: {

    dataList:["1","2","3"],
    userInfo:{
      name:"liming",
      age:"18"
    }
  },

 结果：

 总结：本文主要介绍了微信小程序跳转和数据绑定两方面的内容