微信小程序开发Day02：Swiper组件 导航栏配置 数据绑定 AppData 事件 js模块加载 缓存 列表渲染 Template 跳转页面并传参 页面交互API

目录

0x00  Swiper组件

0x01 App.json 中关于导航栏，标题的配置

0x02 Page页面与应用程序的生命周期

0x03 数据绑定（核心）(微信是单向绑定)

0x04 数据绑定的运算 与逻辑

0x05 AppData 区域

0x06 事件与事件对象

0x07使用require方法加载js模块文件

0x07 缓存 Storage

异步操作演示案例：

0x08 列表渲染（核心）

0x09 Template模板的使用

0x0A 事件中获取 组件的自定义属性：

0x0B 跳转页面并传参

0x0C 界面交互API

wx.showActionSheet()

---

 

---

0x00  Swiper组件

直接设置swiper item 的高度 和 image 的高度是没有用的，因为swiper 将高度写死了，决定轮播图组件高度的标签是swiper，直接设置swiper的高度即可。

swiper-item的高度默认自动充满swiper的高度。swiper-item也是一个容器，swiper-item的内容可以嵌套非常复杂的东西。

  <swiper indicator-dots="true" autoplay="true" interval="5000" vertical="true">
    <swiper-item>
      <image src='/images/1.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/2.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/3.jpg'></image>
    </swiper-item>
  </swiper>

注意这里有一个坑：

vertical为true的时候，表示轮播图为纵向轮播图，那么是不是将true改为false，轮播图就变成横向轮播图了呢？其实不然，因为这里的true是用引号引起来的，也就是说并不是布尔类型，而是字符串类型，js中只要字符串有值，就会被转化 bool 值true，所以这里应该改为"" 这样 转化为的布尔值才是false； 也可以使用数据绑定的写法 vertical = '{{false}}'

0x01 App.json 中关于导航栏，标题的配置

页面级别 json配置文件： 直接写，不需要写window，只能配置应用程序级别json配置中，部分window配置项的内容

{
  "navigationBarBackgroundColor":"#405f80"
}

应用程序级别json配置，需要些在window中

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/posts"

  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  }
}

css布局无非两种，要么垂直布局要么 水平布局

0x02 Page页面与应用程序的生命周期

页面的生命周期：

onload 页面加载

onshow 页面显示

onready 页面初次渲染

0x03 数据绑定（核心）(微信是单向绑定)

小程序中无法使用dom操作。（DOM优先的思想）

小程序使用的是数据优先的思想

页面级别的js文件：

  /**
   * 页面的初始数据
   */
  data: {
    date:"Nov 18 2020",
    title:"出售一个二手螃蟹"
  },
  

使用数据：{{date}} {{title}} 注意在属性中使用 不能把引号去掉 例如 src="{{img_url}}" 这样写才是正确的

一般情况下向服务器获取数据的代码写在onLoad中,

this.setData(js对象) 将数据拷贝到data中，下文中数据是对象的形式，所以会将对象中属性添加到data中。

注意这个坑：确保传给setData的是一个js对象

  /**
   * 页面的初始数据
   */
  data: {
    
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var post_content1 = {
        date:"Nov 19 2021",
        title:"出售一个螃蟹！还活着!",
        post_img:"/images/post/crab.png",
        content:"出售一个螃蟹！真的还活着！想要的同学联系QQ 2227627947",
        view_num:'112',
        collect_num:'96',
        author_img:'/images/avatar/1.png'
      };
      this.setData(post_content1);
  },

0x04 数据绑定的运算 与逻辑

{{"hello"+date}}

{{a+b+c}} 当abc都是数字时，会进行数学运算

wx:if = "{{condition}}" 条件渲染指令，即某个元素的显示隐藏控制,当condition为true时显示该元素，否则隐藏

wx:for 列表渲染指令 指定数组

wx:for-item 指定数组中每个元素，如果不指定for-item，会默认定义为item

wx:for-index = 'idx' 指定序号 {{idx}} 如果没有指定  默认指定为 index {{index}}

  <block wx:for="{{posts_key}}" wx:for-item="item">
  <view class="post-container">
    <view class='post-author-date'>
      <image class='post-author' src='{{item.img.author_img}}'></image>
      <text wx:if="{{item.text_condition}}" class='post-date'>{{item.date}}</text>
    </view>
    <text class='post-title'>{{item.title}}</text>
    <image class='post-image' src="{{item.img.post_img}}"></image>
    <text class='post-content'>{{item.content}}</text>
    <view class='post-like'>
      <image src='/images/icon/chat.png' class='post-like-image'></image>
      <text class='post-like-font'>{{item.collect_num}}</text>
      <image class='post-like-image' src='/images/icon/view.png'> </image>
      <text class='post-like-font'>{{item.view_num}}</text>
    </view>
  </view>
 </block>

