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

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

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

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

项目地址

github.com/GoKu-gaga/t…

项目预览

• 微信搜索：?口袋工具y
• 扫一扫：

  

前期遇到的问题

• 数据来源： 没有数据，寸步难行呀

如何解决数据来源

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

由于本人偷懒，所以选择第二种方式，并最终选择了聚合数据平台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 = 'axios')

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

// 聚合数据
const { baseUrl,key } = './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">
  <"header full-width">
    <view>{{year}}年{{month}}月{{day}}日</view>
  </view>
  <"content full-width">
    <"list-view">
      <block wx:for="{{list}}" wx:key="index">
        <navigator url={{'/pages/history-detail/index?id=' + item.e_id}}" class="list-item">
          <"item-title">{{item.title}}</view>
          <"item-date">{{item.date}}</view>
        </navigator>
      </block>
    </view>
</view>
复制代码

3. 编写?index.js

,data: {
          month,day
        }
      }).then(res => {
        let list = res.result.reverse();
        this.setData({
          list
        });
      })
      .catch(console.error)
  }
})
复制代码

4. 编写?index.wxss

补充

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

由于聚合数据平台API非会员调用次数有限（100次/天），明显是不太够用的。因此，我们可以考虑在请求到数据时，将数据存在云数据库中，其实也就实现了一个类似爬虫的功能啦。流程如下：
代码实现：
修改?cloudfunctions/todayInHistory/index.js
).where({
    date: ${day}`
  }).get()

  if (ret.data.length > 0) {
    return ret.data[0].result
  }

  return res.data
  })
  
  'todayInHistory').add({
    data: {
      date: ${day}`,result: resp.result
    }
  })

  return resp.result
}
复制代码



以上即为 历史上的今天 页面的数据获取及展示，其他页面使用到云开发的模式基本大同小异。
结语
目前只开发了两个小功能?历史上的今天?和?周公解梦?，后续会继续开发新的功能，希望可以做成一个小工具集合，这也是?口袋工具?这个名称的由来。
感谢各位读者的阅读，由于本人水平有限，文章中如有错误或不妥之处，请不吝赐教！
如果你喜欢这篇文章或是这个项目，不妨进去点个Star支持下?today?。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!