"一次开发,多端运行——uniapp 体验分享"

前言

uniapp 是一个跨平台的前端框架,可以帮助我们使用一套代码开发同时运行在多个平台(如小程序、App、H5 等)上的应用程序。

uniapp 基于 Vue.js 框架,开发者可以使用熟悉的 Vue.js 语法进行开发。它提供了一系列的组件和 API,用于构建各种界面和功能。我们只需要编写一次代码,就可以将应用程序打包成不同平台的应用,并且享受到原生应用的性能和体验。

除了跨平台开发的能力,uniapp 还提供了丰富的插件生态系统,可以满足我们在开发过程中的各种需求。例如,uniapp 支持与原生设备功能的交互,通过插件可以访问摄像头、地理位置、推送通知等功能。

开发工具

uniapp 是由 DCloud 公司开发的。DCloud 是一家专注于移动应用开发的技术公司,总部位于中国广东深圳。他们致力于提供跨平台的解决方案,使开发者能够使用一套代码构建运行在多个平台上的应用程序。除了 uniapp,DCloud 还开发了其他一些知名的产品,如 HBuilderX 开发工具和 DCloud 小程序开发者平台。

HbuilderX 编辑器链接自取方式->( https://www.dcloud.io/hbuilderx.html )

安装完之后在左下角自行用邮箱注册一个就好了,图示如下:

再选择新建项目之后:

填写好项目名称、选择模板、vue版本选择3

创建好之后:

文件作用讲解

文件pages: 所有页面文件存放的目录

文件static: 存放一些静态资源,比如静态图片

文件App.vue:在这里是存放css样式结构和生命周期

文件index.html:做了一些不同支持的兼容

文件main.js:初始化入口的文件

文件manifest.json:进行一个基本的多端配置

文件pages.json: 配置页面路由导航等信息的地方

文件uni.promisify.adaptor.js:app兼容性的配置

文件uni.css:提供一个全局的样式类

插件安装


去官网找自己所需的创建进行安装。
插件推荐:

  • NPM
  • 内置浏览器
  • 内置终端
  • App真机运行
  • uni-app编译
  • Git插件
  • js-beautify
  • prettier
  • htmlhint
  • stylelint
  • eslint-plugin-vue
  • eslint-js
  • js压缩
  • css压缩
  • scss/sass编译
  • es6编译

配置

端配置

uniapp 支持众多的端,包括微信小程序、支付宝小程序、百度小程序、字节跳动小程序、H5、App(基于原生混合开发)、快应用等。这意味着我们可以使用 uniapp 开发一次,就能在多个平台上发布和运行我们的应用程序,减少了重复开发的工作量。

运行配置

找到运行配置,填写好chrome浏览器安装路径

再找到下面微信开发者根据路径并填写好

运行

找到图中所示地方点击:

等待编译:

页面效果:


这样我们就初步完成了一个uniapp的体验

相关推荐
舒一笑9 小时前
我的开源项目-PandaCoder迎来史诗级大更新啦
后端·程序员·intellij idea
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
陈不知代码11 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw11 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者16 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
陈随易16 小时前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
bee006016 小时前
AI时代之下,什么才是个人的护城河?
程序员
ᥬ 小月亮17 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
肖哥弹架构19 小时前
Spring JDBCTemplate 十大性能优化秘籍:从慢如蜗牛到快如闪电!
java·后端·程序员
redreamSo21 小时前
AI Daily | AI日报:Meta百亿抢人,AI数据标注产业升级; 百度全栈自研,AI应用大放异彩; Hinton访华:多模态大模型已有「意识」
程序员·aigc·资讯