51Testing软件测试论坛

标题: 微信小程序入门到实战（二） [打印本页]
作者: 听海——sky    时间: 2019-2-14 14:50
标题: 微信小程序入门到实战（二）
页面的跳转

在第一个小程序页面，预留了一个按钮，这是为了跳转到其他的页面，在微信小程序里面跳转的方法主要有下面三种：
- wx.navigateTo()
- wx.redirectTo()
- wx.switchTab()

  1. wx.switchTab({
  2.   url: '/index'
  3. })
复制代码


路径可得注意写对，区分绝对路径和相对路径：

绝对路径：一般在前面加上/，表示从根目录开始往下寻找
相对路径：相对于当前页面来说，每次使用../就是往上跳出一层


第一和第二种方法主要的区别是：前者保留当前页面(父页面，执行onHide()方法)，跳转到其他页面(子页面)，最后可以返回到当前页面(父页面)，两个页面之间是父子关系；后者关闭当前页面(执行onUnload()方法)，跳转到其他页面，无法返回，两个页面是平行关系。

第三种比较特别，这种跳转是专门跳转到带有tabBar 的页面，并关闭其他所有非tabBar 页面，使用上面两种跳转方式是无效的。从tabBar 的页面跳转到非tabBar 的页面，可以使用上面的两种方式。


轮播组件swiper

swiper通常是配合着swiper-item来使用的，前者是整个轮播图的容器，后者是单一轮播子项目容器，仅在前者内部使用，宽高默认为swiper 的宽高，只是一个容器，没有其他作用，但是缺少又不行。所以对于swiper-item都应该作用在swiper父节点上面。

  1. <swiper catchtap='onSwiperTab' indicator-dots='true' autoplay='true' interval='5000'>
  2.     <swiper-item>
  3.       <image src='/images/post/bl.png' ></image>
  4.     </swiper-item>
  5.     <swiper-item>
  6.       <image src='/images/post/xiaolong.jpg'></image>
  7.     </swiper-item>
  8.     <swiper-item>
  9.       <image src='/images/post/vr.png' ></image>
  10.     </swiper-item>
  11.   </swiper>
复制代码

我们不能想当然的认为在swiper-item里面只能放图片，还可以放入其他的一些东西，比如文本；实现一些其他的业务，比如弹幕轮播。

通过设置vertical='true'设置轮播滚动的方向，indicator-dots='true'指示器的显示

在轮播图里面，实际控制图片的大小是依靠image标签，默认有宽高。


事件的绑定

事件一般分两种：

冒泡事件：点击了子节点，父节点上面的事件也会执行；但是点击父节点上面的事件，子节点上面的事件不会执行bind开头：表示冒泡，后面接事件名

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。一般在子节点上面添加。catch开头：表示非冒泡，后面接事件名


  1. <view bindtap='onbind'>
  2. 我是事件2
  3. <view bindtap='onBind'>我是事件1</view>
  4. </view>

  6. onBind: function (event) {
  7.     console.log("事件1执行了")
  8.   },
  9.   onbind: function (event) {
  10.     console.log("事件2执行了")
  11.   }
复制代码

在我点击了事件1没有点击事件2的时候，事件2也会被触发，这就是冒泡；但是把方法改为catchtap，点击事件1的时候，只是事件1的函数触发，事件2函数不会被执行。还有一种catch:tap的声明事件的方法。



tabBar页面配置


前面说到在app.json是配置一些小程序项目的全局配置，可以在某个页面下面的json文件来单独配置该页面所需要的配置。


tabBar是在全局app.json里面配置，跟项目页面都需要在全局app.json里面注册一样，tabBar也是里面的一个属性，其中的list数组最上至少配置2个，最多5个，按照其在数组里面的顺序排布。


  1. "tabBar": {
  2.     "position":"top", // 按钮的位置，默认为bottom，设置为top的时候，icon设置无效
  3.     "borderStyle": "white",   // tabBar的颜色
  4.     "list": [
  5.       {
  6.         "pagePath": "pages/posts/post",  // 页面路径，必须先在pages属性中定义
  7.         "text": "阅读",
  8.         "iconPath": "images/tab/yuedu.png",    // 未选中的图片
  9.         "selectedIconPath": "images/tab/yuedu_hl.png"     // 选中的图片
  10.       },
  11.       {
  12.         "pagePath": "pages/movies/movies",
  13.         "text": "电影",
  14.         "iconPath": "images/tab/dianying.png",
  15.         "selectedIconPath": "images/tab/dianying_hl.png"
  16.       }
  17.     ]
  18.   }
复制代码

在全局的app.json里面配置好了，那么项目启动的时候就默认在最底部出现栏位的切换；


[attach]121833[/attach]


当然也可以改变其位置，使其出现在顶部，出现在顶部的时候，按钮的图片失效：


[attach]121834[/attach]


数据的绑定

小程序里面没有dom节点的概念，不能够像使用jQuery一样，通过操作DOM节点来给页面添加数据。相反的小程序通过数据绑定，来达到数据优先。这样的好处在于不用操作DOM，减少页面加载的时间。

  1. <view>
  2.   <view  src='{{author_img}}' catch:tap='onBind'>{{date}}</view>
  3. </view>

  5. Page({
  6. // 页面的初始数据
  7.   data: {
  8.     date:"我是事件1"
  9.   }
  10. }
复制代码

上面这种就是数据绑定的方式，在对应页面JS文件中的page()的data属性里面，填写页面需要的数据，以键值对的形式，然后在页面对应的位置使用{{key}}，绑定数据。当然可以在一个位置绑定多个数据，只需要这样{{key1}}{{key2}}。在标签的属性上面绑定数据的时候，需要使用"{{key}}"

  1. <view>
  2.   <view catch:tap='onBind'>{{date}}{{title}}</view>
  3. </view>

  5. Page({
  6.    data: {
  7.      date:'stp 17',
  8.      title:' hi icessun'
  9.    },
  10.   onLoad: function (options) {
  11.      var dates={
  12.        date:'stp 18',
  13.        title:'icessun'
  14.      }
  15.      this.setData(dates)
  16.   }
  17. }
复制代码

当然不可能直接在data里面写数据，这些数据都是从服务器上面获取的，在页面初始化的时候，就会向服务器发送请求，对数据进行一番处理后，通过this.setData()的方法把数据绑定在页面上面，this.setData()方法里面接收到的参数，相当于把这写参数，先放在data属性里面，然后在通过data属性中的键值，绑定在页面上。当然会把相同的属性名(key值)的覆盖掉






欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2