uni-app 下使用ECharts
关键词:uni-app;ECharts;
认知尚浅,如有高见,愿闻其详。
前言:本次的教程与上次的基于WePY 2.x平台下使用ECharts方式基本一致,毕竟目标平台都是微信小程序而已(别的平台未测试),只是就是多了一个参数而已。
本次使用的是仍然是echarts-for-weixin组件,其对小程序进行了兼容适配,我们进行直接下载项 ...
uni-app:使用字体图标(iconfont和yticon)
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。与unicode使用方式相比,具有如下特点:
兼容性良好,支持ie8+,及所有现代浏览器。
相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标,所以当要替换图标时,只需要修 ...
uni-app 使用 nvue 开发 app 踩坑指南 All In One
uni-app 使用 nvue 开发 app 踩坑指南 All In One
uni-app是逻辑和渲染分离的。渲染层,在app端提供了两套排版引擎:小程序方式的webview渲染,和weex方式的原生渲染。
两种渲染引擎可以自己根据需要选。vue文件走的webview渲染,nvue走的原生渲染。
组件和js写法是一样的,css不一样,原生排版的能用的css必须是flex布局, ...
uni-app:uCharts的使用步骤
为何不用Echarts
相比Echarts及F2的复杂的设置,本插件几乎等于傻瓜式的配置。
Echarts在跨端使用更复杂,本插件只需要简单的两个<canvas>标签轻松区别搞定,代码整洁易维护。
Echarts在IOS端图表显示错位,只能引用网页解决。
本插件打包后的体积相比Echarts小很多很多,所以性能更好。
如果您是uni-app初学者,那么强烈 ...
uni-app 中使用组件
在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可
使用方式和生命周期跟vue一样,具体参考
使用:https://www.cnblogs.com/makalochen/p/13870097.html
单文件组件:https://cn.vuejs.org/v2/guide/single-file-components.ht ...
uni-app 两种方式导航跳转和传参
声明式跳转
navigator
页面跳转。
该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。
该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto
属性说明
属性名
类型
默认值
说明
平台差异说明
url
String
应用内的跳转链接,值为相对路径或绝对路径,如 ...
uni-app 条件编译解决跨端兼容问题
https://uniapp.dcloud.io/platform
跨端兼容
uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。
但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
大量写 if else,会造成代码执行性能低下和管理混乱。
编译到不同的工程后二次修改 ...
uni-app 媒体之图片的使用
uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera
OBJECT 参数说明
参数名
类型
必填
说明
平台差异说明
count
Number
否
最多可以选择的图片张数,默认9
见下方说明
sizeType
Array
否
original 原图,compressed 压缩图, ...
uni-app 数据缓存
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
OBJECT 参数说明
参数名
类型
必填
说明
key
String
是
本地缓存中的指定的 key
data
Any
是
需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success
Function
否
...
uni-app 网络请求
uni.request(OBJECT)
https://uniapp.dcloud.io/api/request/request?id=request
发起网络请求。
在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
OBJECT 参数说明
参数名
类型
必填
默认值
说明
平台差异说明
url
String
是
开发者服务器接口地址
data
Object/String/ArrayBuffer
否
...
uni-app 页面样式与布局
官方文档
https://uniapp.dcloud.io/frame?id=页面样式与布局
rpx单位
uni-app 支持的通用 css 单位包括 px、rpx
px 即屏幕像素
rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大,但在 App 端和 H5 端屏幕宽度达到 960px 时,默认将 ...
uni-app全栈仿微信开源项目系列(一)
叮咚项目参考文档 v1.0
项目技术栈:
前端:uni-app + nvue 实现原生页面渲染、同时兼容多端。
后端:Egg.js + MySQL + Redis 实现后端API服务。
不使用第三方组件库,自己写一套。
NVUE需要注意的点
在NVUE中引入字体图标需要参考Weex的引入规则 点我查看
NVUE模式下的页面默认是Flex布局
iconfont图标应该放在tex ...
uni-app内置基础组件
官方文档:
概述
https://uniapp.dcloud.io/vue-components?id=uni-app内置基础组件
组件详情
https://uniapp.dcloud.io/component/README
uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签元素。
但uni-app的组件与HTML不同,而是与小程序相同,更适合手机端使用。
虽然不推荐使用HTML标签,但实际上如果开发 ...
uni-app pages.json常用配置
globalStyle全局配置
pages.json是项目的配置,而这个配置文件里的globalStyle选项是项目的全局样式配置
用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档
属性
类型
默认值
描述
navigationBarBackgroundColor
HexColor
#F7F7F7
导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle
String
whi ...
uni-app使用html2canvas
uni-app html2canvas在web端兼容性挺好的,但是对于app来说就不太行
uni-app App是vue页面,无法获取window对象,所以我们就需要配合render.js来完成canvas的绘制
人为触发比如点击按钮实现起来很方便,但是有时候我们需要进来就执行绘制的方法,那么就需要如下操作:
在开发过程中我们将HTML2canvas封装成一个 ...
使用uni-app给一个按钮点击后修改样式,实现样式切换
<template> <view class="box"> <view class="loginBox"> <view class="popup"> <view class="loginMode"> <view class="account" @click="isAccount" :class="!isshowAccount ? 'isAccMax': 'isAccMin'">账号登录</view> // isshowAccoun ...
UNI-APP_uni-simple-router的快速上手(路由,nui路由拦截)
官网文档:http://www.hhyang.cn/src/router/start/quickstart.html
安装插件npm安装命令:npm install uni-simple-router下载好后会多出这个文件夹
初始化在项目的根目录下创建如下用红框框住的文件夹及文件
modules目录下的index.js内容如下(这个文件主要作用是将所有路由整合成一个数组)
...
【uni-app】subPackages 分包加载机制
起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种“秒开”体验。但是,2MB也限制了小程序功能的扩展,小程序业务的发展可能需要更大的体积。为了解决这个问题,微信推出了—分包加载。
小程序分包加载
对小 ...
【uni-app】easycom模式(自动按需引入组件)
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。 如下:
官网:https://uniapp.dcloud.io/collocation/pages?id=easycom
<template>
<view ...
uni-app小白入门自学笔记(二)
码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14429616.html
目录码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14429616.htmluni的生命周期应用生命周期页面生命周期导航跳转和传参声明式导航:navigator编程式导航:uni.navigateTo(obj)uni.redirect ...