微信小程序开发之十二 —— 数据携带

学习前后

上一篇：微信小程序开发之十一 —— 页面渲染
下一篇：微信小程序开发之十三 —— 生命周期与用户信息获取

相对路径与绝对路径

补充下路径知识点

相对路径

我们大多数时候使用的都是相对路径

• “./” 表示当前目录 <image src="./images/喵咪.png"/ >等同于<image src=“images/喵咪.png”/ >
• “…/” 表示上一级目录
• “/” 表示当前根目录，是相对目录
  如/pages/first/imshow/imshow和./…/first/imshow/imshow指向的是同一个路径

绝对路径

绝对路径就是这个路径不管放在哪里都能够找到的路径，比如网络图片链接

https://img-blog.csdnimg.cn/20200722204545114.png

也可以从盘符开始的路径

D:\csdn\images

链接携带数据

URL的字符

我们可以看到每次使用搜索引擎进行关键字查询时URL就会显示一大堆的字符，如使用百度搜索微信小程序时URL为

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=微信小程序&oq=%25E5%25BE%25AE%25E4%25BF%25A1%25E5%25B0%258F%25E7%25A8%258B%25E5%25BA%258F&rsv_pq=d9a300010006d377&rsv_t=e037F65o%2Biifuo1UocQabbXXAKeQof9TS1Hr2rQNFoxBfu48MDDbhhtDKGI&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=t

我们可以发现连接多了许多书籍信息，我们来看一下其中?、&、=表示的是什么。

1. / 用来分隔目录与子目录
2. ？用来分隔实际的URL与参数
3. & 是URL中指定的参数间的分割符
4. = 是URL中指定的参数的值
5. #是同一个页面的标识符，类似页面的书签

获取URL链接数据

先新建一个lifecyle页面设置成首页，然后在first页面下添加一个二级页面pages/first/detail/detail,在lifecycle.wxml添加一个带有一堆数据的URL

<navigator id="detailshow" url="./../first/detail/detail?id=lesson&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle" class="item-link">点击链接看控制台</navigator>

点击后我们可以看到页面跳转到了detail页面，如果我们能够获取到链接信息就能够做到数据跨页面传输了。

获取url参数的生命周期函数onload

onload是Page页面的生命周期函数，当页面加载时触发。一个页面只会调用一次，可以在 onLoad 函数的参数中获取打开当前页面路径中的参数。
在detail.js的onload函数里面添加

  onLoad: function (options) {
    console.log(options)
  },

再次点击lifecycle页面链接，可以看到控制台输出信息如下,可以发现控制台已经捕获到了URL里面的所有参数

数据跨页面渲染

前面我们已经看到了数据可以通过URL进行跨页面渲染，接下来我们使用前面的电影列表来展示一下结果
将电影列表那个的wxss和wxml复制到lifecycle里面，给navigator里面的url添加为detail的页面即可

<view class="page__bd">
    <view class="weui-panel weui-panel_access">
        <view class="weui-panel__bd" wx:for="{{movies}}" wx:for-item="movies" wx:key="*item">
            <navigator url="./../first/detail/detail?id={{index}}&name={{movies.name}}&img={{movies.img}}&desc={{movies.desc}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                    <image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}" sytle="height:auto"></image>
                </view>
                <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                    <view class="weui-media-box__title">{{movies.name}}</view>
                    <view class="weui-media-box__desc">{{movies.desc}}</view>
                </view>
            </navigator>
        </view>
    </view>
</view>

.weui-media-box__hd_in-appmsg{
  height: auto;
}

在detail.js里+面的data添加

detail:{
      name:"",
      img:"",
      desc:""
    },

在onload函数里面赋值

onLoad: function (options) {
  console.log(options)
  this.setData({
    detail: options,
  }
  )
},

效果：记得看控制台，会发现可以获取到每个对应url连接的值

组件携带数据dataset

.wxml

<view id="viewclick" style="background-color: red;padding:20px;" data-sku="100000177760" data-spu="100000177756" data-pid="100000177756" data-toggle="Apple iPhone XR" data-jd-color="Red" data-productBrand="Apple" bindtap="clickView">
  <image id="imageclick" src="https://img13.360buyimg.com/n7/jfs/t1/842/9/3723/77573/5b997bedE4f438e5b/ccd1077b985c7150.jpg" mode="widthFix" style="width:200rpx" bindtap="clickImage">点击button</image>
</view>

.js

clickImage:function(event){
    console.log('我是button',event)
    wx.navigateTo({
      url: "/pages/home/detail/detail?id=imageclick&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle"
    })
  },
clickView: function (event) {
    console.log('我是view',event)
    wx.navigateTo({
      url:"/pages/home/detail/detail?id=viewclick&uid=tcb&key=tap&ENV=weapp&frompage=lifecycle"
    })
  },

当我们点击红色空白处（非图片区域）时，只会触发clickView，target与currentTarget的值相同。而当我们点击图片时，就会触发两个事件处理函数。currentTarget指向事件所绑定的元素，而target始终指向事件发生时的元素。
官方文档：currentTarget
这是上一篇末尾让大家自己看的官方文档事件对象中的一个内容，还是看文档吧。