页面级别的js文件：

  onLoad: function (options) {
      var posts_content =[
        {
          date:"Nov 19 2021",
          title:"出售一个螃蟹！还活着!",
          img:{
            post_img:"/images/post/crab.png",
            author_img:'/images/avatar/1.png'
          },
          content:"出售一个螃蟹！真的还活着！想要的同学联系QQ 2227627947",
          view_num:'112',
          collect_num:'96',
          text_condition:true
        },
        {
          date:"Nov 19 2021",
          title:"找个妹妹一起看电影",
          img:{
            post_img:"/images/post/bl.png",
            author_img:'/images/avatar/2.png'
          },
          content:"一起看比利林恩的中场战事,联系QQ 2227627947",
          view_num:'112',
          collect_num:'96',
          text_condition:true
        }
      ] 

      this.setData({'posts_key':posts_content});
  },

0x05 AppData 区域

在appData区域中可以查看本页面的数据绑定相关的情况

0x06 事件与事件对象

小程序的事件处理机制和web开发基本相同：

1. 产生事件
2. 捕捉事件
3. 回调函数
4. 处理事件

（1）事件监听的两种方式

bind:tap = "回调函数名" 监听tap事件

catch:tap ="回调函数名"

两者的区别：

除了用bind 还可以用catch ，如果用bind，那么子元素的事件会冒泡到父元素，

如果用catch，则子元素会阻止事件冒泡到父元素

（2）两种页面跳转方式

wx.navigateTo({}) 跳转 ，跳转后有返回按钮

wx.redirectTo({}) 跳转，跳转后没有返回按钮

Page({
  onTap:function(){
    wx.navigateTo({
      url: '/pages/posts/posts',
    })
  }
})

更深层次的区别：

wx.navigateTo 跳转后 原来的页面 将是 onHide状态，也就说原来的页面只是隐藏了，所以可以返回

wx.redirectTo 跳转后 原来的页面 将是 Unload 状态，也就说原来的页面已经卸载了，所以不能返回

Page({
  onTap:function(){
    // wx.navigateTo({
    //   url: '/pages/posts/posts',
    // }),
    wx.redirectTo({
      url: '/pages/posts/posts',
    })
  },
  onUnload:function(){
    console.log('welcome Page is Unload');
  },
  onHide:function(){
    console.log('welcome Page is onHide');
  }
})

 

alt +shift +f 快速代码格式化

0x07使用require方法加载js模块文件

用于模拟通过api 从后端获取数据

posts-data.js

var local_database = [{
    date: "Nov 19 2021",
    title: "出售一个螃蟹！还活着!",
    img: {
      imgSrc: "/images/post/crab.png",
      avatar: '/images/avatar/1.png'
    },
    content: "出售一个螃蟹！真的还活着！想要的同学联系QQ 2227627947",
    reading: '112',
    collection: '96',
    text_condition: true
  },
  {
    date: "Nov 19 2021",
    title: "找个妹妹一起看电影",
    img: {
      imgSrc: "/images/post/bl.png",
      avatar: '/images/avatar/2.png'
    },
    content: "一起看比利林恩的中场战事,联系QQ 2227627947",
    reading: '112',
    collection: '96',
    text_condition: true
  },
  {
    date: "Nov 19 2022",
    title: "找我家猫咪",
    img: {
      imgSrc: "/images/post/cat.png",
      avatar: '/images/avatar/2.png'
    },
    content: "找我家猫咪,联系QQ 2227627947",
    reading: '112',
    collection: '96',
    text_condition: true
  },
  {
    date: "Nov 19 2022",
    title: "出售VR眼镜",
    img: {
      imgSrc: "/images/post/vr.png",
      avatar: '/images/avatar/3.png'
    },
    content: "出售一个VR眼镜,联系QQ 2227627947",
    reading: '112',
    collection: '96',
    text_condition: true
  }
];

module.exports = {
  postList:local_database
}

module.exports 导出一个对象，然后在posts.js中就可以通过require来获取到该对象

注意这里只能用相对路径。

var postsData = require('../../data/posts-data.js');
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      'posts_key': postsData.postList
    });
  },

0x07 缓存 Storage

微信限制：10MB

wx.setStorageSync('健名', 字符串/对象 ) 设置缓存（同步）,如果该健名已经存在则会更新缓存

wx.setStorage() 设置缓存（异步）

如果不主动清除缓存，那么缓存将会一直存在

wx.getStorageSync("键名") 获取缓存

wx.removeStorageSync("键名" ) 删除缓存

