微信小程序Day2

系列文章目录

微信小程序Day1

前言

微信小程序开发

一、页面绑定

实现小程序中页面跳转

使用步骤

1.使用navigator组件

 <navigator url="/pages/redirect/redirect?id=666">精品文章</navigator> 

2.使用bindtap组件

在index.wxml文件中，使用微信中的bindtap属性，如果需要传值即可使用以data-（变量名）进行赋值

 <view class="item" bindtap="clickme" data-nid="123" data-name="wlx">

在index.js文件下添加clickme事件，使用currentTarget下的dataset进行数据传值

    /**
   * 点击绑定的事件
   */
  clickme :function(e) {
    var nid = e.currentTarget.dataset.nid;
    var name = e.currentTarget.dataset.name;
    console.log(nid);
    wx.navigateTo({
      url: '/pages/redirect/redirect?id=&&name='+(nid,name),
    })
  }

 二 、用户绑定

额外创建一个文件夹 路径为pages/redirect/redirect，在redirect.wxml文件中进行用户数据绑定的操作。

<!--pages/redirect/redirect.wxml-->
<text>跳转页面</text>
<view>数据：{{message}}</view>
<button bind:tap="changeData">点击修改</button>
<view>当前用户名：{{name}}</view>
<view>
  当前头像：
  <image src="{{path}}"
  style="height: 200rpx; width: 200rpx;"></image>
</view>
<view bind:tap="getUserName">获取用户</view>

其中{{}}的格式是专门用于数据绑定的形式，在{{}}中变量的值会在redirect.js文件中page{}中进行赋值。

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件 来响应用户的触摸行为。

① 通过 bindtap ，可以为组件绑定 tap 触摸事件，语法如下：

<button type="primary" bindtap="bindtap">按钮</button>

② 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event （一般 简写成 e ） 来接收：

Page({

  bindtap(e){

    console.log(e)

  }

})

redirect.js

// pages/redirect/redirect.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      message:"wanlexuan",
      name:"",
      path:"/image/default_head.png"
  },
  getUserName:function(){
    var that = this;
    console.log('sdf');
    //调用微信的接口，获取当前用户信息
    wx.getUserInfo({
      success:function(res){
        //调用成功之后触发
        console.log('success',res);
        that.setData({
          name : res.userInfo.nickName,
          path : res.userInfo.avatarUrl
        })
      },
      fail:function(res){
        //调用失败后触发
        console.log('fali',res)
      }
    })
  },
  changeData:function(){

    //获取数据
    console.log(this.data.message);

    //修改数据（错误，只修改后端）
    //this.data.message = "wanlele";
    
    //修改数据
    this.setData({message: "wanlele"})
  },
 ...
})

 效果图：

                        开始界面：

点击获取用户之后：

总结

以上总结了在微信小程序开发中用户绑定和页面绑定的方法，后续将持续更新。