内容简介:本项目是一个基于云开发的小程序。本文选取项目中的一个页面 --由于是实战项目,关于小程序的基础知识请移步官方文档,本文不再赘述。
本项目是一个基于云开发的小程序。
本文选取项目中的一个页面 -- 历史上的今天
来做一个云开发的分享,会涉及云函数和云数据库。
由于是实战项目,关于小程序的基础知识请移步官方文档,本文不再赘述。
项目地址
项目预览
- 微信搜索:
口袋工具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 = 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 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 把 GitHub 放入口袋,“开箱” 官方客户端
- Redis 持久化(persistence)技术口袋书
- 玩转「马里奥」的算法能搞定「口袋妖怪」吗?
- Slax 9.11.0 发布,装在口袋里的 Linux
- Slax 9.6 发布,装在口袋里的 Debian Linux
- Slax Linux 9.5.0 发布,基于 Debian 的口袋 Linux
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入浅出 MFC 第二版
侯俊杰 / 松岗 / 1997.05
深入浅出MFC是一本介绍 MFC(Microsoft Foundation Classes)程式设计技术的书籍。对於 Windows 应用软体的开发感到兴趣,并欲使用 Visual C++ 整合环境的视觉开发工具,以 MFC 为程式基础的人,都可以从此书获得最根本最重要的知识与实例。 如果你是一位对 Application Framework 和物件导向(Object Orien......一起来看看 《深入浅出 MFC 第二版》 这本书的介绍吧!