2022年7月

最近华为牵头国内几大厂商出了小程序Quikapp快应用,这里给大家编写快应用入门教程

首先记住几个网站

  1. 官网:
    https://www.quickapp.cn
  2. 文档:
    https://doc.quickapp.cn/
  3. 工具:
    使用Visual Studio Code开发
    使用WebStorm开发
    教程地址(https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html

4.环境:
需安装6.0以上版本的NodeJS,请从NodeJS官网下载

5.依赖库
hap-toolkithap-tools

第一步:安装

 npm install -g hap-toolkit

安装

第二步:hap脚手架生成一个初始项目

 hap init test1

初始化项目目录

这一步大家别急着

npm run server

否则报一下错误

报错

第三步:安装依赖

npm install

第四步:运行服务

npm run server

image.png

还是失败,新出的东西官网还不是很完善,后面应该不会出现,这里花了几分钟找到了原因,项目少了hap-tools库, 这里没看到官网有这个库的介绍,package.json里也没 ap-tools 这个库的引入。
大家输入npm install hap-tools 手动安装下这个库。
安装

然后

npm run server
  • 开发者可以通过命令行终端或者调试服务器主页看到提供*
    扫描的二维码
  • 开发者通过快应用调试器扫码安装按钮,扫码安装待调试的rpk文件
  • 开发者点击快应用调试器中的开始调试按钮,开始调试
    成功

完美
快应用入门教程

给大家解释下目录说明

├── sign                      rpk包签名模块
│   └── debug                 调试环境
│       ├── certificate.pem   证书文件
│       └── private.pem       私钥文件
├── src
│   ├── Common                公用的资源和组件文件
│   │   └── logo.png          应用图标
│   ├── Demo                  页面目录
│   |   └── index.ux          页面文件,可自定义页面名称
│   ├── app.ux                APP文件,可引入公共脚本,暴露公共数据和方法等
│   └── manifest.json         项目配置文件,配置应用图标、页面路由等
└── package.json              定义项目需要的各种模块及配置信息

大家像小程序一样,在这上面开发就好了。

Quikapp快应用基于Nodejs内建一个本地服务器运行代码、语言JavaScript,语法支持ES6,如果熟悉vue\weex一类的MVVM框架,基本可以直接入手。

这一章是Quikapp快应用开发入门,有空补上下一章编写第一个快应用。

Quikapp快应用、如何接入Bmob后端云?

既然语言是JavaScript, 直接下载Bmob的JavaScript SDk引入,就可以直接操作后端数据库,配合云函数可以实现Quikapp快应用的接口对接。很快Bmob也会推出快应用的针对性SDK,这样云函数也不需要写了,跟小程序一样无需写一行后端代码,愉快的对接Quikapp快应用了。

Serverless实战驾校小程序【数据库设计】一

从今天开始,我会文字直播开发这个驾校小程序整个流程。
image.png

1. 项目要求

  1. 小程序端
  2. WEB管理后台
  3. 时间在最短的时间内上线

2. 项目功能

参考驾考宝典、主栏目分为科目一、科目四、满分学习、注销恢复、资格证,包含小车、客车、摩托车等,功能包含视频讲解、章节练习、模拟考试、错题、收藏等等。 支持支付、分享、提成、提现等

3. 项目选型

由于要求最快时间内上线,我们小程序选择 Serverless架构。 这里使用以下技术产品

小程序端:

  1. Bmob后端云+iview
  2. VUE + Bmob后端云

Bmob后端云,自带了支付,生成二维码等接口,这里集成可以快速上线。VUE 有丰富的后台模板,可以更快的做出管理后台。

第一步:清晰了解需求

因为已经很清楚自己要做的是驾校答题小程序,这里就不做多余的介绍了。 设计部分,由于这个项目比较小,没有专门的设计师。 尽量参考行业老大:驾校一点通与驾考宝典。

第二步:数据库设计

数据库参考其他驾考类小程序,优先把核心字段建立出来,尽量考虑周全, 不够后面再补。 这里注意的是,Serverless架构,主要适合做一些中小型应用,如果应用数据量很大, 尽量提前考虑分表。

1. 数据表

目前第一阶段暂时考虑一下表

  1. 题目表
  2. 题目类别表(题形)
  3. 错题表
  4. 收藏表
  5. 成绩表
  6. 用户表

用户表,由于Bmob系统自带了,我就不建立了。

2. 数据库文档

由于使用Bmob后端云数据库,默认每条记录都带id、创建时间与更新时间,此数据表说明不带这2个字段。

题目表(question)

名称类型描述
titlestring题目名称
choseListArray选择列表 [{"item":"选选一"},{"item":"选选二","isChose":true}]
typeint类型 1.单选 2.多选 3.判断
picstring图片地址
videostring视频地址
helpstring帮助描述
bSubjectsint所属科目 1.科目一 2.科目四
bModelsint所属车型 1.小车 2.货车 3.客车 4.摩托车
bTypestring所属类别 关联类别表

题目类别表(questionType)

名称类型描述
bSubjectsstring所属科目 1.科目一 2.科目四
titlesting类别名称

错题表

名称类型描述
idstring题目id
uidstring用户id

收藏表

名称类型描述
idstring题目id
uidstring用户id

成绩表

名称类型描述
timestring用时
scoreint成绩

设计好数据表之后,做准备工作

  1. 拿到小程序的 AppID填写到Bmob控制台,应用设置-》应用配置
  2. 把上面所有想好建立好的数据表添加到数据库
  3. 小程序开发工具新建一个空白项目,复制BmobSDK,到utils目录
  4. 引入SDK,初始化。

引入SDK,初始化。文档在这里

https://bmob.github.io/hydrogen-js-sdk/#/?id=%E5%88%9D%E5%A7%8B%E5%8C%96

看最终效果如下。

效果一:所写代码➕预览
WX20180927-143917@2x.png

效果二:数据表变化
image.png

这样我们就实现了,整个小程序开发的第一步,自动注册登陆,获取openid。 第一节就到这里,下一步就是操作业务表。