码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14427845.html

环境搭建

官网文档解释:uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

需要下载开发工具:HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。下载App开发版,可开箱即用;

创建uni-app

打开开发工具,HBuilderX,点击工具栏里的**文件 -> 新建 -> 项目 **-> 选择uni-app,输入项目名,选择模板,点击创建

运行uni-app

  • 浏览器运行:进入项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器

  • 微信开发者工具里运行:进入项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,

    • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。需在输入框中输入微信开发者工具的安装路径。

    • 微信开发者工具 -> 设置 -> 安全设置 -> 安全 -> 开启服务端口

介绍项目目录,文件作用

  • pages.json :对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

  • manifest.json :是应用的配置文件,用于指定应用的名称、图标、权限等

  • App.vue:是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但其本身不是页面,这里不能编写视图元素。可以调用应用生命周期函数、配置全局样式、配置全局的存储globalData

  • main.js:是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、插件等。

  • uni.scss:为了方便整体控制应用的风格。如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。

  • unpackage:项目打包目录,存在各个平台的打包文件

  • pages:所有的页面存放目录

  • static:静态资源目录,图片等

  • comonents:组件存放目录

页面外观设置

全局配置 globalstyle:用于设置应用的状态栏、导航条、标题、窗口背景色等。列举以下常用

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 下拉显示出来的窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px

页面配置 pageStyle

uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象

  • pages节点的第一项为应用入口页(即首页)

  • 应用中新增/减少页面,都需要对 pages 数组进行修改,且不需写后缀,框架会自动寻找路径下的页面资源

属性 类型 默认值 描述
path String 配置页面路径
style Object 配置页面窗口表现,配置项参考 pageStyle

页面底部 tabBar

若应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置,不仅方便快速开发导航,更重要的是在App和小程序端提升性能。

  • 当设置 position 为 top 时,将不会显示 icon

  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

  • tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。

属性说明:

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar 上边框的颜色,可选值 black/white
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom 可选值 bottom、top

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字,在 App 和 H5 平台为非必填。
iconPath String 图片路径,当 postion 为 top 时,此参数无效,不支持网络图片和字体图标
selectedIconPath String 选中时的图片路径,当 postion 为 top 时,此参数无效

启动模式配置 condition

仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

属性说明:

属性 类型 是否必填 描述
current Number 当前激活的模式,list节点的索引值
list Array 启动模式列表

list说明:

属性 类型 是否必填 描述
name String 启动模式名称
path String 启动页面路径
query String 启动参数,可在页面的 onLoad 函数里获得
// pages.json
"condition":{ //模式配置,仅开发期间生效
"current":"0", //当前激活的模式(list 的索引项)
"list":[
{
"name":"详情", //模式名称
"query":"id=80", //启动页面,必选
"path":"pages/detail/detail" //启动参数,在页面的onLoad函数里面得到。
}
]
}

数据及事件绑定

  • 数据绑定:在页面中需要定义数据,和Vue一模一样,可以直接在data中定义数据即可,再利用插值表达式渲染,在插值表达式中支持三元运算和一些基本运算

  • 动态绑定属性:同Vue,v-bind绑定,简写:

  • 事件绑定及传参:同Vue,v-on绑定,简写@

组件使用

uni-app提供了一系列基础组件,类似HTML里的基础标签元素。但uni-app的组件与HTML不同,而是与小程序相同,更适合手机端使用。

虽然不推荐使用HTML标签,但实际上如果开发者写了div等标签,在编译到非H5平台时也会被编译器转换为view标签,类似的还有spantextanavigator等,包括css里的元素选择器也会转。

  • 所有组件与属性名都是小写,单词之间以连字符-连接。

  • 根节点为 <template>,这个 <template> 下只能且必须有一个根<view>组件。这是vue单文件组件规范。

  • 所有组件都有的属性:id,class,style,hidden,data-*,@EventHandler

列举几个常用的,但不同于传统html的组件,其余建议参考官网详细文档

  1. view:视图容器。类似于传统html中的div,用于包裹各种元素内容。

  2. text:文本组件。类似于传统html中的span,用于包裹文本内容。

  3. image:图片。类似于传统html中的span,用于显示图片元素。

uni-app中的样式

  • rpx 即响应式px,根据屏幕宽度自适应的单位,以750宽的屏幕为基准。750rpx恰好为屏幕宽度,屏幕变宽,rpx实际显示效果会等比放大。
  • 支持基本常用选择器,class,id,element,但不能使用* 通配符选择器
  • page相当于body节点
  • 定义在App.vue中的样式为全局样式,作用于每一个页面,在pages目录下的vue文件中定义的样式为局部样式,只作用对应的页面,并会覆盖App.vue中相同的选择器
  • 同样支持 Less 和 Scss,不过下载对应的插件
  • 可通过@import导入外联样式表,并引用相对路径,用;表示语句结束
  • uni-app支持使用字体图标,使用方法与普通web项目相同,但需要注意:
    • 字体文件小于40kb,uni-app会自动将其转化为base64格式,反之需开发者手动转换,否则将不生效
    • 字体图标的引用路径推荐使用以~@开头的绝对路径
// App.vue 样式部分
<style>
/*每个页面公共css */
@import url("./static/font/iconfont.css");
</style>
// iconfont.css
@font-face {font-family: "iconfont";
src: url('~@/static/font/iconfont.eot');
}

条件注释实现跨端兼容

跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。

  • 大量写 if else,会造成代码执行性能低下和管理混乱。
  • 编译到不同的工程后二次修改,会让后续升级变的很麻烦。

在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。

条件编译

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

