不得不说uniapp引入iconfont确实比较坑.下面方法可行: 引入方法: 1.在confont官网找好图标,然后点击复制代码, 2.点击红圈的复制代码后在网页打开,出现如下: 3.然后再uniapp项目下新建common文件夹,common文件夹下新建iconfont.css.把2步打开的代码复制到iconfont.css.记住要将iconfont.css文件内url路径转换为在线路径即加上https:如下: 4.在App.vue中全局引入该文件@import "./common/icon…

使用 uni-app 做项目时需要用到 iconfont.和 web 使用略有差别.谨以此记录. 因为 uni-app 不能使用本地字体图标库,所以不能直接下载使用. 1.将iconfont中需要的图标,加入购物车,然后放到项目.生成在线代码,稍后用. 2.下载项目至本地.然后解压取出 iconfont.css 文件. 3.将 1 中的在线代码 copy 替换掉 iconfont.css 中的 @font-face.并且加上前缀 https: .完成后如下: 这样就是引用的 阿里巴巴的 在线图标…

uni-app 的uni-ui 的 Icon 图标组件,裡面的图标只是移动端常见的图标,对于一些其他需求所要显示的图标,这个是完全不够用.那么怎么办?模仿它的组件,用阿里巴巴图标矢量库的图标,自己定义一个图标组件呀. 一.uni-app 图标组件 1.组件文件m-icon里面有两个文件,一个是m-icon.css文件一个是m-icon.vue文件 2.m-icon.css 3.m-icon.vue 4.使用 上面就是uni-app 官网的例子.接下来我们就参考这个自己写一个组件. 二.新建组件…

看别人的项目有各种各样的图标既好看占用内存还小 后来才知道原来有icon图标这个东西,原谅我真的一直处于混沌的状态. 刚好最近项目使用了uniapp框架,引入iconfont的方式和之前有些不太一样 1.在阿里iconfont官网上选择完毕自己想要的图标之后 点击添加至项目.2.选择我的项目 下载文件至本地,在APP.vue中引入本地iconfont.css文件 点击Unicode查看复制在线链接 替换iconfont.css内 @font-face {} 里面的内容 APP端切记 // 前方要…

1 首先进入你的iconfont项目 很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目, 解压完就是这个了 ,然后把 圈起来的放到你的项目文件里面 ,记得引入的时候路径别错了,随便放,引入路径对了就行 2 https://www.giftofspeed.com/base64-encoder/ 进入这个网站, 然后把刚刚解压的文件打开 找到 找不到?打死你 重新去官网下载, 然后把这个文件移入到桌面后, 打开上个网站选择文件选择刚刚你移入的那个iconfont.ttf…

步骤一 新建项目 步骤二 导入需要的图标,然后下载图标代码 步骤三  打开下载的压缩文件中的iconfont.css 步骤四 复制粘贴到项目中 步骤四在项目中使用 use in page…

一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un…

前言: 目前正在通过 UNI-APP平台开发移动应用,uni-app平台是去年年出才创建的一个新品台,因此资源相对比较匮乏,在此遇到一个问题,一直使用别人提供的iconfont,但总是不够用,为了解决这个问题,花了些时间给自己也搞了个字体库,如何操作,请看下文. 准备: 阿里巴巴提供资源网址:https://www.iconfont.cn/ 参考文档: https://www.cnblogs.com/xguoz/p/10245641.html  操作: 一.进入网站(长得就是下图这个样子): 二…

1.引入本地iconfont iconfont文件里面包含 iconfont.ttf.iconfont.css, 将 iconfont.tt64文件转位 base64.推荐转换工具地址:https://www.giftofspeed.com/base64-encoder/ 然后打开 iconfont.css文件,修改 @font-face 部分,将转换好的 base64代码粘贴到对应位置,并且设置 代码如下: @font-face { font-family: "iconfont";…

1.将iconfont中需要的图标,添加到购物车,然后添加到自己的项目.生成在线代码. 2.点击下载至本地.然后解压后复制 iconfont.css 文件到你的项目. 3.复制第一步生成的代码,替换iconfont.css中的@font-face,然后再在//.at前边添加https: 4.再App.vue中引入iconfont.css文件 @import url('static/iconfont/iconfont.css'); // 路径根据自己而定 5.使用图标 <span class=&quo…

在 iconfont 将图标下载之后,会有一个 .ttf 后缀的文件 把它放进 static 文件夹里 然后打开在iconfont下载的  demo_index.html  文件 选择 Unicode,找到自己要用的图标 在 pages.json 目录文件下配置,把 &#xe 后面的数字替换到  \ue 后面就可以了…

