口袋工具之历史上的今天 - 小程序云开发实战

栏目: 编程工具 · 发布时间: 5年前

内容简介:本项目是一个基于云开发的小程序。本文选取项目中的一个页面 --由于是实战项目,关于小程序的基础知识请移步官方文档,本文不再赘述。

本项目是一个基于云开发的小程序。

本文选取项目中的一个页面 -- 历史上的今天 来做一个云开发的分享,会涉及云函数和云数据库。

由于是实战项目,关于小程序的基础知识请移步官方文档,本文不再赘述。

项目地址

github.com/GoKu-gaga/t…

项目预览

  • 微信搜索: 口袋工具y
  • 扫一扫:
    口袋 <a href='https://www.codercto.com/tool.html'>工具</a> 之历史上的今天 - 小程序云开发实战

前期遇到的问题

  • 数据来源: 没有数据,寸步难行呀

如何解决数据来源

  • 编写爬虫将需要的数据爬取并保存下来
  • 找一些提供数据的平台,如阿凡达数据、聚合数据等等。

由于本人偷懒,所以选择第二种方式,并最终选择了聚合数据平台API。

项目开始

新建项目

  • 新建项目,配置好名称、目录、AppID等信息,后端服务选择 小程序·云开发 ,点击新建。

    关于AppID: 请自行修改为你注册的小程序AppID。

    口袋工具之历史上的今天 - 小程序云开发实战
  • 点击新建即可完成项目初始化,得到一个云开发模板:

    口袋工具之历史上的今天 - 小程序云开发实战

    目录结构:

    +-- cloudfunctions|[指定的环境]  // 存放云函数的目录
      +-- miniprogram                 // 小程序代码编写目录
      |-- README.md                   // 项目描述文件
      |-- project.config.json         // 项目配置文件
    复制代码

新建云开发环境

  • 点击左上角菜单项 云开发
    口袋工具之历史上的今天 - 小程序云开发实战
  • 点击创建资源环境,环境名称及环境ID请自行设置:
    口袋工具之历史上的今天 - 小程序云开发实战
  • 点击确定即可完成创建

编写云函数

1. 新建云函数

在目录 cloudfunctions 上右键

新建云函数,填入新建云函数的名称(如 todayInHistory

回车或失去焦点即会自动创建并上传。

2. 安装依赖

云函数目前执行环境仅支持node,所以需要使用js来编写云函数的逻辑。 在控制台中进入该云函数的目录,执行

npm i -S axios
复制代码

本项目使用 axios 来执行请求的发送,可以使用其他如 request-promise 等等的库来替换

3. 编写云函数

  • 新建 config.js 文件,添加代码如下:
exports.key = YOUR_JUHE_KEY // 在聚合数据平台申请的key
exports.baseUrl = 'http://v.juhe.cn/todayOnhistory/queryEvent.php'
复制代码
  • 打开 index.js 文件,编写代码:
// 云函数入口文件
const cloud = require('wx-server-sdk')
const axios = require('axios')

cloud.init()
const db = cloud.database()

// 聚合数据
const { baseUrl, key } = require('./config')

// 云函数入口函数
exports.main = async(event, context) => {
  const {
    month,
    day
  } = event
 
  const resp = await axios.get(baseUrl, {
    params: {
      key,
      date: `${month}/${day}`
    }
  }).then(res => {
    return res.data
  })

  return resp.result
}
复制代码

编写页面

1. 新建页面

在开发小程序的过程中,新建一个页面是很常见的操作,有两个非常方便的方式

  • app.json 文件中,在pages项添加我们需要的页面路径,直接保存即可。如:

    "pages": [
      "pages/today-in-history/index"
    ]
    复制代码
  • pages 目录下新建目录 today-in-history ,在新建的目录上右键 -> 新建page, 填入名称如 index , 回车即可完成页面下四个文件的创建

2. 编写 index.wxml

<!--pages/today-in-history/index.wxml-->
<view class="container">
  <view class="header full-width">
    <view>{{year}}年{{month}}月{{day}}日</view>
  </view>
  <view class="content full-width">
    <view class="list-view">
      <block wx:for="{{list}}" wx:key="index">
        <navigator url="{{'/pages/history-detail/index?id=' + item.e_id}}" class="list-item">
          <view class="item-title">{{item.title}}</view>
          <view class="item-date">{{item.date}}</view>
        </navigator>
      </block>
    </view>
  </view>
</view>
复制代码

3. 编写 index.js

// pages/today-in-history/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    year: 1990,
    month: 1,
    day: 1,
    list: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();
    this.setData({
      year,
      month,
      day
    });
    this.doGetList();
  },

  /**
   * 执行数据获取
   */
  doGetList: function() {
    const {
      month,
      day
    } = this.data;
    wx.cloud.callFunction({
        name: 'todayInHistory',
        data: {
          month,
          day
        }
      }).then(res => {
        let list = res.result.reverse();
        this.setData({
          list
        });
      })
      .catch(console.error)
  }
})
复制代码

