README.md · OSCHINA-MIRROR/hayeah-wxapp-cnode

Прямые трансляции

Адрес прямого эфира: live.bilibili.com/1330246.

Расписание

Начало в 8:00 в пятницу, 30 сентября.

Реализация мини-программы CNode — сообщество

Введение

Главный ведущий: Сун Шэлун, «дядюшка-волк» из Цзянху, технический директор компании Empty String. Автор открытого проекта Moajs, популяризатор Node.js. Пишет книгу «Ещё раз о Node 4: разбираемся до конца с новым поколением веб-фреймворков Koa».

Второй ведущий: Е Бэйхэн, бывший фрилансер, работает удалённо и путешествует. Два года прожил в Дали, провинция Юньнань. Сейчас преподаёт в Гуанчжоу, обучает разработчиков с энтузиазмом.

Что такое мини-программа WeChat?

Давайте сначала вспомним о публикации информации о приложениях WeChat.

Давно ходили слухи о том, что приложения WeChat наконец-то получили подтверждение. Вечером 21 числа публичный аккаунт WeChat «Xiaodao Xinwen» опубликовал статью, в которой говорится, что они получили приглашение от WeChat на внутреннее тестирование приложений WeChat. Согласно приглашению, приложение представляет собой новую открытую функцию WeChat Public Platform, которая позволяет разработчикам быстро создавать мини-приложения.

Некоторые сотрудники Tencent на рабочем месте социальной сети Meipai сообщили, что приложение было выпущено под названием «Мини-приложение WeChat для публичной платформы», и его основная функция заключается в предоставлении некоторых локальных API для вызова JS на H5, тем самым улучшая плавность работы H5-приложений на WeChat.

Согласно внутренним данным Tencent, только 200 публичных аккаунтов были приглашены для участия в первом раунде тестирования приложений. Если вы хотите получить следующее приглашение, вам придётся подождать.

«Отец WeChat» Чжан Сяолун ещё в начале этого года сообщил о разработке приложений, а затем официально представил их на открытом уроке WeChat PRO в 2016 году.

Что такое приложение? Как объяснил Чжан Сяолун, после того как пользователь подпишется на «приложение», это будет равносильно установке приложения. В приложении пользователь может реализовать некоторые основные функции приложения. Например, многие пользователи теперь предпочитают покупать билеты через приложение в кошельке WeChat, вместо того чтобы загружать и использовать специализированное программное обеспечение для покупки билетов. В будущем в приложении можно будет реализовать больше функций. Как и другие приложения, этот публичный аккаунт обычно не отправляет контент пользователям, поэтому он не будет навязчивым.

По словам Чжана Сяолуна, создание приложений основано на двух причинах. Во-первых, пользователи могут уменьшить количество загрузок и установки программного обеспечения на своих мобильных телефонах, особенно тех, которые используются редко. Во-вторых, пользователям не нужно повторно устанавливать программное обеспечение при смене телефонов. Для разработчиков, особенно стартапов, реализация функций в приложениях обходится гораздо дешевле и проще, чем разработка полноценного приложения.

Вкратце:

Мини-приложения WeChat — это удобное решение для разработки приложений на основе MINA-фреймворка, предоставляемого WeChat.

Пример: создание мини-приложения с использованием API сообщества CNode

https://github.com/coolfishstudio/wechat-webapp-cnode

Зачем?

Занимайтесь только одним делом за раз, у вас уже есть API, вам нужно только сосредоточиться на мини-программе.

Не жадничайте!

Импорт проекта

Добавьте проект.

Выберите каталог, где находится исходный код.

Полная информация.

Главная страница

Эффект.

Макет

