【微信小程序】页面跳转和Template

1. 页面跳转

1.1 tabBar跳转

在 app.json 中

"tabBar": {
   
    "color": "#b7b7b7",
    "selectedColor": "#333333",
    "borderStyle": "black",
    "backgroundColor": "#ff0",
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "iconPath": "image/12.png",
        "selectedIconPath": "image/11.png",
        "text": "主页"
      },
      {
   
        "pagePath": "pages/category/category",
        "iconPath": "image/22.png",
        "selectedIconPath": "image/21.png",
        "text": "分类"
      },
      {
   
        "pagePath": "pages/cart/cart",
        "iconPath": "image/32.png",
        "selectedIconPath": "image/31.png",
        "text": "购物车"
      },
      {
   
        "pagePath": "pages/user/user",
        "iconPath": "image/42.png",
        "selectedIconPath": "image/41.png",
        "text": "我的"
      }
    ]
  },

1.2 navigator 标签

在 html 页面

<view class="my-item">
   <navigator url="/pages/address/address">地址管理</navigator>
</view>
<view class="my-item">
   <navigator url="/pages/user/mytest/mytest">我的测试</navigator>
</view>
<view class="my-item">
   <navigator url="/pages/user/ontest/ontest">事件测试</navigator>
</view>
<view class="my-item">
   <navigator url="/pages/user/logintest/logintest">登录测试</navigator>
</view>

1.3 wx.navigateTo(Object object)

仙人指路

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

在 js 中

防止 this 的指针改变，可以使用 箭头函数 =>

onShow: function () {
   
  let that = this;
  let userInfo = wx.getStorageSync('userInfo');
  if (!userInfo) {
   
	  wx.navigateTo({
   
	 	  url: "/pages/authorize/authorize"
    })
  } else {
   
	  that.setData({
   
		  thumb: userInfo.avatarUrl,
		  nickname: userInfo.nickName
	  })
  }
},

1.4 wx.redirectTo(Object object)

仙人指路

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

示例代码

wx.redirectTo({
   
  url: 'test?id=1'
})

1.5 wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
   
  url: '/index'
})

1.6 页面跳转时，传参数

let index = 1;
wx.navigateTo({
   
    url: "/pages/authorize/authorize?index=" + index;
})

/pages/authorize/authorize.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    console.log(options)
  },
/**
会打印：{index: "1"}
*/

1.7 轮播图跳转，事件委托

currentTarget 与 target 的区别
currentTarget ：触发事件的元素
target：当前的元素

<!-- 轮播图 -->
<swiper 
	class="swiper" 
    catchtap="carouselToDetail"
	indicator-dots="{
    {indicatorDots}}" 
	autoplay="{
    {autoplay}}" 
	interval="{
    {interval}}" 
	duration="{
    {duration}}" 
	circular="{
    {circular}}">
       <block wx:for="{
    {imgUrls}}" wx:key="url">
           <swiper-item>
               <image data-id="{
    {item.xxxid}}" src="{
    {item.url}}"/>
           </swiper-item>
       </block>
</swiper>

//点击轮播图
carouselToDetail: function(event){
   
	console.log(event);
}
//xxxid 的数据 在 target 中

2. json 配置文件

2.1 全局配置app.json

{
   
  "pages": [
    "pages/index/index",