day02 微信小程序

今日概要

指令、api、页面

1.跳转

1>对标签绑定点击事件

  /* 点击绑定的事件 */
  clickMe: function(e){
      console.log("点我了");
      var id = e.currentTarget.dataset.id;
      var name = e.currentTarget.dataset.name;
      console.log("id = ",id);
      console.log("name = ",name);
  }

2>页面跳转

 //跳转
 wx.navigateTo({
     url: "/pages/redirect/redirect?id="+id,
})

跳转到的页面如果想要接收参数id，可以在onload方法中接收

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

2.绑定

1>之前版本的数据绑定

<html>
    ...
    <div id="content"></div>
    <script>
        var name = "王权富贵";
        $("#content").val(name);
    </script>
</html>

2>微信小程序的数据绑定<html>

Vue.js

    ...
    <div id="content">{{name}}</div>
    <script>
        new Vue({
　　　　　　　el:"#app",
　　　　　　　data:{
　　　　　　　　name:"王权富贵"
　　　　　　　　　　}
　　　　　})</script>
</html>

3>基本显示

wxml

<view>数据1：{{message1}}</view>

展示数据

  /**
   * 页面的初始数据
   */
  data: {
    message1:"王权富贵",
  },

4>数据更新

wxml

<view>数据2：{{message2}}</view>

<button bindtap="changeData">点击修改数据</button>

修改数据

  /*页面的初始数据*/
  data: {
    message2:"东方月初",
  },

  /*按钮button，修改数据*/
  changeData:function(){//修改message1与message2的值(正确，前后端同时修改数据)
    this.setData({message2:"白月初"});
  },

3.获取用户信息

方式一：

wxml

<view>当前用户名：{{name}}</view>
<view>当前用户头像:
  <image src="{{path}}" style="height:200rpx;width:200rpx;"></image>
</view>

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

获取用户信息，获取并修改头像

  /*页面的初始数据*/
  data: {
    path:"/image/portrait.png"
  },

  /*块view,获取用户名*/
  getUserName:function(){
    var that = this;
    console.log("正在获取中...");
    wx.getUserInfo({
      success:function(res){
        //调用成功后触发
        console.log("Success",res);
        that.setData({name:res.userInfo.nickName});
        that.setData({path:res.userInfo.avatarUrl});
      },
      fail:function(res){
        //调用失败后触发
        console.log("Fail",res);
      }
    })
  }

方式二

wxml

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

  //授权登录button,允许微信小程序获取用户信息
  bindGetUserInfo:function(){
    var that = this;
    console.log("正在授权登录中...");
    wx.getUserInfo({
      success:function(res){
        //调用成功后触发
        console.log("Success",res);
        that.setData({name:res.userInfo.nickName});
        that.setData({path:res.userInfo.avatarUrl});
      },
      fail:function(res){
        //调用失败后触发
        console.log("Fail",res);
      }
    })
  }

　注意事项：

　　1>想要获取用户信息，必须经过用户授权(button)

　　2>已授权

　　3>不授权

　　　　想要再次通过调用　　wx.opensettings　　手动允许授权

day02 微信小程序

推荐阅读