<!--posts.wxml-->
<view class="topics-main">
  <view class="top-bar">
    <view class="top-bar-item" id="all" catchtap="onTapTag">全部</view>
    <view class="top-bar-item" id="good" catchtap="onTapTag">精华</view>
    <view class="top-bar-item" id="share" catchtap="onTapTag">分享</view>
    <view class="top-bar-item" id="ask" catchtap="onTapTag">问答</view>
    <view class="top-bar-item" id="job" catchtap="onTapTag">招聘</view>
  </view>
  <scroll-view class="posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
    <block wx:for="{{postsList}}">
      <view class="posts-item" index="{{index}}" id="{{item.id}}" catchtap="redictDetail">
        <view class="author">
          <image class="author-avatar" src="{{item.author.avatar_url}}"></image>
          <view class="author-name">{{item.author.loginname}}</view>
          <view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
          <view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
          <view class="posts-last-reply">{{item.last_reply_at}}</view>
        </view>
        <view class="posts-title">{{item.title}}</view>
        <view class="bar-info">
          <view class="bar-info-item">
            <image class="bar-info-item-icon" src="/images/icon/reply.png"></image>
            <view class="bar-info-item-number">{{item.reply_count}}</view>
          </view>
          <view class="bar-info-item">
            <image class="bar-info-item-icon" src="/images/icon/visit.png"></image>
            <view class="bar-info-item-number">{{item.visit_count}}</view>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>

  <loading hidden="{{hidden}}">
    加载中...
  </loading>
</view>

Три основных части:

top-bar — категории представляют собой обычные view;
posts-list — список сообщений, это scroll-view;
loading — встроенный компонент, по умолчанию скрыт.

Это похоже на компоненты Vue или React?

http://wxopen.notedown.cn/component/

Component

Список сообщений

  <scroll-view class="posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
    <block wx:for="{{postsList}}">
      <view class="posts-item" index="{{index}}" id="{{item.id}}" catchtap="redictDetail">
        <view class="author">
          <image class="author-avatar" src="{{item.author.avatar_url}}"></image>
          <view class="author-name">{{item.author.loginname}}</view>
          <view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
          <view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
          <view class="posts-last-reply">{{item.last_reply_at}}</view>
        </view>
        <view class="posts-title">{{item.title}}</view>
        <view class="bar-info">
          <view class="bar-info-item">
            <image class="bar-info-item-icon" src="/images/icon/reply.png"></image>
            <view
``` Данный текст написан на языке JavaScript.

**Текст запроса:**

«布局是 scroll-view, 然后嵌入了:

```

像不像 ejs 里的:

<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

然后我们看看里面的单条展示:

Cell

      <view class="posts-item" index="{{index}}" id="{{item.id}}" catchtap="redictDetail">
        <view class="author">
          <image class="author-avatar" src="{{item.author.avatar_url}}"></image>
          <view class="author-name">{{item.author.loginname}}</view>
          <view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
          <view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
          <view class="posts-last-reply">{{item.last_reply_at}}</view>
        </view>
        <view class="posts-title">{{item.title}}</view>
        <view class="bar-info">
          <view class="bar-info-item">
            <image class="bar-info-item-icon" src="/images/icon/reply.png"></image>
            <view class="bar-info-item-number">{{item.reply_count}}</view>
          </view>
          <view class="bar-info-item">
            <image class="bar-info-item-icon" src="/images/icon/visit.png"></image>
            <view class="bar-info-item-number">{{item.visit_count}}</view>
          </view>
        </view>
      </view>

Можно посмотреть, что это cell, который разделён на три строки:

Первая строка — author (автор и время).
Вторая строка — posts-title (название).
Третья строка — bar-info (комментарии и количество просмотров).

Затем идёт одна строка, например, автор:

        <view class="author">
          <image class="author-avatar" src="{{item.author.avatar_url}}"></image>
          <view class="author-name">{{item.author.loginname}}</view>
          <view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
          <view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
          <view class="posts-last-reply">{{item.last_reply_at}}</view>
        </view>».

**Перевод текста на русский язык:**

«Макет представляет собой scroll-view, в который вложено:

