uni-app框架介绍（3）

uni-app框架介绍（3）

开发规范：

为了实现多端兼容，综合考虑编译速度、运行性能等等因素，uni-app 约定了如下开发规范：

目录结构：

一个 uni-app工程，默认包含如下目录和文件：

注意：

static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错css、less/scss 等资源文件同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下HBuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 文件

资源路径说明：

模板内引入静态资源：

在 template 标签中 通过 image、video等标签的 src 属性引入静态资源时，可以使用相对路径或绝对路径，如下代码：

注意：

js文件引入：

js 文件或 script 标签内（包括renderjs等）引入 js 文件时，可以使用相对路径和绝对路径，形式如下：

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录import add from '@/common/add.js'// 相对路径import add from '../../common/add.js'

注意：

js 文件不支持使用 / 开头的方式引入。

css引入静态资源：

css 文件或 style标签 内引入 css 文件（scss、less文件同理）时，可以使用相对路径或绝对路径，如下代码：

/* 绝对路径 */@import url('/common/uni.css');@import url('@/common/uni.css');/* 相对路径 */@import url('../../common/uni.css');

注意：

自 HBuilderX 2.6.6-alpha 起支持绝对路径引入静态资源，旧版本不支持此种方式。

/* 绝对路径 */background-image: url(/static/logo.png);background-image: url(@/static/logo.png);/* 相对路径 */background-image: url(../../static/logo.png);

注意：

1、引入字体图标请参考 ​​字体图标​​

2、 @ 开头的绝对路径以及相对路径会经过base64 转换规则校验

3、不支持本地图片的平台，小于40kb，一定会转 base64 （共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）

4、h5平台，小于4kb会转base64，超出4kb时不转

5、其余平台不会转 base64

在 .vue 文件中进入外部 css 文件，如下示例代码：

生命周期：

应用生命周期：

uni-app 支持如下应用生命周期函数：

注意：

1、应用的生命周期函数仅可在 App.vue 中监听，在其他页面监听无效。

2、onlaunch 里进行页面跳转，如遇白屏报错，请参考 ​​中的生命周期函数示例：

页面生命周期：

uni-app 支持如下页面生命周期函数：

onPageScroll 参数说明：

onTabItemTap 参数说明：

注意：

3、onTabItemTap 在 App 端，从HBuilder X 1.9 的自定义组件编译模式开始支持。

4、避免在 onShow 里使用需要权限的 API（比如 setScreenBrightness() 等需要手机权限），可能会再次触发 onShow 造成死循环。

onNavigationBarButtonTap  参数说明：

onBackPress 回调参数对象说明：

export default { data() { return {}; }, onBackPress(options) { console.log('from:' + options.from) }}

注意：

me.vue 文件

路由：

路由跳转：

uni-app 有两种页面路由跳转方式，一个使用 ​​navigator​​​组件跳转，二是调用 ​​API​​跳转。

页面栈：

框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下：

运行环境判断：

开发环境和生产环境：

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器还是正式服务器的动态切换。

if(process.env.NODE_ENV === 'development'){ console.log('开发环境')}else{ console.log('生产环境')}

如果你需要自定义更多环境，比如测试环境：

1、 如果你只需要对某一个平台配置，可以在 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来，详见 ​​vue-config.js 中配置，详见 ​​#ifdef H5 alert("只有h5平台才有alert方法")// #endif

如上代码只会编译到 H5 的发行包 里，其它平台的包不会包含如上代码。

2、运行期判断

switch(uni.getSystemInfoSync().platform){ case 'android': console.log('运行Android上') break; case 'ios': console.log('运行iOS上') break; default: console.log('运行在开发者工具上') break;}

如有必要，也可以在条件编译里自定义一个变量，赋不同的值，在后续运行代码中动态判断环境。

页面样式与布局：

尺寸单位：

uni-app 支持的通用的 css 单位，包括px、rpx

px 即屏幕像素rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕的宽度。屏幕变宽，rpx实际显示效果会等比放大。

vue 页面支持普通的 H5 单位，但在 nvue 里不支持：

nvue 还不支持 百分比 单位。

App 端，在pages.json 里的 titleNView 或页面里写 plus api 中涉及的单位，只支持px，不支持rpx。

样式导入：

内联样式：

选择器：

目前支持的选择器有：

注意：

page { background-color:#ccc;}

全局样式与局部样式：

定义在 App.vue 中的样式为全局样式，作用于每一个页面。

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

注意：

App.vue 中通过 @import 语句可以导入外联样式，一样作用于没一个页面。nvue 页面暂时不支持全局样式

CSS变量：

固定值：

Flex布局：

背景图片：

字体图标：

​​uni-app​​​ 支持使用字体图标，使用方式与普通 ​​web​​ 项目相同，需要注意以下几点：

为方便开发者，在字体文件小于 40kb 时，​​uni-app​​ 会自动将其转化为 base64 格式；字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

@font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }

​​nvue​​​中不可直接使用css的方式引入字体文件，需要使用以下方式在js内引入。nvue内不支持本地路径引入字体，请使用网络链接或者​​base64​​形式。​​src​​字段的​​url​​的括号内一定要使用单引号。

var domModule = weex.requireModule('dom');domModule.addRule('fontFace', { 'fontFamily': "fontFamilyName", 'src': "url('和 ：

globalStyle(全局样式配置)：

用于设置应用的状态栏、导航条、标题、窗口背景色等，主要在pages.json中进行配置

pages.json 文件

{ "pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-ui基础项目" } }], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#007AFF", "backgroundColor": "#FFFFFF" }}

配置项如下：

注意

pages(局部页面样式配置)：

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

注意：

pages节点的第一项为应用入口页（即首页）应用中新增/减少页面，都需要对 pages 数组进行修改文件名不需要写后缀，框架会自动寻找路径下的页面资源

style对象配置

pages对象中的style 对象用于设置每个页面的状态栏、导航栏、标题、窗口背景色等

页面中配置项会覆盖  ​​globalStyle​​ 中相同的配置项，具体配置项如下：

​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。