Обучающий апплет начинается с «ты»

За последние десять дней я был в контакте с небольшими программами. От просмотра проектов с открытым исходным кодом других людей до создания собственного проекта, я испытал взлеты и падения в течение всего процесса, и я многому научился. Далее, Я поделюсь с вами своими знаниями. Обрабатывайте, общайтесь и учитесь вместе:

выбор темы

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

После стольких разговоров я так и не сказал, что я сделал. Я подражаю Чжиху. Цель состоит в том, чтобы лучше понять небольшие программы с помощью этого исследования. Это исследование также является дальнейшим исследованием под предзнаменованием предшественников. , я усвоил много идей своих предшественников, и чувствую себя очень хорошо. Ниже я поделюсь с вами некоторыми своими мыслями, проблемами и мнениями, возникшими в ходе всего процесса написания проекта.

В проекте реализованы функции:

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

Эффект проекта:

Нижняя вкладкаПереключатель панели

Домашний переключатель

Потяните вверх, чтобы обновить Потяните вниз, чтобы загрузить

Нажмите событие и прыжок страницы

Функция комментариев

Выше перечислены те части, которые были реализованы в текущем проекте, а остальные функции будут реализованы в будущем.

Первоначальный замысел проекта

Перед началом всего проекта я задумался над этим вопросом, зачем я написал этот проект, это движущая сила написания проекта самому, я пока на стадии обучения, подробнее о том, чему я могу научиться благодаря этому проекту, программированию навыки, идеи программирования, знакомство с небольшими программами и т. д., поэтому при написании кода я использую вещи, которых раньше не касался.Например, метод внедрения файла в commonJS также использует метод, введенный модуляризацией в ES6.Методы, д., многие люди могут не понимать, почему они используются именно так, они могут делать это именно так. Для обучающегося необходимо как можно больше использовать разные методы в проекте, дать себе знать о существовании такой вещи и научиться владеть ею, чтобы облегчить использование в будущих проектах, что реализует ценность этого проекта. То есть для меня сейчас первоначальная цель этого проекта — узнать больше вещей, с которыми я не сталкивался, чтобы я мог лучше понять программирование.

Введение в проект

Старт проекта

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

Выше указана основная директория моего собственного проекта.Разлагаю по своим идеям,но проблем еще много,и написание не очень.Коды реализации многих функций не разделены по разным файлам.Написание в один файл требует дальнейшей оптимизации Модульность — очень важная идея в программировании, которая вполне может обеспечить возможность повторного использования кода и сэкономить определенное количество времени разработки. Недавно я просматривал кое-что о внешнем рабочем процессе.Каталог проекта также разделен на каталог разработки и онлайн-каталог.Неплохо обрабатывать некоторые файлы разработки через babel,gulp,webpack и т. д. Их не так много, и они все еще учатся. Их можно использовать в разработке проектов в будущем для увеличения собственной практики разработки на уровне предприятия. Это также направление, которому может научиться каждый.

серверные данные

Данные незаменимы в проекте разработки.Страницы в текущем проекте уже не могут быть статическими страницами.Запись данных в si не представляет никакой ценности.В то же время это также увеличивает нагрузку на программирование,да и код тоже очень многословный . Это требует имитации фоновых данных, которые могут реализовать рендеринг данных в виде списка, что снижает большую рабочую нагрузку. Это представляет проблему, как моделировать фоновые данные и что использовать для имитации данных. Многие люди будут использовать сторонние, такие как использованиеeasy-mock, получать данные через wx.request(), реализовывать данные о загрузке страницы, я думаю, что все будут использовать этот метод. Если мы пишем поддельные данные локально, то что мы должны использовать для записи и как получить данные, должно быть непонятно новичку (кроме больших парней), именно здесь мы можем научиться, научиться использовать другой способ сделать одну вещь, это будет достигнута цель выполнения этого проекта.

