"一次开发,多端运行——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的体验

相关推荐
修己xj10 小时前
三月,我只想做好这四件事
程序员
不爱说话郭德纲15 小时前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
不要秃头啊16 小时前
别再谈提效了:AI 时代的开发范式本质变了
前端·后端·程序员
jonjia17 小时前
引入新维度化解权衡难题
程序员
jonjia17 小时前
优秀的工程师如何打破规则
程序员
jonjia17 小时前
在大厂交付大型项目的策略
程序员
jonjia17 小时前
RFC 与设计文档
程序员
jonjia17 小时前
为什么你(或任何人)应该成为一名研发经理?
程序员
jonjia17 小时前
管理技术质量 (Manage Technical Quality)
程序员
jonjia17 小时前
大厂软件工程师职业发展路径
程序员