uni-app框架介绍及环境配置

最新推荐文章于 2024-06-17 21:38:19 发布
最新推荐文章于 2024-06-17 21:38:19 发布
阅读量271 收藏
点赞数
文章标签： 小程序 微信小程序 react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52475156/article/details/123323165
版权
本文介绍了uni-app的发展历程，它是一个基于Vue.js的跨平台开发框架，旨在统一多端开发。文章详述了如何配置HBuilderX开发环境，创建并运行uni-app项目，包括运行到浏览器、微信小程序、安卓和苹果手机。此外，还讲解了uni-app的打包与发布流程，包括云打包和生成下载二维码。
摘要由CSDN通过智能技术生成

第一章：uni-app框架介绍及环境配置

学习目标

  • 了解uni-app的发展背景
  • 掌握uni-app开发环境配置
  • 掌握uni-app项目目录结构及功能
  • 掌握uni-app应用如何运行在不同平台
  • 掌握uni-app如何打包
  • 了解uni-app应用如何发布

1.1 uni-app的发展历程

uni-app是什么？可以用来做什么？

uni,读作youni,统一的意思。DCloud（数字天堂（北京）网络技术有限公司）基于Vue.js开发的前端应用框架，开发者写一套代码，就能发布到iOS. Android、 H5、以及 各种小程序平台。

uni-app的由来

  • 2012年，DCloud开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备
  • 2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。
  • 360手机助手率先接入
  • 大众点评、携程、京东、有道词典、唯品会
最低0.47元/天 解锁文章
小吴不吃白菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app优医问诊-配套资料
05-04
1. **uni-app基础**：首先，你需要了解uni-app的基础概念，如项目创建、环境配置、页面结构等。uni-app使用Vue.js的组件化思想，因此对Vue.js的基本语法和生命周期的理解至关重要。 2. **uni-App组件与API**：uni-...
uniapp添加eslint的最简单方法
weixin_41652495的博客
03-08 6702
你可以重头开始安装eslint，然后初始化，最后安装你所需要的插件，比如eslint-plugin-vue,但是uniapp小程序项目的构建也使用了@vue/cli工具，所以我们可以直接拿来用。 安装： 1$vueadd@vue/eslint 2 3//同样的可以选择@vue/cli-plugin-eslint提供的四个模式 4 5?PickanESLintconfig:Basic 6?Pickadditionallintfeatures:Lintonsave 然......
uniApp：环境搭建及配置
孤安先生的博客，作者主站正在重构中，敬请期待！
07-02 5945
项目结构说明pages 目录所有的页面的存放目录static 目录静态资源目录unpackage 目录打包文件，存放各个平台的打包文件App.vue项目根组件，页面的入口文件main.js项目入口文件，主要作用是初始化 vue 实例并使用需要的插件配置打包的文件，指定应用的名称、图标、权限等pages.json设置项目页面的存放路径和窗口外观uni.scssuni-app 内置常用的变量页面文件遵循Vue 单文件组件（SFC）规范。组件标签靠近小程序规范，详见。
uni-app环境搭建和项目的创建与运行
最新发布
candz_的博客
06-17 712
微信开发者路径怎么找呢，找到微信小程序，然后右击图标，选择属性也可以同样方法配置浏览器
Uni-App基础介绍及环境配置
weixin_45816463的博客
05-26 3466
随着移动互联网发展迅速，应用程序的需求也越来越多元化。为了满足此需求，跨平台开发工具应运而生。Uniapp作为一款基于Vue.js框架的跨平台开发工具，可以帮助开发者快速地开发出高质量的应用程序，同时也可以提高开发效率和降低开发成本。在学习Uniapp的过程中，我深刻感受到它的强大和便捷，特别是在开发小程序和H5应用方面，Uniapp的优势更加明显。在这篇文章中，我将分享我在学习Uniapp过程中的心得和体会，希望能够对其他开发者有所启发和帮助。（图片源自：网络）
小程序-uni-app：uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode
热门推荐
snowball的博客
06-08 1万+
小程序 uniapp开发 vue3 ts pnpm 开发 全记录
【uni-app从入门到实战】环境搭建和配置学习
Errol's Blog
08-12 1051
黑马程序员出品：Uni-App从入门到实战。主要完成项目搭建和配置学习
uni-app网易云音乐实战
10-22
在本文中，我们将使用uni-app框架来开发一个网易云音乐应用程序，涵盖了从开发环境的搭建到项目的创建、运行、配置tabBar、首页静态页面、推荐歌单和最新音乐等内容。 开发环境的搭建 uni-app开发环境的搭建需要...
uni-app基础.pptx
09-01
uni-app 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码库构建应用程序，这些应用程序可以部署在iOS、Android、H5以及各种小程序平台上，如微信、支付宝、百度、头条、QQ和钉钉。这极大地提高了开发...
uni-app项目练习2
05-16
uni-app是一个由DCloud(即HBuilderX)开发的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、QQ小程序等多个平台运行。这个“uni-app项目练习2”...
uni-app+uview+vuex+分包环境搭建
03-07
uni-app是由HBuilderX团队开发的一款多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序等多个平台运行。uni-app的核心是基于Vue.js，利用Vue的语法...
【配置 uni-app 开发环境】
Unvale的博客
06-22 2254
uni-app 是由 DCloud 公司基于 Vue.js 框架开发的一款开源跨平台框架，它允许开发者将同一份代码同时编译成多个平台的应用程序，包括 H5、iOS、Android、微信小程序、支付宝小程序等。
uniapp去除console.log()
SunPeng的博客
10-23 5720
uniapp去除console.log()
01uni-app 基础教程 环境配置【uniapp 专题 1】，前端开发0基础学习
2301_77033813的博客
04-02 910
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为，如就是下载图片模板。
uni-app 设置路径别名
dearyang
03-23 1万+
一、 vue 创建配置文件 vue.config.js "use strict"; const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } const name = "名称"; module.exports = { publicPath: "/home...
解决uniapp跨域
Carina的编程技术博客
04-30 1231
解决uniapp跨域 建一个vue.config.js，然后调用的话前面要加/api/,比如后端接口名字是/user/login，那就是/api/user/login，用自己封装好的方法调用就好了 module.exports = { // publicPath:'', // outputDir: 'dist', //build输出目录 // assetsDir: 'assets', //静态资源目录（js, css, img） // lintOnSave: false, //是否开启es
uniapp 开启eslint 代码检查
小游
12-19 2130
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 先安装 eslintnpm install eslint --save，然后我们初始化项目eslint --init 然后我们启动eslint
uni-app中使用session进行数据缓存（七）
从入门到放弃
03-16 1万+
目录 uni.setStorage uni.setStorageSync uni.getStorage uni.getStorageSync uni.removeStorage uni.removeStorageSync uni.setStorage 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 代码演示： ...
uniapp配置eslint、typescript-eslint
qq_15006083的博客
09-15 1811
uniapp配置eslint、typescript-eslint 安装eslint yarn add eslint eslint-plugin-vue vue-eslint-parser -D eslint-plugin-vue使用文档 安装typscript相关插件 必须保证tyscript和typescript-eslint/parser已经安装才能进行下一步@typescript-eslint/eslint-plugin的安装 yarn add typescript @typescript-eslin
初识uni-app框架
10-08
uni-app是一款基于Vue....总之，初识uni-app框架需要了解它的开发环境准备、项目搭建、页面开发、跨平台开发以及发布与打包等基本概念和操作。通过学习这些内容，可以快速上手uni-app框架，并开始开发跨平台应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值