当微信小程序遇上filter~

在微信小程序的开发过程中，当你想要实现不同页面间的数据绑定，却为此抓耳饶腮时，不妨让微信小程序与filter 来一场完美的邂逅，相信会给你带来别样的惊喜~

前段时间被安利了一个很实用的公众号—前端早读课，它简洁、大方的页面和方便、实用的功能深深地吸引着我~(＾Ｕ＾)ノ 恰好这段时间学了小程序，就自己仿着写了个前端早读课的小程序。

实现的功能

  • 不同页面间的数据绑定
  • 随机显示数组里的元素
  • 实时显示系统的日期
  • 鼠标点击和页面跳转等基本功能
  • swiper组件和template样式模板的使用
  • 使用easy mock模拟后台数据并进行动态传参

项目展示

整个项目包括“每日一看”、“看看世界”、“情报局”和“介绍”四个主页面。

完美邂逅~

在开发“每日一看”页面的过程中，我遇到了一个难题，如何将“每日一看”页面中获取的数据与阅读详情页的数据绑定起来，也就是从这时起，微信小程序开始邂逅filter~

下面简单介绍一下filter~

filter华丽登场~

filter 是一个基于数组的方法，通过一个回调函数对数组进行筛选，并返回数组中满足条件的元素，相当于过滤器的效果。

filter的三要素

  1. 数组对象(arry)

    每个filter 方法都有一个数组对象，通过该方法对数组里的元素进行筛选。

     具体用法： arry.filter();
  2. 回调函数(callbackfn)

    对于数组中的每个元素，filter 方法都会调用callbackfn 函数一次。

     具体用法： function callbackfn(value, index, array);

    其中 value 表示数组元素的值，index 表示数组元素的下标， array 表示包含该元素的数组。

  3. 返回值

    filter 方法的返回值是一个数组，包含所有满足回调函数条件的值。

更多详情： filter文档

别样的惊喜~

filter的骚操作—实现数据的动态绑定

敲黑板的重点来啦！！！

  1. 在 dairy.wxml 页面中用 navigator 组件实现 ‘每日一看’ 页面和 ‘阅读详情’ 页的跳转，并传递一个 id 参数，每篇文章都有唯一的一个 id，这样就可以通过 js 使用 filter 过滤器筛选出两个 id 相等的文章数据，也就实现了数据的动态绑定。
<navigator url="./detail/detail?id={{id}}">
    <button class="page_bd_motto_read">阅读</button>
</navigator>
  1. 在 dairy.js 中，因为页面每次都是随机显示一篇文章，这时就需要获取该文章的id，并作为参数，当页面跳转时作为一个钩子把两个页面联系起来。
that.setData({
            headline: arr[index].headline,
            from: arr[index].from,
            // 设置id作为阅读详情页的一个钩子
            id: arr[index].acticle_id
          })
        }
      })
  1. 当页面跳转到详情页时，在 detail.js 中使用 filter 把 acticle_id 等于上一页面文章 id 的数据赋值给 datas，再对其进行操作，就实现了数据的动态绑定。
Page({
  data: {
    // 表示该篇文章
    item: []
  },
  onLoad: function(params) {
    // 检验id是否传递成功
    console.log(params.id);
    var that = this;
    wx.request({
      url: ‘https://www.easy-mock.com/mock/5a2b5f76158e7b70032804d0/getActicleInfo/getActicleInfo‘,
      success: function(res) {
        // 使用过滤器把id等于上一页面id的数组赋值给datas
        var datas = res.data.data.acticle_List.filter(item => {
          return item.acticle_id == params.id;
        });
        that.setData({
          item: datas
        });
        console.log(datas);
      }
    })

  }
})
  1. 在 detail.wxml 中对传入的 item 数据进行调用，于是别样的惊喜就出现啦~
<!--pages/dairy/detail/detail.wxml-->
    <view class="page__hd">
        <view class="page__hd_title center">{{item[0].headline}}</view>
        <view class="page__hd_author">作者：@{{item[0].author}}</view>
    </view>
    <view class="page__bd">
        <text class="page__bd_content center">{{item[0].content}}</text>
    </view>

