乐趣区

关于javascript:uniapp组件应用简单快速上线

简介:uni-app 是一个应用 Vue.js 开发所有前端利用的框架,开发者编写一套代码,可公布到 iOS、Android、Web(响应式)、以及各种小程序(微信 / 支付宝 / 百度 / 头条 / 飞书 /QQ/ 快手 / 钉钉 / 淘宝)、快利用等多个平台。

uni-app 详解

一、介绍

uni-app 是一个应用 Vue.js(opens new window) 开发所有前端利用的框架,开发者编写一套代码,可公布到 iOS、Android、Web(响应式)、以及各种小程序(微信 / 支付宝 / 百度 / 头条 / 飞书 /QQ/ 快手 / 钉钉 / 淘宝)、快利用等多个平台。

uni-app 底层集成了 native 技术,就是 h5+ 引擎,能调用手机原生 api,所以 uniapp 能开发靠近原生性能的 app,这是 js 引擎局部;它是双引擎,渲染又是独立一个独立引擎。这个渲染引擎又分为 nvue 渲染和 webview 渲染,nvue 其实就是集成的 weex,webview 这个有理解的应该晓得它的内核是 webkit。

二、uni-app 和 vue 的区别:

  • uni-app 能够通过打包实现一套代码多端运行,而 vue 不行。
  • uni-app 有主动的框架预载,加载页面的速度更快,vue 没有。
  • uniapp 应用小程序的标签,vue 应用 web 端的标签。
  • uni 不反对 vue-router,应用自带的路由。

三、uni-app 长处:

  • uni-app 是一套能够实用多端的开源框架,一套代码能够同时生成 ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。
  • uni-app 对前端开发人员比拟敌对,学习老本比拟低,首先 uni-app 是基于 vue.js 的。其次封装的组件和微信小程序的组件一样。
  • uni-app 应用 HBX 进行开发,HBX 对于 vue 语法等反对能够说是比拟齐备了。

以下内容别离应用 Vue CLI 和 云开发平台教您从头开始构建本人的利用。

Vue-CLI 疾速搭建我的项目

一、搭建本地开发环境

  • Vue CLI 4.x 须要 Node.js 8.9 或更高版本(举荐 v10+)。您能够应用 n、nvm 或 nvm-windows 在同一台机器上治理多个版本的 Node。要理解如何装置 Node.js,参阅 nodejs.org。如果你不确定零碎中正在运行的 Node.js 版本是什么,请在终端窗口中运行 node -v。
  • npm 包管理器 因为咱们通常都会应用 Hexo 提供的脚手架搭建我的项目构造,所以要下载并装置 npm 包。本指南应用 npm 客户端命令行界面,该界面默认装置在 Node.js。要查看你是否装置了 npm 客户端,请在终端窗口中运行 npm -v。
  • 你能够应用 Vue CLI 来创立我的项目,生成利用和库代码,以及执行各种继续开发工作,比方测试、打包和部署。

要装置新软件包,请应用以下命令之一:

npm install -g @vue/cli@4

二、创立 uni-app

  • 应用正式版(对应 HBuilderX 最新正式版)

vue create -p dcloudio/uni-preset-vue my-project

  • 应用 alpha 版(对应 HBuilderX 最新 alpha 版)

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

  • 应用 Vue3/Vite 版

1. 创立以 javascript 开发的工程(如命令行创立失败,请间接拜访 gitee(opens new window) 下载模板)

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

2. 创立以 typescript 开发的工程(如命令行创立失败,请间接拜访 gitee(opens new window) 下载模板)

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

此时,会提醒抉择我的项目模板(应用 Vue3/Vite 版不会提醒,目前只反对创立默认模板),首次体验倡议抉择 hello uni-app 我的项目模板,如下所示:

三、启动应用服务器

进入工作区目录,并启动这个利用。

cd my-project

yarn serve

hexo server 命令会构建本利用、启动开发服务器、监听源文件,并且当那些文件发生变化时从新构建本利用,

也会关上浏览器,并拜访 http://localhost:8080/。

