美文网首页
第一篇:快速上手uni-app项目

第一篇:快速上手uni-app项目

作者: 卢松才 | 来源:发表于2020-06-08 15:12 被阅读0次

一、 uni-app 简介

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

二. 快速体验

image.png
官注:某些平台不能提交简单demo,故补充了一些其他功能;hello uni-app示例代码可从github获取

三、环境搭建

使用同由DCloud公司开发的HBuilderXIDE快速创建项目,HBuilderX内置处理了相关环境依赖。
HBuilderX:IDE。最新版本下载地址
微信开发者工具:调试预览工具。最新版本下载地址

四、创建uni-app项目

打开HBuilderX本人使用的是2.7.9稳定版本,点击工具栏里的文件 -> 新建 -> 项目:

image.png
选择uni-app,填写工程名,如:HelloWorld,点击创建,完成创建。体验官方示例可点击模板里的 Hello uni-app 。

五、运行uni-app

  1. 真机运行:如果已经搭建了ADB环境,需要修改一下ADB路径,不然会有可能出现ADB冲突


    image.png
image.png

开始运行


image.png
  1. 在微信开发者工具里运行:点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。注意初次运行有可能需要修改微信开发者工具的路径,下图是本人的微信小程序工具的路径,根据自己的微信小程序工具修改


    image.png
  2. 浏览器运行:点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器即可。

相关文章

  • 第一篇:快速上手uni-app项目

    一、 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,...

  • 第一篇:快速上手uni-app项目

      本文内容整理自uni-app官方教程。   uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发...

  • 快速上手mpvue 项目

    初始化一个 mpvue 项目 分包机制 2018.7.23+mpvue-loader 1.1.2-rc.2 之后,...

  • Eplan快速上手-创建项目

    引言 初次上手Eplan会设计到除电气原理以外的很多概念问题,这些问题会导致我们打开软件后不能立即开始进行图纸绘制...

  • 快速上手调试Flutter项目

    一、基础配置和设置 在讲解调试工具之前,先来看看有关的设置选项,点击菜单栏File-->Settings-->La...

  • 小程序开发:基础封装(二)

    1、快速上手 支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。 2、启动服务 项目创建后我们启动...

  • uniapp

    .在HBuilderX中新建uni-app 新建uni-app项目.jpg 2.项目初始目录结构 初始目录结构 3...

  • Java Web新手如何快速上手项目

    序言 本文主要面向的目标人群:刚毕业进入项目组,需要尽快上手项目的小伙伴。本文着重于快速上手,较少的涉及到原理。 ...

  • Vue3快速上手

    Vue3-admin 快速上手实战项目[https://github.com/Miller-Wang/vue3-a...

  • uni-app 创建

    创建 uni-app 有两种方式 快速搭建 uni-app 使用编译器HbuilderX 创建 使用 vue-cl...

网友评论

      本文标题:第一篇:快速上手uni-app项目

      本文链接:https://www.haomeiwen.com/subject/jukrtktx.html