小程序云应用入门实操系列课程第三讲 - 云应用的使用一:Node.js 初始化

简介: 云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要介绍云应用的使用,初始化 Node.js 小程序并部署小程序云应用,在此基础上简单讲解为下节内容需要准备的部分工作。

摘要

云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要介绍云应用的使用,初始化 Node.js 小程序并部署小程序云应用,在此基础上简单讲解为下节内容需要准备的部分工作。

演讲嘉宾简介

白宦成 - Linux 中国开发组组长,阿里云 MVP;CSDN 专家,在 GitChat 平台上开设了《一学就会的 WordPress 实战课》达人课;自由职业者,曾就职于网易杭州研究院。

个人小程序作品:

运维密码小程序:2017年2月上线
配色助手小程序:2018年4月上线
Linux 小程序:2019年2月上线。

个人授课:

极客学院《微信小程序入门实战(仿 V2EX)》
极客学院《微信小程序进阶实战之分答应用开发》
网易云课堂《微信小程序初级工程师微专业》

系列课程大纲

  • 云应用的价值
  • 云应用的控制介绍
  • 云应用的使用一:Node.js初始化
  • 云应用的使用二:用户登录

本次直播视频精彩回顾,戳这里!
https://yq.aliyun.com/live/1039

以下内容根据演讲嘉宾视频分享整理而成。

本次的分享主要围绕以下三个方面:

一.Node.js 初始化
二.初始化 egg.js 的应用
三.为下节课做准备

Node.js 初始化

Node.js 应用:打开 Node.js 应用,云应用默认会提供一组环境包。在版本历史中有一个应用 CloudApp-NODEJS-Demo-V1,下载代码,查看代码。Node.js 应用项目的根目录中最重要的是 package.json 文件,大家可以发现项目其实非常简单,仅仅依赖于 egg.js1.10.1 版本以及 egg-scripts2.5.0 版本。其余的依赖有开发依赖,因为开发依赖在生产环境不会安装,不需要管理开发依赖,而 Scripts 里设置了具体的部署执行要求。其中,小程序代码中 package.json 启动 start 命令是 egg-scripts start—demon –title=egg-server- helloworld,以及对应的 stop 命令。所以是满足下面的云应用部署 Node.js 框架要求的。

1

部署应用的要求:如果想部署一个应用,云应用是有一些要求的。用户可以回到云应用列表页找到文档中心,查看 Node.js 相关部署要求。在后端框架说明中列举了云应用不同环境下的部署要求。对于正在使用的 Node.js,首先需要打包 ZIP 文件,打包源文件到 ZIP 文件的根目录。服务监听端口为7001,以及在 package.json 文件中实现了 start、stop 命令。上传了应用包文件以后云应用会自动帮用户启动应用。

2

APP 源码:Public 是静态文件。小程序更多需要服务端提供的 API 而不是静态文件,所以 Public 下是空的文件,这里主要看 router.js、foo.js 和 home.js 三个文件。如下图,在 router.js 中 exports 出了一个 app,定义了两个路由,分别是‘/’和‘/foo’两个命令,分别指向 app目录下的 controller 文件夹中 home 文件的 render 命令和 foo 文件的 render 命令。

3

如何执行命令:如果本地安装了 Node.js 环境,可以执行 npm install 安装相关的依赖。安装完成依赖以后启动 egg.js 服务端,查看服务端的运行,修改代码。安装完成以后只需执行 npm start 便可启动环境。

开发:执行 npm run dev 进入开发环境,修改代码, 将 home.js 中的返回信息改成“Hello Aliyun”。foo.js 文件也可以修改类似的内容,来达到对应的效果。因为目前启动的是开发环境,所以它和用户的修改会自动同步生效,这是使用开发模式的一个好处。

初始化 egg.js 的应用