特别注意： 可能有细心的人儿已经发现为什么这里用的是 item[0]. 来调用，而不是 **item.**来调用，这是数据索引的问题。如下图所示，我的数据是个三级结构，item 表示的是最外层的文章数组元素，要获取文章的作者或标题等信息，必须使用 item[0]. 才能进行调用。只有理解数据索引的本质，才能准确地调用数据。

于是，小程序在遇上filter后，就创造出了别样的惊喜 O(∩_∩)O~

一起排坑~

在开发过程中，遇到了一些坑，在此总结一下~

1. 随机显示数组里的元素

这个公众号一大亮点就是可以随机显示文章，每次点进去的文章都不一样，感受度极佳。这里采用随机函数来获取数组的下标，Math.random()函数是获取[0,1)之间的数，Math.floor()函数是向下取整，这样就可以随机获取相应的下标数。

 onLoad: function () {
    var that = this;
      wx.request({
        url: ‘https://www.easy-mock.com/mock/5a2b5f76158e7b70032804d0/getActicleInfo/getActicleInfo‘,
        method: ‘GET‘,
        data: {},
        success: function(res) {
          //获取文章数据的列表
          var arr = res.data.data.acticle_List;
          //用随机函数随机获取数组的下标
          var index = Math.floor(Math.random()*arr.length);
          // console.log(arr[index].acticle_id);
          that.setData({
            headline: arr[index].headline,
            from: arr[index].from,
            // 设置id作为阅读详情页的一个钩子
            id: arr[index].acticle_id
          })
        }
      })
  },
})

2. 实时显示系统的日期

之前开发的时候觉得这个方法如果自己写还蛮难的，后面百度了一下，发现js里面提供了相应的API，直接使用就好，特别方便。有关系统时间的API

  //监听页面显示
  // day：星期几
  // date：某日
  // month：月份
  onShow: function () {
      var myDate = new Date();
      // setData设置或更新数据
      this.setData({
        date: myDate.getDate(),
        month: myDate.getMonth() + 1,
        day: week(),
      });
      function week(day) {
          switch(myDate.getDay()) {
            case 1: day="星期一"; break;
            case 2: day="星期二"; break;
            case 3: day="星期三"; break;
            case 4: day="星期四"; break;
            case 5: day="星期五"; break;
            case 6: day="星期六"; break;
            default: day="星期天";
          }
          return day;
        }
  },

3. 用hover实现鼠标点击效果

在对首页进行鼠标点击效果的开发过程中，一开始想到的就是使用伪元素来添加点击按钮的样式效果，后面出现了一个bug，当我点击按钮跳转到另一个页面，再回退到原页面时，还是处于点击态的样式，这时百度就起了很大的作用，我上网百度了很久，才发现有hover属性中的hover-stay-time为动画持续的时间，hover-class 为定义点击按钮时的样式，于是这个bug就解决啦~

<view class="page__bd">
    <view class="page__bd_tab" hover-class="active" hover-stay-time="2000">
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="dairyRead">每日一看</view>
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="lookWorld">看看世界</view>
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="intelligence">情报局</view>
      <view class="page__bd_tab_item" hover-class="active1" hover-stay-time="2000" bindtap="introduction">简介</view>
    </view>
  </view>

4. 页面左右滑动的效果

使用swiper组件实现对页面的左右滑动的效果。

5. template 模板样式的使用

当一串代码面临复制粘贴时，这时就应该考虑对其进行封装，这样直接在不同的地方调用就好了，也完成了代码的优化。小程序中的 template 模板就很好地帮我们解决了这个问题，并通过 is 属性来实现调用。

  • template 模板的定义：
<!--pages/common/list_intelligence/list_intelligence.wxml-->
<template name = "intelligence_list">
 <view class="page__cell">
    <view class="page__cell_headline center">
        <view class="page__cell_headline_img">
            <image src="{{avatar}}"/>
        </view>

        <view class="page__cell_headline_author">{{author}}分享于</view>
        <view class="page__cell_headline_time">{{share_time}}</view>
    </view>
    <view class="page__cell_detail center">{{content}}</view>
 </view>
</template>
  • template 模板的调用：
  <view class="page__bd">
    <block wx:for="{{intelligence_list}}" wx:key="{{index}}" center >
        <template is="intelligence_list" data="{{...item}}"></template>
    </block>
  </view>

