云开发与WePY,快速实现Linux命令查询小程序


大家好,今天我来为大家分享一下, Linux 命令查询小程序中的 WePY 云开发实践。

Why WePY
首先,先分享一下为什么要选择 WePY ?

在项目开始进行选型的时候,我可选的底层框架有 WePy、MPVue、Taro、MinUI,这些框架都是工程化做得很好的框架,可以帮助小程序项目长期进行维护。其中,Taro 因为采用的是我所不熟悉的 React ,所以从一开始就被排除。MPVue 我看了以后,它更多是给 Web 开发者提供小程序转化工具,而不是给小程序开发者提供类 Vue 工具,所以,也被我排除。 MinUI 由于其本身仅仅是提供了组件化的方案和 npm 、ES6/ES7 的支持,其他的命令依然要延续使用小程序的函数,并没有提供更多的支持,整个生态尚不丰富,所以就又排除掉了 MinUI。

到最后,我选择了 WePY 。在下手之前,我研究了一下 WePY,来看看 WePY 中都有哪些优点。 总的来说,我认为 WePY 的优点如下:

提供了类似 Vue 的组件化方案:组件化开发可以提升项目的可维护程度,随着你开发周期的变长,组件化会非常大的影响你的开发体验。

提供了 ES6/ES7 语法的支持:JavaScript 为人诟病的回调在 ES6、ES7 中有了更加优雅的实现。

提供了 Vue 的生态:和 MinUI 的孤军奋战不同,WePY 有很多 Vue 社区生态的产品,比如 WePY-Redux、RxWX 等一系列 Vue 下,大家习惯使用的工具,这使得开发的流程更加顺畅,开发体验也更加一致。

对原生 API 的优化:在小程序官方提供的接口中,很多都是提供的回调模式,并不提供 Promise ,我们在使用时往往需要自己再重新包一层,比较麻烦。在 WePY 当中, WePY 官方帮我们封装好了一层,你可以直接使用 WePY 所封装好的方法,减少了封装的工作量。

Vue 习惯的数据设定:在 WePY 中,你可以使用 this.xxx=xxx 的语法进行赋值操作,相比于原生的 setData 方法,有更加舒适的语法,可维护性也更高。

提供了 computed 方法:在开发小程序的时候,我们难免要对数据进行格式化,在传统的小程序开发中,我们需要对数据进行 map ,再进行修改,但是用了 WePY 以后,我们可以使用 computed 计算属性来进行数据的格式化和调整,大大的提升了代码的可读性。

上述是我所看重的 WePY 优势,接下来,我来说一说如何在 WePY 中使用云开发。

云开发 in WePY
我写过很多小程序,也讲过一些小程序课程,经常会有人问我,XXX 可以用在 XXX 里么,放在这个场景中,就是云开发可以用在 WePY 中么?

答案当然是肯定的。

看待这个问题,你应该首先搞清楚,云开发所提供的到底是什么?

云开发提供的是数据存储、文件存储和计算能力

和 WePY 的定位提供微信小程序组件化开发的能力并不冲突,所以, WePY 和云开发并不冲突,你可以在 WePY 中使用云开发。

在 WePY 项目中启用云开发
由于 WePY 本身并没有提供云开发的模板(不过你现在可以使用 wepy init cloudkits/wepy-tcb-demo 命令来初始化一个包含了云开发示例的 WePY 项目),所以,我们需要自己在项目中添加云开发。

云开发本身而言,是集成在 wx. 的名字空间内的,所以无需配置可以直接使用 wx.cloud.xxx 来调用云开发的各项命令。此外,比较特殊的是,你需要指定一下云函数目录,来确保微信小程序开发者工具能够识别出云函数目录。

此处需要注意的是, 因为云开发的命令本身就支持 Promise 和 Callback ,所以你可以直接使用 wx.cloud 来调用,而不是使用 wepy.cloud 来调用。WePY 官方也没有针对云开发进行再一次的封装。

你可以在小程序项目的根目录创建一个新的目录 cloudfunctions ,然后在 project.config.json 中添加一个新的配置项目 cloudfunctionRoot,并将其值设置为 cloudfunctions。这样,微信小程序开发者工具就能够识别出这个目录是云函数的目录,并为其加上特殊的目录名。

