uni-app_uni-app开发 - CSDN
精华内容
参与话题
  • uniapp实战开发商城APP和小程序

    千人学习 2020-03-31 10:59:37
    课程包含Uniapp开发全端教程,课程由英特网络独家录制,购买课程后赠送后端CMS管理系统,可以修改商品及接口数据,同时CMS提供Uniapp所需要的全部API接口,包括课程内容:安卓证书申请/APP苹果打包/APP安卓打包/微信...
  • uni-app入门

    万次阅读 多人点赞 2019-09-10 15:59:27
    一、uni-app简单介绍 什么是uni-appuni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 uni-app的优点 跨平台发行,运行体验更好 与小程序的...

    一、uni-app简单介绍

    什么是uni-app?

    uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

    uni-app的优点

    跨平台发行,运行体验更好

    • 与小程序的组件、API一致;
    • 兼容weex原生渲染,增加了开发效率高,但是由于weex坑比较多,建议还是使用局部渲染优化;

    通用前端技术栈,学习成本更低

    • 支持vue语法,微信小程序API
    • 内嵌mpvue

    开发生态,组件更丰富

    • 支持通过npm安装第三方包
    • 支持微信小程序自定义组件及JS SDK
    • 兼容mpvue组件及项目(内嵌mpvue开源框架)
    • App端支持和原生混合编码
    • 插件丰富,DCloud将发布插件到市场

    二、功能框架浏览图

    在这里插入图片描述

    三、创建项目

    1、安装HBuilderX

    HBuilderX内置相关环境,无需配置nodejs、vue等,三秒钟就可以创建一个项目。

    • 小提示:ctril+N可以快速调转到新建选择类型
      在这里插入图片描述

    2、创建uni-app
    在这里插入图片描述

    3、运行项目
    在这里插入图片描述
    4、官方提示

    • static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
    • css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。

    四、学习框架

    1、项目结构介绍

    在这里插入图片描述

    2、开发规范

    2.1 uni-app 约定的开发规范

    • 页面文件遵循 Vue 单文件组件规范
    • 组件标签靠近小程序规范
    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni
    • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    • 为兼容多端运行,建议使用flex布局进行开发

    2.2 uni-app 开发的注意事项

    • html标签
      uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。

    • CSS
      推荐使用flex布局模型
      单位方面,uni-app 支持的通用 css 单位包括 px、rpx
      (早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了)

    • JS
      只有H5端可使用浏览器内置对象,比如document、window、localstorage、cookie等,以及jquery等依赖。

    • 项目文件
      显示页面必须放到pages目录下,页面所在目录的目录名需要放入相同名称的.vue文件。
      在这里插入图片描述

      静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则

    • echats图表
      H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,推荐使用uChart组件。如仍然坚持使用原版echart,可在web-view组件中内嵌html来使用。

    3、页面样式与布局

    (1)尺寸单位

    uni-app支持以下css单位:

    单位 介绍
    px 屏幕像素
    upx uni-app提供根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大
    vh 是视窗高度的百分比
    单位换算 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

    注意问题: 动态绑定的 style 不支持使用 upx,因为upx是编译器处理的,在手机端动态修改样式赋值时,无法直接使用 upx。

    解决方案: 使用 uni.upx2px(Number) 转换为 px 后再赋值。

    this.cWidth = uni.upx2px(750);
    

    (2)样式导入

    <style>
        @import "../../common/color.css";
        .colorA {
            box-shadow: none;
        }
    </style>
    

    (3)内联样式

    支持 style 和 class来控制样式,但建议不要在style中直接使用,影响渲染速度。

    (4)所支持的选择器
    在这里插入图片描述

    (5)背景图片 和 字体图标

    • 支持 base64 格式图片。
    • 支持网络路径图片。
    • 使用本地图片或字体图标需注意:
    1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
    2. 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
    3. 本地引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
    /* 背景图片 */
     .bgImg {
         background-image: url('~@/static/logo.png');
     }
    /* 字体图标 */
     @iconImg {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }
    

    (6)条件编译

    1、用特殊的代码做标记,不同标记里面的代码可以在不同平台里面执行。

    2、支持的文件

    • .vue
    • .js
    • .css
    • pages.json
    • 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug

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

    • #ifdef:if defined 仅在某平台存在
    • #ifndef:if not defined 除了某平台均存在
    • %PLATFORM%:平台名称
    	<!-- #ifndef APP-PLUS -->
    	<text class="app-text">text</text>
    	<!-- #endif -->
    	
    	<!-- #ifdef MP-WEIXIN -->
    	<text class="weixin-text">text</text>
    	<!-- #endif -->
    
    展开全文
  • uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...
    uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手uni-app。

    uni-app使用的是vuejs的语法,所以会vuejs的朋友就可以跳过学习语法这一步了,还不会vuejs的朋友也不要紧,可以先去vue官方文档看看,vue的文档可以说非常通俗易懂了,如果你有遇到前端方面的问题或者需要一些前端学习资料可以加q群:682783851。下面就假设大家都会vuejs了。

    首先,我们已经知道uni-app是用来制作一个跨平台应用的,所以,在开始之前,我们一定要知道uni-app是如何打包到多个平台的,使用uni-app开发,我这里是建议大家使用官方的开发者工具的,官方工具也非常好用,对于一些配置项非常方便,可以省去很多麻烦,使用开发者工具我们就知道了,uni-app跨平台都是开发者工具来完成编译的。
    那么对于多个平台,是不是只需要看一端就行了呢?答案是否定的,uni-app对百分之90的样式是完全跨平台的,对于一些特殊的,因为每个平台要求不一样,所以我们要使用条件编译来做适配,另外对于一些第三方授权登录或者支付功能每个平台也有所不同。这里我们注意要使用条件编译,重要点是一定要注意每个平台对组件或接口的兼容性
    另外,需要注意的是uni-app中对vue语法的兼容性,使用 Vue.js 注意事项
    了解上面的两点之后,我们就可以开始创建一个项目了,打开hbuilder X,左上角文件-新建-项目,可以选择uni-app的模板学习一下,看看uni-app的目录结构如何,下面是【购靓号】项目的目录结构

    下面目录说明好好看一下

    common 是存放公共js和css的目录,大家可以把一些工具js或者公共的css放这里面
    components是放组件的目录,我们所有的组件都可以放这里面,记住组件里面不能使用uni-app页面钩子函数
    pages 是uni-app放页面的文件夹,我们每次在这里面新建一个页面,hbuilder X都会在pages.json里面配置好。
    static 是存放字体或图片的文件夹,一些静态资源都可以放这里面
    store 是vuex状态管理,因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了
    subpages 是因为内容过多,分的包,这里面新建的页面pages.json里面不会自动生成对应配置项
    subpagesA 也是分的包,因为小程序限制,所以建议大家在一开始就考虑分包情况。免得后面又要整理
    unpackage 里面的打包后的东西,我们可以不用管,h5打包后会放在这个里面的dist/build/h5里面
    App.vue 可以说是入口文件,我们公共的css可以放这里面,应用启动需要做的事情也可以放这里面,但是这个里面是不能进行页面跳转的
    main.js 是入口js文件,跟vue脚手架一样的,我们可以引入全局js,配置一些全局js函数等都可以在这里操作
    manifest.json是uni-app的配置项,一般都是可视化配置,很少用到源码配置,大家基本看一看就知道了,不知道的加QQ群私聊群主:682783851
    pages.json 就是页面配置文件了,你写的每一个页面都要在这里面配置,每个页面一些的特殊配置项也是在这里面写,uni-app pages配置项
    uni.scss 是uni-app的样式包,大家随意放

    这个时候我们就可以开始开发页面了,直接在pages文件夹上右键就可以新建页面了,每一个页面都是vue文件,结构跟我们使用vue脚手架一样,写起来还是很舒服呀!
    上面是一个大概的讲述,具体的学习路线还是要依赖官方文档,大家可以根据下面流程学习

    uni-app介绍
    uni-app组件
    uni-app配置
    uni-app接口
    一定要注意每个组件和接口在平台的支持情况。

    官方文档非常详细,我们无需依赖其他书籍,有问题可以加QQ群,里面有很多学习资料,也可以提资源需求,还可以私聊群主解决问题,群主就是我,哈哈哈。
    另外,想看看uni-app做出来的跨平台应用是什么体验的小伙伴,可以看下面了,体验一下中大型项目的感觉,包含登录支付功能,还可以分享

    下面是【购靓号】平台的跨平台应用,PC端可访问购靓号 或复制打开链接https://www.golianghao.com。手机端可扫码体验
    展开全文
  • uni-app实战商城类app和小程序

    千人学习 2020-03-09 15:31:20
    本季度为uni-app实战项目第2季度,将实战商城类app和小程序,其中会包括发布到安卓端app,iOS端app、微信小程序,另外还会涉及Weex(nvue),Vuex模块化管理,商城支付模块等。 课程大纲见以下图!
  • uni-app 从入门到放弃(持续更新)

    万次阅读 2019-06-11 19:52:29
    最近的任务是做一个混合的app,刚好我想玩一下uni-app怎么样,在考虑用哪个技术的时候,考虑了RN,Taro,uni-app,RN没有踩过坑怕hold不住,Taro很少看到编译成app的案例,而uni-app比较多,就决定是你了,然后...1....

    最近的任务是做一个混合的app,刚好我想玩一下uni-app怎么样,在考虑用哪个技术的时候,考虑了RN,Taro,uni-app,RN没有踩过坑怕hold不住,Taro很少看到编译成app的案例,而uni-app比较多,就决定是你了,然后...

    1.搭建环境

    上官网安装一下开发工具

    这里送上连接 www.dcloud.io/hbuilderx.h…
    然后需要安装微信开发者工具 最好用最新的

    如果直接写app的话 可以安装模拟器 我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了

    然后用开发工具 创建一个模板

    2.使用vuex

    uni-app已经内置vuex 不需要再安装了 

    在根目录下新建store文件 在其目录创建index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    	state: {
    		text: 'demo'
    	},
    	mutations: {
    		SetText(state, v) {
                        state.text = v
                    }
    	},
    	actions: {
    		setText: function({commit}, v) {
                            commit('SetText', v)
                    }
    	}
    })
    
    export default store 复制代码

    然后在main.js入口文件

    import Vue from 'vue'
    import App from './App'
    
    // 这里引入store
    import store from './store'
    
    // 这里是重要的一步 这里不写 app会找不到store
    Vue.prototype.$store = store
    
    const app = new Vue({
    	store,
    	...App
    })
    app.$mount()复制代码

    3.配置

    打开manifest.json 这里是可视化的



    mac这边还有一个坑 需要配置微信开发者工具的路径 打开偏好设置


    如果不配置 一直会报错 如果出现启动不了微信开发者工具 可以自己找到编译好的目录 自己手动导入就可以了

    4.HBuilderX 1.9.8的坑

    首先是onLoad生命周期 调用路由的api会报错

    navigateTo with an already exist webviewId 1  复制代码

    如果出现这个错 解决办法就是延迟

    setTimeout(() => {
        uni.switchTab({
            url: '这里是路径'
        })
    }, 400)复制代码
    官方说在1.9.9+版本会修复

    5.获取节点

    支持微信小程序 H5 APP 其他没有测试

    uni.createSelectorQuery()
    // 官方说自定义组件模式 要这样写
    uni.createSelectorQuery().in(this)复制代码

    这里需要注意一点 要在onReady这个生命周期里面才能获取到

    6.swiper的高度问题

    大家如果写过微信小程序的话都知道swiper是要写一个高度的,而uni-app等于也是一个加强版的小程序,swiper也要写高度,但我们都不太能确定高度,只能用一些办法来确定它的高度

    第一种办法就是已知item的高度,在获取数据后,用item的高度*item的数量获得高度

    第二种就是用节点获取高度,我自己就用这个办法,亲测app跟微信小程序都ok

    // 先在swiper组件写上动态style来获得高度
    <swiper :style="{height: `${swiperHeight}px`}">
        <swiper-item v-for="(item,index) in tabList" :key="index">
            <div :class="columnList[index]"></div>
        </swiper-item>
    </swiper>
    
    // 这里的class 我一开始是用字符串模板来实现`columnList${index}`
    // 跑是能跑起来 但是会报错 忍不住自己就不用字符串了
    // 接着使用fun的办法 但是uni-app不支持这种写法
    // 后面想着用tabList的长度来初始化一个columnList (这个办法有点笨,如果有人有更好的办法,请告诉我这个菜鸡)
    
    // 书写一个获取节点的方法
    get_wxml(className, callback) {
        uni.createSelectorQuery().select(className).boundingClientRect(callback).exec()
    }
    // 在onReady生命周期里面获取高度
    onReady() {
        this.get_wxml(这里写你要获取的节点,我这里是我定义的columnList[index], (rects) => {
    	this.swiperHeight = rects.height
        })
    }复制代码

    7.条件编译

    多端开发肯定避免不了存在跨端的差异性,uni-app也提供了条件编译功能

    • #ifdef:if defined 仅在某平台存在
    • #ifndef:if not defined 除了某平台均存在

    写法如下

    #ifdef APP-PLUS
    需条件编译的代码
    #endif
    APP-PLUS是指app端的 还有更多端的 我这里提供链接 查询uniapp.dcloud.io/platform

    优化建议

    建议使用自定义组件模式

    每次data改变都会重新渲染视图,一些不是视图的变量,可以考虑定义在data外面

    写组件的时候避免多层嵌套,建议3 4层还最佳

    建议用vuex来管理数据,如果想要在app更好的性能可以使用nvue来开发

    开发体验

    uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异 比如导航栏 我自己研究还不透 先不分享这块了

    关于app调试的时候没有打印出来,那个时候内心是绝望的,升级到1.9.7后就有了,但也不推荐大家盲目的升级,升级之后总有一些奇奇怪怪的bug,比如最近onload的问题

    我还在一边踩坑一边分享,所以这个文章会一直更新


    转载于:https://juejin.im/post/5cdcbb8f5188256001481114

    展开全文
  • uni-app入门(一)--介绍

    千次阅读 2019-08-09 15:30:16
    目录 框架介绍 开发规范 目录结构 生命周期 应用生命周期 页面生命周期 路由 路由跳转 页面栈 运行环境判断 开发环境和生产环境 ...为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-...

    目录

    框架介绍

    开发规范

    目录结构

    生命周期

    应用生命周期

    页面生命周期

    路由

    路由跳转

    页面栈

    运行环境判断

    开发环境和生产环境

    页面样式与布局

    尺寸单位

    样式导入

    内联样式

    选择器

    全局样式与局部样式

    CSS变量

    固定值

    Flex布局

    背景图片

    字体图标


     

    框架介绍

    开发规范

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

    • 页面文件遵循 Vue 单文件组件 (SFC) 规范
    • 组件标签靠近小程序规范,详见uni-app 组件规范
    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
    • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    • 为兼容多端运行,建议使用flex布局进行开发

    目录结构

    一个uni-app工程,默认包含如下目录及文件:

    ┌─components            uni-app组件目录
    │  └─comp-a.vue         可复用的a组件
    ├─hybrid                存放本地网页的目录,详见
    ├─platforms             存放各平台专用页面的目录,详见
    ├─pages                 业务页面文件存放的目录
    │  ├─index
    │  │  └─index.vue       index页面
    │  └─list
    │     └─list.vue        list页面
    ├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
    ├─wxcomponents          存放小程序组件的目录,详见
    ├─main.js               Vue初始化入口文件
    ├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
    ├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
    └─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见

    提示:

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

    生命周期

    应用生命周期

    注意因为表格显示有问题,这里我就直接截的图,表格中的链接请看官方文档:uni-app官方文档

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

    注意

    页面生命周期

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

     

    onPageScroll 参数说明:

    onTabItemTap 参数说明:

     

    注意

    • onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
    • 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的tabitem,并拦截点击事件。
    • onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。

    onNavigationBarButtonTap 参数说明:

    onBackPress 回调参数对象的说明

    路由

    uni-app路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式,不支持 Vue Router

    路由跳转

    uni-app 有两种路由跳转方式:使用navigator组件跳转、调用API跳转。

    页面栈

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

    文档:页面栈

    运行环境判断

    开发环境和生产环境

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

    • 在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境
    • cli模式下,是通行的编译环境处理方式
    if(process.env.NODE_ENV === 'development'){
        console.log('开发环境')
    }else{
        console.log('生产环境')
    }

    快捷代码块

    HBuilderX 中敲入代码块 uEnvDevuEnvProd 可以快速生成对应 developmentproduction 的运行环境判定代码。

    // uEnvDev
    if (process.env.NODE_ENV === 'development') {
        // TODO
    }
    // uEnvProd
    if (process.env.NODE_ENV === 'production') {
        // TODO
    }

    判断平台

    平台判断有2种场景,一种是在编译器判断,一种是在运行期判断。

    • 编译期判断 编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码。详见:条件编译
    // #ifdef H5
        alert("只有h5平台才有alert方法")
    // #endif

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

    • 运行期判断 运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具(在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools)。
    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里不支持:

    • rem 默认根字体大小为 屏幕宽度/20 (微信小程序、头条小程序、App、H5)
    • vh viewpoint height,视窗高度,1vh等于视窗高度的1%
    • vw viewpoint width,视窗宽度,1vw等于视窗宽度的1%

    nvue还不支持百分比单位。

    App端,在pages.json里的titleNView或页面里写的 plus api中涉及的单位,只支持px。注意此时不支持px

    nvue中,uni-app 模式(nvue 不同编译模式介绍)可以使用 px 、rpx,表现与 vue 中一致。weex 模式目前遵循weex的单位,它的单位比较特殊:

    • px:,以750宽的屏幕为基准动态计算的长度单位,与 vue 页面中的 rpx 理念相同。(一定要注意 weex 模式的 px,和 vue 里的 px 逻辑不一样。)
    • wx:与设备屏幕宽度无关的长度单位,与 vue 页面中的 px 理念相同

    下面对 rpx 详细说明:

    设计师在提供设计图时,一般只提供一个分辨率的图。

    严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形。

    而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求。

    微信小程序设计了 rpx 解决这个问题,uni-app 在 App 端、H5 端都支持了 rpx

    rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

    开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下:

    设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

    换言之,页面元素宽度在 uni-app 中的宽度计算公式:

    750 * 元素在设计稿中的宽度 / 设计稿基准宽度

    举例来说:

    • 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。
    • 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。
    • 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。

    Tips

    • 注意 rpx 是和宽度相关的单位,屏幕越宽,该值实际像素越大。如不想根据屏幕宽度缩放,则应该使用 px 单位。
    • 如果开发者在字体或高度中也使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px 。
    • rpx不支持动态横竖屏切换计算,使用rpx建议锁定屏幕方向
    • 设计师可以用 iPhone6 作为视觉稿的标准。
    • 如果设计稿不是750px,HBuilderX提供了自动换算的工具,详见:https://ask.dcloud.net.cn/article/35445
    • App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx。
    • 早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了,详见

    样式导入

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

    示例代码:

    <style>
        @import "../../common/uni.css";
    
        .uni-card {
            box-shadow: none;
        }
    </style>

    内联样式

    框架组件上支持使用style、class属性来控制组件的样式

    • style:静态的样式统一写到class中。style接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。
    <view :style="{color:color}" />
    • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上,样式类名之间用空格分隔
    <view class="normal_view" />

    选择器

    目前支持的选择器有:

    注意:

    • 在uni-app中不能使用 * 选择器。
    • page 相当于 body 节点,例如:
    <!-- 设置页面背景颜色 -->
    page {
      background-color:#ccc;
    }

    全局样式与局部样式

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

    注意:App.vue中通过@import语句可以导入外联样式,一样作用于每一个页面

     

    CSS变量

    uni-app提供内置CSS变量

    注意:

    • var(--status-bar-height)此变量在微信小程序环境为固定 25px ,在5+App里为手机实际状态栏高度
    • 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置,此时可以使用一个高度为 var(--status-bar-height) 的view放在页面顶部,避免页面内容出现在状态栏
    • 由于在H5端,不存在原生导航栏和tabbar,也是前端div模拟。如果设置了一个固定位置的居底view,在小程序和App端是在tabbar上方,但在H5端会与tabbar重叠。此时可使用--window-bottom,不管在哪个端,都是固定在tabbar上方。
    • 目前nvue还不支持css变量

    代码块

    快速书写css变量的方法是:在css中敲hei,在候选助手中即可看到3个css变量。(HBuilderX 1.9.6以上支持)

    示例:

    <template>
        <view>
            <view class="status_bar">
                <!-- 这里是状态栏 -->
            </view>
            <view> 状态栏下的文字 </view>
        </view>
    </template>    
    <style>
        .status_bar {
            height: var(--status-bar-height);
            width: 100%;
        }
    </style>
    <template>
        <view>
            <view class="toTop">
                <!-- 这里可以放一个向上箭头,它距离底部tabbar上浮10px-->
            </view>
        </view>
    </template>    
    <style>
        .toTop {
            bottom: calc(var(--window-bottom) + 10px)
        }
    </style>

    固定值

    uni-app 中以下组件的高度是固定的,不可修改:

    Flex布局

    为支持跨平台,框架建议使用Flex布局,关于Flex布局可以参考外部文档A Complete Guide to Flexbox阮一峰的flex教程等。

    背景图片

    uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目相同,需要注意以下几点:

    • 支持 base64 格式图片。
    • 支持网络路径图片。
    • 使用本地路径背景图片需注意:
    1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
    2. 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
    3. 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
    .test2 {
         background-image: url('~@/static/logo.png');
     }

    字体图标

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

    • 支持 base64 格式字体图标。
    • 支持网络路径字体图标。
    • 网络路径必须加协议头 https
    • 从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
    • uni-app 本地路径图标字体支持情况:
    1. 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;
    2. 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;
    3. 字体文件的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
     @font-face {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }

    示例:

    <template>
        <view>
            <view>
                <text class="test">&#xe600;</text>
                <text class="test">&#xe687;</text>
                <text class="test">&#xe60b;</text>
            </view>
        </view>
    </template>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
        }
        .test {
            font-family: iconfont;
            margin-left: 20rpx;
        }
    </style>

    <template/>和</block>

    uni-app 支持在 template 模板中嵌套 <template/>  <block/>,用来进行 列表渲染 和 条件渲染

    <template/> 和 <block/> 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

    代码示例

    <template>
        <view>
            <template v-if="test">
                <view>test 为 true 时显示</view>
            </template>
            <template v-else>
                <view>test 为 false 时显示</view>
            </template>
        </view>
    </template>
    <template>
        <view>
            <block v-for="(item,index) in list" :key="index">
                <view>{{item}} - {{index}}</view>
            </block>
        </view>
    </template>

    小程序组件支持

    uni-app 支持在 5+App 和小程序中使用小程序组件

    平台差异说明

    此文档要求开发者对各端小程序的自定义组件有一定了解,没接触过小程序自定义组件的可以参考:

    目录结构

    使用方式

     pages.json 对应页面的 style -> usingComponents 引入组件:

    {
        "pages": [
            {
                "path": "index/index",
                "style": {
                    "usingComponents": {
                        // #ifdef APP-PLUS || MP-WEIXIN
                         "custom": "/wxcomponents/custom/index"
                        // #endif
                        // #ifdef MP-BAIDU
                         "custom": "/swancomponents/custom/index"
                        // #endif
                        // #ifdef MP-ALIPAY
                         "custom": "/mycomponents/custom/index"
                        // #endif
                    }
                }
            }
        ]
    }

    在页面中使用

    <!-- 页面模板 (index.vue) -->
    <view>
        <!-- 在页面中对自定义组件进行引用 -->
        <custom name="uni-app"></custom>
    </view>

    注意事项

    • 小程序组件需要放在项目特殊文件夹 wxcomponents(或 mycomponents、swancomponents)。
    • HBuilderX 建立的工程 wxcomponents 文件夹在 项目根目录下。
    • vue-cli 建立的工程 wxcomponents 文件夹在 src 目录下。
    • 注意数据和事件绑定的差异,使用时应按照 vue 的数据和事件绑定方式
      • 属性绑定从 attr="{{ a }}",改为 :attr="a";从 title="复选框{{ item }}" 改为 :title="'复选框' + item"
      • 事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"
      • 阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
      • wx:if 改为 v-if
      • wx:for="{{ list }}" wx:key="{{ index }}" 改为`v-for="(item,index) in list"
      • 原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名,比如:this.$emit('left-click') 修改为 this.$emit('leftClick')(HBuilderX 1.9.0+ 不再需要修改此项)

    详细的小程序转uni-app语法差异可参考文档https://ask.dcloud.net.cn/article/35786

    展开全文
  • 什么是uni-app

    千次阅读 2019-03-04 22:33:09
    uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 为什么要选择uni-appuni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、...
  • uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。 uni-app 继承自 Vue.js...
  • uni-app 第一讲登录功能实现

    万次阅读 热门讨论 2018-10-29 11:42:04
    最近看了一下HBuilderX(一款支持HTML5的Web开发IDE),简单来说就是支持一套代码可以跑android、ios和微信小程序的编写工具。看了一下他官网的案例,整体来说还算不错。就是官方文档比较简陋。很多坑需要自己一步一步...
  • uni-app 页面跳转

    万次阅读 多人点赞 2020-08-04 15:47:12
    今天看Dcloud官网更新了个uni-app,据说一套代码三端发布(Android,iOS,微信小程序),果断一试。 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 ...
  • uni-app使用常见问题总结

    万次阅读 2019-07-15 10:42:01
    HBuilderX提示eslint-vue插件未安装 第一次使用HBuilderX的时候,每次保存文件都会提示eslint-vue插件未安装。 解决方案:菜单栏——工具——插件安装——eslint-plugin-vue卸载重新安装即可 ...
  • uni-app背景图片的设置

    千次阅读 2019-06-18 16:01:43
    关于uni-app背景图片的设置 参考链接: https://blog.csdn.net/weixin_43343144/article/details/90300788
  • 有熟悉uni-app的一定知道,uni-app本来就可以编译打包成为app,为什么还要用原生app套壳,不是增加负担么,其实,这是由于项目中也属需求,暂时uni-app没有办法达到目标,于是使用uni-app开发H5端,再使用原生...
  • uni-app 官方组件使用

    万次阅读 2019-03-11 14:57:24
    最近公司项目需要,开始使用uni-app 期间遇到的问题我都会记录下来,也希望能够帮到更多人,有什么疑问或者文章有什么纰漏的地方还请指点出来 1、下载官方组件,打开编辑器点击左上角文件新建项目选择uni-app,下面...
  • 上次我记录一下如何使用**uni-app**创建项目,并讲解**uni-app**的结构。隔了一个星期在准备ACM就没有写,今天来介绍一下如何引入官方的css样式库。
  • Uni-App - 组件 - 表单组件

    万次阅读 2019-02-20 12:47:31
    文档链接 http://uniapp.dcloud.io/component/button   概述 包含表单及常用表单元素的知识点讲解。
  • uni-app操作DOM节点

    万次阅读 2019-03-01 16:37:13
    最近学到了一个比较好用的框架uni-app,可以做六端适配,学习一下!!! 官网文档找了好久才找到这个。 //获取category-list的高度 let view = uni.createSelectorQuery().select('.category-list'); view....
  • uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 js文件用于定义公用的方法。如果定义多个js文件,并且多个公共js文件配合使用,则需要import引入相应的js文件。 例子 1、在common文件定义...
  • 打开外链网址 <template> <view> <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> <.../template...
  • uni-app中使用字体图标

    万次阅读 2020-09-25 17:03:04
    首先去iconfont下载字体文件,就是下面这6个 在main.js中引入样式 在页面中直接通过样式类名使用 大功告成
1 2 3 4 5 ... 20
收藏数 19,149
精华内容 7,659
关键字:

uni-app