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 快速、灵活、可靠,没有运行时负担。自从接 ...
uni-app使用天地图
原因:
由于主流地图(百度,高德,腾讯)商用收费属实昂贵,不得已很多人开始转战天地图。
方案:
天地图想要在uniapp项目中正常使用目前的方案有两种
1.通过web-view将html天地图嵌入项目中
优点:可以同时兼容微信小程序和APP
缺点:地图嵌入后数据交互繁琐,小程序兼容了,但是兼的不是很容 ...
uni-app h5 使用微信JSSDK的方式
综合各方经验及文档总结了以下我的使用方法,希望对有需要的同学有些帮助第一步:npm install jweixin-module --save第二步:common文件夹新建js文件,我这里命名jwx.js
jwx.js 文件内容
var jWeixin = require('jweixin-module');
export default {
//判断是否在微信中
isWechat: function() {
...
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: {
...
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。
uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目,支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。
预览图
编译至h5+App端+小程序端 ...
uni-app 中如何使用echart
uni-app 中如何使用echart
• 1. 安装 ECharts
• 2. 引入 ECharts
• 对于 Vue 单文件组件(.vue 文件)
• 对于使用 uni-app 插件市场的 ECharts 插件
• 3. 创建图表容器
• 4. 初始化图表
• 5. 配置图表
• 6. 更新图表数据
• 注意事项
...
Uni-app 之uni-push1.0服务端推送
一、配置
1、uni-push1.0文档
https://uniapp.dcloud.net.cn/unipush-v1.html
2、服务端推送文档
https://docs.getui.com/getui/server/rest_v2/push/
二、客户端
1、App.vue
import phoneInfo from '@/common/js/phone-info.js';
import uniPushListener from '@/common/js/unipush.js';
import updateApp from '@/common ...