微信小程序：页面路由

功能：点击相应图标跳转到对应的网站上。

1.给相应的图标在data里面设置url。用点击方法将页面上的url传给到点击方法中。

<view class="column" bindtap="click" data-num="{{item.url}}">。这个num就是我们的网址。

2.在click方法中先记录下num，在用navigateTo传给web

let tiaozhuan=event.currentTarget.dataset.num;

  wx.navigateTo({ url: '../web/web?u='+tiaozhuan,})

这里面的u可以随便定义的。注意=和+不能忘记。

3.在web的js页面的onLoad方法里面，设置一个变量来获得u，然后将web.js里面的data的自己定义的url设置为u。

4.在web的wxml文件中，直接用web-view sic="{{url}}"来跳转到我们想去的页面即可。

最终效果：有淘宝、京东、B站，百度四个网站的图片，我们点击就可以进入相应的网站

拿B站测试：

first.js

// pages/first/first.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imglist:["../images/rr1.png","../images/rr2.png","../images/rr3.png"],
    weblist:[
      {"imgsrc":"../images/jr1.jpg","name":"淘宝","url":"https://www.taobao.com"},
      {"imgsrc":"../images/jr2.jpg","name":"京东","url":"https://www.jd.com"},
      {"imgsrc":"../images/jr3.jpg","name":"b站","url":"https://www.bilibili.com"},
      {"imgsrc":"../images/jr4.jpg","name":"百度","url":"https://www.baidu.com"},
    ]
  },
click(event){
  let tiaozhuan=event.currentTarget.dataset.num;

  wx.navigateTo({
    url: '../web/web?u='+tiaozhuan,
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

first.json

{
  "usingComponents": {}
}

first.wxml

<view class="pageview">
  <view class="top">
    <swiper class="imgswiper" indicator-dots="true" autoplay="true" interval="3000" duration="3000" circular="true">
      <block wx:for="{{imglist}}">
        <swiper-item>
          <image src="{{item}}" class="picture"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="list">
    <view>
      <block wx:for="{{weblist}}">
        <view class="column" bindtap="click" data-num="{{item.url}}">
          <view class="icon"><image src="{{item.imgsrc}}"></image></view>
          <view class="text" >{{item.name}}</view>
        </view>
      </block>
    </view>
  </view>


</view>

first.wxss

.pageview{
  width: 100%;
  height: 100vh;
  font-size: 15px;
}
.top{
  width: 100%;
  height: 30%;
}
.imgswiper{
  width: 100%;
  height: 100%;
}
.picture{
  width: 100%;
  height: 100%;
}
/*四个导航*/
.list{
  width: 100%;
  height: 15%;
  background-color:skyblue;
}
.list>view{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.column{
  width: 20%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon{
  width: 70%;
  height: 70%;
    /*border: 1px solid gray;*/
    border-radius: 50%;
}
.icon>image{
  width: 100%;
  height: 100%;
}
.text{
  width: 80%;
  height: 30%;
 /* border: 1px solid black;*/
  display: flex;
  justify-content: center;
  justify-content: center;
  color: black;
}

 

 ======================================================================

web.js

// pages/web/web.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let pageurl=options.u;
    this.setData({url:pageurl});
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

web.json

{
  "usingComponents": {}
}

web.wxml

<!--pages/web/web.wxml-->
<web-view src="{{url}}">

</web-view>

web.wxss

/* pages/web/web.wxss */