Кстати говоря, данные должны быть помещены в файл js.Вообще-то, фоновые данные в формате JSON, поэтому разумнее всего поместить их в файл js.В этот раз снова возникает проблема, как мы получаем данные в нем? Когда я думаю об этом, я не знаю, как получить в нем данные. Я вижу, что предшественники используют метод require() для получения данных. Я думаю о том, что это такое. Мне не хватает разработки опыт.Я не знаю, что это такое, поэтому я возьму на себя инициативу, чтобы понять это. Что это такое? Оказывается, это реализация модулей в CommonJS в узле. JS не очень хорошо реализовывал модульное программирование раньше. Почти все коды написаны в файле.Появление CommonJS реализует модульность JS.В то же время я также знаю, что ES6 также имеет свой модульный метод.Я использую методы импорта и экспорта для реализации модульного программирования.Я чувствую что я выучил это снова.Я использую эти два метода для получения данных в своих собственных проектах:

Глядя на картинку выше, вы можете видеть, что я использовал оба метода в проекте. Вы можете не понимать, что размещено. Вам не нужно понимать. Теперь идите и посмотрите CommonJS и Знание модульности в ES6, вы научись чему-нибудь заново! ! ! Некоторые люди не поймут, зачем вы хотите писать фейковые данные локально, разве это не занимает память, зачем использовать два модульных метода, одного недостаточно и т.д., на самом деле то, что я делаю, это не "Проект" , меня больше интересует то, что я могу узнать в рамках этого проекта, здесь я знаю два метода модуляризации, а затем я могу потратить больше времени в будущем на углубленное изучение двух методов модуляризации, это результат, которого я хочу. Не помещайте поддельные данные локально в разработку реального проекта и не используйте два способа сделать одно и то же одновременно.Теперь вы можете играть, хахахахахаха! ! ! ! !

Ссылка на проблемы сторонних фреймворков

Многие наверняка задумывались над тем, использовать ли сторонний фреймворк или писать нативный код для своих проектов.Этот вопрос зависит от их собственных представлений.Я расскажу о своих взглядах.Вещи не очень ясны.Я хочу писать стили типа wxss. Я больше знаком с атрибутами стиля. На самом деле я не очень хорошо разбираюсь в использовании сторонних фреймворков, но мне все равно нужно больше их использовать и «знать» использование фреймворков. В этом проекте большая часть файлов wxss написана мной.Что касается стиля более поздних функций, я также использую сторонний фреймворк.Например, в UI-фреймворке, обычно используемом в небольших программах, есть weui. Это очень полезно Команда WeChat Разработанный фреймворк, который предоставляет множество компонентов, что может значительно сократить время разработки.

Моя позиция такова, что если это отношение к обучению, то пишите нативный код самостоятельно. Я думаю, что его быстрее улучшать. Если это реальный проект разработки, то есть если вы можете использовать фреймворк, то используйте фреймворк, и не стройте свои собственные колеса.

Мышление в процессе реализации основных функций проекта

Режим разработки апплета сильно отличается от нашего традиционного режима разработки. В традиционной разработке мы обычно используем операции dom для динамического изменения страниц. Я чувствую, что это способ поиска, использование операций dom для поиска элемента, а затем изменение поведения элемент, тем самым изменяя состояние страницы, а режим разработки апплета - MVVM, страница привязки данных, изменение данных изменяет состояние страницы, эта традиционная разработка очень отличается, это в апплете. Это легко наступить на яму в разработке.Я наступил на эту яму в этом проекте.Мы должны хорошо понимать модель MVVM.

• всплывающее окно при нажатии кнопки

<block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" wx:key="idx" data-idx="{{idx}}" >
  <view  class="feed-item">      
     <view class="feed-source">
       <!--遮罩层-->
       <view class="drawer_screen" bindtap="hide" data-statu="close" wx:if="{{showModalStatus}}"></view>
       <!--弹窗事件触发-->
       <view bindtap="powerDrawer" data-statu="open" data-answerId="{{item.answer_id}}">
           <image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
       </view>
     </view>
     <!--弹窗页面-->
     <view animation="{{animationData}}" data-answerId="{{item.answer_id}}" class="drawer_box" wx:if="{{showModalStatus&&item.isSelected}}">
        <view class="drawer_shield">屏蔽这个问题</view>
        <view class="drawe_report">举报</view>
     </view>
  </view>
