uni-app 之 web-view 与h5 通讯
已经很久没有更新我的博客了,差点要遗忘自己还有博客了,哈哈哈哈。
最近有接触过关于web-view的东西,大家也知道我一直在做uni-app的项目,也研究了很久,收获颇丰吧,今天就跟大家分享一下
什么是web-view
web-view是一个web浏览器组件,可以用来承担网页的容器,会自动铺满整个屏幕
各小程序平台,web-view ...
分析uni-app菊花loading的纯CSS绘制
背景
继上拉加载——本着刨根问底的精神,挖了挖引用的uni-load-more组件,其实现比较容易理解,要说核心点,非CSS绘制的loading莫属了。小小的动画图,用到时直接引用就好了,不不不,千万不要这么想,所谓书到用时方恨少,可不是随口一说便成了千古名句的,没准哪天你就遇上了相关知识点,即使有万能度娘,也不能让你拥 ...
uni-app搜索功能前后端开发(页面)
uni-app搜索功能前后端开发(页面)
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
借助的插件地址
插件地址
展示
前端是使用vue,后端使用Java的springBoot开发
监控搜索框
uni-app
注意根据自己的需求来改
async getSearch(keyword) {
...
uni-app 使用笔记
1.前言
也不知道是我水平菜还是文档太烂,这个框架使用的过程中踩了无数的坑,屡次想砸键盘,最后贫穷让我平复了心情。为了纪念这段操蛋的日子,我决定把这些坑都记录下来。
2.数据请求
在实际的项目中,数据请求需要配合一些UI效果,例如请求数据时展示'loading'效果,数据回来后又要取消这种'loading'效果,既然每次都要使 ...
uni-app微信小程序开发之引入腾讯视频小程序播放插件
登录微信小程序管理后台添加腾讯视频播放插件:
正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示:
在uni-app中引入插件代码:
注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多 ...
【记录】uni-app H5如何给网站设置favicon.icon图标
uni-app H5如何给网站设置favicon.icon图标?
1:首先修改mainfest.json配置文件
2:设置个html页面,我的是新建了一个main.html
html模版如下:(官网地址:https://uniapp.dcloud.io/collocation/manifest?id=h5-template)
<!DOCTYPE html>
<html lang="zh-CN">
...
uni-app x封装request,统一API接口请求
一、概述
uni-app x 提供了 uni.request() 方法。
uni.request({
url: 'https://api.example.com',
method: 'GET'
})
在实际项目开发中,直接使用 uni.request 会带来诸多问题,例如:
重复代码多(如每次都要写 baseURL)
错误处理分散,难以统一管理
缺乏请求/响应拦截能力
Token 注入繁琐
Loading 状态管理 ...
uni-app x使用uview-plus
一、概述
uView-Plus官网提供完整框架文档与资源下载,是兼容多端开发的uni-app生态框架,支持安卓、iOS、微信小程序等10个平台。
uView-Plus官网及框架概述
官网入口:主文档站(uiadmin.net)|GitHub Pages(ijry.github.io)。包含组件文档、工具库说明及快速体验模板 ...
uni-app项目loading显示方案
前情
uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE可视化的运行和打包也让开发体验也非常棒,公司项目就是主推uni-app,为了用户体验对于耗时操作,如接口请求或者异步的API调用都会添加loading效果
原生API使用持性
uni-app项目本身自带有原生交互反馈的API,如s ...
uni-app实现web-view和App之间的互相通信
1.web-view向App传递消息
官网对于uni-app使用web-view的介绍如下:web-view
注意事项提到postMessage方法,这就是web-view向App传递消息的方法,使用如下:
注意H5本身不支持uni-app里面的方法,所以在项目中引入支持调用uni-app方法的库
web-view页面使用:
uni.postMessage({
data: {
...
uni-app项目从0-1基础架构搭建全流程
前情
最近新接了一个全新项目,我负责从0开始搭建小程序,我选用的技术栈是uni-app技术栈,UI库选择的是uview-plus,CSS引入现在流行的tainlwindcss,实现CSS原子化书写,实现小程序分包,分包中实现webview使用和彩蛋页(方便开发和测试使用的功能页),同时实现接口请求、本地缓存等常用工具方法的封装
基础架构主要内容
...
uni-app Android 原生插件开发
uni-app Android 原生插件开发
【转载: uni-app Android 原生插件开发_mb607a58fde255a的技术博客_51CTO博客】
在开发 uni-app 项目时,我们可能会遇到 HBuilderX 提供的功能无法满足需求的情况。这时,通过开发 Android 原生插件来扩展功能是一种有效的解决方案。本文将详细介绍如何开发 Android 原生插件,包括 Module ...
如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
现在使用Uni-app开发手机端APP已经变得很普遍,同一套代码就可以打包成Android App 和 iOS App,相比原生开发,可以节省客观的人力成本。那么如何使用Uni-app来开发视频聊天软件或视频会议软件了?本文将详细介绍在Uni-app中,如何基于OMCS来快速搭建视频聊天程序。
一、准备工作
1.在Uni-app项目的根目录下新建如下目 ...
uni-app 本地打包
1.前言
前期准备:安装Android Studio,HBuilderX,下载App离线SDK下载
资源关联性说明:uni-app其实分为2个包,apk和wgt包,apk包一般情况下是通用的,而开发者业务代码都放在wgt包里面,所谓App离线SDK其实就是apk资源包,这个资源包是一个模板,需要开发者将其种的一些配置替换成自己的(包名,应用名称,版本号,图标, ...
uni-app开发app端pdf.js展示文件流
需求背景
有些PDF文件想要可以在app中查看预览,并且可以分享到微信,但是又不想让人直接获得文件存储地址,所以才用了文件流形式返回数据,(属实搞的焦头烂额)话不多说我们直接开始。
引入PDF.js插件
PDF.js - 入门
点击上面网址打开后选择右侧下载
下载完成后解压会得到web和build两个文件夹,在项目static目录下新建 ...
uni-app微信小程序GPS位置获取爬坑
前情
uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,现在所在公司项目有抖音、快手、微信、支付、APP端,就是使用uni-app来开发的。
坑位
最近接手的项目是需要在下单前获取用户所有位置的GPS信息,再服务端会根据当前用户的GPS信息来判定是否 ...
uni-app对接一键登录
官方文档地址:https://uniapp.dcloud.net.cn/univerify.html
1.
2.开通uniCloud服务
一键登录功能需要用到云空服务空间和云函数所以必须开通服务空间,你一键登录创建的原函数上传后也会存在这里面
3.配置manifest.json ,需要在App模块配置勾选上OAuth(登录鉴权)和一键登录(univerify)
4.
创建云uniClou ...
uni-app小程序项目使用iconfont字体图标
前情
uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验非常棒,公司项目就是主推uni-app。
为什么要这么做?
借助字体图标,我们可以如同操作文字一样操作字体图标。如,颜色的切换、大小的改变
对字体图标进行放大不会出现失真、缩小不会浪费掉像素点
对 ...
uni-app之camera组件-人脸拍摄
小程序录制视频;10-30秒;需要拍摄人脸,大声朗读数字(123456)这种。
1.camera组件
camera页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机
camera只支持小程序使用;官网链接
1.2 效果图
1.3 页面布局
camera 设置宽100%,高度通过uni.getSystemInfo获取,全屏展示。在通过定位把提示文字等信息放上去 ...
uni-app Vue3项目引入Tailwind CSS
前情
Tailwind CSS 是一个原子类 CSS 框架,它将基础的 CSS 全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错。它的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类名,然后生成相应的样式代码并写入到一个静态 CSS 文件中。Tailwind CSS 快速、灵活、可靠,没有运行时负担。自从接 ...