Когда апплет WeChat встречает фильтр~

В процессе разработки апплета WeChat, когда вы хотите реализовать привязку данных между разными страницами, но ломаете голову над этим, вы могли бы также позволить апплету WeChat и фильтру иметь идеальную встречу, я считаю, что это приведет вас к другой вид сюрприза ~

Некоторое время назад Amway создала очень практичный курс утреннего чтения в паблик-аккаунте, его краткие и щедрые страницы, а также удобные и практичные функции глубоко привлекли меня~(＾U＾)ノ Так получилось, что за это время я выучил небольшие программы. , я сам написал небольшую программу для утреннего урока чтения.

Реализованный функционал

Привязка данных между разными страницами
Случайное отображение элементов в массиве
Отображение системной даты в режиме реального времени
Основные функции, такие как щелчки мышью и переходы по страницам
Использование компонентов swiper и шаблонов стилей шаблонов
Используйте простой макет для имитации фоновых данных и динамической передачи параметров

Дисплей проекта

Весь проект включает в себя четыре основные страницы: «Ежедневный взгляд», «Взгляд на мир», «Разведывательное агентство» и «Введение».

Идеальная встреча~

В процессе разработки страницы "Ежедневный взгляд" я столкнулся с проблемой, как связать данные, полученные на странице "Ежедневный взгляд" с данными страницы подробностей чтения, то есть с этого момента,Апплет WeChat начинает соответствовать фильтру~

Вот краткое введение в фильтр ~

отфильтровать великолепный дебют~

filter — это метод на основе массива, который фильтрует массив с помощью функции обратного вызова и возвращает элементы массива, соответствующие условиям, что эквивалентно эффекту фильтра.

Три элемента фильтра

объект массива (массив)

Каждый метод фильтра имеет объект массива, через который фильтруются элементы массива.
```
 具体用法： arry.filter();
```
Функция обратного вызова (callbackfn)

Метод filter вызывает функцию callbackfn один раз для каждого элемента массива.
```
 具体用法： function callbackfn(value, index, array);
```
где значение представляет значение элемента массива, индекс представляет индекс элемента массива, а массив представляет массив, содержащий элемент.
возвращаемое значение

Возвращаемое значение метода фильтра — это массив, содержащий все значения, удовлетворяющие условию функции обратного вызова.

Подробнее:документация по фильтрам

Еще один сюрприз~

Операция Sao в фильтре — реализация динамической привязки данных

Смысл стучать по доске здесь! ! !

существуетdairy.wxmlКомпонент навигатора используется на странице для реализации перехода между страницей «Ежедневный просмотр» и страницей «Подробности о чтении», и передается параметр id. Каждая статья имеет уникальный идентификатор, чтобы ее можно было отфильтровать с помощью js. с помощью фильтра filter.Два данных статьи с одинаковым идентификатором также реализуют динамическую привязку данных.

<navigator url="./detail/detail?id={{id}}">
    <button class="page_bd_motto_read">阅读</button>
</navigator>

существуетdairy.js, так как страница каждый раз отображает статью случайным образом, вам нужно получить идентификатор статьи и использовать его в качестве параметра для соединения двух страниц в качестве хука при переходе страницы.

that.setData({
            headline: arr[index].headline,
            from: arr[index].from,
            // 设置id作为阅读详情页的一个钩子
            id: arr[index].acticle_id
          })
        }
      })

Когда страница переходит на страницу сведений, вdetail.jsИспользуйте фильтр, чтобы назначить данные, чей acticle_id равен идентификатору статьи предыдущей страницы, для данных, а затем обработайте их, чтобы реализовать динамическую привязку данных.

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);
      }
    })

  }
})

существуетdetail.wxmlВызовите данные входящего элемента в , чтобы появился другой сюрприз~

<!--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Указывает самый внешний элемент массива article.Чтобы получить такую информацию, как автор или название статьи, вы должны использоватьitem[0].быть вызванным.Только поняв природу индексации данных, можно назвать данные точно.

Итак, когда апплет сталкивается с фильтром, он создает другой сюрприз 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. Отображение даты системы в режиме реального времени

Когда я разрабатывал его раньше, я чувствовал, что этот метод довольно сложно написать самому, Поработав немного с Baidu, я обнаружил, что соответствующий API предоставляется в js, и хорошо использовать его напрямую, что очень удобно. .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. Используйте наведение для достижения эффекта щелчка мыши

В процессе разработки эффекта щелчка мышью на главной странице первой мыслью было использовать псевдоэлементы для добавления стиля эффекта нажатия кнопки, но позже появился баг, когда я нажимал кнопку для перехода на другую страницу, а затем вернулся к исходному. Когда страница все еще находится в состоянии клика, Baidu играет большую роль в это время. Я был на Baidu в течение длительного времени, только чтобы обнаружить, что время наведения в атрибуте наведения является продолжительность анимации, а hover-class - это определение стиля при нажатии кнопки, поэтому эта ошибка решена ~

<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. шаблон с использованием стиля шаблона

Когда строка кода сталкивается с копированием и вставкой, следует подумать об ее инкапсуляции, чтобы ее можно было вызывать напрямую в разных местах, а также завершалась оптимизация кода. Шаблон шаблона в апплете очень хорошо помогает нам решить эту задачу и реализует вызов через атрибут is.

Определение шаблона шаблона:

<!--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>

Вызов шаблона шаблона:

  <view class="page__bd">
    <block wx:for="{{intelligence_list}}" wx:key="{{index}}" center >
        <template is="intelligence_list" data="{{...item}}"></template>
    </block>
  </view>

Мне есть что сказать~

В процессе разработки неизбежно будут появляться различные баги, не забывайте использовать Baidu, Baidu и Baidu! ! ! Это процесс независимого мышления, и это также очень полезно для улучшения ваших способностей.Самый большой опыт выполнения этого проекта заключается в том, что лучше смотреть слишком много, чем делать это.Он определенно будет полон сухих товаров и полных урожая~
Эта небольшая программа в дальнейшем будет дорабатываться, а кому интересно, могут и дальше обращать внимание (＾U＾)ノ~

Волна Amway ~

Учебное пособие по разработке мини-программы WeChat
Официальная документация по разработке программы WeChat Mini
использоватьeasy-mockСоздание фоновых фиктивных данных
Разрабатывайте с помощью инструментов разработчика WeChat