The first week of wechat applet development: page setup, page Jump and data binding

This is the main interface , Including the list of lessons learned this week

1.app.json：

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

2.index.wxml：

<!--index.wxml-->
<view> Example 1</view>
<view class = "menu">
  <view class = "item">
    <image src="/static/icon_menu1.jpg"></image>
    <text> Aurora </text>
  </view>
  <view class = 'item'>
    <image src="/static/icon_menu1.jpg"></image>
    <text> Aurora </text>
  </view>
  <view class = 'item'>
    <image src="/static/icon_menu1.jpg"></image>
    <text> Aurora </text>
  </view>
  <view class = 'item'>
    <image src="/static/icon_menu1.jpg"></image>
    <text> Aurora </text>
  </view>
</view>

<!--  adopt js The way to jump 
 This method is no longer recommended by the government  -->
<view bindtap="clickMe" data-nid="1426851578" data-name="amyniez"> Point me to jump </view>

<!--  Jump directly through the tag  -->
<navigator url="/pages/redirect/redirect?id=666"> Jump to a new page </navigator>

<navigator url="/pages/bind/bind?id=345845342" style="font-weight: 550;"> Jump to the user access page </navigator>

<view> Example 3</view>
<view class="auction">
  <view class="item">
    <view class="title"> The first scene   Auction list </view>
    <view class="tips">
      <view class="status">2022/5/26</view> 
      <view class="counts">1230 Views </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 */

/*  Set to menu Below image  And auction Below image irrelevant  */
.menu image{
    
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
} 

.menu{
    
  display: flex;
  /*  Arrange horizontally  */
  /*  The specified spindle direction is row, From left to right  */
  flex-direction: row;
  /*  How elements are displayed horizontally ：center、space-around,space-between */
  /*  How to display in the spindle direction  */
  justify-content: space-around;
 /*  How to show in the direction of the secondary axis  */
  /* 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;
}

/*  Set up div Size  */
.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;/*  Add margins  */
}

4.bind.wxml：

It mainly involves data binding ：

<!--pages/bind/bind.wxml-->
<text> Data binding </text>

<!--  use {
    {
    }} To bind data  -->
<view> data 1：{
    {
    message}}</view>
<view> data 2：{
    {
    message}}</view>

<button bindtap="changedata"> Modifying data </button>

<view> Current user name ：{
    {
    name}}</view>
<view>
   The avatars ：<image src="{
    {path}}" style="height: 200rpx;width: 200rpx;"></image>
</view>

<!--  How to obtain user information   One , Warning ： It is no longer recommended by the authorities ！！！ -->
<!-- <view bindtap="getUserName"> Get current user information </view> -->

<!--  adopt button Get user information   Mode two ： -->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">  Get head nickname  </button>

<!--  The latest way   3、 ... and ： -->
<!-- <button bindtap="getUserProfile"> Get user information </button> -->

5.bind.js：

The implementation process of data binding ：

// pages/bind/bind.js

  /** *  Initial data of the page  *  Be careful !!!： *  Data binding can only be written to data here  *  It's no use writing about other places  */
  data: {
    
    message:" The first auction ",
    name:"",
    path:"/static/tabbar/icon_home3.jpg",
  },

  changedata:function(){
    
    console.log(this.data.message);// get data 

    // Modifying data ( error , Only the back end has been changed )
    //this.data.message = " The second auction "

    // Modifying data ( The front and rear ends have been changed )
    this.setData({
    message:" The second auction "})

  },

  // How to obtain user information   One ：
// getUserName:function(){
    
// var that = this;
// //console.log('amyniez');
// // Call the interface provided by wechat , Get user information 
// wx.getUserInfo({
    
// success:function(res){
    
// console.log('success',res.userInfo.nickName);
// that.setData({
    
// name:res.userInfo.nickName,
// path:res.userInfo.avatarUrl // User avatar acquisition 
// });
// },
// fail:function(res){
    
// console.log('fail',res)
// }
// })
// },

//  How to obtain user information   Two ：
// Major adjustment of wechat ！！！：
// Currently in use wx.getUserInfo Interface , You need to debug the basic library to 2.10 once 
// On the development tool, you need to select the debugging base library  2.16.0, To support . Otherwise, the development tool cannot call  wx.getUserProfile
getUserInfo:function(){
    
  var that = this;
  wx.getUserInfo({
    
    desc:" Getting ",
    success:function(res){
    
      console.log(' To be successful ',res);
      that.setData({
    
        name:res.userInfo.nickName,
        path:res.userInfo.avatarUrl
    });
  },
    fail:function(res){
    
      console.log('fail',res)
    }
  })
},

The user jumps to the page , Get the user's information ：