</block>

var util = require('../../utils/util.js');const app = getApp();
Page({ // 页面初始数据data: {
//  数据源feed: [],//  更多按钮 触发弹窗
showModalStatus: false ,
},
// 弹窗触发事件powerDrawer: function (e) { 
  // 获取数据源
  let feed = this.data.feed;// 得到按钮点击时设置的数据值 data-answerId
let answer_id = e.currentTarget.dataset.answerid;// 得到按钮点击时设置的数据值 data-statu
let currentStatu = e.currentTarget.dataset.statu;
// 遍历数据源
for(let key of feed)
{
   if(key.answer_id === answer_id){      key.isSelected = true;
   }
}
this.setData({
   feed:feed,
});
// 弹出窗
this.util(currentStatu);}
})

//数据源模板
var next = {
  "data": [
        {
          "topic": "教育",          "answer_id": 1,
          ...
        },
        {
           "topic": "教育",
           "answer_id": 2,
           ...
        },
        {
           ...
        },
        ...
    ]
}

Выше приведен основной код всплывающего окна нажатия кнопки, потому что в нем отображается рендеринг данных, и записывается только один макет базовой страницы.Благодаря привязке данных в js все данные в источнике данных могут быть импортированы в page , что может сократить объем работы. Теперь я поделюсь с вами проблемами, с которыми я столкнулся при написании этого триггерного события, вы можете увидеть, в чем проблема, когда посмотрите на картинку ниже:

Вы можете увидеть проблему, когда видите изображение. Нажмите только на одно из них, и другие поля также вызовут всплывающие события. Это проблема, с которой легко столкнуться при выполнении рендеринга данных на основе списка. Если вы столкнетесь с ямами, почему возникает эта проблема?Причина очень проста, так как при написании макета страницы мы динамически заливаем данные через , пишется только один базовый стиль, и у каждого данные есть триггерное событие bindtap

Это для решения проблемы путем поиска, но я этого не делал. Причина в том, что значение, которое вы просматриваете каждый раз, совпадает со значением, которое вы устанавливаете при его запуске, поэтому оно не может решить проблему. , Этот метод по-прежнему остается традиционным. Разработка и дизайн DOM, такие как операция dom, постоянно ищут, находят определенное значение, а затем изменяют его. Просто с помощью такого подхода немного сложно решить проблему в апплете, на самом деле нужно правильно понимать режим MVVM, и эта проблема решается легко, статус страницы привязки данных и страницы ревизии данных.

Решение этой проблемы состоит в том, чтобы добавить логическое значение к каждому из данных.При срабатывании события собственной кнопки его логическое значение равно true, а логическое значение других данных — false.

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

• Функция комментариев

<view class="comment-bd">
  <view class="ordinaryComment">     <text>评论</text>
  </view>
 <block wx:for="{{item.ordinaryComment}}" wx:key="index">   <view class="user-comment">    <view class="user-avatar">       <image src="{{item.feed_source_img}}"></image>
    </view>
    <view class="comment-content">
      <view class="user-name">        <text>{{item.feed_source_name}}</text>      </view>    <view class="answer-content">       <text>{{item.content}}</text>    </view>
    <view class="comment-action">      <view class="like dot">         <text>点赞 {{item.good_num}}</text>      </view>      <view class="comment dot">         <text>回复{{item.comment_num}}</text>      </view>     <view class="time">        <text>{{item.time}}</text>      </view></view>
</view>
</block>
<view class="comment-ft">   <view class="commentInput">
       <input type="text" value="{{content}}" bindinput="onTextChanged" placeholder="请输入评论" placeholder-class="placeholderClass" />   </view>
   <view class="commentBtn">
       <text bindtap="onSendClicked" data-questionId="{{item.question_id}}">发布</text>   </view></view>  