```

Похоже на EJS:

<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

Теперь посмотрим на отдельную строку:

Cell

      <view class="posts-item" index="{{index}}" id="{{item.id}}" catchtap="redictDetail">
        <view class="author">
          <image class="author-avatar" src="{{item.author.avatar_url}}"></image>
          <view class="author-name">{{item.author.loginname}}</view>
          <view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
          <view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
          <view class="posts-last-reply">{{item.last_reply_at}}</view>
        </view>
        <view class="posts-title">{{item.title}}</view>
        <view class="bar-info">
          <view class="bar-info-item">
            <image class="bar-info-item-icon" src="/images/icon/reply.png"></image>
            <view class="bar-info-item-number">{{item.reply_count}}</view>
          </view>
          <view class="bar-info-item">
            <image class="bar-info-item-icon" src="/images/icon/visit.png"></image>
            <view class="bar-info-item-number">{{item.visit_count}}</view>
          </view>
        </view>
      </view>

Здесь можно увидеть, что ячейка разделена на три строки:

первая строка — автор (автор и дата);
вторая строка — название (posts-title);
третья строка — информация (комментарии и число просмотров).

Далее идёт одна строка, например, автор:

        <view class="author">
          <image class="author-avatar" src="{{item.author.avatar_url}}"></image>
          <view class="author-name">{{item.author.loginname}}</view>
          <view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
          <view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
          <view class="posts-last-reply">{{item.last_reply_at}}</view>
        </view>». **Текст запроса:**

[super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. }

@end


**Перевод:**

[super didReceiveMemoryWarning]
    // Освободите любые ресурсы, которые могут быть воссозданы.
}

@конец

Страница только что загрузилась, viewDidLoad, а в html onload, очень похоже? Кто-нибудь подумает о шаблоне в dp?

//index.js Page({ data: { text: "This is page data." }, onLoad: function(options) { // Выполняем некоторую инициализацию при загрузке страницы. }, onReady: function() { // Делаем что-то, когда страница готова. }, onShow: function() { // Делаем что-то, когда страница отображается. }, onHide: function() { // Делаем что-то, когда страница скрыта. }, onUnload: function() { // Делаем что-то при закрытии страницы. }, // Обработчик событий. viewTap: function() { this.setData({ text: 'Устанавливаем некоторые данные для обновления представления.' }) } })


### tab

Шаблон

全部精华分享问答招聘 ```

Событие срабатывает

catchtap="onTapTag"

Этот метод также находится в контексте Page.

onTapTag: function (e) {
  var self = this;
  var tab = e.currentTarget.id;
  self.setData({
    tab: tab
  });
  if (tab !== 'all') {
    this.fetchData({tab: tab});
  } else {
    this.fetchData();
  }
},

Как узнать, что есть в e?

Просто выведите log.

Простая отладка

Debug

Загрузка следующей страницы при прокрутке вверх

Все компоненты могут иметь одинаковые свойства (основные типы, Boolean, Number, String) и поведение (EventHandle).

 <scroll-view class="posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">

Здесь класс, стиль, scroll-y и bindscrolltolower — это свойства, единственное отличие — bindscrolltolower, который на самом деле является поведением.

bindscrolltolower EventHandle

Прокрутка до конца/справа вызовет событие scrolltolower.

Это то же самое, что мы говорим о «прокрутите вверх, чтобы загрузить больше» на мобильных устройствах.

Это очень похоже на то, как мы пишем react или vue.

https://github.com/airyland/vux/blob/master/src/components/panel/index.vue

