Авторские права принадлежат автору. Для коммерческой перепечатки, пожалуйста, свяжитесь с roberthuang для получения разрешения, для некоммерческой перепечатки, пожалуйста, укажите источник.
Не используйте открытый исходный код в коммерческих целях!
содержание
Введение в облачную разработку
предисловие
благодарныйOnceLoveОбеспечьте идеи, с помощью своего апплета интерфейса стиля пользовательского интерфейса, повторно используйте mpvue для создания собственных свадебных приглашений, входы и выходы потратили три дня. Перед этим я подумал про себя, чтобы реализовать такой проект, потому что фон - это часть хлопот, поэтому, когда жена позволила себе реализовать это приглашение, когда я сначала был отвергнут. Поскольку позади Нового года у компании нет крупного обновления проекта, воспользовавшись этим свободным временем, он изучил небольшую программу, которая поставляется с облачной разработкой без фоновой поддержки, передняя и задняя части могут быть реализованы сами по себе, здесь я представлю один за другим в этом процессе реализации проекта!
Этот апплет официально используется для свадеб (из-за некультурного поведения некоторых друзей, поэтому мы можем только изменить апплет для всеобщего ознакомления), приближается дата свадьбы, и те, кто заинтересован, могут отсканировать код, чтобы испытать этот проект и чувствовать себя счастливым Добро пожаловать всем, чтобы испытать, если у вас есть какие-либо вопросы, вы можете оставить мне сообщение в этой статье
Добро пожаловать на опыт:
Адрес источника:https://gitee.com/roberthuang123/wedding
Готов к работе
- фреймворк mpvueОфициальная документация MPVUE
- Облачная мини-программаДокументация по разработке мини-программы в облаке
Примечание. Прежде чем использовать mpvue, вы должны сначала ознакомиться с основами использования фреймворка vue.
Введение в структуру проекта
общий каталог: поместите некоторые общие ресурсы, такие как js, css, json
Каталог компонентов: сюда, связанные с компонентами.
каталог pages: все страницы помещаются в этот каталог
каталог utils: создается автоматически при использовании mpvue, его можно игнорировать
файл app.json:
{
"pages": [
"pages/index/main",
"pages/photo/main",
"pages/map/main",
"pages/greet/main",
"pages/message/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#ccc",
"selectedColor": "#ff4c91",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/main",
"iconPath": "static/images/1-1.png",
"selectedIconPath": "static/images/1-2.png",
"text": "邀请函"
},
{
"pagePath": "pages/photo/main",
"iconPath": "static/images/2-1.png",
"selectedIconPath": "static/images/2-2.png",
"text": "甜蜜相册"
},
{
"pagePath": "pages/map/main",
"iconPath": "static/images/3-1.png",
"selectedIconPath": "static/images/3-2.png",
"text": "酒店导航"
},
{
"pagePath": "pages/greet/main",
"iconPath": "static/images/4-1.png",
"selectedIconPath": "static/images/4-2.png",
"text": "好友祝福"
},
{
"pagePath": "pages/message/main",
"iconPath": "static/images/5-1.png",
"selectedIconPath": "static/images/5-2.png",
"text": "留言评论"
}
]
},
"requiredBackgroundModes": ["audio"]
}
Файл App.vue: в основном я добавляю напоминание после обновления проекта, поэтому я добавил соответствующий контент в этот файл. Содержание выглядит следующим образом:
<script>
export default {
onLaunch () {
// 检测小程序是否有新版本更新
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
// 小程序有新版本，会主动触发下载操作（无需开发者触发）
wx.getUpdateManager().onUpdateFailed(function () {
// 当新版本下载失败，会进行回调
wx.showModal({
title: '提示',
content: '检查到有新版本，下载失败，请检查网络设置',
showCancel: false
})
})
}
})
} else { // 版本过低则无法使用该方法
wx.showModal({
title: '提示',
confirmColor: '#5BB53C',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
}
}
</script>
<style lang="stylus">
page
height 100%
image
display block
</style>
файл main.js:
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
wx.cloud.init({
env: '云开发环境ID'
})
const app = new Vue(App)
app.$mount()
каталог functions: в основном ставлю какие-то облачные функции, непонятная здесь статья про облачные функции будет упомянута позже
Каталог изображений: в основном положить некоторые фотографии статических ресурсов
введение страницы
- Главная - Письмо-приглашение
Домашняя страница посвящена объяснению того, как реализовать фоновую музыку.
const audioCtx = wx.createInnerAudioContext()
первый,wx.createInnerAudioContextИнтерфейс для получения экземпляра
Затем реализуется функция воспроизведения и приостановки музыки с помощью соответствующего метода примера
О документах, связанных со звуком в мини-программе
Конкретный код выглядит следующим образом:
<script>
import IndexSwiper from 'components/indexSwiper'
import tools from 'common/js/h_tools'
const audioCtx = wx.createInnerAudioContext()
export default {
name: 'Index',
components: {
IndexSwiper
},
data () {
return {
isPlay: true,
list: []
}
},
onShow () {
const that = this
that.isPlay = true
that.getMusicUrl()
},
methods: {
audioPlay () {
const that = this
if (that.isPlay) {
audioCtx.pause()
that.isPlay = false
tools.showToast('您已暂停音乐播放~')
} else {
audioCtx.play()
that.isPlay = true
tools.showToast('背景音乐已开启~')
}
},
getList () {
const that = this
const db = wx.cloud.database()
const banner = db.collection('banner')
banner.get().then(res => {
that.list = res.data[0].bannerList
})
},
getMusicUrl () {
const that = this
const db = wx.cloud.database()
const music = db.collection('music')
music.get().then(res => {
let musicUrl = res.data[0].musicUrl
audioCtx.src = musicUrl
audioCtx.loop = true
audioCtx.play()
that.getList()
})
}
},
onShareAppMessage: function (res) {
return {
path: '/pages/index/main'
}
}
}
</script>В приведенном выше коде используются функции, связанные с облачной разработкой, которые будут представлены позже в этой статье. Наберитесь терпения.
- Страница альбома - просто карусель, я не буду здесь лишнего представлять
- Страница карты — сосредоточьтесь на карте тегов карты здесь
тег картыДокументация по использованию компонента карты
Давайте поговорим о маркерах здесь
data () {
return {
// qqSdk: '',
markers: [{
iconPath: '../../static/images/nav.png',
id: 0,
latitude: 30.08059,
longitude: 115.93027,
width: 50,
height: 50
}]
}
}<template>
<div class="map">
<image mode="aspectFit" class="head-img" src="../../static/images/t1.png"/>
<map class="content" id="map" longitude="115.93027" latitude="30.08059" :markers="markers" scale="18" @tap="toNav">
</map>
<div class="call">
<div class="left" @tap="linkHe">
<image src="../../static/images/he.png"/>
<span>呼叫新郎</span>
</div>
<div class="right" @tap="linkShe">
<image src="../../static/images/she.png"/>
<span>呼叫新娘</span>
</div>
</div>
<image class="footer" src="../../static/images/grren-flower-line.png"/>
</div>
</template>- Страница благословения - также связана с облачным развитием, который будет введен позже
- Страница сообщений и контент, связанный с облачной разработкой, будут представлены позже.
Введение в облачную разработку
Документация по разработке мини-программы в облаке
- файл project.config.json:
"cloudfunctionRoot": "static/functions/"Для облачной разработки сначала нам нужно найти указанный выше файл и добавить приведенное выше предложение в указанный выше файл json.
cloudfunctionRootИспользуется для указания каталога для хранения облачных функций
- файл app.json:
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"cloud": trueдобавить поле"cloud": true实现云开发能力的兼容性
- Открытая облачная разработка
В левой части панели инструментов разработчика нажмите кнопку «Облачная разработка», чтобы включить облачную разработку.
- Консоль облачной разработки
- база данных
Облачная разработка предоставляет базу данных JSON
место хранения
Облачная разработка предоставляет пространство для хранения, загрузку файлов в облако и возможности загрузки из облака с управлением разрешениями.Разработчики могут использовать функцию облачного хранилища через API-интерфейсы апплета и облачные функции.
облачная функция
Облачная функция — это фрагмент кода, который выполняется в облаке. Вам не нужно управлять сервером. Вы можете запустить внутренний код, написав его в средстве разработки, а затем загрузив и развернув его одним щелчком мыши.
Давайте начнем объяснять процесс использования облачной разработки:
- Инициализация облачных возможностей. Прежде чем апплет начнет использовать облачные возможности, ему необходимо вызвать
wx.cloud.initМетод завершает инициализацию облачных возможностей
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
wx.cloud.init({
env: '云开发环境ID'
})
const app = new Vue(App)
app.$mount()
2. Использование базы данных:
Прежде чем начать использовать API базы данных, вам необходимо получить ссылку на базу данных перед запуском модификации. Следующие вызовы, чтобы получить ссылку на базу данных среды по умолчанию:
const db = wx.cloud.database()Чтобы работать с коллекцией, сначала получите ссылку на нее:
const todos = db.collection('todos')Ниже приведен соответствующий пример манипулирования базой данных:
Пример: Домашняя страница для получения ресурсов фоновой музыки
getMusicUrl () {
const that = this
const db = wx.cloud.database()
const music = db.collection('music')
music.get().then(res => {
let musicUrl = res.data[0].musicUrl
audioCtx.src = musicUrl
audioCtx.loop = true
audioCtx.play()
that.getList()
})
}Пример: получить массив карусельных изображений на главной странице
getList () {
const that = this
const db = wx.cloud.database()
const banner = db.collection('banner')
banner.get().then(res => {
that.list = res.data[0].bannerList
})
}Пример: страница благословения, пользователи отправляют благословения пользователям магазина.
<script>
import tools from 'common/js/h_tools'
export default {
name: 'Greet',
data () {
return {
userList: [],
openId: '',
userInfo: ''
}
},
onShow () {
const that = this
that.getUserList()
},
methods: {
scroll (e) {
console.log(e)
},
sendGreet (e) {
const that = this
if (e.target.errMsg === 'getUserInfo:ok') {
wx.getUserInfo({
success: function (res) {
that.userInfo = res.userInfo
that.getOpenId()
}
})
}
},
addUser () {
const that = this
const db = wx.cloud.database()
const user = db.collection('user')
user.add({
data: {
user: that.userInfo
}
}).then(res => {
that.getUserList()
})
},
getOpenId () {
const that = this
wx.cloud.callFunction({
name: 'user',
data: {}
}).then(res => {
that.openId = res.result.openid
that.getIsExist()
})
},
getIsExist () {
const that = this
const db = wx.cloud.database()
const user = db.collection('user')
user.where({
_openid: that.openId
}).get().then(res => {
if (res.data.length === 0) {
that.addUser()
} else {
tools.showToast('您已经送过祝福了~')
}
})
},
getUserList () {
const that = this
wx.cloud.callFunction({
name: 'userList',
data: {}
}).then(res => {
that.userList = res.result.data.reverse()
})
}
}
}
</script>- Войдите на страницу благословения, сначала нам нужно получить список друзей, которые отправляют благословения
getUserList () {
const that = this
wx.cloud.callFunction({
name: 'userList',
data: {}
}).then(res => {
that.userList = res.result.data.reverse()
})
}Облачная функция используется здесь. Причина, по которой используется облачная функция, заключается в том, что сервер по умолчанию имеет и возвращает максимум 20 записей в то время, когда терминал апплета получает данные сбора, а количество клемма облачного функционала составляет 100.
Вот как использовать облачные функции:
Выше мы говорили о настройке места хранения облачных функций в файле project.config.json.
Ниже приведен файл index.js облачной функции messageList:
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100
exports.main = async (event, context) => {
// 先取出集合记录总数
const countResult = await db.collection('message').count()
const total = countResult.total
// 计算需分几次取
const batchTimes = Math.ceil(total / 100)
// 承载所有读操作的 promise 的数组
const tasks = []
for (let i = 0; i < batchTimes; i++) {
const promise = db.collection('message').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
tasks.push(promise)
}
// 等待所有
return (await Promise.all(tasks)).reduce((acc, cur) => ({
data: acc.data.concat(cur.data),
errMsg: acc.errMsg
}))
}
Прежде чем использовать облачную функцию, в инструменте разработчика найдите каталог messageList и щелкните правой кнопкой мыши, как показано на рисунке:
Нажмите Загрузить и развернуть: зависит от облачной установки (не загружать node_modules).
Получите подсказку, как показано:
После установки нажмите «Готово», чтобы использовать текущую облачную функцию.Метод использования следующий:
getUserList () {
const that = this
wx.cloud.callFunction({
name: 'userList',
data: {}
}).then(res => {
that.userList = res.result.data.reverse()
})
}Причина, по которой массив перевернут, заключается в том, что вы хотите, чтобы новый благословенный пользователь отображался первым.
- Затем сохраните пользователя, когда пользователь отправляет благословение
Здесь мы используем облачные функции для получения информации о пользователях,
Когда апплет вызывает облачную функцию, входящие параметры облачной функции будут внедрены в openid пользователя апплета.Разработчику не нужно проверять правильность openid, потому что WeChat завершил эту часть аутентификации, и разработчик может напрямую использовать openid
Ниже приведен файл index.js пользователя облачной функции:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID
}
}
Основная цель — получить openid текущего работающего пользователя и получить метод openid текущего пользователя:
getOpenId () {
const that = this
wx.cloud.callFunction({
name: 'user',
data: {}
}).then(res => {
that.openId = res.result.openid
that.getIsExist()
})
}Затем определите, существует ли уже текущий пользователь в базе данных, то есть метод getIsExist():
getIsExist () {
const that = this
const db = wx.cloud.database()
const user = db.collection('user')
user.where({
_openid: that.openId
}).get().then(res => {
if (res.data.length === 0) {
that.addUser()
} else {
tools.showToast('您已经送过祝福了~')
}
})
}Если длина полученного массива равна нулю, добавить пользователя в базу, иначе напомнить текущему пользователю, что благословение отправлено
Далее мы вводим метод хранения информации о пользователе, а именно addUser():
addUser () {
const that = this
const db = wx.cloud.database()
const user = db.collection('user')
user.add({
data: {
user: that.userInfo
}
}).then(res => {
that.getUserList()
})
}Информация, хранящаяся в базе данных, выглядит следующим образом:
Некоторые люди хотят посмотреть на поля базы данных.Это на самом деле очень просто.Это поле изображения карусели на главной странице, как показано на следующем рисунке:
Это комментарий к сообщению, как показано на рисунке:
Суммировать
Вот некоторые подробности для вас:
- Облачная разработка бесплатна;
- Сначала должно быть установлено имя коллекции базы данных;
- Когда коллекция базы данных пуста, я не буду вдаваться в подробности здесь, и будет сообщено об ошибке.Во-первых, написав часть данных с помощью моего собственного апплета, ошибку можно решить;
- После создания новой облачной функции обязательно создайте и установите зависимости;
- Если вы обеспокоены тем, что некоторые комментарии не очень дружелюбны, и хотите иметь функцию удаления, вы можете открыть разрешения для себя, добавить кнопку удаления к каждому комментарию и использовать уникальный openid, чтобы управлять кнопкой удаления, чтобы она была видимой и невидимой для другие, чтобы управлять списком сообщений;
- Не забудьте освободить разрешения после настройки базы данных, как показано ниже:
Окончательное резюме:
- Кроме некоторых статических ресурсов, размещенных в проекте, остальные ресурсы рекомендуется хранить в облачном хранилище разработки-хранилища, в этом случае удобно заменять ресурсы, не отдавая их повторно на проверку аплету, а замененные ресурсы может вступить в силу немедленно;
- Я знаю, что всем нравится использовать вещи, которые могут непосредственно видеть тот же эффект. Поскольку этот проект включает в себя фоновые данные, невозможно полностью выпустить мою собственную среду для использования всеми. Рекомендуется реализовать связанные функции или аналогичные проекты. Наиболее значимым для моего партнера является создание собственной новой работы в соответствии с моими идеями.
- Функций, наверное, так много. Я надеюсь, что это может помочь всем. Если вы считаете, что текст хороший, не забудьте поставить лайк автору. Ваша поддержка - самая большая мотивация для меня, чтобы продолжать обновлять!
последнее обновление
Некоторый контент был обновлен недавно, и его не планируется выкладывать в открытый доступ.Если вам это нужно, вы можете добавить WeChat (huangbin910419) в группу.Студенты, у которых есть проблемы, могут обратиться за помощью в группу.Примечания к вступлению в группу: Апплет свадебного приглашения
Имя коллекции и соответствующая структура данных
Поскольку многие студенты просили меня рассказать о коллекциях и структурах данных, вам нужны следующие картинки. Другие коллекции необходимы для последующей оптимизации. Код части оптимизации еще не является общедоступным, поэтому вам не нужно заботиться об этом. часть коллекции.