var util = require('../../utils/util.js');
let myComment = '';
Page({
   data: {     comment: [],    content: "", },
onTextChanged: function(e){
     //获取文本框的值，即输入的评论的内容
    myComment = e.detail.value; },
onSendClicked: function(e){
//获取触发时设置数据的值
let question_id = e.target.dataset.questionid;
var that = this,conArr = [];
//定时器，100ms后触发
setTimeout(function(){
//将评论的基本信息存入数组
 if(myComment.length > 0){
     conArr.push({     "feed_source_img": "../../images/icon9.jpeg",     "feed_source_name": "zero",     "time": util.formatTime(new Date()),     "good_num": "0",     "comment_num": "0",     "content": myComment     })
//从数据源中获取评论页面的所有数据
var feed = util.getData2();
let comment_data = feed.comment;
//找到指定页面的评论数据
const comment = comment_data.filter((comment) => {
   return question_id == comment.question_id;})
//将添加的评论的基本信息数组conArr合并到数据源中评论数据的数组comment[0].ordinaryComment中var commentContent = comment[0].ordinaryComment.concat(conArr);
//将新加入的conArr数组放在源数组中的第一位，便于触发提交评论时评论内容出现在页面的第一栏
var newCommentContent = commentContent.reverse();var newComment = comment[0];
comment[0].ordinaryComment = newCommentContent;
that.setData({
comment: comment,
content: ""
})
}
 },100)
},
})

Выше приведен основной код функции комментария.Для реализации этой функции необходимо решить основную проблему - найти страницу комментариев указанного вопроса.Метод Array.filter() может найти страницу комментариев указанного вопроса, и тогда решаемая задача заключается в заполнении информации комментария, которая добавляется в массив comment[0].ordinaryComment данных комментария в источнике данных, что может быть реализовано методом Array.concat(). , новые данные отображаются на странице и статус страницы обновляется.Есть еще одно место, на которое следует обратить внимание: Как отобразить введенную информацию комментария в первом столбце столбца комментариев, Array.reverse() может решить эту проблему , чтобы эта функция лучше реализовывалась.

• Краткое описание других функций

Например, более распространенными функциями являются переключение вкладок в верхней части домашней страницы.Вы можете использовать компонент swiper-item и bindtap для привязки событий, что позволяет добиться эффекта переключения вкладок.Компонент прокрутки может быть используется для раскрывающегося обновления. Компонент предоставляет множество свойств, может реализовывать множество функций, а основные компоненты всплывающих функций включают wx.showToast(), wx.showActionSheet (OBJECT), wx.showModal (OBJECT) и т. д. , Эти компоненты можно узнать из официальных документов.Используйте основные компоненты.

• Сопутствующая документация и инструменты

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

 2. обучение CommonJSОбеспечьте надежное модульное обучение

 3. Модульный ES6собственная модульная разработка

 4. iconfont   @font-faceНаучитесь использовать свойство font-size CSS3. Изображение страницы больше не в формате png, его стоит изучить

 5. weuiУчитесь использовать сторонние фреймворки, небольшие программы нужно изучать weui

 6. Инструменты разработчика мини-программИнструменты для разработки небольших программ

конец

Я многому научился в этом исследовании. Если я хочу прояснить, какова цель этого проекта, моя цель этого проекта - научиться. Я знаю, чего мне не хватает и что нужно усилить. В процессе завершения всего проекта На самом деле, я чувствую свое утилитарное намерение и надеюсь, что смогу закончить проект быстро Это очень плохо в процессе обучения Я забываю первоначальный замысел выполнения проекта Как учащийся, мы должны больше думать об этом.Что мне может принести этот проект?Какую помощь я могу принести себе действиями?Мы должны осознать максимальную пользу от этого проекта для себя.В этом ценность существования этого проекта.Быть достойным этого проекта , не просто я склонен делать этот проект, делайте это хорошо, мне все равно, мне нужно учиться на первоначальном замысле! ! ! ! !

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

адрес проекта:GitHub.com/D-song сын…

Личный адрес электронной почты: DengSongsong1010@163.com

wx: dss1000010

Если вы найдете эту статью и проект полезной, добро пожаловатьstarО спасибо всем! ! !