我有话要说~

  1. 开发的过程中难免会出现各种各样的bug，记得一定要百度，百度，百度呀！！！这是个独立思考的过程，对能力的提高也非常有帮助~做这个项目最大的心得便是看太多不如干一场，肯定会干货满满，收获满满哟~
  2. 这个小程序后续还会完善，感兴趣的可以持续关注哟(＾Ｕ＾)ノ~

一波安利~

最后献上 github地址 里面有源代码，若是喜欢，希望大家给个star 鼓励一下啦~?( ′???` )比心

原文地址：https://www.cnblogs.com/baimeishaoxia/p/11794559.html

时间： 2024-08-10 14:55:25

当微信小程序遇上filter~的相关文章

微信小程序怎么上传代码

很多企业商家做了微信小程序,都想自己独立的去操作后台,但大多企业商家都没有相关的技术人员,就上传代码都成了问题,以下微信小程序观察网请添加链接描述就和大家分享一下微信小程序怎么上传代码,希望对您有帮助! 第一步:登录微信公众号后台进行小程序基本信息设置操作第二步:设置小程序基本信息,包括名称.头像.介绍以及服务范围.第三步:填写完成之后,再打开你的微信小程序开发工具,点击上传功能,点击上传提示窗口中输入版本号和说明即可.第四步:上传完成之后,返回到微信公众号后台,点击[开发管理].第五步:拉到底

动手开发一个名为“微天气”的微信小程序（上）

引言:在智能手机软件的装机量中,天气预报类的APP排在比较靠前的位置.说明用户对天气的关注度很高.因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排.跟着本文开发一个"微天气"小程序,方便微信网友随时查看天气.接下来两天小编将同您一起开发一个"微天气"小程序,本文首先向大家介绍"微天气"的API与界面代码编写.本文选自<从零开始学微信小程序开发>. 在一套软件系统中,微信小程序通常是作为前端来使用的,一般还需要有后端的系

5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新的文字版本摘要. 此文为 「60 节实战课微信小程序开发视频教程」 的第 51 小节内容,如果需要查看视频版本的实战操作,请直接跳至文章的最后部分查看. 1.云开发图片空间简介 在之前的文章 微信小程序开发平台新功能「云开发」快速上手体验 中我们简要介绍了腾讯官方给所有的微信小程序开发提供的云

微信小程序返回上一页传参并刷新

问题 微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了. 需求 现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面. 方法 一.使用到的方法是小程序的页面栈,感兴趣可以打印一下pages的内容,就是你页面跳转的轨迹数组,最后一项就是当前页面,倒数第二个就是上一页.很好理解,因为在当前页停止了,肯定是最后一个 //获取页面栈 let page

微信小程序-调取上一页的方法

const pages=getCurrentPages() //取到上一个页面 const prevPage=pages[pages.length-2] prevPage.onPullDownRefresh() 原文地址:https://www.cnblogs.com/lxz-blogs/p/12690265.html

微信小程序上拉加载下拉刷新

微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载的动画可能会是白色背景,会看不清. { "usingComponents": { "annicate": "/components/annicate/index" }, "navigationBarTitleText": &quo

微信小程序image组件开发程序以及相关图片问题参考资料汇总

微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料. 微信小程序image组件必备基础知识: image组件默认宽度300px.高度225px image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式 image组件开发教程汇总: 微信小程序自定义组件实现图片单指拖动.双指缩

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

你自认为了解微信小程序？醒醒吧！

小程序目前被炒得沸沸扬扬,无数业内业外人士都对此雄心勃勃,希望占据先机,借此一统江湖,千秋万代.这再次证明一点,微信想让什么火,什么就能火.这种能力目前在国内估计也是无人能出其右了-- 好了,废话不多话,言归正传.作为一个要成为成功人士的男人,利用国庆的时间,我好好的研究了一下微信小程序,发现网上很多言论对于微信小程序的言论,在一定区间存在理解上的误区.接下来的内容,我假定你已经初步的了解过微信小程序,如果你还不了解,请移步开发文档,然后再回来阅读本文. 一.小程序到底是不是Html5 关于这一