Автор оригинала: David Wong.
Только что отправленный апплет прошел проверку, и заметки разосланы. В предыдущем абзаце было показано, что в кругу друзей всегда есть люди, которые используют txt для записи своего веса, поэтому они особенно хотят написать небольшую программу для записи своего веса. Теперь в облачной разработке небольшой программы есть облачные функции и базы данных, которые действительно хороши для персональных разработчиков. Доменное имя сервера ни о чем не заботится. Облачная разработка делает вас полностью свободными от этих вещей.
Давайте взглянем на рендеринг страницы:
Записано несколько пунктов:
1. Глобальная переменная Глобальные данные
2. Использование NPM
3. облачная функция
4. Работа с базой данных
5. Использование асинхронности
6. Конфигурация общего доступа
7.Использование antV
8. Переход по адресу панели вкладок
9. Переключить обновление страницы
1. Глобальная переменная Глобальные данные
После первого входа в хранилище, открытое для других страниц, используйте глобальный обмен данными.
App({
onLaunch: function () {
this.globalData = {}
wx.cloud.init({})
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
this.globalData.openid = res.result.openid
wx.switchTab({
url: '/pages/add/add',
fail: function(e) {}
})
},
fail: err => {
}
})
}
})
Const app = getapp() // get an instance
App. GlobalData. Openid // direct reference is enough.2. Использование NPM
1. Введите исходный код апплета мини-программа Каталоги, создающие package.json Файлы (с помощью npm init Весь обратный путь)
2. нпм я ... спасаю Мы собираемся установить npm пакет
3. Настройка создания инструмента разработчика wechat npm
4. package.json увеличить "минипрограмма": "dist" Поле каталога пакетов. Если он не установлен, загрузка и предварительный просмотр не завершатся успешно, что указывает на слишком большой размер пакета.
cd miniprogram npm init NPM I @ antv / F2 canvas -- save // if I use F2, I can change it to another package.
Настройка инструментов разработчика wechat
структура npm
Наконец, не забудьте добавить мини-программу поле
{
"name": "21Day",
"version": "1.1.0",
"miniprogram": "dist",
"Description": "an app with 21 day weight record",
"license": "MIT",
"dependencies": {
"@antv/f2-canvas": "~1.0.5",
"@antv/wx-f2": "~1.1.4"
},
"devDependencies": {}
}3. облачная функция
Официальное объяснение Облачная функция-это функция, работающая в облаке (на стороне сервера) , сервер находится node.js Все они JavaScript 。 Существует официальная операция с базой данных, но Обновленные операции заставляют облачные функции , кроме того, если вы используете npm Пакет, не забудьте щелкнуть правой кнопкой мыши в папке облачных функций Загрузить и развернуть В противном случае операция завершится неудачей.
В предыдущем примере обновление облачной функции веса тела
// cloud function
const cloud = require('wx-server-sdk')
const moment = require('moment')
cloud.init(
{ traceUser: true }
)
const db = cloud.database()
const wxContext = cloud.getWXContext()
exports.main = async (event, context) => {
//Event parameter
delete event.userInfo
try {
return await db.collection('list').where({
_openid:wxContext.OPENID,
date:moment().format('YYYY-MM-DD')
})
.update({
data: {
...event
},
})
} catch(e) {
console.error(e)
}
}Боковой вызов апплета
wx.cloud.callFunction({
name: 'add',
data: {
...Param
},
success: res => {
wx.showToast({
Title: 'new record succeeded',
})
},
fail: err => {
wx.showToast({
icon: 'none',
Title: 'failed to add record'
})
}
})4. Работа с базой данных
Это действительно связано. MongoDB , инкапсулирующий часть api Выходите, посмотрите официальные документы в деталях. Существует различие между сервером и апплетом.
const db = wx.cloud.database()
//Query data
db.collection('list').where({
_openid: app.globalData.openid,
date: moment().subtract(1, 'days').format('YYYY-MM-DD'),
}).get({
success: function (res) {
// do someThing
}
})5. Использование асинхронности
Приглашение официального документа не поддерживается асинхронно , необходимо ввести regeneratorRuntime Этот мешок, первый регенератор npm i 。 Затем поставьте node_модули Подпапка регенератор-среда выполнения Из runtime-module.js и runtime.js Скопируйте два файла в каталог Lib и импортируйте их на страницу.
const regeneratorRuntime = require('../../lib/runtime.js')
onLoad: async function (options) {
//Get data of the day
await this.step1()
//Time type settings
let nowHour = moment().hour(),timeType
nowHour > 12 ? timeType = 'evening' : timeType = 'morning'
this.setData({timeType})
}6. Конфигурация общего доступа
Делиться очень просто. Существует различие между прямым общим доступом в правом верхнем углу и общим доступом по кнопке.
onShareAppMessage: function (res) {
//Share in the upper right corner
let ShareOption = {
Title: 'weight loss record in 21 days',
path: '/pages/index/index',
}
//Button sharing
if(res.from == "button"){
ShareOption = {
Title: 'come and have a look at my weight loss record',
path: '/pages/detail/detail?item=' + app.globalData.openid,
}
}
return ShareOption
}После публикации другие пользователи нажимают на страницу и переходят на соответствующие страницы Адрес из загружается Из вариантов Просто примите во внимание количество запросов параметров
onLoad: function (options) {
const db = wx.cloud.database()
let This = this
let resault = {}
db.collection('list').where({
_openid: options.item
}).get({
success: function (res) {
resault = res.data
This.setData({
resault:resault
})
}
})
},7.Использование antV
Упомянуто во втором разделе выше антВ Больше никаких подробностей об установке. Давайте поговорим о ссылке на странице.
Чтобы использовать его, вам нужно установить глобальную переменную для хранения экземпляра диаграммы, а затем использовать ее в содержимом функции привязки. изменить данные Метод изменения данных.
индекс.json Имя пакета, введенное в
{
"usingComponents": {
"ff-canvas": "@antv/f2-canvas"
}
}// the introduction of F2
import F2 from '@antv/wx-f2';
//Set instance global variables (be sure)
let chart = null;
Function initchart (canvas, width, height, F2) {// use F2 to chart
let data = [
//{timestamp: '1951', step: 38},
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data, {
step: {
tickCount: 5
},
timestamp: {
tickCount: 8
},
});
chart.axis('timestamp', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.axis('step', {
label(text) {
return {
Text: text / 1000 + 'k steps'
};
}
});
chart.tooltip({
showItemMarker: false,
onShow(ev) {
const { items } = ev;
items[0].name = null;
items[0].name = items[0].title;
Items [0]. Value = items [0]. Value + 'step';
}
});
chart.area().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
chart.line().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
chart.render();
return chart;
}
//Life cycle function
onLoad(){
//Assign using changedata
chart.changeData(stepInfoList)
}8. Переход по адресу панели вкладок
Если адрес для перехода не app.json Из панели вкладок Может использоваться внутри Может использоваться внутри , , если вы не можете прыгать, используйте
wx.switchTab({
url: '/pages/add/add',
fail: function(e) {}
})
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})9. Переключить обновление страницы
При переключении нескольких панелей вкладок вам необходимо обновить данные. оставайтесь на шоу Метод onLoad Метод.
onShow: function () {
this.onLoad()
}Метод || onLoad || Метод.
Если у вас есть технические истории/практический опыт, связанный с разработкой облачной базы с использованием облака, и вы хотите поделиться ими с вами, пожалуйста, свяжитесь с нами и отправьте свое сообщение.
Оригинал: “https://developpaper.com/applets-%c2%b7-cloud-development-practice-weight-recording-applets/”