uni-app的基本使用

一、什么是 uni-app ?

        官方文档
        uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

        即使不跨端,uni-app同时也是更好的小程序开发框架。

        DCloud公司拥有350万开发者用户,旗下uni-app有5万+案例、600+插件、50+微信/qq群、更高的百度指数,可以放心选择,快速体验
在这里插入图片描述

二、为什么要使用 uni-app ?

        使用 uni-app 解决了跨平台开发存在的问题

1. 跨平台更多

真正做到 “一套代码、多端发行”!
条件编译 : 优雅的在一个项目里面调用不同平台的特色功能!

2. 运行体验更好

组件、api 与 微信小程序一致
兼容 weex 原生渲染

3. 通用技术栈,学习成本更低

vue 的语法、微信小程序的api
内嵌 mpvue

4. 开放生态,组件更丰富

支持通过 npm 安装第三方包
支持微信小程序自定义组件及SDK
兼容 mpvue 组件及项目
App 端支持和原生混合编码
DCloud 将发布插件市场

三、uni-app 功能框架图

在这里插入图片描述

四、安装

        我们需要安装两个工具 :

        1. HBuilderX是通用的前端开发工具,但为 uni-app 做了特别强化。
        下载地址 : HBuilderX官网

图1
图2

        我们点击图1 download下载,就会弹出一个图2的窗口,选择你的系统,下载 App 开发版.下载成功后这是一个压缩包,解压完成我们点击 HBuilderX.exe 文件就成功打开了 HBuilderx

        2. 安装微信开发者工具

        下载地址 : 微信开发者工具

在这里插入图片描述

        我们根据自己的系统配置下载稳定版的,成功之后一直点击 next 下一步即可

五、初始化项目和运行项目

        1. 初始化项目

                1.1 用 HBuilder 创建

打开 HBuilder,点击左上角的"文件",点击"新建",再点击"项目",就会弹出一个项目窗口. 然后进行选择 uni-app 及创建项目和位置

在这里插入图片描述
                1.2 用 微信开发者工具 创建

这里就不再一一叙述了,可以去我的主页中找到微信小程序的基本使用就可以看到,就正常创建项目即可.运行的时候就会实现uni-app

        2. 运行

                2.1 用 HBuilder 运行

打开 HBuilder,点击左上角的"运行",点击"运行到浏览器",接着选择你想用什么浏览器打开,点击一下就成功打开了

                2.2 用 微信开发者工具 运行

如果是第一次使用微信小程序打开创建的 uni-app 项目,需要以下两点:

  1. 先在微信开发者工具中,在最上面找到"设置",点击"安全设置".然后把"服务器端口"这一项打开
  2. 复制 微信开发者工具的路径,然后点击 HBuilderx ,在最上面的"运行"中,找到"运行到小程序的模拟器",然后复制 微信开发者工具 的路径,就配置好了.下次在点击这样的操作,直接会在 微信开发者工具中转为小程序的文件格式

六、项目目录和文件作用</

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uni-app 是一种跨平台的前端开发框架,可以使用 Vue.js 来开发多个平台的应用程序,如小程序、H5、App 等。Uni-app 提供了一套统一的 API 和组件库,使得开发者可以在不同平台上共享代码和逻辑,提高开发效率。 以下是 Uni-app基本用法: 1. 安装 Uni-app:在命令行工具中使用 npm 或者 yarn 安装 Uni-app 的命令行工具。 2. 创建项目:使用命令行工具创建一个新的 Uni-app 项目,可以选择不同的模板和目标平台。 3. 开发页面:在项目目录中找到 `pages` 文件夹,里面存放着不同页面的文件夹。在每个页面文件夹中,可以编写对应的 `vue` 文件,其中包括模板、样式和逻辑。 4. 页面导航:Uni-app 提供了 `uni.navigateTo`、`uni.redirectTo`、`uni.switchTab` 等 API 来实现页面之间的导航。 5. 数据绑定:Uni-app 使用与 Vue.js 相同的数据绑定语法,在 `vue` 文件中使用双大括号语法 `{{ }}` 来插入变量,并使用指令来实现条件渲染、循环等功能。 6. 组件化开发:Uni-app 支持组件化开发,你可以创建自定义组件,并在页面中进行复用。 7. API 调用:Uni-app 提供了一套统一的 API,可以调用不同平台的原生功能,如获取用户位置、拍照、支付等。 8. 平台差异处理:由于不同平台的特性和限制不同,Uni-app 提供了 `uni-platform` 和 `uni-xxxx` 等全局对象来处理平台差异问题。 9. 打包和发布:使用命令行工具进行项目打包,并将生成的文件发布到各个平台的开发者账号上。 这些是 Uni-app基本用法,希望对你有所帮助!如果你还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值