你会发现本利用正运行在浏览器中。

参考文献:https://uniapp.dcloud.io/

云平台一键部署 uni-app

作为 uni-app 开发者的你,云开发平台为你提供了一站式,全云端的开发平台,让你能够关上浏览器就实现开发,调试,上线,同时云开发平台底层调用的是阿里云团体 Serverless 产品,能够实现低门槛开发,部署,调试,升高开发上手老本,让 uni-app 框架能够一键疾速部署!

一、创立环境

想要一键部署 uni-app,须要以下账号和服务:

  • Github 账号 (https://github.com/),
  • 阿里云账号,并应用阿里云账号登录云开发平台 (https://workbench.aliyun.com/),为保障最好的应用体验,请应用 Chrome 浏览器。开明 OSS 服务。
  • 未开明阿里云 OSS 的用户,点击链接 (https://workbench.aliyun.com/product/open?code=oss) 开明 OSS 服务。OSS 开明收费,有肯定的收费额度,超过额度之后按量付费。

二、创立 uni-app 利用

  • 创立前端利用。关上疾速开始 https://workbench.aliyun.com/app,找到 uni-app 点击创立「创立利用」按钮。

  • 云资源拜访受权。如果您之前没有应用过云开发平台,会呈现云资源受权治理的选项,往下拉呈现直至批准受权的字样,点击「批准受权」后呈现受权胜利,点击进入「下一步」。

  • 绑定 Github 账号。受权实现后抉择起源仓库为 Github,依照提醒点击去绑定,绑定 GitHub 帐号,登录后并点击 Authorize Aliyunworkben 容许云开发平台构建、公布你的 GitHub 代码为可拜访的网站。

  • 抉择 fork 好的“uni-app”代码仓库。抉择第一步中的代码仓库,骨干分支,并点击下一步。骨干分支个别指的是代码的 master 或 main 等分支。

填写根本信息,实现创立。填写根本信息并点击「实现」。胜利后进入到利用详情和部署界面。

三、在日常环境部署

  • 一键进行利用部署。在利用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署当前能够点击拜访部署网站查看成果。

  • 拜访 uni-app 网站 。日常环境的测试域名也是能够拜访的,点击拜访已部署网站按钮会呈现一个弹出,点击弹出上的立刻拜访就可能拜访曾经部署好的站点了。在部署实现后,能够持续本地编码,并将代码 push 到利用的“根本信息”中对应的代码仓库内。

多端利用一键上云!

现如今身处在随时会到来新情况的大环境下,做好本人便是在不安中建立了一颗耸立不倒的松树。作为开发者们每天都要面临新的代码、利用,放弃随时学习的状态和能力也可让本人多一份安稳。阿里云云开发平台的初衷是为每一位开发者提供收费、便捷的云上研发工作平台,通过学习与实操演练两种模式,从入门到精通疾速上手 Serverless 和云开发技术。0 门槛全云端开发、随时随地在线协同、业界当先 Serverless 架构、行业利用一件初始化等个性也通过每次的实际随同着你、我。

云原生利用、主机利用部署、前端利用部署三大板块的提供,供开发者们找到最合适本人神器,令开发工作事倍功半。其中满足 IoT 语音技能、小程序、H5 利用等开发者低门槛利用开发的需要;也反对代码编译部署到 ECS 主机服务器的场景,帮忙用户治理传统主机利用的能力;让前后端利用可能更高效地协同。平台将继续与开发者一起独特成长,帮忙开发者更好、更快以及更低成本的开发,多端的利用更加疾速的上云。

版权申明: 本文内容由阿里云实名注册用户自发奉献,版权归原作者所有,阿里云开发者社区不领有其著作权,亦不承当相应法律责任。具体规定请查看《阿里云开发者社区用户服务协定》和《阿里云开发者社区知识产权爱护指引》。如果您发现本社区中有涉嫌剽窃的内容,填写侵权投诉表单进行举报,一经查实,本社区将立即删除涉嫌侵权内容。

退出移动版