微信小程序开发 第一周：页面设置、页面跳转、数据绑定

这是主界面，包括了这个星期学习的一些列子

1.app.json：

{
  "pages": [
    "pages/index/index",
    "pages/home/home",
    "pages/redirect/redirect",
    "pages/bind/bind"
  ],
  "window": {
    "navigationBarBackgroundColor": "#66ffcc",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "拍卖会"
  },
  "tabBar": {
    "selectedColor": "#FF0000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabbar/icon_mine0.jpg",
        "selectedIconPath": "/static/tabbar/icon_mine2.jpg"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "/static/tabbar/icon_home1.jpg",
        "selectedIconPath": "/static/tabbar/icon_home3.jpg"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

2.index.wxml：

<!--index.wxml-->
<view>例子1</view>
<view class = "menu">
  <view class = "item">
    <image src="/static/icon_menu1.jpg"></image>
    <text>极光</text>
  </view>
  <view class = 'item'>
    <image src="/static/icon_menu1.jpg"></image>
    <text>极光</text>
  </view>
  <view class = 'item'>
    <image src="/static/icon_menu1.jpg"></image>
    <text>极光</text>
  </view>
  <view class = 'item'>
    <image src="/static/icon_menu1.jpg"></image>
    <text>极光</text>
  </view>
</view>

<!-- 通过js的方式进行跳转
官方已经不推荐用这种方式 -->
<view bindtap="clickMe" data-nid="1426851578" data-name="amyniez">点我跳转</view>

<!-- 直接通过标签进行跳转 -->
<navigator url="/pages/redirect/redirect?id=666">跳转到新的页面</navigator>

<navigator url="/pages/bind/bind?id=345845342" style="font-weight: 550;">跳转到用户访问页面</navigator>

<view>例子3</view>
<view class="auction">
  <view class="item">
    <view class="title">第一场 拍卖清单</view>
    <view class="tips">
      <view class="status">2022/5/26</view> 
      <view class="counts">1230次浏览</view>
    </view>
    <view class="big">
      <image src="/static/jiguang.jpg"></image>
    </view>
    <view class="small">
      <image src="/static/icon_menu1.jpg"></image>
      <image src="/static/icon_menu1.jpg"></image>
      <image src="/static/icon_menu1.jpg"></image>
      <image src="/static/icon_menu1.jpg"></image>
    </view>
  </view>

</view>

3.index.wxss：

/* pages/index/index.wxss */

/* 设置为menu下面的image
与auction下面的image无关 */
.menu image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
} 

.menu{
  display: flex;
  /* 在水平方向排列 */
  /* 规定主轴方向为row，即为从左向右 */
  flex-direction: row;
  /* 元素在水平方向如何展示：center、space-around，space-between */
  /* 在主轴方向如何展示 */
  justify-content: space-around;
 /* 在副轴方向如何展示 */
  /* align-content: center; */
}

.menu .item{
  display: flex;
  flex-direction: column;
  align-content: flex-end;
}

.auction .item .title{
  font-size: 50rpx;
  font-weight: 600;
}

.auction .item .tips{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 30rpx;
  color: darkgray;
}

/* 设置div的大小 */
.auction .item .big{
  height: 500rpx;
  overflow: hidden;
}

.auction .item .big image{
width: 100%;
height: 100%;
}

.auction .item .small{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.auction .item .small image{
  height: 100rpx;
  width: 100rpx;
  padding-right: 20rpx;/* 添加边距 */
}

4.bind.wxml：

主要涉及数据绑定：

<!--pages/bind/bind.wxml-->
<text>数据绑定</text>

<!-- 用{{}}来绑定数据 -->
<view>数据1：{{message}}</view>
<view>数据2：{{message}}</view>

<button bindtap="changedata">修改数据</button>

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

<!-- 获取用户信息方式 一，警告：官方已经不建议用这种方式了！！！ -->
<!-- <view bindtap="getUserName">获取当前用户信息</view> -->

<!-- 通过button获取用户信息 方式二： -->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

<!-- 最新的方式 三： -->
<!-- <button bindtap="getUserProfile">获取用户信息</button> -->

5.bind.js：

数据绑定的实现过程：

// pages/bind/bind.js

  /**
   * 页面的初始数据
   * 注意!!!：
   *    数据绑定只能写到data这里
   *    写到其他地方没用
   */
  data: {
    message:"拍卖会第一场",
    name:"",
    path:"/static/tabbar/icon_home3.jpg",
  },

  changedata:function(){
    console.log(this.data.message);//获取数据

    //修改数据(错误，只改了后端)
    //this.data.message = "拍卖会第二场"

    //修改数据(前后端都改了)
    this.setData({message:"拍卖会第二场"})

  },

  //用户信息获取方式 一：
// getUserName:function(){
//   var that = this;
//   //console.log('amyniez');
//   //调用微信提供的接口，获取用户信息
//   wx.getUserInfo({
//     success:function(res){
//       console.log('success',res.userInfo.nickName);
//       that.setData({
//         name:res.userInfo.nickName,
//         path:res.userInfo.avatarUrl //用户头像获取
//       });
//     },
//     fail:function(res){
//       console.log('fail',res)
//     }
//   })
// },

// 获取用户信息方式 二：
//微信的重大调整！！！：
//目前使用wx.getUserInfo接口，需要将基础库调试到2.10一下
//开发工具上需要将调试基础库选择 2.16.0，才支持。否则开发工具上无法调用 wx.getUserProfile
getUserInfo:function(){
  var that = this;
  wx.getUserInfo({
    desc:"正在获取",
    success:function(res){
      console.log('获取成功',res);
      that.setData({
        name:res.userInfo.nickName,
        path:res.userInfo.avatarUrl
    });
  },
    fail:function(res){
      console.log('fail',res)
    }
  })
},

用户跳转页面，获取用户的信息：