个人开源uni-app开源项目地址:准备中
在线展示项目地址:准备中
uni,读 you ni
,是统一的意思。
Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位,致力于推进HTML5发展构建,HTML5生态。
2012年,DCloud开始研发小程序技术,优化webview的功能和性能,推出了HBuilder可视化开发工具。
2015年,DCloud正式商用了自己的小程序,产品名为“流应用”,它是能接近原生功能、性能的App,并且即点即用,第一次使用时可以做到边下载边使用。
2016年,微信团队上线小程序业务,但其没有接入联盟标准,而是订制了自己的标准。
技术是纯粹的,不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。
造成混乱的局面非DCloud所愿。于是他们决定开发一个免费开源的框架。
既然各巨头无法在标准上达成一致,那么就通过这个框架为开发者抹平各平台差异。
这,就是uni-app的由来。
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
自 2017-1-9微信小程序诞生以来,小程序的开发生态蓬勃发展,从最初的微信原生开发,到wepy、mpvue、taro、uni-app等框架依次出现,从刀耕火种演进为现代化开发,生态越来越丰富。
选择多了,问题也就来了,开发小程序,该用原生还是选择三方框架?
首先,微信原生开发的槽点大多集中如下:
同时,开发者对三方框架,又总是有各种顾虑:
而uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
使用vue-cli脚手架,创建uniapp工程
vue create -p dcloudio/uni-preset-vue my-project
选择hellow uniapp,项目创建完成后目录结构如下:
cli创建的项目,是传统的node项目结构。工程代码在src目录下,编译器在项目下,编译结果在dist目录下。
npm install
下载相关依赖,npm run dev:h5
运行结果如下
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下:
如果你有一定的VUE与原生JS开发基础
参照下表即可快速上手,理解uni-app框架!
因为uni-app的api是参考小程序的,所以和浏览器的js api有很多不同,如
alert,confirm 改成 uni.showmodel
ajax 改成 uni.request
cookie、session 没有了,local.storage 改成 uni.storage
uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可。详见
uni-app在不同的端,支持条件编译,无限制的使用各端独有的api,详见条件编译
标准的css基本都是支持的。
选择器有以下变化:
*
选择器不支持;元素选择器里没有body,改为了page。微信小程序即是如此。rpx
,全端支持。 尺寸单位文档flex布局
40k
,因为会影响性能。在小程序端,如果要大于40k,需放到服务器侧远程引用或base64后引入,不能放到本地作为独立文件引用。这里没有vue的路由,每个可显示的页面,都必须在 pages.json 中注册。类似小程序的app.json。
uni-app的首页,是在pages.json里配的,page节点下第一个页面就是首页。而原来工程的首页一般是index.html或default.html,是在web server里配的。
app和小程序中,为了提升体验,页面提供了原生的导航栏和底部tabbar,注意这些配置是在pages.json中做,而不是在vue页面里创建,但点击事件的监听在显示的vue页面中做。
相对于页面管理pages.json, 非页面管理,挪入了manifest.json
原来的app.js和app.wxss被合并到了app.vue中
一个uni-app工程,默认包含如下目录及文件:
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录
├─nativeplugins App原生语言插件
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录
| └─ios iOS原生资源目录
├─hybrid App端存放本地html文件的目录
├─wxcomponents 存放小程序组件的目录
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件
├─Info.plist iOS原生应用配置文件
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss 这里是uni-app内置的常用样式变量
uni-app使用vue的数据绑定方式解决js和dom界面交互的问题。
vue老鸟可以无视这条。
相比vue2的import子组件并在components中申明,与Vue3的不声明直接使用,
uni-app的easycom机制,将组件引用进一步优化,开发者只管使用,无需考虑导入和注册,更为高效
标签是老的概念,标签属于浏览器内置的东西。
但组件,是可以自由扩展的。 类似你可以把一段js封装成函数或模块,你也可以把一个ui控件封装成一个组件。
下为html标签和uni-app内置组件的映射表:详见 (打开后搜索组件/标签的变化
)
除了改动外,新增了一批手机端常用的新组件
如果是使用的vue-cli脚手架(理解脚手架到底做了什么) 的方式来构建项目,是传统的node项目结构。
第三方插件仍然需要手动通过npm包管理工具进行安装
在vue页面或nvue页面引入这个原生插件。
使用uni.requireNativePlugin的api,参数为插件的id。
1.在页面引入原生插件,uni.requireNativePlugin 使用后返回一个对象:
const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
2.使用原生插件
dcRichAlert.show({
position: 'bottom',
title: "提示信息",
titleColor: '#FF0000',
content: "<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
contentAlign: 'left',
checkBox: {
title: '不再提示',
isSelected: true
},
buttons: [{
title: '取消'
}, {
title: '否'
}, {
title: '确认',
titleColor: '#3F51B5'
}]
}, result => {
console.log(result)
});
内置原生插件,uni-app已默认集成,支持直接在内置基座运行。
在vue页面,支持引入clipboard,storage,stream,deviceInfo等。
使用方式:可通过uni.requireNativePlugin直接使用。
<template>
<view>
<text class="my-iconfont"></text>
</view>
</template>
<script>
export default{
beforeCreate() {
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
'fontFamily': "myIconfont",
'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"
});
}
}
</script>
<style>
.my-iconfont {
font-family:myIconfont;
font-size:60rpx;
color: #00AAFF;
}
</style>
可以登录uni原生插件市场,在免费的插件详情页中点击“下载for离线打包”下载原生插件(zip格式),解压到nativeplugins目录(如不存在则创建)
uni-app的js代码,h5端运行于浏览器中。非h5端(包含小程序和App),Android平台运行在v8引擎中,iOS平台运行在iOS自带的jscore引擎中,都没有运行在浏览器或webview里。
非H5端,仅仅是不支持window、document、navigator等浏览器的js API,也支持标准ECMAScript。
文章浏览阅读2.7k次。DM 码是一种二维矩阵码,由深浅两种不同灰度的码块组成棋盘的样式,其具有正方形和长方形两种符号形式。图1表示了一个DM 码的区域划分。DM 码由定位图形和数据区域组成,定位图形又由一组垂直的实线边缘和虚线边缘组成,实线边缘形成一个“L”形的特征边,用于提供条码的位置基准和方向基准,虚线边缘由深浅两色码块切换组成,其提供二维条码的尺寸信息;数据区域分布着深色和浅色的码块,分别代表数据位“1”和“0”,通过对条码以编码规则顺序读出每个码块代表的数据位信息,得到一组承载一定信息的数据流,按DM 码的编码协议可译码_dm二维码
文章浏览阅读3.9k次,点赞2次,收藏6次。这是按软件的自由度来分的。main:完全的自由软件。restricted:不完全的自由软件。universe:ubuntu官方不提供支持与补丁,全靠社区支持。muitiverse:非自由软件,完全不提供支持和补丁。..._wily main restricted 和 jammy main restricted universe multiverse
文章浏览阅读3.6w次,点赞99次,收藏450次。[x,Fs]=audioread('test.mp3');x = x(:,1);x = x';N = length(x);%求取抽样点数t = (0:N-1)/Fs;%显示实际时间y = fft(x);%对信号进行傅里叶变换f = Fs/N*(0:round(N/2)-1);%显示实际频点的一半subplot(211);plot(t,x,'g');%绘制时域波形xlabel('Time / (s)');ylabel('Amplitude');title('信号的波形');grid;s_matlab画音频信号的频谱图
文章浏览阅读1.1k次。利用python进行数据分析(其一)NumPy基础NumPy的ndarray:一种多维数组对象创建ndarrayndarray的数据类型NumPy数组的运算基本索引和切片切片索引本文实验环境、工具:anoconda,Jupyter notebook,python3.6NumPy基础NumPy (Numerical Python) 是Python关于数值计算最重要的基础包,可以构建科学计算的库..._python大数据分析总结
文章浏览阅读881次。Asp.net MVC 简单分页:public static string Pager(int page,int pageSize,int total) { var htmlStr = ""; var pageCount = Math.Ceiling((double)total / pageSize);_asp.net mvc 自定义分页
文章浏览阅读6k次,点赞3次,收藏26次。对象中常用的方法: Object.prototype1. hasOwnProperty方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。检测是否为私有属性 即使属性的值是null或undefined,只要属性存在,hasOwnProperty依旧会返回true。检测的属性的String字符串形式表示的名称,或者Symbol。const object1 = {}; object1.property1 = 42; console.log(obj..._对象的方法
文章浏览阅读880次。本文更新于2016.12.12, 加入了扩展章节对于一个互联网企业,后端服务是必不可少的一个组成部分。抛开业务应用来说,往下的基础服务设施做到哪些才能够保证业务的稳定可靠、易维护、高可用呢?纵观整个互联网技术体系再结合公司的目前状况,个人认为必不可少或者非常关键的后端基础技术/设施如下图所示:Api网关业务应用和后端基础框架缓存、数据库、搜索引擎、消息队列文件存储统一认证中心单点登录系统统一配置中_互联网公司基础设施建议
文章浏览阅读1.3k次。使用rpm包手动安装内核 - 您可以手动下载内核的rpm包并使用rpm命令安装。这种方法需要手动下载和安装内核,因此需要更多的手动操作和技能。可以在CentOS官方网站或其他第三方网站上下载内核rpm包。使用源代码手动编译内核 - 可以从Linux内核官方网站下载源代码并手动编译内核。这种方法需要更多的技能和操作,但可以更灵活地定制内核,以适应您的特定需求。使用第三方工具 - 您可以使用第三方工具,例如KernelCare或Ksplice,更新内核而无需重新启动服务器。_rpm方式安装内核
文章浏览阅读6.4k次,点赞3次,收藏14次。vivado2018.3在调试cameralink接口时,synthesis和implement都过了,但生成bit文件时报如下错误[DRC UCIO-1] Unconstrained Logical Port: 6 out of 12 logical ports have no user assigned specificlocation constraint (LOC). This may cause I/O contention or incompatibility with the bo..._[drc ucio-1] unconstrained logical port: 4 out of 12 logical ports have no u
文章浏览阅读2w次,点赞5次,收藏15次。系统环境:CentOS Linux release 7.6.1810 (Core)起因:npm构建时报错npm ERR! Error while executing:npm ERR! /usr/bin/git ls-remote -h -t https://github.com/nhn/raphael.gitnpm ERR! npm ERR! fatal: unable to a..._nhn/raphael.git jenkins
文章浏览阅读1.2k次,点赞2次,收藏5次。一、安装mariadb的依赖包[root@ServerA ~]# cat /etc/redhat-release CentOS Linux release 8.2.2004 (Core) [root@ServerA ~]# # yum install wget bison bison-devel zlib-devel libcurl-devel libarchive-devel boost-devel gcc gcc-c++ cmake ncurses-devel gnutls-devel libxm_yum mariadb 需要pv
文章浏览阅读180次。package prime;public class Prime1 { public static void main(String[] args) { int count=0; for(int i=2;i<=100;i++) { //遍历100内的每个数,但素数从2开始(1不是素数) for(int j=2;j<=i;j++) { //遍历从2到 i内的所有数 //素数只能被1 和它本身整除,如果被除了1和它本身之外的数整除,则不是素数 if(i!=2 &a._java打印素数10个一组