此处需要注意的是,云函数应当放在小程序的源码目录 src 之外,不然会导致编译报错。我试图寻找 wepy.config.js 的中关于屏蔽编译检查目录的配置项目,但是没有找到,所以我直接将这个目录放在了项目根目录,云函数和小程序源码的 src 同级。

这样,你就完成了 WePY 中的小程序·云开发的引用。

在开发过程中踩过的坑
this 赋值应先设置 data
使用 WePY 开发时,我们使用 this.xxx 来修改数据的值,但是在我一开始开发的时候,遇见的第一个问题时,使用 this.xxx 无法设置数据的值,在小程序界面中无法获取到对应的值。

后续才发现,原来如果你希望由 WePY 替你更新和管理数据,你需要将要传递到页面的数据放在页面实例中的 data 对象中,这样 WePY 才会帮你更新和管理数据。由于在文档中并没有注明这一点,所以我踩在了坑里。

后续对 WePY 进行分析后,理解了这样的做法,由于 WePY 中没有使用 setData,而是直接调用 this.xxx 来进行修改,那么 WePY 就需要知道哪些变量应该发送到页面,否则,将所有 this 中的数据都传递到页面中,将会导致传递的时间过长,容易让小程序退出,这时,使用 data 来限定数据的方法就可以理解了。

如何处理纯移动端数据的管理?
截止到目前,云开发并没有提供除了微信小程序官方控制台以外的管理方式,这就使得我们在构建应用的时候备受掣肘。

为了更好的提供服务,我们决定修改产品的模式。一开始我们考虑用户提交翻译,团队进行审核的模式,但是考虑到没有管理端和开发成本的问题。我们决定调整一下模式,改为社区自净化。我们完全开放编辑的能力,任何用户都可以提交数据。同时,也可以在国内实践一个完全由社区维护的应用。

但是,这种任何人都可以提交数据很有可能被人所利用,所以,我们引入了微信小程序官方提供的内容安全接口,来进行文本的安全检测,从而,尽可能的规避一些违法违规内容对小程序的影响。

如果你用这个接口,你就会知道,接口的调用时需要使用 access_token,而微信的 access_token 获取接口既有发起调用的地址限制(不能在小程序中调用),也有接口请求频率的限制(请求过快可能会导致无法获取到 Token),因此,我们决定使用云函数来处理这部分的功能。

我们在云函数内使用 got 这个库来请求微信提供的接口,进行 access_token 的获取,以及内容安全的检测。并且,为了确保 access_token 的请求不会频率过快,所以我们加入了一些代码,来进行 token 的缓存。

const result = await cache.get(); // cache 为对应 collection 的引用
const now = (new Date).valueOf();
const nextTime = now + 5400000;
let accessToken = ‘‘
if (!result.data.length) {
  console.log("进入初次获取的流程")
  const result = await got(accessTokenUrl)
  accessToken = JSON.parse(result.body).access_token
  await cache.add({
    data: {
      token: accessToken,
      time: nextTime
    }
  })
} else {
  if (result.data[0].time > now) {
    console.log("已有 token 有效")
    accessToken = result.data[0].token
  } else {
    console.log("已有 token 无效")
    const tokenResult = await got(accessTokenUrl)
    accessToken = JSON.parse(tokenResult.body).access_token
    await cache.doc(result.data[0]._id).update({
      data:{
        token: accessToken,
        time: nextTime
      }
    })
  }
}

通过上述代码,实现了在云数据库中存储一个 token ,并比对其过期时间,如果发现 token 即将过期,就更新 token ,确保可以正常请求。

总结
回顾整个小程序的开发过程,WePY 的便利使得整个开发的过程无比的流畅,云开发的快速迭代的优势,帮助整个应用快速上线。Linux 小程序到正式发布时,总体的开发时长不超过 24 小时!

原文地址:https://blog.51cto.com/13981400/2376011

时间: 2024-10-09 19:13:44

云开发与WePY,快速实现Linux命令查询小程序的相关文章

老男孩教育每日一题-2017-04-18:命令风暴:如何快速删除Linux中海量小文件?

老男孩教育每日一题-2017-04-18:命令风暴:如何快速删除Linux中海量小文件? 今天是老男孩教育每日一题陪伴大家的第30天. 对于题目和答案的任何疑问,请在博客评论区留言. 往期题目索引 http://lidao.blog.51cto.com/3388056/1914205

Java开发人员必须掌握的Linux命令(二)

