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实战商城类app和小程序

    千人学习 2020-03-09 15:31:20
    本季度为uni-app实战项目第2季度,将实战商城类app和小程序,其中会包括发布到安卓端app,iOS端app、微信小程序,另外还会涉及Weex(nvue),Vuex模块化管理,商城支付模块等。 课程大纲见以下图!
  • 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开发流程一(项目搭建)

    万次阅读 2019-07-01 15:29:14
    uni-app其实是DCloud推出的众多产品之一,当然我只研究目前能用到的 DCloud的官网:https://www.dcloud.io/ uni-app的官网:https://uniapp.dcloud.io/ uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者...

    uni-app其实是DCloud推出的众多产品之一,当然我只研究目前能用到的

    DCloud的官网:https://www.dcloud.io/

    uni-app的官网:https://uniapp.dcloud.io/

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

    1.开始阶段:

    公司想要将现有的几个前端项目合二为一,又想兼顾h5和小程序(目前),以后可能有app,容我调研一番,简而言之,一套代码,兼容多端,在网上调研发现了个这个比较,非常详细:

    来源地址:https://juejin.im/post/5c4ec383f265da613e229a67,有兴趣可以看一下

    经过我在官网和加入官方QQ群之后,感觉还不错,其实vue的多端兼容平台也就那么几个。。。

    2.选用uni-app

    选用之后,先写demo,看一下难易程度,发现会vue的开发人员能很容易上手,而同时写过小程序的就更容易了,它的api和生命周期是和小程序一模一样的,在自定义组件和编程上遵循vue2.0的规范。

    3.项目搭建

    (1)下载官方推荐编辑器:hbuilderx下载地址

    页面点击右上角下载APP开发版

    在编辑器上直接新建项目,也是非常方便的。

    (2)在HBuilderX界面中点击 工具 - 插件安装,依次安装
    NPM,内置浏览器,UniApp编译,js-beautify,js压缩,css压缩,less编译,scss/sass编译,es6编译等等

    (3)点击工具 - 设置 - 运行配置,
    设置浏览器运行配置里的Chrome安装路径为本机的真实Chrome安装路径
    如:C:/Users/yeyiqing/AppData/Local/Google/Chrome/Application/chrome.exe
    设置小程序运行配置里的微信开发者安装路径为本机的真实微信开发者安装路径
    如:E:/warespace/微信web开发者工具
    设置node运行配置里的node路径为本机的真实node安装路径
    如:C:/Program Files/nodejs/node.exe

    (4)在项目里的manifest.json里找到微信小程序配置,更改小程序AppID

    (5)先打开微信开发者工具,点击设置-代理设置,选择不适用任何代理...
    如需运行:
    先在BuilderX里打开pages下的login.vue页面
    选择HBuilderX界面: 运行-运行到浏览器-Chrome
    运行-运行到小程序-微信开发者工具
    如需打包:
    点击;发行 - H5手机版发行 - 发行
    发行 - 小程序微信 - 发行
    信息会打印到下方控制台里...

    最后,多看官方文档。。。

    展开全文
  • uni-app  转义多空格失效解决方法

    千次阅读 2019-09-20 14:56:08
    white-space: pre-wrap;
    white-space: pre-wrap;
    
    展开全文
  • 两个“\”转义 vue中的image如下 <image :src="paidImgUrl" mode=""></image> paidImgUrl的值如下 paidImgUrl:...页面渲染以后 ...实际地址是能拿到图的,但是在页面上面没有显示,他去获取的...
  • uniapp开发H5时,基本上都会遇到跨域问题: 下面是个完整的请求示例: 关键在于header请求头: header: { 'Access-Control-Allow-Origin': '*', //跨域加上头 ...
  • uni-app之bug汇集

    2019-12-29 15:27:03
    uni-app,在view 或者text中使用了< 或> 符号报错,用转义后的&lt;和&gt; 依然还是不行,H5没报错,真机编译就报错,报错如下: 用text的decode设置为true也解决不了该问题 最后无奈用...
  • uniapp跳转页面带url参数 不被转义

    千次阅读 2019-08-10 15:25:11
    uni.navigateTo({ url:`../product/ratings/publish/publish?ID=${item}`, })
  • uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。 uni-app 继承自 Vue.js...
  • uni-app 从入门到放弃(持续更新)

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

    千次阅读 2019-09-10 23:10:47
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 即使不跨端,uni-app同时也是更好的小程序开发...
  • uni-app开发环境搭建&创建uni-app项目

    千次阅读 2019-08-22 13:13:59
    本文是关于使用uni-app的第一次笔记,至于有没有第二次,看我接下来的心情了!本文首先教你如何搭建uni-app开发环境,然后创建uni-app项目。 uni-app使用了快半个月了,现在准备来系统的学习一下uni-app,并做一些...
  • uni-app uni-app创建和运行uni-app创建和运行1. 通过 HBuilderX 可视化界面创建uni-app运行uni-app2. 通过vue-cli命令行环境安装创建uni-app运行、发布uni-app3. 使用cli创建项目和使用HBuilderX可视化界面创建项目...
  • uni-appAPP和小程序微信授权

    万次阅读 多人点赞 2019-01-05 10:27:16
    uni-appAPP和小程序微信授权uni-app 介绍APP微信授权检测服务商授权登录获取用户信息示例代码小程序微信授权获取用户基本信息微信登录微信登录状态监测 uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的...
  • uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 DCloud公司拥有420万开发者,几十万应用案例、6.5...
  • uni-app开发app之一uni-app优缺点

    千次阅读 2019-10-23 11:01:09
    uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。 优点二: uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。...
  • 在学习uni-app之前最好有vue和微信小程序的基础,因为uni-app是一个跨平台的开发框架,它里面不少语法是结合vue和小程序中的语法来写的。 因为本人在学习之前有使用过vue-cli来创建项目,在这里直接使用vue-cli3来...
  • uni-app 官方组件使用

    万次阅读 2019-03-11 14:57:24
    最近公司项目需要,开始使用uni-app 期间遇到的问题我都会记录下来,也希望能够帮到更多人,有什么疑问或者文章有什么纰漏的地方还请指点出来 1、下载官方组件,打开编辑器点击左上角文件新建项目选择uni-app,下面...
1 2 3 4 5 ... 20
收藏数 19,656
精华内容 7,862
关键字:

uni-app