小学期微信小程序实训篇3_双向绑定、图像image及轮播swiper、导航标签navigator、自定义组件及传值

目录

• 双向绑定、
• 图像image及轮播swiper、
• 导航标签navigator、
• 自定义组件

---

一、双向绑定

概念

1. 方向一: js中data里定义的值 ——> 标签中的值发生改变；
2. 方向二：标签中的值输入——> 改变到了js中data里定义的值；

使用model:value绑定

• js代码

Page({
  data: {
    inputValue: "我是没有感情的测试机器"
  }
})

• wxml代码

<!-- 
  model:value="{{inputValue}}"
  1 输入框的值发生了改变之后 
    自动获取到输入框的值 将它设置到  data中 inputValue
  2 通过 model:value 就实现双向绑定 
 -->
<input  model:value="{{inputValue}}"  type="text"   />
<view>{{inputValue}}</view>

二、图像image 标签

回顾web中的图片的特点

1. 图片的默认宽度和高度 直接等于 原图片的宽度和高度
2. 图片的宽度发生改变了之后,图片高度 会等比例 拉伸

小程序中图片默认情况

1. 默认的宽度和高度 320 * 240
2. 当图片宽度发生改变时候,高度还是240

可以将图片看成 相框 + 内容 图片渲染模式mode

1. mode ="scallToFill"
   默认值
   设置 图片的内容拉伸到相框的大小 (不按照比例)

2. mode="aspectFit"
   会等比例拉伸图片的内容
   一直拉伸直到内容某一个边触碰到相框
   可能会出现相框中的空白区域

3. mode="aspectFill"
   等比例的拉伸图片
   图片的内容会填充满 相框
   可能出出现 图片内容被裁剪

4. mode="widthFix"
   等比例拉伸图片内容 同时也会拉伸相框 (css中height的值可能会失效)
   才是最像 以前web中的图片的效果 宽度改变的时候高度会等比例等着改变

三、轮播图swiper

常用的属性

• autoplay 自动轮播 常用
• indicator-dots 面板指示器 常用
• indicator-color 未选中的指示点的颜色 不常用
• indicator-active-color 选中指示点的颜色 不常用
• circular 衔接滚动 常用

举栗

<!-- 
  轮播图标签
  1 swiper
  2 轮播项 swiper-item
  3 swiper-item 决定它里面放什么标签 
  4 情况
    1 默认情况下 swiper标签高度是150px  图片默认高度240px
    2 autoplay 自动轮播   常用
    3 indicator-dots 面板指示器 常用
    4 indicator-color 未选中的指示点的颜色 不常用
    5 indicator-active-color 选中指示点的颜色 不常用
    6 circular 衔接滚动  常用

 -->

<!-- 1 swiper 最外层 -->
<!-- <swiper autoplay="{{true}}"> -->
<swiper autoplay indicator-dots
indicator-color="yellow"
indicator-active-color="red"
circular
>
  <!-- 2 swiper-item 轮播项 -->
  <swiper-item> <image mode="aspectFill" src="/image/2.jpg"></image>  </swiper-item>
  <swiper-item> <image mode="aspectFill" src="/image/3.jpg"></image>  </swiper-item>
  <swiper-item> <image mode="aspectFill" src="/image/4.jpg"></image>  </swiper-item>
</swiper>

四、导航标签Navigator

概念

• 像之前的a标签一样
• 使用open-type设置方式

属性有

• target 在哪个目标发生跳转，默认为self（当前小程序），可以设置miniProgram（其他小程序）
• url 当前小程序内的跳转链接
• delta 回退的层数，当 open-type 为 'navigateBack' 时有效，表示回退的层数，默认值为1
• app-id 打开的小程序appid,当target="miniProgram"时有效，要打开的小程序 appId
• path 当target="miniProgram"v时有效，打开的页面路径，如果为空则打开首页
• extra-data 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow()中获取到这份数据。
• version 当target="miniProgram"时有效，要打开的小程序版本
• hover-class 指定点击时的样式类，当hover-class="none"时，没有点击态效果,默认navigator-hover
• …

open-type跳转方式

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面 ,对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。对应 wx.redirectTo 的功能
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

举栗

<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

举栗

wx.navigateTo()用法举栗：当前页调到test页，成功之后

• 成功回调函数中：回调当前页的函数，传递data到test页
• test监听当当前页的xxx事件，获得数据

wx.navigateTo({
  url: 'test?id=1',//url需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
  //events页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  // 成功回调函数
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
	//object.success 的回调函数 eventChannel
    const eventChannel = this.getOpenerEventChannel()

    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

五、自定义组件

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

1.新建组件

• 项目目录新建components文件夹

• 新建一个xxx组件，js中设置"component": true,

• 父组件json页面引入组件（注意/开头的话是绝对路径，反之为相对路径）

  {
    "usingComponents": {
      "cirimg":"/components/cirimg/cirimg"
    }
  }
  

• 使用<xxx></xxx>

5.1组件传值-父组件向子组件传值

目的：每次使用 子组件，可以 使用父组件中自定义的值 给子组件 ，特色显示内容

即 父组件使用子组件 的结构，但是显示的内容要由父组件自己决定

1. 父组件属性的方式向子组件传值：父组件使用属性传参 — 自定义属性名称 + 差值表达式

2. 子组件js接收父组件传递的数据：回到子组件的js文件里，找到properties属性来接收父组件传递过来的内容，需要默认值的话，在子组件的js里面properties中找到tabs属性 里面写上value

3. 子组件wxml显示传递的数据：去到子组件的wxml文件里，使用差值表达式数据绑定的方法绑定properties里面的属性名称–tabs

• 子组件js

// components/cirimg/cirimg.js
Component({
  /* 用来接收父组件的数据  */
  properties: {
    // 接收数据的名称
    titles:{
      // 这个数据是什么类型
      //  Object String  Number Array Boolean
      type:String,
      // 默认值(人家不传递 titles= 默认值 )
      value:"白粥"
    }
  }
})

5.2组件传值-子组件向父组件传值

基本步骤

• 子组件页面中定义事件点击事件

• js中定义事件方法,里面使用this.triggerEvent("父组件中监听的方法", 传递的值);，可以理解为传给父组件中一个方法绑定值，这个方法需要父组件监听收取。

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击评论按钮
    twoLevelCommentBtnClick: function (e) {
      let authorName = e.currentTarget.dataset.authorName;
      this.triggerEvent("父组件中监听的方法", 待传子组件中的值);
    },
  },
  

• 在父组件引入子组件的时候，需要bind:子传递的方法='父组件自定义方法'，通过父组件自定义的方法收取参数

  // 二级评论按钮点击
  父组件自定义方法(e) {
    this.setData({
      xxx: e.detail
    });
   
  },
  

参考：https://www.jianshu.com/p/d15cde54768d，微信开发文档