美文网首页
uni-app 学习01

uni-app 学习01

作者: 烟雨痕 | 来源:发表于2020-03-25 17:58 被阅读0次

uni-ui 使用说明


初始化项目
在HBuilderX中新建uni-app项目,进入项目目录,执行

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui

使用 uni-ui
script中引用组件:

import { uniBadge } from '@dcloud/uni-ui'
export default {
    components: { uniBadge }
}

template中使用组件:

<uni-badge text = "1"></uni-badge>
<uni-badge text = "2" type="success" @click="bindClick"></uni-badge>

标准js和浏览器js的区别


uni-app的js代码,H5端运行于浏览器中。非h5端,iOS平台运行在iOS自带的jscore引擎中。

非H5端,不支持window、document、navigator等浏览器的js API, 但也支持ECMAScript。

ECMAScript由ECMA国际管理,是基础js语法。

* 浏览器基于标准js扩充了window、document等js API;
* Node.js基于标准js扩充了fs等模块;
* 小程序也基于标准js扩展了wx.xx、my.xx、swan.xx的API。

条件编译


API的条件编译

1、平台特有的API实现

//#ifdef APP-PLUS
平台特有的API实现
//#endif

2、如下代码不会在H5平台出现

//#ifndef H5
 todo
//#endif

3、如下代码会在App和H5平台上出现
除了支持单个平台的条件编译外,还支持多平台同时编译,使用 || 来分隔平台名称。

//#ifdef APP-PLUS || H5
平台特有的API实现
//#endif
组件的条件编译
<!-- #ifdef APP-PLUS -->
平台特有的组件
<!-- #endif>
样式的条件编译
/* #ifdef APP-PLUS */
平台特有样式
/* #endif*/

注意 :样式的条件编译,无论是css还是sass/scss/less/stylus等预编译语言中,必须使用/*注释*/

static 目录的条件编译

static 目录下新建不同平台的专有目录(目录名称同 平台值域,但字母均为小写)
专有目录下的静态资源只有在特定平台才会编译进去

如以下目录结构,a.png 只有在App平台才会编译进去,b.png 在所有平台都会被编译。

┌─static                
│  ├─app-puls
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json    

注意


** Android和iOS平台不支持通过条件编译来区分,通过调用uni.getSystemInfo来获取平台信息。在HBuilderX1.9.10起,支持ifiosifAndroid代码块,进行编写判断。

相关文章

  • Uni-App学习路线

    Uni-App学习路线 学习Uni-app用到的技术 Uni-app官网[https://uniapp.dclou...

  • uni-app 学习01

    uni-ui 使用说明 初始化项目在HBuilderX中新建uni-app项目,进入项目目录,执行 安装 uni-...

  • uni-app 之登录页面

    学习了一周多uni-app,上一周主要是开发原生插件给uni-app调用。本周开始学习怎么使用uni-app写页面...

  • uni-app入门详解

    1 uni-app学习 1.1 什么是uni-app uni-app是一个使用Vue.js语法来开发所有前端应用的...

  • uni-app写一个阅读类app

    这个程序主要是学习uni-app和egg.js,介绍:前端开发使用uni-app,后端使用egg.js,数据库使用...

  • uni-app开发小说阅读器

    uni-app官网介绍 uni-app插件地址 项目地址 首先上做的产品效果图,仅供学习。 项目已接入实际api数...

  • 在uni-app框架中使用rem(h5和微信小程序)

    将在学习uni-app过程中遇到的问题记录一下: 1.rem根元素字号适配 问题uni-app中可以使用rem。r...

  • uni-app 介绍

    uni-app 介绍 1、什么是uni-app? uni-app是一个使用 Vue.js 开发所有前端应用的框架,...

  • uni-app学习

    hcoder[http://www.hcoder.net/tutorials/info_1335.html]uvi...

  • uni-app学习

    1、pages.json单独设置样式: 2、启动模式设置:(微信小程序中的编译模式) 3、APP生命周期: 4、页...

网友评论

      本文标题:uni-app 学习01

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