wx.clearStorageSync() 清除所有缓存

异步操作演示案例：

  getPostCollectedAsy:function(){
    var that = this;
    wx.getStorage({
      key: 'posts_collected',
      success:function(res){
        var postsCollected = res.data;
        var postCollected = postsCollected[that.data.postId];
        postCollected = !postCollected;
        postsCollected[that.data.postId] = postCollected;
        that.showToast(postsCollected, postCollected);
      }
    })
  },

0x08 列表渲染（核心）

0x09 Template模板的使用

模板化编程：实现wxml 和 wxss 的复用

template模板的好处：实现wxml代码 在多个页面之间的复用。将多个页面共用的wxml代码抽离出来，封装在一个template文件中。需要的时候，导入该文件即可。

post-item-template.wxml

name属性用于给模板命名

<template name='postItem'>
	<view class="post-container">
		<view class='post-author-date'>
			<image class='post-author' src='{{item.img.avatar}}'></image>
			<text wx:if="{{item.text_condition}}" class='post-date'>{{item.date}}</text>
		</view>
		<text class='post-title'>{{item.title}}</text>
		<image class='post-image' src="{{item.img.imgSrc}}"></image>
		<text class='post-content'>{{item.content}}</text>
		<view class='post-like'>
			<image src='/images/icon/chat.png' class='post-like-image'></image>
			<text class='post-like-font'>{{item.collection}}</text>
			<image class='post-like-image' src='/images/icon/view.png'> </image>
			<text class='post-like-font'>{{item.reading}}</text>
		</view>
	</view>
</template>

post.wxml

import 导入模板文件

template 使用模板文件 is 指定 使用哪个模板，data用于传递数据给 模板。

技巧：data={{...item}} 将 item对象展开，在模板中就可以直接item中成员变量了

<import src="./posts-item/post-item-template.wxml"/>
  <block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item">
    <template is="postItem" data='{{item}}'></template>
 </block>

同样也可以将多个页面共用的wxss 样式抽离出来，封装到post-item-template.wxss中，需要时在wxss 文件中导入即可

@import "文件路径";

/* pages/posts/posts.wxss */
@import "./posts-item/post-item-template.wxss";

swiper{
  width:100%;
  height:480rpx;
}
swiper swiper-item image{
  width:100%;
  height:100%;
}

0x0A 事件中获取 组件的自定义属性：

组件的自定义属性，必须以data开头，然后可以若干个横线连接若干个单词,例如data-id = "{{}}"

<view catch:tap='onPostTap' data-postId="{{item.id}}" ></view>

如何获取到这个属性呢？

  onPostTap:function(event){
    var postId = event.currentTarget.dataset.postid;
    console.log(post);
    console.log("onPostTap");
  },

event.currentTarget 获取到触发该事件的 组件对象

event.target 和 event.currentTarget的区别

event.target 指的是当前 点击的组件

event.currentTarget 指的是 事件捕获的组件

注意：dataset中 变量的横杠会被去掉，变成小驼峰命名法，例如：data-post-name 就变成了 postName ，data-postId 就变成了postid

前端编写的原则：先静后动，先样式后数据

0x0B 跳转页面并传参

onPostTap:function(event){
    var postId = event.currentTarget.dataset.postid;
    wx.navigateTo({
      url: './post-detail/post-detail?id='+postid,
    })
  },

接收参数

  onLoad:function(option){
    var postId = option.id;
    var postData = postsData.postList[postId];
    this.setData({'postData':postData})
  }

0x0C 界面交互API

显示消息提示框

wx.showToast({

"title":"提示内容"，

"duration":"消失时间", 默认 1500ms

"icon":"success", 小图标 只支持 success  和 loading

success:function(){

},

fail:function(){

},

complete:function(){

}

})

wx.showModal(Object object)

显示模态对话框

实例代码：

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

    wx.showModal({
      title:"收藏",
      content:"确认要收藏该文章?",
      showCancel:true,
      cancelText:"不收藏",
      cancelColor: '#405f80',
      confirmText:"收藏",
      confirmColor:"#405f30"
    })

wx.showActionSheet()

演示案例：

 onShareTap: function (event) {
    var itemList = [
      "分享给微信好友",
      "分享到朋友圈",
      "分享到微博",
      "分享到QQ"
    ];
    wx.showActionSheet({
      itemList: itemList,
      itemColor: '#405f80',
      success: function (res) {
        //res.cancel 用户是不是点击了取消按钮
        //res.tapIndex 数组元素的序号
        wx.showModal({
          title: "用户" + itemList[res.tapIndex],
          content:"现在无法实现分享功能!"
        })
      }
    })
  }