支持的文件·vue.js.csspages.json,各预编译语言文件,:.scss、.less、.stylus、.ts、.pug

注意::条件编译是利用注释实现的,在不同语法里注释写法不一样

写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

  • #ifdef:if defined 仅在某平台存在
  • `#ifndef`:if not defined 除了某平台均存在
  • %PLATFORM%:平台名称
条件编译写法 说明
#ifdef APP-PLUS 需条件编译的代码 #endif 仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif 除了 H5 平台,其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif 在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)

%PLATFORM% 可取值如下:全部取值可参考官方文档

平台
APP-PLUS App
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序

<template>
<view>
<!-- #ifdef H5 -->
<view>仅展示在H5中 </view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>仅展示在微信小程序中</view>
<!-- #endif -->
<text>{{msg}}</text>
</view>
</template> <script>
export default {
data() {
return {
msg: 'hello,'
}
},
onLoad() {
// #ifdef H5
this.msg += 'H5'
// #endif
// #ifdef MP-WEIXIN
this.msg += '微信小程序'
// #endif
}
}
</script> <style>
/* 第一种写法,针对样式做注释 */
text {
/* #ifdef H5 */
color: #8470FF;
/* #endif */
/* #ifdef MP-WEIXIN */
color: #8DEEEE;
/* #endif */
} /* 第二种写法,针对选择器做注释 */
/* #ifdef MP-WEIXIN */
text {
color: #8DEEEE;
}
/* #endif */
</style>

uni-app小白入门自学笔记(一)的更多相关文章

  1. Java入门自学笔记

    一.变量 变量需要一个名字,变量的名字是一种“标识符”,意思是它是用来识别这个和那个的不同的名字. 标识符的构造规则:只能有字母.数字和下划线组成,数字不能在首位,java的关键字(保留字)不可以用做 ...

  2. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  3. Ruby小白入门笔记之&lt;个人记录档&gt;

    书写缘由 快两年的JAVA开发,因为来到一家新公司,产品需要用Ruby开发,故此才有了这从头开始,一入编程深似海啊...... 因为入门时是JAVA,所以理念跟规范早已形成,故此感觉突然采用Ruby编 ...

  4. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  5. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  6. Nginx快速入门菜鸟笔记

    Nginx快速入门-菜鸟笔记   1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...

  7. Web前端小白入门指迷

    前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...

  8. UWP开发入门系列笔记之(一):UWP初览

    标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...

  9. 【Unity游戏开发】SDK接入与集成——小白入门篇

    一.简介 通常一款游戏开发到后期,一般都会涉及到第三方SDK的接入与集成,对于不熟悉SDK接入的同学来说,接SDK每次都是云里雾里,而熟悉SDK接入的同学又觉得不断地重复做接入SDK工作这样没有成就感 ...

  10. 无废话MVC入门教程笔记

    自学mvc,看了园子里李林峰写的李林峰写的无废话MVC入门教程笔记,现在有的平时忽略的或是不太清楚的点记下来 1,Html.DropDownList //服务端写法 @{ //下拉列表的值 List& ...

随机推荐

  1. 大三那年在某宝8块钱买的.NET视频决定了我的职业生涯

    前言 谨以此文献给那些还在大学中迷茫的莘莘学子们! 韩愈在<师说>中提出了作为师者应该做的三件事:传道.授业.解惑. 1.传道:培养学生的道德观 2.授业:传授学生专业技能 3.解惑:解答 ...

  2. CHARINDEX

    实现查询条件多个值的或的关系 Select Id,Name from CustTable where CharIndex( CustTable.Name, 'ACDE,BEX,CCC')>0 C ...

  3. http://jingyan.baidu.com/album/d8072ac47baf0eec95cefdca.html?picindex=4

    http://jingyan.baidu.com/album/d8072ac47baf0eec95cefdca.html?picindex=4

  4. imx6 RGB LCD

    imx6dl需要支持lcd接口的屏,imx6dl的datasheet并没有明确的说明lcd相关的配置,只在Display Content Integrity Checker (DCIC)一章中介绍.本 ...

  5. 查看linux版本时32位的还是64位的

    一. [root@wuy2 etc]# getconf LONG_BIT [root@wuy2 etc]# getconf WORD_BIT (32位的系统中int类型和long类型一般都是4字节,6 ...

  6. 使用JDBC从数据库中查询数据

    * ResultSet 结果集:封装了使用JDBC 进行查询的结果 * 1. 调用Statement 对象的 executeQuery(sql) 方法可以得到结果集 * 2. ResultSet 返回 ...

  7. C#发送简单的HTTP POST请求给传统的ASP网页。

    设计思路 创建HTTPWebRequest类的一个实例,设置这个对象的Method属性为"POST",ContentType属性为"application/x-/www- ...

  8. Centos修改默认网卡名

    安装系统后默认的网卡名称为 enpXX ,修改为熟悉的eth0 1 vi /etc/default/grub GRUB_TIMEOUT=5GRUB_DEFAULT=savedGRUB_DISABLE_ ...

  9. CTF丨2019互联网安全城市巡回赛&#183;西安站,我们来了!

    万物互联时代,网信事业发展突飞猛进,互联网悄然渗透到国民生活的每一个角落,伴随而来的网络安全威胁和风险也日渐突出.网络诈骗.钓鱼软件.勒索病毒等安全问题层出不穷,信息泄露等网络安全事件也频繁上演,给用 ...

  10. 使用shell快速建立上万个文件夹

    #!/bin/bash#!This is a shell script to finish the folders tasks.rm -rf /home/cpay/zyc/filemkdir /hom ...