предисловие
Недавно сами делают небольшую программу, программа основана на небольшом облачном развитии, использование разработки облака при выполнении программы небольших проектов действительно много удобства. У меня о облачном развитии будет поговориться о позже, в конце концов, этот проект разработан с использованием облака, партнеры по развитию Content Cloud Partners нужно также увидеть официальные документы,.
Адрес проекта имитации заголовка.
Детальный проект
Далее я подробно расскажу о проекте.Хотя облачная разработка экономит много времени, интерфейсные и серверные части требуют много работы.За этот короткий период времени я не завершил весь проект, но реализованы только домашняя страница, страница сведений и страница входа.и другие основные функции
Сначала я разрабатываю базу данных, в которой интерфейс должен получать данные для подготовки к последующему сбору данных.База данных использует базу данных MongoDB, разработанную Mini Program Cloud, хранит данные в облачной базе данных и использует облачные функции для работы с базой данных.
Новости Главная
Домашний интерфейс
Поле ввода привязано к событию касания, которое изменяет значение заполнителя, когда поле ввода щелкается, но значение не вводится.
В правой части панели вкладок есть кнопка. Нажмите кнопку, и появится всплывающий слой. В предыдущем gif-файле есть демонстрация, которая представляет собой поле выбора для типов новостей. Нажмите кнопку закрытия, чтобы закрыть окно. всплывающий слой.
Наконец, это самая важная страница отображения новостей на главной странице, в целях экономии времени проекта здесь используется любимый фреймворк vant-weapp, о котором могут узнать заинтересованные друзья. На панели вкладок установлено 6 вкладок, но отображаются только вкладки 4. Если вы хотите отобразить другие вкладки, вы можете перетаскивать панель вкладок влево и вправо. Здесь рекомендуемая страница активируется по умолчанию. Поскольку код каждой вкладки в основном одинаков, только первая колонка рекомендуемой страницы является верхней информацией, а полученные данные отличаются.Код для сбора данных будет подробно описан ниже.В целях улучшения кода Для повторного использования здесь используется шаблон, а повторно используемый код пишется в другом файле, и его можно вызывать напрямую при использовании.
Создается коллекция, соответствующая каждому тегу.Здесь я также создаю другую коллекцию для главных новостей и проектирую поля, которые необходимо использовать для каждой части информации, чтобы облегчить получение и использование данных самостоятельно, потому что облачная база данных может импортируйте файлы json или файл csv, и каждая новость также должна подтягивать и загружать данные, для чего требуется больше данных, а создание данных самостоятельно занимает много времени и хлопот, поэтому я написал здесь сканер для сканирования нужных мне данных и сохраните его в файл json.Данные импортируются в базу данных.
Такое проектирование базы данных также упрощает получение данных из базы данных. Напишите функцию модуля для получения данных каждого тега.
Поля каждой части данных следующие, из которых news_id играет важную роль, связывая каждую новость на главной странице с соответствующей страницей сведений.
Детакт
Используйте шаблон на каждой вкладке и установите ДАННЫЕ (для разных страниц в соответствующую новостную информацию, которую необходимо отобразить, используемую для отображения на странице), поскольку страница активации по умолчанию является рекомендуемой страницей, рекомендуется, когда событие OnLoad Данные страницы, и установите рекомендуемую страницу, чтобы она была активирована, а данные загружаются с помощью функции загрузки.
module: function(title) {
let counter = this.data.counter
// console.log(title)
wx.cloud.callFunction({
name: 'module',
data: {
counter: counter,
title: title
}
}).then(res => {
// console.log(res)
let cnews = this.data.cnews
let data = res.result.data
// console.log(data)
for(let i = 0; i < data.length; i++) {
// console.log(data[i].date)
data[i].date = data[i].date.slice(0, 10)
cnews.push(data[i])
this.imgCheck(data[i].images, data.new_id, title)
}
// console.log(data)
this.setData({
hiddenLoading: true,
cnews: cnews,
counter: counter+1
})
})
}
Заголовок — это заголовок отображаемого в данный момент тега. Рекомендуется значение по умолчанию. При использовании счетчика каждый раз будет загружаться только 5 новостей. Новостная информация, полученная из базы данных, обрабатывается с помощью облачной функции.
#### 通过云函数获取数据
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
return await db.collection(event.title).skip((event.counter-1)*5).limit(5).get()
}
Передайте в облачную функцию два фрагмента данных, один — заголовок, который предназначен для получения информации из соответствующей коллекции, а другой — счетчик, используемый для вычисления позиции получения информации, т. к. данные необходимо загружать при подтягивании и загружаю больше новостей, вот и я Он настроен на загрузку 5 частей данных за раз, поэтому счетчик передается в облачную функцию.Каждый раз, когда облачная функция вызывается для получения данных из базы данных, счетчик будет +1 , чтобы каждый раз, когда данные подтягиваются и загружаются, уже загруженные данные сзади игнорировались. Каждый раз, когда данные загружаются, массив, который сохраняет данные, будет обновляться один раз, и страница index.wxml домашней страницы будет оценивать и получать данные и использовать цикл for для отображения данных на соответствующей странице вкладки.
Потяните вниз, чтобы обновить
В верхней части новости, которая на самом деле не особо спец в сборе данных, я просто поставил топ новостей последних новостей из облачной базы, чтобы победить и показать страницу
onPullDownRefresh: function () { // 监听下拉动作来获取最新新闻信息
wx.showToast({
title: '推荐中',
image: '../../../image/加载.png'
})
let title = this.data.title;
wx.cloud.callFunction({
name: 'module',
data: {
counter: 1,
title: title
}
}).then(res => {
// console.log(res)
let cnews = this.data.cnews
let datas = res.result.data
let data = datas.concat(cnews)
this.setData({
hiddenLoading: true,
cnews: data,
})
})
}
Я уже говорил о бэкенде, и эта статья также посвящена облачной разработке, честно говоря, облачная разработка очень удобна, один человек может заниматься фронтендом и бэкендом. Однако, чтобы облегчить всем понимание, я все же расскажу о содержании интерфейса.
Поскольку данные были переданы ранее, последнее, что нужно сделать, это отобразить данные, все данные
<van-tab title="推荐" >
<!-- 推荐tab标签页的置顶新闻框 每一个新闻框可以点击进入到详情页-->
<van-panel class="topping" title="{{topTitle}}" status="置顶" use-footer-slot bind:tap="showTopDetail" data-item="{{topNew_id}}">
<view class="images">
<image src="{{images[0]}}" />
<image src="{{images[1]}}" />
<image src="{{images[2]}}" />
</view>
<view solt="footer" class="footer">
<view class="author">{{topAuthor}}</view>
<view class="comment">评论{{topComment}}</view>
<view class="Date">{{topDate}}</view>
</view>
</van-panel>
<template is="container" data="{{news: active1 == 'news'?news:cnews, hiddenLoading}}"></template>
</van-tab>
<template name="container">
<view class="container">
<loading hidden="{{hiddenLoading}}"></loading>
<view class="news" wx:for="{{news}}" wx:for-item="info" wx:key="info.new_id">
<van-panel class="new" title="{{info.title}}" bind:tap="showDetail" use-footer-slot data-item="{{info.new_id}}">
<view class="images" wx:if="{{info.images.length > 0}}">
<image src="{{info.images[0]}}"/>
<image src="{{info.images[1]}}"/>
<image src="{{info.images[2]}}"/>
</view>
<view solt="footer" class="footer">
<view class="author">{{info.author}}</view>
<view class="comment">评论{{info.comments}}</view>
<view class="Date">{{info.date}}</view>
</view>
</van-panel>
</view>
</view>
</template>
Здесь используется идея MVVM, которая привязывает данные к UI-интерфейсу, и после того, как данные получены в файле js, данные используются здесь.
Так как количество картинок для каждой новости здесь не определено, и показывают максимум три картинки. Так зафиксировали сразу три тега изображения и зафиксировали размер изображения, когда без картинки не будет отображаться картинка.
Страница сведений
Многое из того, что я сказал на главной странице, больше не будет сказано на странице подробностей.Если вы не понимаете, вы можете перейти к исходному коду.В конце концов, говорить столько ерунды - пустая трата времени. Я постараюсь выбрать наиболее интересные части для написания.
Главная страница на страницу сведений
Каждая новость на главной странице привязана к событию быстрого перехода.При нажатии на новость происходит переход на страницу сведений и передача идентификатора и заголовка новости в качестве параметров на страницу сведений.
showDetail: function(e) { // 点文章显示文章详情
let item = e.currentTarget.dataset.item;
let title = this.data.title;
// console.log(e)
wx.navigateTo({
url:`../detail/detail?contentId=${item}&title=${title}`
})
}
интерфейс
После перехода на страницу сведений соответствующий идентификатор новости будет получен в событии загрузки, и этот идентификатор будет сохранен в данных. Поскольку я не лез вниз при сканировании страницы с подробностями, я просто вставил в контент какой-то простой контент.
В этой части страницы деталей я разделил страницу в контентные детали и комментарии. Тогда есть использование фиксированной кнопки, чтобы исправить поле ввода и другие кнопки в нижней части экрана
Контентная часть разделена на четыре части, а именно заглавная часть, аватар и никнейм автора, содержательная часть, лайк и пересылка, а данные в базе данных отображаются в интерфейсе.
Во второй части я использовал гибкий гибкий макет для отображаемого изображения и псевдонима и установил гибкость части псевдонима на 1, чтобы кнопки аватара и подписки были с обеих сторон. В аватаре используется тег изображения, а размер тега изображения фиксирован, ведь загружаемые пользователями изображения должны быть разных размеров. Четвертую часть можно выполнить, если вы используете 4 представления для размещения изображений и контента, а затем используете гибкий макет.
Реализация конкретной функции
Теперь, когда макет интерфейса завершен, пришло время получить данные.Когда вы нажмете на новость, чтобы перейти на страницу сведений, вы получите идентификатор и заголовок новости, чтобы вы могли передать уникальный идентификатор ( id каждого документа) и заголовок (название сборника) Получить соответствующие новостные данные из облачной базы данных. Код здесь публиковаться не будет, он аналогичен предыдущей домашней странице, если он вам нужен, вы можете зайти на github и посмотреть исходный код.
Далее содержание раздела комментариев.Лично я считаю это место довольно интересным и есть проблема с правами доступа при обновлении базы данных.Я не говорил об этом раньше,но планирую разместить его в разделе комментариев. Поле комментария закреплено внизу страницы, включая поле ввода, кнопку для перехода к комментариям, кнопку избранного и кнопку вперед.
Он реализует только функцию переадресации в WeChat, просто вызовите интерфейс onshareAppMessage апплета WeChat, вы можете переслать его другу или группе WeChat, нажав на значок WeChat.
Реализация функции входа заключается в установке свойств кнопки входа на странице в open-type=getUserInfo, bindgetuserinfo=getUserInfo Нажатие кнопки входа для авторизации входа приведет к получению информации о пользователе и сохранению информации о пользователе в глобальном масштабе, чтобы информацию о пользователе можно было оценить или использовать на странице сведений.
submit: function() { // 实现评论功能，将发布的评论同步到云数据库
let value = this.data.inputValue;
let new_id = this.data.new_id;
let userInfo = this.data.userInfo
// let new_id = '6594157273642172936'
if(userInfo){
comments.where({
new_id: new_id
}).get({
success: (res) => {
// console.log(res)
let comms= res.data[0].comments;
let people = {
content: value,
like: 0,
avatar: userInfo.avatarUrl,
nickname: userInfo.nickname
}
comms.unshift(people);
// console.log(comm)
this.setData({
comms: comms,
input: '',
})
wx.cloud.callFunction({
name: 'updateComments',
data: {
new_id: new_id,
comms: comms
}
}).then(res =>{
console.log(res)
})
}
})
}
}
Для базы данных в разделе комментариев я создал только набор комментариев, роль будет играть новость new_id в начале, у каждого комментария есть new_id, и каждый комментарий новости задается как объект, ведь комментарии тоже включать псевдонимы аватаров, количество лайков, содержание комментариев и т. д. Преимущество настройки базы данных комментариев таким образом заключается в том, что, пока идентификатор новости получен в наборе, можно получить комментарии, соответствующие новостям.
Поскольку вы можете комментировать, функция «лайк» незаменима.Хотя «лайк» — очень распространенная функция, она использует облачные данные, и конкретная реализация по-прежнему очень интересна.
Каждый комментарий можно лайкнуть один раз, повторное нажатие отменяет лайк. Нравится в разделе комментариев Функция addLike, которую я написал здесь, привязана к кнопке «Мне нравится». {index}}"i (индекс генерируется с помощью цикла for для отображения комментариев) и соответствует месту, где комментарий сохраняется в базе данных, чтобы было удобно отличать понравившийся комментарий.
При лайке кнопка лайка изменится на красную кнопку, а лайки в базе тоже увеличатся на единицу. Нажмите кнопку «Мне нравится» еще раз, чтобы восстановить, и «Нравится» также восстановится. На самом деле подобная функция все же очень интересна.Это полностью моя личная идея.Могут быть какие-то минусы,но все же рекомендую всем глянуть. Ниже приведен конкретный код реализации
addLike: function(e) { // 点击点赞图标增加点赞数同时保存到数据库
let item = e.currentTarget.dataset.item;
let new_id = this.data.new_id;
let comms = this.data.comms;
let likeItem = this.data.likeItem;
let likebool = 'likeItem['+item+'].bool'
let liken = 'likeItem['+item+'].n'
if(typeof(likeItem[item]) == "undefined"){
this.setData({
[likebool]: false,
[liken]: 0,
})
}
if(likeItem[item]){
likeItem[item].n += 1;
if(likeItem[item].n%2){
comms[item].like += 1;
}else{
comms[item].like -= 1;
}
likeItem[item].bool = !(likeItem[item].bool);
}else{
likeItem[item].bool = true;
likeItem[item].n = 0;
comms[item].like += 1;
}
this.setData({
comms: comms,
likeItem: likeItem
})
// console.log(comms)
wx.cloud.callFunction({
name: 'updateComments',
data: {
new_id: new_id,
comms: comms
}
}).then(res =>{
// console.log(res)
})
},
В нижнем сайдбаре поля ввода комментария есть кнопка-флажок, кнопка-картинка и т.д.. Здесь я использовал flex layout, чтобы легко это сделать.Так я реализовал функцию вставки картинок в комментарии и сохранял картинки в облако. На самом деле изображение для вставки комментария еще нужно оптимизировать, и я продолжу его оптимизировать после того, как закончу писать статью.
Я использую интерфейс загрузки файлов wx.cloud.uploadFile, разработанный Mini Program Cloud.После загрузки изображения будет сгенерирован идентификатор файла.Я сохраню идентификатор файла (то есть адрес изображения) под изображением текущего объекта комментария , и обновите локальные данные, а затем используйте if, чтобы определить, содержит ли текущий комментарий изображение, и если да, отобразить изображение в комментарии. Я не буду размещать здесь код, вы можете посмотреть исходный код, если он вам нужен.
Суммировать
Поскольку проект немного большой, я реализовал только некоторые функции за короткий период времени, а другие функции я реализую в последующее время. На самом деле, я написал этот проект для реальной облачной разработки, и я также ощутил на себе преимущества облачной разработки. Вы можете указать на некоторые недостатки в проекте, а также можете связаться со мной, если у вас есть хорошие предложения. все учатся друг у друга