欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

跨平台框架Uni-app入坑笔记(一)

程序员文章站 2022-03-11 09:12:10
一、介绍Uni-app是一个前端框架,使用Vue.js开发,继承自Vue.js,提供了完整的Vue.js体验。Vue文字教程请访问W3Cschool课程Vue视频教程请访问Bilibili相关视频课程,视频课程使用VS编辑器,讲解较为详细。提供了条件编译优化,可以为某个平台编个性化代码而不影响其他平台。打包到APP时使用5+引擎,5+的所有能力都可以在uni-app中使用。二、开发工具和环境开发工具使用HbuilderX(内置uni-app项目模板):下载地址微信开发者工具(...

一、介绍

Uni-app是一个前端框架,使用Vue.js开发,继承自Vue.js,提供了完整的Vue.js体验。

Vue文字教程请访问W3Cschool课程

Vue视频教程请访问Bilibili相关视频课程,视频课程使用VS编辑器,讲解较为详细。

提供了条件编译优化,可以为某个平台编个性化代码而不影响其他平台。

打包到APP时使用5+引擎,5+的所有能力都可以在uni-app中使用。

二、开发工具和环境

开发工具使用HbuilderX(内置uni-app项目模板):下载地址

微信开发者工具(编译调试小程序所用):下载地址

APP模拟器及配置教程:教程地址

三、开发规范及目录结构

(1)页面规范——Vue单文件组件规范

.vue后缀名文件是自定义文件类型,使用类HTML语法描述vue组件。

每个vue文件包括三种类型的*语言块:<template>     <script>    <style>,此外还允许添加自定义块。

vue-loader会解析文件,提取每个语言块,如有必要会通过其他loader处理,最后将他们组装成一个ES Module,它的默认导出是一个Vue.js组件选项的对象。

#语言块、模板

每个.vue文件有且仅有一个<template>块

#脚本

每个.vue文件有且仅有一个<script>块

#样式

每个.vue文件可以有多个<style>标签

#自定义块

可以在.vue文件中添加额外的自定义块来实现项目的特定需求。

#src导入

可以通过src属性导入外部文件

注意:src导入遵循和webpack模块相同的路径解析规则,即(相对路径需要以./开始)

(2)组件标签规范

注意,不能使用标准HTML标签,也不能用JS对dom进行操作。详见uni-app组件规范手册

接口能力(JS API)靠近微信小程序规范,详见uni-app接口规范

数据绑定及事件处理靠近Vue.js规范,同时补充了APP及页面的生命周期

,建议使用Flex布局进行开发以兼容多端运行。flex布局视频教程

(3)目录结构(1.9.2.20190417版本目录):

跨平台框架Uni-app入坑笔记(一)

pages    :业务页面文件存放目录

static      :存放应用引用静态资源(图片,视频等)的地方,注意:惊天资源只能存放于此

APP.vue   :应用配置,用来配置APP全局样式以及监听应用的生命周期

main.js     :Vue初始化入口文件

mainfest.json   :配置应用名称、appid、logo、版本等打包信息

pages.json       :配置页面路由、导航条、选项卡等页面类信息

uni.scss       :uni-app内置的常用样式变量,对于APP开发者(插件使用者),可以通过修改这些变量来定制自己的插件,实现自定义主题功能。如果项目使用了scss预处理,可以直接在scss代码中使用其中的变量,同时无需import这个文件。

四、页面样式与布局

重要说明:新版本HBuilderX中已经将app.vue的全局样式删除了,在开发过程中需要flex时使用flex即可

(1)尺寸单位

框架目前仅支持长度单位px和%。uni-app的基准宽度为750px

页面元素宽度在uni-app中的宽度计算公式:750px * (元素在设计稿中的宽度)/(设计稿基准宽度)

(2)样式导入

使用@import语句导入外联样式,后跟需要导入的外联样式表的相对路径,以分号结束

(3)内联样式

框架组件支持style、class属性来空值组件的样式

style:接受动态样式,在运行时会解析,尽量避免将静态的样式写进style中以免影响渲染速度

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名前无需加.  ,样式类名之间用空格分隔

(4)选择器

.class .intro              选择多有拥有class="intro"的组件

#id #firstname               选择拥有id="firstname"的组件

element view              选择所有view组件

element,element view,checkbox  选择所有文档的view组件和所有的checkbox组件

::after  view::after       在view组件后面插入内容,(仅微信小程序和5+APP生效)

::before  view::before      在view组件前面插入内容,(仅微信小程序和5+APP生效)

(5)全局样式与局部样式

定义在App.vue中的样式为全局样式,作用于每个页面。在pages目录下的vue文件中定义的样式为局部样式,制作用在对应的页面,并会覆盖App.vue中相同的选择器。

(6)flex布局

支持跨平台

本文地址:https://blog.csdn.net/qq_41790461/article/details/109264161