uni-app入门教程(1)uni-app简介、部署和目录结构

CuterCorley 等级 702 0 0

@[toc]

前言

本文主要介绍了uni-app的基本情况,并引导快速创建和运行第一个uni-app项目,同时对项目的目录结构和代码规范进行详细说明,适合uni-app零基础初学者。

一、uni-app介绍

uni-app是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是http://uniapp.dcloud.io/。 开发者通过编写一套Vue.js代码,即可使用uni-app将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验,只需要JS即可完成APP开发,达到多端共用的效果,大大降低了开发和学习成本: 开发者不用学那么多的平台开发技术、研究众多前端框架,学会基于vue的uni-app就足够; 企业也可以用更低的成本覆盖更多的用户。 uni-app继承Vue.js,提供了完整的Vue.js开发体验,作为高效开发利器,同时为了当前微信等应用的小程序提供了最快捷的上手途径,其组件规范和扩展api与微信小程序基本相同。 有一定Vue.js 和微信小程序开发经验的开发者可快速上手uni-app,开发出兼容多端的应用,可以同时兼容Android、iOS、小程序等多端开发,同时提供了条件编译优化,可以优雅地为某平台写个性化代码、调用专有能力而不影响其他平台。 uni-app打包到App时仍然使用了5+引擎,5+的所有能力都可以在uni-app中可以使用,在App端运行性能和微信小程序基本相同。 为方便开发者体验uni-app的组件、接口、模板,DCloud发布了Hello uni-app演示程序,实现了一套代码同时发布到iOS、Android、微信小程序三端,可以使用手机扫描下图App码下载iOS、Android原生安装包,也可以使用微信扫描小程序码,体验uni-app的小程序版本: uni-app入门教程(1)uni-app简介、部署和目录结构

二、快速开始第一个项目

1.搭建环境

在开始项目前,需要需分别下载安装如下工具:

2.创建和运行项目

创建项目可以点击工具栏里的文件- 新建->项目,并选择uni-app,输入project名,如hello uniapp,点击创建,即可成功创建uni-app,也可以点击从模版创建,选择hello-uniapp即可体验官方示例。 示意如下: uni-app入门教程(1)uni-app简介、部署和目录结构

创建之后即可进行运行调试,可以选择浏览器、手机或模拟器和小程序模拟器等运行方式。 (1)小程序方式运行 进入hello uniapp项目,点击工具栏的运行->运行到小程序模拟器->微信开发者工具,即可编译项目,并在微信开发者工具里面体验uni-app,uni-app默认把项目编译到根目录的unpackage目录。 示意如下: uni-app入门教程(1)uni-app简介、部署和目录结构

可以看到,在HBuilderX中选择微信开发者工具进行编译运行之后,自动调用了微信开发者工具模拟器显示和操作。

说明: 第一次使用,需要先配置微信开发者工具的安装路径,才能运行成功,同时需要在微信开发者工具中的设置选项的安全设置中打开服务端口,这样HBuilderX才能调用微信开发者工具,如下: uni-app入门教程(1)uni-app简介、部署和目录结构

如果HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app项目的路径拷贝到微信开发者工具里面,在HBuilderX里面开发,在小微信开发者工具里面就可看到实时的模拟效果。

(2)真机运行 连接手机并打开USB调试,进入hello uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app,示意如下: uni-app入门教程(1)uni-app简介、部署和目录结构 手机端界面如下: uni-app入门教程(1)uni-app简介、部署和目录结构

说明: 真机运行需要设置应用表示,登录hbuilderX后点击云端获取即可。

调试运行时也可直接点击快捷运行按钮,选择设备运行,如下: uni-app入门教程(1)uni-app简介、部署和目录结构

三、uni-app目录结构和代码规范

1.目录结构

从刚刚创建的项目可以看到,一个uni-app项目的典型结构大致如下:

C:.
│  App.vue
│  main.js
│  manifest.json
│  pages.json
│  project.config.json
│  uni.scss
│
├─pages
│  └─index
│          index.vue
│
├─static
│      logo.png
│
└─unpackage

其中: project.config.json是项目的全局配置文件,配置APP ID等核心参数; main.js是Vue初始化入口文件; App.vue是应用配置,用来配置App全局样式以及监听应用生命周期; manifest.json用于配置应用名称、appid、logo、版本等打包信息,如下: uni-app入门教程(1)uni-app简介、部署和目录结构

pages.json用于配置页面路由、导航条、选项卡等页面类信息,以对象形式定义; static目录保存静态资源文件,满足小程序等对项目大小的要求,同时优化项目结构; unpackage是编译项目时生成的包。

2.SFC规范

我们开发的页面视图等文件一般位于pages目录下,同时对于小程序来说,一个页面一般包括4个文件,分别是page.wxss(样式文件)、page.js、page.json(配置文件)和page.wxml(DOM组件)文件,但是在uni-app中没有这么繁多的文件,为了实现微信小程序、原生App的跨端兼容,综合考虑编译速度、运行性能等因素,uni-app对页面开发规范进行了约定,即Vue单文件组件(SFC)规范.vue文件是一个自定义的文件类型,用类HTML语法描述一个Vue组件,每个.vue文件包含三种类型的顶级语言块<template>(定义模板层)、<script>(JS层)和<style>(样式层),还允许添加可选的自定义块,示例如下:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