初始化 egg.js 的应用:初始化一个 egg.js 的应用,其中的代码需要自己手写。打开 egg.js.org,进入 egg.js 官网指南页面。编写 egg.js 应用,初始化一个应用。创建目录 mkdir aliyun-zhibo;进入到目录下 cd aliyun-zhibo;通过执行命令npm init egg --type=simple,表示创建一个简单的模板,初始化一个 egg.js 应用;输入名称 aliyun-zhiboapp,描述 zhiboapp,author 可以根据自己情况填写,cookie security keys 是随机生成的 key,保证生成的 cookie 不会被轻易破解。完成初始化以后提示已进入目录。

安装依赖:执行 npm install,安装相关的依赖。

启动开发环境:执行 npm run dev,启动一个开发环境,可以发现生成的项目文件与默认项目下的文件是一样的。将 home.js 中的“hi,egg”修改成“Hello Aliyun”。生效以后便可以试着将目前的应用部署到小程序云应用上。

部署应用:进入 aliyun-zhibo 目录,选择文件,删除其中不需要的内容(如 node-modules),压缩成 ZIP 代码包,叫 code.zip。进入云应用控制台,点击上传发布包,输入版本号等信息,如v0101,上传文件,找到 code.zip 文件,点击确认上传。上传成功以后点击发布,在发布当中找到刚刚上传的v0101,完成版本发布任务。版本已经部署成功后显示部署版本是v0101。点击公网地址可以看到返回的信息是前面设置的“Hello Aliyun”,说明部署是成功的。

为下节课做准备

分发请求:在部署好一个简单应用后,可以多做一点事情,为下一节课任务做准备。如实现微信登录的功能,首先需要一个新的路由,叫做 login,将 router.js 中的方法改成 login。同样在 home.js 中,创建新的 login 的方法。在 router.js 当中引入的 login 路由会转发到 home.js 中的 login 方法当中,将 login 方法中的文字也改成 login,执行本地的开发的命令,从而预览代码是否能够正常有效的工作。

4
5

因为代码没有办法正常有效工作的话,上传到云端也不可能有效的工作,所以需要在在本地提前做验证。进入到默认页面127.0.0.1:7001,在后面输入/login,输出了 login,说明请求已经完成了正确的分发。使用 egg.js 将请求进行分发是最基础且最重要的开发过程,在分发的请求里面可以做一些比较细致的东西。

Service(服务):egg.js 把一些对外的东西放在了服务当中,当然也可以把数据库放在service当中去做这个服务。Copy 一些 service 代码,在 app目录下创建 service 文件夹,创建一个新的文件,叫 user.js,粘贴代码。因为没有对接数据库,目前没有那么多数据,可以手动伪造一些数据写入用户属性。

6

接下来去做一个请求,希望 login 可以返回通过 user-service 拿到的数据。启动成功以后继续访问127.0.0.1:7001/login,看到返回的数据是 user-service 中的数据。这样一个基础的 service 的定义就完成了。

7

实际上,在真正使用的时候会在 home.js 里面定义非常多不同的方法,去完成相对复杂的操作。借助 service 功能可以实现简化应用开发。原本的应用开发过程中可能要把很多精力放在 controller 里,对代码的复用性非常差。

交流讨论

扫码加入 阿里云小程序云支持群 一起交流讨论技术问题 更多直播等你观看

_jpeg

更多资讯

关注 ALI繁星计划 公众号 第一时间获取最新小程序云干货

_2019_05_09_2_03_05

目录
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:理解其原理与实际应用
探索JavaScript中的闭包:理解其原理与实际应用
19 0
|
1月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
24 1
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
23 0
|
1月前
|
JavaScript 小程序
微信小程序 wxml 中使用 js函数
微信小程序 wxml 中使用 js函数
70 0
|
11天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
8天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
16天前
|
存储 小程序 开发者
如何提升微信小程序的应用速度
如何提升微信小程序的应用速度
|
28天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
11 1
|
30天前
|
关系型数据库 Serverless 分布式数据库
Serverless 应用引擎常见问题之在抖音快手小程序上使用如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
22 3