<template>
  <div class="weui_panel weui_panel_access">
    <div class="weui_panel_hd" v-if="header" @click="onClickHeader" v-html="header"></div>
    <div class="weui_panel_bd">
      <!--type==='1'-->
      <a :href="getUrl(item.url)" v-for="item in list" @click.prevent="onItemClick(item)" class="weui_media_box weui_media_appmsg" v-if="type === '1'">
        <div class="weui_media_hd" v-if="item.src">
          <img class="weui_media_appmsg_thumb" :src="item.src" alt="">
        </div>
        <div class="weui_media_bd">
          <h4 class="weui_media_title">{{item.title}}</h4>
          <p class="weui_media_desc">{{item.desc}}</p>
        </div>
      </a>
      <!--type==='2'-->
      <div class="weui_media_box weui_media_text" v-for="item in list" @click.prevent="onItemClick(item)" v-if="type === '2'">
          <h4 class="weui_media_title">{{item.title}}</h4>
          <p class="weui_media_desc">{{item.desc}}</p>
      </div>
      <!--type==='3'-->
      <div class="weui_media_box weui_media_small_appmsg">
          <div class="weui_cells weui_cells_access">
            <a class="weui_cell" :href="getUrl(item.url)" v-for="item in list" @click.prevent="onItemClick(item)" v-if="type === '3'">
              <div class="weui_cell_hd">
                <img :src="item.src" alt="" style="width:20px;margin-right:5px;display:block">
              </div>
              <div class="weui_cell_bd weui_cell_primary">
                <p>{{item.title}}</p>
              </div>
              <span class="weui_cell_ft"></span>
            </a>
          </div>
      </div>
    </div>
    <a class="weui_panel_ft" :href="getUrl(footer.url)" v-if="footer && type !== '3'" @click.prevent="onClickFooter" v-html="footer.title"></a>
  </div>
</template>