子曰:"工欲善其事,必先利其器." 学习应该是快乐的,在这个乐园中我努力让自己能用简洁易懂(搞笑有趣)的表达来讲解让知识或者技术,让学习之旅充满乐趣,这就是写博文的初心. 本篇的旅行地图如下: 第一站:小木 会先 登录酷炫的服务器,进入(cd)到神秘的magic 空间(目录),当我们忘记是怎么进入magic空间(目录)时候,可以使用(pwd)立刻得知目前所在的工作目录. 第二站:在magic空间(目录)中,创建(mkdir)一个属于自己的奇幻目录,然后创建(touch)属于自己文件.

Java开发人员必须掌握的Linux命令(一)

子曰:"工欲善其事,必先利其器." 做一个积极的人编码.改bug.提升自己我有一个乐园,面向编程,春暖花开! 学习应该是快乐的,在这个乐园中我努力让自己能用简洁易懂(搞笑有趣)的表达来讲解知识或者技术,让学习之旅充满乐趣,这就是写博文的初心. 1.登录服务器SSH命令 简单说,SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会泄露. 最基本的用法: 常用格式:ssh

PHP执行Linux命令行小例——文件压缩

前几天工作中,需要将3个txt文件,打包成*.zip down到本地…… 一开始,我和普通青年一样,想到用PHP内置的 ZipArchive,代码看起来应该是这样的: /*拆分成3个txt文件 分别是wow_1.txt wow_2.txt 和 wow_3.txt*/ $zip=new ZipArchive(); $zipfile='./Exl_file/wow.zip'; if($zip->open($zipfile,ZIPARCHIVE::CREATE)===TRUE){ $zip->add

你值得了解的 10 个有趣的 Linux 命令行小技巧

摘要: 我非常喜欢使用命令,因为它们比 GUI(图形用户界面)应用程序对 Linux 系统提供更多的控制,因此,我一直在寻找一些有趣的方法让 Linux 的操作变得简单好玩,主要是基于终端操作. 当我们发现使用 Linux 的新技巧时,尤其是像我这样的命令行极客,我们总会感到非常来劲. 我非常喜欢使用命令,因为它们比 GUI(图形用户界面)应用程序对 Linux 系统提供更多的控制,因此,我一直在寻找一些有趣的方法让 Linux 的操作变得简单好玩,主要是基于终端操作. 当我们发现使用 Linu

WinSCP使用与linux命令(小部分命令)

一.下载一个WinSCP WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持SCP协议.它的主要功能就是在本地与远程计算机间安全的复制文件..winscp也可以链接其他系统,比如linux系统 1.1.安装winSCPU 二.新建站点 三.winSCP使用 主要功能就是在本地与远程计算机间安全的复制文件. 四.Linux命令 cd  进入目录 ls  查看当前目录的文件 more 查看 echo 显示 配置环境变量 ps -ef 查看进程 pe -ef|grep

微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一定时间的,连续点击按钮,还是有可能会重复调用的. 虽然这种情况有点极端,正常用户是不会这么连续快速的点击按钮的,但是也不能排除有用户手抖,连续点了两下.如果重复调用的话,不仅体验不好,单击事件中涉及到后端接口操作的也可能引起其他异常.所以这个问题还是要处理下的. 刚开始想到的是使用loading开启

利用百度AI快速开发出一款“问答机器人”并接入小程序

先看实现效果: 利用百度UNIT预置的智能问答技能和微信小程序,实现语音问答机器人.这里主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货! 想了解UNIT预置技能调用,请参看我之前的帖子:<UNIT搭建机器人助理> https://ai.baidu.com/forum/topic/show/953021 想了解微信小程序的开发过程,请参看我之前的帖子:<UNIT接入小程序>https://ai.baidu.com/forum/topic/show/953022

动手开发一个名为“微天气”的微信小程序(上)

引言:在智能手机软件的装机量中,天气预报类的APP排在比较靠前的位置.说明用户对天气的关注度很高.因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排.跟着本文开发一个"微天气"小程序,方便微信网友随时查看天气.接下来两天小编将同您一起开发一个"微天气"小程序,本文首先向大家介绍"微天气"的API与界面代码编写.本文选自<从零开始学微信小程序开发>. 在一套软件系统中,微信小程序通常是作为前端来使用的,一般还需要有后端的系