最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现不了,但是我还是回头看了看文档,才发现,这个功能是可以实现的,只需要在pages.json中做一些配置即可 这个在官方称作app-plus,可以自定义导航区域,具体配置如下: "pages": [ { "path": "pages/index/index&qu…

svg替代iconfont的好处(无论是基于Vue.Jquery),都推荐svg http://www.woshipm.com/pd/463866.html svg图标库,svg图标在线制作 https://icomoon.io/app/#/select svg体积优化 https://jakearchibald.github.io/svgomg/?utm_source=next.36kr.com 示例代码(建议uniapp运行环境,修改也可以vue环境运行,需支持sass处理) <templa…

使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下.uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写,  1.页面布局 通过uni-app提供的标签,进行页面布局,这里就不多讲了,uni-app提供的有这个案例,可以直接把他们的样式拷贝过来修改一下就行. <view class="uni-uploader-body"> <view class="uni-uploader__files…

一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图),图片预览.地图位置.长按菜单.红包/钱包.仿微信朋友圈等功能. 二.测试效果 H5 + 小程序 + App端测试效果如下,实测多端效果均为一致.(后续大图统一展示App端) 二.技术选型 编辑器:HBuilder X 技术框架:uni-app + vue 状态管理:Vuex iconfont图标:阿…

最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "…

1. uniapp之w-picker使用采坑 1.1. 前言 由于我是先在index页面集合了这个组件,发现该文件内容实在太多了,不好维护,所以打算把内容一个个抽成组件,在抽w-picker时,遇到了两个问题 点击取消,会调用方法,但不会产生取消隐藏效果,点击确认也一样,确认函数的确调用了,但w-picker就是不隐藏 watch监听的使用,在uniapp可能有一定局限性,我使用如下形式,在h5可行,在微信小程序连错误都不报,同时也没起到作用 watch:{ 'formData.hospital…

uniapp - editor富文本编辑器用法示例 丢几个图,用心看下去(-.-) 这里使用了https://ext.dcloud.net.cn/plugin?id=412 插件,用于选择字体颜色.其余的话看自己扩展吧. 怎么说呢,示例大概我都已经看完了.不过首次看到官方iconfont,css 字体图标用拼音,且没有示例. 对于手机上的富文本编辑器,我只能说麻烦且鸡肋. 且不多说,可以查看微信官方api:https://developers.weixin.qq.com/miniprogram/…

第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in iconType" :key="index"> <icon class="icon-link iconfont" size="26"/> <text>分析</text> </view>…

uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树形格式,内部包含:id.name 参数 类型 描述 默认值 必选 title string 标题 '' 否 layer number 控制几级联动 1 否 data arr 数据 如:[{text: '', adcode: '', children: [{text: '', adcode: ''}]…

特别注意: ※:在components下的组件,图片路径用 /static/img/back.png  这样的根路径形式,不要用../static  或者 ../../static 的形式,不然很坑,有些平台不报错也不显示,有些找不到路径. tips:防止弹窗遮罩时页面可滚动,在弹窗的外层view标签加上 @touchmove.stop.prevent="" 1.关于自定义导航栏中的刘海屏适配问题: 官方提供了一个CSS变量可以直接引用: var(--status-bar-height…

码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14427845.html 目录 码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14427845.html 环境搭建 创建uni-app 运行uni-app 介绍项目目录,文件作用 页面外观设置 页面底部 tabBar 启动模式配置 condition 数据及事件绑定 组件使用 uni-app中的样式 条件注释实现跨端兼…

uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富的插件生态.支持编译到h5.小程序及App等多个终端平台. 如上图:编译到h5+小程序+App端效果 ◆ 准备 在项目根目录components下新建ua-navbar和ua-tabbar组件. 在main.js中全局引入组件. // 引入自定义组件 import NavBar from './co…

基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive. uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目.支持全屏丝滑般上下滑动切换小视频,迷你时间进度条,Nvue解决视频层级显示,可编译兼容H5+小程序+APP端. ◆ 一览效果 编译至 [小程序+H5+App端] 效果如下 ◆ 运用技术 编辑器:HbuilderX 3.1.21 框架技术:Uniapp+Vue.js+Nvue+Vuex UI组件库:uView-ui^…

uniapp官网 uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝).快应用等多个平台. HBuilderX:官方IDE下载地址 新建uni-app 运行uni-app uniapp 初始化相关配置 工程目录结构 一个uni-app工程,默认包含如下目录及文件: ┌─uniCloud 云空间目录,阿里云为…

iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制作和上传可以参照官网给出的文档:Page 1 图标的下载和使用官网上说的不是很清楚,简单介绍下: 1.首先在Iconfont-阿里巴巴矢量图标库(微博登录)上面将你需要的图标点击购物车按钮加入“暂存架” &amp;lt;img src="https://pic2.zhimg.com/6a10…

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不…

一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图,它不会像位图一样因为缩放而让图片质量下降,在不同分辨率的表现都一样清晰. IconFont是WebFont形式的图标,可以把他认为就是WebFont,制作来自于SVG矢量图,在不同分辨率的表现都一样清晰. 图标类型 构成 优势 劣势 PNG 独立像素点 可以实现各种色彩及真实画面的复现 体积比较大…

很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网络原因,页面虽已经全部加载,引用的 webfont 资源却还未下载成功,这就导致了使用了 webfont 的内容呈现空白状态,没有被渲染出来. 如,访问该网站:http://zurb.com/playground/foundation-icon-fonts-3 为啥国内很少有这种事儿发生?英文字符并…

一．图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用,因此Winform.WPF中都是可以用的. 在我们多个WPF项目中广泛使用了图标字体,包括自定义控件.自定义样式.模板等.总结下: 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常方便,推荐 阿里巴巴开源字体: 字体文件非常小,比使用png等图片文件…