<script>
import { go, getUrl } from '../../libs/router'
export default {
  props: {
    header: String,
    footer: Object,
    list: Array,
    type: {
      type: String,
      default: '1'
    }
  },
  methods: {
    getUrl (url) {
      return getUrl(url, this.$router)
    },
    onClickFooter () {
      this.$emit('on-click-footer')
      go(this.footer.url, this.$router)
``` В последнее время native-разработка, на которую повлиял H5, становится всё более унылой (по сравнению с 2010–2014 годами). Некоторые даже говорят, что приложения умерли, и достаточно разработать публичный аккаунт в H5. Это объективный факт: у WeChat есть база пользователей, это хороший вход, к тому же можно реализовать практически все необходимые функции. Кроме того, затраты относительно ниже.

Но действительно ли это так идеально?

Не обязательно. Во-первых, кроссплатформенность — это вечная боль. Обычно трудно поддерживать совместимость с iOS6+ и Android 4+. Иногда это раздражает и невольно напоминает IE6.
Во-вторых, различные браузеры и версии имеют несовместимые реализации. Например, localStorage, SQLite, IndexedDB и т. д. не всегда поддерживаются каждой версией, так о какой универсальности может идти речь? Хотя хаос можно решить, проблема затрат остаётся.
В-третьих, разработка кажется простой, но трудно найти хороших разработчиков. Писать код могут многие, но когда дело доходит до оптимизации, большинство людей боятся. Это также одна из причин, почему эффект от H5 не очень хорош.

Балансируя между временем и реализацией, иногда мы терпим... Наверное, это будущее.

Рассказав о недостатках H5, стоит упомянуть и его преимущества. Сейчас множество первопроходцев, последователей и разработчиков вкладывают свои силы в эту область. Бесчисленные решения, фреймворки и оптимизации создаются каждый день. Мы считаем, что развитие фронтенда происходит невероятно быстро, и во многом это благодаря H5. Он стал неотъемлемой частью фронтенд-области. Vue 2, ng2, ionic2 и другие являются выдающимися, а на основе WeUI создано множество фреймворков. Это эпоха, которая даёт нам вызовы и возможности.

Ещё раз о людях.

Традиционные фронтендеры не решаются называть себя фронтендерами, если они не знакомы с H5. В настоящее время наиболее востребованными являются именно фронтенд-специалисты. На собеседованиях невозможно избежать вопросов, связанных с H5.
Для iOS и Android-разработчиков, которые не знают H5, будущее становится всё более ограниченным. Даже выпускники пекинских курсов по iOS с трудом находят работу (некоторые даже готовы работать без зарплаты ради опыта). Для тех, кто уже работает, руководители постоянно «рассчитывают» их, предлагая перейти на гибридные технологии.
H5 стал таким же неизбежным для фронтендеров, как Node.js. Независимо от того, чем вы занимаетесь, вы не можете обойти H5 стороной.

Возвращаясь к теме публичных аккаунтов в WeChat, можно предположить, что WeChat станет операционной системой, и в будущем людям будет достаточно использовать только его. Другие приложения станут дочерними приложениями под WeChat. Мир станет чище. Раньше я думал, что концепция Chrome OS была передовой, но неожиданно её реализовал WeChat...

Возможно, следующим шагом WeChat будет сотрудничество с производителями мобильных телефонов. В телефонах будет только операционная система WeChat, при открытии которой появится интерфейс WeChat. Затем, чтобы установить приложение, нужно будет открыть магазин приложений H5 в WeChat OS.

Это довольно пугающая перспектива. Вероятно, другие крупные компании будут прятаться в туалетах и плакать: «Пожалуйста, не удаляйте моё приложение». А WeChat ответит: «У вашей компании проблемы с основными ценностями. Измените их, и тогда поговорим».

## Как быстро учиться?

Мини-программы просто добавили ещё один вариант. Раньше были H5, ПК и приложения, теперь есть мини-программы, H5, ПК и приложения. Они, несомненно, являются лишь способом демонстрации, поэтому не влияют на бэкенд. Их общая черта заключается в том, что знание JavaScript позволяет разрабатывать лучше. Сегодня Node.js, благодаря своей производительности и мощной экосистеме npm, а также популярности в области большого фронтенда, присутствует везде.

> Направление полного стека на Node.js — это хороший путь. Если вы не хотите заниматься полным стеком, то хотя бы рассмотрите фронтенд.

Современный веб-разработчик в большом фронтенде.

![0](images/node/0.png)

![1](images/node/1.png)

![2](images/node/2.png)

![3](images/node/3.png)

И многое другое.

Высокая доступность архитектуры, ориентированной на полный стек инженеров — путь Node.js: http://i5ting.github.io/nodejs-fullstack/.

## О будущем мини-программ

- Разработка компонентов определения.
- Преобразование HTML в WXML, уже есть люди, занимающиеся этим.
- Сканирование QR-кода.
- Открытие URL-адреса схемы.

# Рекомендуемые учебные материалы

См.:

- https://github.com/justjavac/awesome-wechat-weapp;
- http://wxopen.notedown.cn/.

# О текущей ситуации

![](images/stuq.png).

- Технологическое развитие слишком быстрое, экспоненциальное.
- Человеческая способность к обучению растёт плавно (обучение до определённого уровня также растёт экспоненциально).
- Постоянное обучение, использование времени, ежедневное совершенствование.


# Задание

Эта реализация категории tab слишком проста, очевидно, что она не требует много времени. Как можно использовать атрибут class для создания более привлекательной и с возможностью выбора категории tab?

Вы можете попробовать сами.

# Заключение

- Играйте с удовольствием, подумайте, как играть в этой статье?
- Используйте время с пользой: в свободное время думайте о важных вещах, в рабочее время находите время для отдыха.
- Меньше жалуйтесь, больше размышляйте, будущее будет лучше.
- Ежедневно совершенствуйтесь, однажды вы станете профессионалом.

OSCHINA-MIRROR/hayeah-wxapp-cnode

Прямые трансляции

Расписание

Реализация мини-программы CNode — сообщество

Введение

Что такое мини-программа WeChat?

Пример: создание мини-приложения с использованием API сообщества CNode

Зачем?

Импорт проекта

Главная страница

Макет

Список сообщений

Загрузка следующей страницы при прокрутке вверх

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/hayeah-wxapp-cnode .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Прямые трансляции

Расписание

Реализация мини-программы CNode — сообщество

Введение

Что такое мини-программа WeChat?

Пример: создание мини-приложения с использованием API сообщества CNode

Зачем?

Импорт проекта

Главная страница

Макет

Список сообщений

Загрузка следующей страницы при прокрутке вверх

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/hayeah-wxapp-cnode