4. 编写 index.wxss

/* pages/today-in-history/index.wxss */
.container {
  padding-bottom: 20rpx;
  background-color: #E8D3A9;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80rpx;
  color: #FFF;
}

.content {
  flex: 1;
}

.list-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20rpx;
}

.list-item {
  display: flex;
  flex-direction: column;
  border-radius: 10rpx;
  padding: 16rpx 0;
  box-sizing: border-box;
  margin-top: 20rpx;
  background-color: #fff;
  text-align: center;
  box-shadow: 1px 1px 5px 1px rgb(207, 207, 207);
}

.item-title {
  font-size: 36rpx;
  padding: 10rpx 16rpx;
  color: #262626;
  line-height: 48rpx;
}

.item-date {
  font-size: 24rpx;
  height: 30rpx;
  line-height: 30rpx;
  border-top: 2rpx solid #eee;
  padding: 10rpx 16rpx 0;
  color: #595959;
  margin-top: 6rpx;
}
复制代码

补充

  • 项目中也使用了部分的有赞的小程序组件库vant-weapp

  • 由于聚合数据平台API非会员调用次数有限(100次/天),明显是不太够用的。因此,我们可以考虑在请求到数据时,将数据存在云数据库中,其实也就实现了一个类似爬虫的功能啦。流程如下:

    口袋工具之历史上的今天 - 小程序云开发实战

    代码实现:

    • 修改 cloudfunctions/todayInHistory/index.js
      // ... 省略其他无需改动的代码
      exports.main = async(event, context) => {
        const {
          month,
          day
        } = event
      
        const ret = await db.collection('todayInHistory').where({
          date: `${month}/${day}`
        }).get()
      
        if (ret.data.length > 0) {
          return ret.data[0].result
        }
      
        const resp = await axios.get(baseUrl, {
          params: {
            key,
            date: `${month}/${day}`
          }
        }).then(res => {
          return res.data
        })
        
        await db.collection('todayInHistory').add({
          data: {
            date: `${month}/${day}`,
            result: resp.result
          }
        })
      
        return resp.result
      }
      复制代码

以上即为 历史上的今天 页面的数据获取及展示,其他页面使用到云开发的模式基本大同小异。

结语

目前只开发了两个小功能 历史上的今天周公解梦 ,后续会继续开发新的功能,希望可以做成一个小工具集合,这也是 口袋工具 这个名称的由来。

感谢各位读者的阅读,由于本人水平有限,文章中如有错误或不妥之处,请不吝赐教!

如果你喜欢这篇文章或是这个项目,不妨进去点个Star支持下 today


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入浅出 MFC 第二版

深入浅出 MFC 第二版

侯俊杰 / 松岗 / 1997.05

深入浅出MFC是一本介绍 MFC(Microsoft Foundation Classes)程式设计技术的书籍。对於 Windows 应用软体的开发感到兴趣,并欲使用 Visual C++ 整合环境的视觉开发工具,以 MFC 为程式基础的人,都可以从此书获得最根本最重要的知识与实例。 如果你是一位对 Application Framework 和物件导向(Object Orien......一起来看看 《深入浅出 MFC 第二版》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具