小程序内页面内参数的携带跳转和获取

今天用网上的接口自己按设计写的一个网页

我是先写的首页之后写的页面搜索

点击页面搜索框后会跳到搜索页面,搜索页面是一个独立出来的组件

<view class="search">
  <input class="search-item" type="text" placeholder="请输入搜索的商品" confirm-type="search" bindconfirm="getInfo">搜索</input>
</view>
<search-list title="{{title}}" info="{{searchInfo}}"></search-list>

头部的搜索框点击就相当于一个跳转作用所以再上图真正的搜索页内我使用了input
之前其它页面的搜索都是用的navigator用来做跳转到真正索页的

这是component组件用的navigator

<view class="search">
  <navigator class="search-item" url="/pages/search/index">搜索</navigator>
</view>

当我做完分类的时候

我想右侧品牌必须点击哪个就跳到搜索页显示对应的一大坨数据
而我恰恰想到只要我把它的品牌名称作为搜索框搜索的内容那我不是点击它就可以获取它对应的所以数据了吗哈哈说干就干

我在我wxml布局页内

<!-- 品牌展示 -->
  <scroll-view class="scroll-right" scroll-y="true">
    <view class="showShop">
      <view wx:for="{{info}}" wx:key="*this" class="shops">
        <view class="title">{{item.cat_name}}</view>
        <view class="shop-item" wx:for="{{item.children}}" wx:for-item="i" wx:key="*this">
          <navigator url="/pages/search/index?query={{i.cat_name}}"> 
          <image mode="widthFix" src="{{i.cat_icon}}"></image>
          <view>{{i.cat_name}}</view>
        </navigator>
        </view>
      </view>
    </view>
  </scroll-view>

i.cat.name 是我循环遍历里品牌的名字所以我要将它作为页面参数传递
我把它们拼接起来

如何传递

当我点击品牌图片后跳到我之前设置好的路径 并且左下角也显示我携带参数来到了搜索页

这时候我们就需要到搜索页对应的js内

参数都跑到j’s内的onload生命周期函数内了
打印查看

成功打印出来了
之后我又把获取到的参数保存到了data内
用来调用我封装的函数再次拼接后拿到后台数据

再此保存到data内把数据传递给我们展示数据组件就好了

总结

小程序页面间传递参数,参数跟在我们跳转路径的后面并且中间要用?间隔,参数与参数间要以&符号隔开
列: /pages/index/index?userid=1&page=2
获取一定记得,路径跳大哪里,就去对应的页面的js里找onload生命周期函数打印自带的option参数
它就在那里.