uni-app 代码

目录结构

一个uni-app工程,默认包含如下目录及文件:
┌─common 用于存放一些通用的 js/css/less/scss
│─cloudfunctions 云函数目录(阿里云为aliyun,腾讯云为tcb)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放用于webview的本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
│ ├─ app-plus app
│ ├─ h5 h5
│ ├─ mp-weixin 微信小程序
├─pages 业务页面文件存放的目录
│ ├─index
│ └─index.vue index页面
├─static 存放静态资源(如图片、视频等)的目录,打包时其内容直接拷贝而不编译
├─wxcomponents 存放小程序组件的目录,详见
│ └──custom 微信小程序自定义组件
│ ├─index.js
│ ├─index.wxml
│ ├─index.json
│ └─index.wxss
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见


语法结构

  • vue 页面文件遵循 Vue 单文件组件 (SFC) 规范,使用vue的数据绑定、事件处理
  • 小程序 小程序的标签、自定义组件、api方法(前缀 wx 替换为 uni)、原生SDK
  • mpvue (mini program vue)用vue语法开发小程序的一个框架
  • HTML5+ 封装一些常用IOS、Android原生接口,通过JS调用,其方法均以plus开头,只能在app环境下使用
  • nvue 即native vue,在weex基础上封装了uni的api,适合局部使用
  • native.js 通过JS直接调用IOS、Android原生接口,用于未被HTML5+封装的接口

平台兼容

  • Android的js运行在专门的容器中,各版本无兼容区别
  • uni-app支持使用npm,但建议从 uni-app插件市场 获取插件,防止只兼容H5端(非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 插件)
  • 微信小程序自定义组件(wxcomponents目录下)在H5和APP也支持使用(但性能不如vue组件),配置方式同微信小程序(pages.json => globalStyle => usingComponents)
WXS (WeiXin Script)

运行在视图层的js,避免逻辑层和渲染层交互通信折损。
仅支持编译到微信小程序、H5、app-vue
nvue可用bindingx代替

renderjs

运行在视图层的js,避免逻辑层和渲染层交互通信折损。
性能比WXS更好。
仅支持编译到 app-vue 和 H5
在视图层操作dom,因此可接触到dom、bom API,可使用f2、echarts、threejs库,但不可直接访问逻辑层数据,因此不可以使用 uni 相关接口(如:uni.request)

nvue

基于 weex 改进的原生渲染引擎,提供了原生渲染能力。

  • 模式
    • weex模式(不建议使用)
      老模式,只能使用weex语法,只能编译为app
    • uni-app模式
      默认模式,使用通用的语法和组件,可以编译为全平台

vue页面使用webview渲染;nvue页面使用原生渲染。一个项目中两种页面可以混用。

  • nvue与vue开发的语法区别

  • 优势

    • 新的组件 list高性能长列表、waterfall高性能瀑布流、refresh高性能下拉刷新、barcode页面内嵌扫码等
    • 原生控件的层级覆盖问题
    • 深度使用video、map组件
  • 劣势

    • canvas不如vue+renderjs,且nvue页面的css不支持媒体查询,不利于横竖屏动态切换、适配屏幕。
  • IOS平台默认情况下滚动容器组件(如list、waterfall组件)内容不足时,由于没有撑满容器的可视区域会导致无法上下滚动,此时无法操作下拉刷新功能,无法触发refresh组件的@refresh、@pullingdown事件。 此时可在容器组件中配置alwaysScrollableVertical属性值为true来设置支持上下滚动,支持下拉刷新操作。


生命周期

应用生命周期

仅可在App.vue中监听,在其它页面监听无效。
onLaunch 、onShow、onHide 、onError 等

页面生命周期

onLoad 、onShow 、onReady 、onHide 、onUnload 、onPullDownRefresh 、onReachBottom 、onBackPress、onPageScroll等

组件生命周期

同vue组件生命周期
beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed


路由

通过pages.json配置,通过navigator组件或调用API跳转,类似小程序


环境判断

判断环境

可以在vue-config.js中配置更多环境

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}
判断平台
  1. 条件编译
// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif
  1. 运行期判断 uni.getSystemInfoSync().platform
switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

样式

vue页面是webview渲染的、app端的nvue页面是原生渲染的。
为保证通用,应使用flex布局
rpx和px是通用的,但rem、vw、vh、百分比等在nvue中不支持
rpx不支持动态横竖屏切换计算,使用rpx建议锁定屏幕方向
App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx

CSS

没有*选择器
page代替了body选择器
App.vue 中的样式为全局样式,nvue页面不支持全局样式

  • 使用@import语句可以导入外联样式表
<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>
CSS变量
变量名 App 小程序 H5
var(--status-bar-height) 系统状态栏高度 25px 0
var(--window-top) 0 0 div模拟的NavigationBar高度(44px)
var(--window-bottom) 0 0 div模拟的TabBar高度(50px)
  • 目前 nvue 在App端,还不支持--status-bar-height变量,替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度,然后通过style绑定方式给占位view设定高度
<template>
    <view class="content">
        <view :style="{ height: iStatusBarHeight + 'px'}"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                iStatusBarHeight:0
            }
        },
        onLoad() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        }
    }
</script>

资源路径

  • 小程序中不能使用相对路径引入静态资源
  • 字体文件的网络路径必须为 https
  • 小程序不支持在css中使用本地字体文件、背景图片,可转为base64后使用。小于40KB时HBuilder可自动转换。
  • 本地图片/字体大于等于 40kb,会有性能问题。如需使用可以自行转base64或用网络资源(字体的网络路径必须为https协议头)
  • nvue只能通过js引入字体
  • 本地背景图片/字体推荐使用以 ~@ 开头的绝对路径。
 .test2 {
     background-image: url('~@/static/logo.png');
 }
 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
template内引入静态资源
<!-- 绝对路径 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
js文件或script标签内(包括renderjs等)引入js

不支持/的绝对路径

// 绝对路径,@指向项目根目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
css文件或style标签内引入css
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
css文件或style标签内引用的图片路径

引入字体图标请参考,字体图标

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

推荐使用<template/>进行条件/列表渲染


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容