vue-loader会自动解析该文件并提取每个语言块,如有必要会通过其它loader处理,最后将它们组装成一个ES Module,它的默认导出是一个Vue.js组件选项的对象。vue-loader支持使用非默认语言,比如CSS预处理器、预编译的HTML模版语言和通过设置语言块的lang属性。 例如,我们可以像下面这样使用Sass语法编写样式:

<style>
  /* write Sass! */
</style>

Vue组件的顶级语言块如下:

  • 模板 每个.vue文件最多包含一个<template>块,内容被提取,并传递给vue-template-compiler为字符串预处理为JavaScript 染函数,并最终注入到从<script>导出的组件中。
  • 脚本 每个.vue文件最多包含一个<script>块,这个脚本会作为一个ES Module来执行。它的默认导出是一个Vue.js的组件选项对象,也可以导出由Vue.extend()创建的扩展对象,但是普通对象是更好的选择。 任何匹配.js文件(或通过它的lang特性指定的扩展名)的webpack规则都会运用到这个<script>块的内容中。
  • 样式 默认匹配/\.css$/,一个.vue文件可以包含多个<style>标签。<style>标签可以有scoped或者module属性,以便更好地将样式封装到当前组件,具有不同封装模式的多个<style>标签可以在同一个组件中混合使用。任何匹配.css文件(或通过它的lang特性指定的扩展名)的webpack规则都将会运用到这个<style>块的内容中。
  • 自定义块 可以在.vue文件中添加额外的自定义块来实现项目的特定需求,例如<docs>块。vue-loader将会使用标签名来查找对应的webpack loader来应用在对应的块上。webpack loader需要在vue-loader的选项loaders中指定。

如果需要把.vue文件分隔到多个文件中,可以通过src属性导入外部文件,不同的语言块使用对应的标签即可,如下:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

说明: src导入遵循和webpack模块请求相同的路径解析规则,所以相对路径需要以./开始。 可以从NPM依赖中导入资源,如下:

<style src="todomvc-app-css/index.css">

在自定义块上同样支持src导入,如下:

<unit-test src="./unit-test.js">
</unit-test>

文档规范接近Vue单文件组件(SFC)规范,同一个界面由3个语言块完成,具体可参考https://vue-loader.vuejs.org/zh/spec.html组件标签靠近微信小程序规范,包括表单、视图、按钮等,同时不能使用标准HTML标签,也不能用js对dom进行操作,具体可参考文档http://uniapp.dcloud.io/component/README接口能力(JS API)靠近微信小程序规范,但需将前缀wx替换为uni,具体可参考http://uniapp.dcloud.io/api/README数据绑定及事件处理靠近Vue.js规范,同时补充了App及页面的生命周期; 因为小程序推荐使用flex布局,同时flex相对于传统的盒模型更加灵活、可控性更好,为了兼容多端运行,建议使用flex布局进行开发,可参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/http://www.hcoder.net/tutorials/info_183.html

总结

uni-app作为一个使用Vue.js开发所有前端应用的框架,为开发者提供了极大的方便,降低了学习和开发成本,在当前平台多样性越来越丰富、开发需求越来越复杂的情况下,越来越受到开发者的青睐。

本文原文首发来自博客专栏移动应用开发,由本人转发至https://www.helloworld.net/p/Q0enUpgSpkFyz,其他平台均属侵权,可点击https://blog.csdn.net/CUFEECR/article/details/111088889查看原文,也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

收藏
评论区

相关推荐

微信小程序支付功能全流程实践
前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑! 知己知彼,方能百战不殆 小程序支付流程图 小程序支付交互流程图(https:/
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序wxml使用substring
首先创建subutils.wxs文件 var sub function (val, start0, end17) { if (val.length 0 || val undefined) { return } if (val.length end) { return val.substring(start
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
微信小程序苹果机wx.showModal()
最近做项目中,发现使用wx.showModal()苹果机出现取消文字不显示问题,纠正后显示正确 wx.showModal({ title: '提示', content:'登录后体验更多功能' }) wx.showModal({ cancelText: '取消', confi
微信小程序验证url地址
笔记类 var that this that.optional()是验证是否为空方法 url(value) { return that.optional(value) || /^(?:(?:(?:https?|ftp):)?//)(?:S(?::S)?@)?(?:
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
微信小程序---使用Echarts和分包
微信小程序中使用Echarts和分包假期虽然结束了,但是它以另外一种形式展示我们身上(摸摸自己的小肚子)。在小程序上以图形化显示数据就是分给我的假期预研任务,查了一下网上大佬们的文章了解到了Ucharts,F2,Wxcharts和Echarts,只尝试了F2和Echarts,由于Echarts的最近更新最近和我对Echa
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库 加入购物车购物车 下载代码图标文件内容2.、进入导入第
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
uni-app入门教程(1)uni-app简介、部署和目录结构
@toc 前言本文主要介绍了uniapp的基本情况,并引导快速创建和运行第一个uniapp项目,同时对项目的目录结构和代码规范进行详细说明,适合uniapp零基础初学者。 一、uniapp介绍uniapp是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是。开发者通过编写一套Vue.js代码,即可
推荐几个微信小程序开发小技巧
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 🌟 ~1\. 开发中可能遇到的坑以及 Tips本来想写个小技巧的,结果我总结了一堆坑,没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂,从微信
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。 QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦 【区别】:微信小程序的代码与QQ小程序的源码是不一样的。 微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option