[Мини-программа + облачная разработка] Мини-программа регистрации веса Начните с заметок

Апплет WeChat Облачная мини-программа

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

Давайте посмотрим на рендеринг страницы:

Несколько замечаний:

  1. глобальная переменная globalData
  2. Использование нпм
  3. облачная функция
  4. операции с базой данных
  5. использование асинхронного
  6. общая конфигурация
  7. использование antV
  8. переход по адресу tabBar
  9. переключить обновление страницы

1. Глобальная переменная globalData

После первого входа, чтобы сохранить openId для использования другими страницами, используйте globalData для обмена.

<!--app.js 设置 globalData.openid --> 
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()  // 获得实例
app.globalData.openid // 直接引用即可

2. Использование нпм

  1. Введите исходный код апплетаminiprogramкаталог, создатьpackage.jsonфайл (используяnpm initвсе обратно)
  2. npm i --saveмы собираемся установитьnpmМешок
  3. Настройка сборки инструментов разработчика WeChatnpm
  4. package.jsonУвеличивать"miniprogram": "dist"Поле каталога пакета. Если оно не задано, загрузка и предварительный просмотр завершаются неудачно, что указывает на то, что пакет файлов слишком велик.
cd miniprogram
npm init 
npm i @antv/f2-canvas --save   // 我用到了f2，可以换成其他包

Настройте инструменты разработчика WeChat

Построитьnpm

Наконец, не забудьте добавитьminiprogramполе

{
  "name": "21Day",
  "version": "1.1.0",
  "miniprogram": "dist",
  "description": "一个21天体重记录的app",
  "license": "MIT",
  "dependencies": {
    "@antv/f2-canvas": "~1.0.5",
    "@antv/wx-f2": "~1.1.4"
  },
  "devDependencies": {}
}

3. Облачные функции

официальное объяснение云函数即在云端（服务器端）运行的函数, Серверnode.js, обеJavaScript. Есть официальные операции с базой данных, ноОбновлено действие для принудительного применения облачных функций., Кроме того, если используется облачная функцияnpmпакет, не забудьте щелкнуть правой кнопкой мыши в папке облачных функций, где он находитсяЗагрузить и развернуть, иначе операция завершится ошибкой.

Предыдущий пример, облачная функция для обновления веса

// 云函数
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 入参参数
  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: '新增记录成功',
        })
     },
     fail: err => { 
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
     }
   })

4. Операции с базой данных

На самом деле это связаноMongoDB, который инкапсулирует частьapiВыходи, смотри подробностиофициальная документацияПоложим, есть различие между сервером и небольшим программным сегментом.

const db = wx.cloud.database()

// 查询数据
db.collection('list').where({
    _openid: app.globalData.openid,
    date: moment().subtract(1, 'days').format('YYYY-MM-DD'),
}).get({
    success: function (res) {
        // do someThing
    }
})

5. Использование асинхронности

Официальная документация предполагает, что он не поддерживаетсяasync, нужно представитьregeneratorRuntimeэтот пакет, первыйnpm i regenerator. тогда поставьnode_modulesв папкеregenerator-runtimeизruntime-module.jsа такжеruntime.jsскопируйте два файла вlibВ каталоге вы можете импортировать его на страницу.

<!--事例-->
const regeneratorRuntime = require('../../lib/runtime.js')
onLoad: async function (options) {

    // 获取当天数据
    await this.step1()

    // 时间类型设置
    let nowHour = moment().hour(),timeType
    nowHour > 12 ? timeType = 'evening' : timeType = 'morning'
    this.setData({timeType})
  }

6. Общая конфигурация

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

onShareAppMessage: function (res) {
        
      // 右上角分享
      let ShareOption = {
        title: '21天体重减肥记录',
        path: '/pages/index/index',
      } 
      
      // 按钮分享
      if(res.from == "button"){
        ShareOption = {
            title: '来呀 看看我的减肥记录呀',
            path: '/pages/detail/detail?item=' + app.globalData.openid,
          } 
      }
      
      return ShareOption
  }

После совместного использования другие пользователи нажимают на страницу, чтобы перейти к соответствующемуpagesадрес, изonLoadизoptionsВы можете получить количество запросов параметров в

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установки, не буду вдаваться в подробности, просто расскажу об этом и процитирую на странице.

Чтобы использовать его, вам нужно установить глобальную переменную для хранения экземпляра диаграммы, а затем использовать ее в содержимом функции ловушки.changeDataметод изменения данных.

index.jsonимпортировать имя пакета

{
  "usingComponents": {
  	"ff-canvas": "@antv/f2-canvas"
  }
}

// 引入F2
import F2 from '@antv/wx-f2';

// 设置实例全局变量（务必）
let chart = null;
function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
  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步'
      };
    }
  });

  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 + '步';
    }
  });
  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;
}

// 生命周期函数
onLoad(){
    // 使用changeData赋值
    chart.changeData(stepInfoList)
}

8. Переход по адресу TabBar

Если адрес для перехода неapp.jsonизtabBarможно использовать в пределахwx.navigateTo, если вы не можете прыгать между жизнью и смертью, используйтеwx.switchTabметод прыжка.

wx.switchTab({
  url: '/pages/add/add',
  fail: function(e) {}
})

wx.navigateTo({
  url: '../deployFunctions/deployFunctions',
})

9. Переключить обновление страницы

При переключении нескольких вкладок данные необходимо обновлять. существуетonShowвызов метода сноваonLoadметод подойдет.

onShow: function () {
    this.onLoad()
}

Чувствовать

  1. Это очень подходит для индивидуальных разработчиков, которые хотят разработать небольшую программу, кроме времени, других затрат нет вообще.
  2. Сообщение об ошибке не является дружественным, иногда об ошибке не сообщается, если оно не выполняется, только построчноdebug.
  3. Проверка прошла очень быстро, и ее одобрили за несколько часов.
  4. lodash не поддерживает его.Говорят, что если вы хотите что-то изменить, нет никакой возни.
  5. Git тоже настраивается, это действительно удобно, еще раз вздохнем, но синтаксис действительно. . . . Я не хочу его использовать.

постскриптум

Я не знаю, сколько версий я могу обновить, но следуйте практике и обновляйте его, когда он пуст. Установите флаг и напишите список, ха-ха.

  • v1.0
    1. Страница приглашения на вызов
  • v2.0
    1. Ежедневное предложение знаний о похудении
    2. социальные награды
    3. слова поддержки после регистрации
    4. Моменты обмена фотографиями
  • v3.0
    1. Таблица лидеров
    2. пост о хорошей привычке
    3. Классовое различие

Кодовое слово код кислое, поболеть за себя.

Адрес склада:GitHub.com/hellojob/21…

Категории