微信小程序实验二

页面的跳转

1.tabBar页面跳转-底部导航栏

底部导航栏属性配置

     app.json

"tabBar": {
    "list": [
    {
        "pagePath": "pages/home/home",
        "iconPath": "pages/images/首页-1.png",
        "selectedIconPath": "pages/images/首页.png",
        "text": "首页"
        },
    
    {
    "pagePath": "pages/center/center",
    "iconPath": "pages/images/发布-1.png",
    "selectedIconPath": "pages/images/发布.png",
    "text": "发布"
    },
    
    {
    "pagePath": "pages/mine/mine",
    "iconPath": "pages/images/我的-1.png",
    "selectedIconPath": "pages/images/我的.png",
    "text": "我的"
    }
    
    ]  
   }

iconPath: 未点击状态图标的路径
selectedIconPath: 点击后状态图标的路径
*确保路径的准确性
可以对状态栏的样式进行优化，这里不做处理，后续看能不能研究研究

首页页面home

定义一个按钮，并带参跳转

<button bindtap="Ftiao"  class="F" style="width: 300rpx; height: 150rpx">
  跳转到发布页面
</button>

.F{
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgb(131, 233, 233);
}

带参跳转，这里用到了wx.reLaunch .对于wx.switchTab,它也是能跳转到 tabBar 页面，但由于其不能带参，所以不采用它。当然对于如何带参数跳转还有其他方法，例如通过id来传参。还有对于不同数据类型，具体如何实现，这里就不细说。

data: {
     res:"从首页页面跳转而来"
  },
  Ftiao:function(){
    var that = this
    wx.reLaunch({
      url:'../center/center?resData='+that.data.res+''
  })

跳转到的目标页面center

data: {
     res:"",
     str:""
  },
   
  onLoad: function (options) {
    var that = this
      that.setData({
        res: options.resData,
        str: options.strData
      })
   },

<view>说明:  {{res}}</view>
<view>{{str}}</view>

对于我的页面mine与主页页面home是类似的

最终效果

从主页到center发布页

从我的页面到center发布页面

2.简单计算，跳转页面显示结果

主页面

主页面有两个输入框，分别输入两个数，下方四个按钮，分别为加减乘除，点击按钮进行跳转，跳转的页面显示结果

<view class="one">
    <text>输入第一个数值:</text>
    <input type="digit" bindinput="handleInput1" />
</view>
<view class="two">
    <text>输入第二个数值:</text>
    <input type="digit" bindinput="handleInput2" />
</view>
<view class="fun">
    <button bindtap="handletap1" style="width: 50rpx;">+</button>
    <button bindtap="handletap2" style="width: 50rpx;">-</button>
    <button bindtap="handletap3" style="width: 50rpx;">*</button>
    <button bindtap="handletap4" style="width: 50rpx;">/</button>    
</view>

.one,
.two {
  margin: 50rpx;
}
input {
  width: 600rpx;
  margin-top: 10rpx;
  border: 2px solid #ddd;
  border-radius: 25rpx;
}

样式部分自己可以随意设置

逻辑处理与跳转

js部分对数据做加减乘除处理以及页面跳转，这里对于对于页面跳转用到的是wx.navigateTo，它的功能是：保留当前页面，跳转到应用内的某个页面。

关键代码

data: {
    num: null,
    num1: null,
    res: 0,   
},
handleInput1(e) {
    this.setData({
            num: parseFloat(e.detail.value)
        })      
},

handletap1:function(e) {
     if (this.data.num && this.data.num1) {
         this.setData({
             res: this.data.num + this.data.num1    
         })
     } else {
         wx.showToast({
             title: '请给两个数输入值',
             icon: 'none',
             duration: 2000 
         })
     }   
      wx.navigateTo({
        url: '../p1/p1?resData='+this.data.res+'',
      })
 },

注意url的格式，路径和参数

跳转的页面

关键代码

data: {
      res: null
  },
  onLoad: function (options) {
     var that = this
     that.setData({
       res: options.resData
     })
  },

说明

对于主页面按钮的点击跳转，是由button来触发的，所以要为button添加一个监听函数，具体就是在< button >中添加 bindtap属性，以此来命名该button的监听函数，然后在js在实现。那么对于跳转到的页面，就使用onLoad函数在加载页面时接收数据，具体便是通过options.数据的名称来获取数据的内容，并赋值给本地变量。（根据数据类型和跳转方式来具体做对应的显示）

效果图