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对接一键登录
官方文档地址: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 ...
uni-app攻略:如何对接驰腾打印机
一.引言
在当前的移动开发生态中,跨平台框架如uni-app因其高效、灵活的特点受到了开发者们的青睐。同时,随着物联网技术的飞速发展,智能打印设备已成为许多业务场景中不可或缺的一环。今天,我们就来探讨如何使用uni-app轻松对接驰腾品牌的智能打印机,实现无线打印功能。无论您是初学者还是有经验的开发者,本教程都将 ...
uni-app+vue3会遇到哪些问题
已经用 uni-app+vue3+ts 开发了一段时间,记录一下日常遇见的问题和解决办法
uni-app 中的单端代码
uni-app 是支持多端,如果你想让你的代码,只在部分平台使用,那么就需要用的它的单端处理语法 //#ifdef 和 //#ifndef 等。
1. //#ifdef xxx 只在xxx平台生效
//#ifdef MP-WEIXIN
menuButtonInfo = '微信'
//#endif
2. / ...
使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架
项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold
目录一、前言二、脚手架技术栈简介2.1 uni-app2.2 vue32.3 TypeScript2.4 Pinia2.5 Tailwind CSS2.6 uv-ui2.7 vite三、详细步骤3.1 Node.js安装3.2 创建以 typescript 开发的uniapp工程3.3 集成Pinia3.3.1 安装pinia3.3.2 修改ma ...
uni-app实现生成海报
示例图:
文献参考:
参考文档:https://zhuanlan.zhihu.com/p/597629702
uni-app官网:uni.createSelectorQuery() | uni-app官网
微信小程序官网:canvas | 微信开放文档
海报内容准备:
1、背景图片
2、二维码
3、用户头像,用户名称
4、简短的描述文案
PS:
1、若使用<canvas type="2d" id="myCanvas"></canvas> 则报 ...
uni-app+vue3+ts项目搭建完整流程
项目代码同步更新至码云 uni-vue3-ts-template
开发前准备
利用 uni-app 开发,有两种方法:
通过 HBuilderX 创建(需安装 HBuilderX 编辑器)
通过命令行创建(需安装 NodeJS 环境),推荐使用 vscode 编辑器
这里我们使用第2种方法,这两种方法官方都有详细介绍 点击查看官方文档
vscode 安装插件
安装 Vue3 插件, ...
uniapp-welive仿微信/抖音直播带货|uni-app+vue3+pinia短视频直播商城
基于uniapp+vue3+uv-ui跨端H5+小程序+App短视频+直播带货商城Uniapp-WeLive。
uni-welive一款全新基于uniapp+vue3+pinia+vk-uview等技术跨端仿制抖音/微信直播带货商城项目。支持沉浸式全屏上下滑动短视频直播,Nvue多视频层级覆盖,支持编译到兼容H5+小程序+App端。
预览效果
编译H5+小程序+App端效果如下
使用技术
编辑 ...