当前位置: 首页 > news >正文

关于UniApp使用的个人笔记

UniApp

开发者中心

用于注册应用以及申请对应证书

https://dev.dcloud.net.cn/pages/app/list

https://blog.csdn.net/fred_kang/article/details/124988303

下载证书后,获取SHA1关键cmd

keytool -list -v -keystore test.keystore  
Enter keystore password: //输入密码,回车

解决h5跨域问题

通过manifest.json里的h5配置来解决跨域问题(注:如果要部署到服务器仍然需要配置nginx)

"h5": {"router": {"mode": "hash"},"devServer": {"port": 8080,"disableHostCheck": true,"proxy": {"/": {"target": "http://localhost:3000","changeOrigin": true,"secure": false}}}}

app文件无法上传非媒体类文件问题

参考文档

核心思路:使用renderjs,uniapp自带的

完整样例

<template><button type="primary" size="mini" @tap="attchChoose.onClick">选择文件</button>
</template>
<script>import {API_SITE} from '@/config/config'import pop from '@/util/pop'import {uploadFile} from '@/common/request.js'export default {data() {return {}},methods: {async upload(path) {try {// pop.showLoading()// 参数一:本地路径,参数二:后端对应字段名,我这里只是进行了简单的封装const result = await uploadFile(path,"files");console.log(result);// pop.showToast("上传成功")} catch (e) {console.log(e);// pop.showToast(e)}},async chooseFile(data) {try {const fileUrl = await this.base64toPath(data.base64Str, data.attachName);this.upload(fileUrl.localAbsolutePath)} catch (e) {console.log("err", e);}},/*** @param {Object} base64 文件base64* @param {Object} attachName //文件名需要后缀,如:张三.jpg*/async base64toPath(base64, attachName) {let _that = this;return new Promise(function(resolve, reject) {const filePath = `_doc/yourFilePath/${attachName}`;plus.io.resolveLocalFileSystemURL('_doc', function(entry) {entry.getDirectory("yourFilePath", {create: true,exclusive: false,}, function(entry) {entry.getFile(attachName, {create: true,exclusive: false,}, function(entry) {entry.createWriter(function(writer) {writer.onwrite = function(res) {const obj = {relativePath: filePath,localAbsolutePath: plus.io.convertLocalFileSystemURL(filePath)}resolve(obj);}writer.onerror = reject;writer.seek(0);writer.writeAsBinary(_that.getSymbolAfterString(base64,','));}, reject)}, reject)}, reject)}, reject)})},// 取某个符号后面的字符getSymbolAfterString(val, symbolStr) {if (val == undefined || val == null || val == "") {return "";}val = val.toString();const index = val.indexOf(symbolStr);if (index != -1) {val = val.substring(index + 1, val.length);return val;} else {return val}}}}
</script>
<script module="attchChoose" lang="renderjs">let fileInputDom = null;export default {methods: {createFileInputDom() {fileInputDom = document.createElement("input");fileInputDom.setAttribute('type', 'file');fileInputDom.setAttribute('accept', '*');},onClick(event, ownerInstance) {if (!fileInputDom) {this.createFileInputDom();}fileInputDom.click(); // 模拟clickfileInputDom.addEventListener('change', (e) => {fileInputDom = null;let choicesFiles = e.target.files[0];let reader = new FileReader();//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.srcreader.readAsDataURL(choicesFiles);reader.onload = function(event) {const base64Str = event.target.result; // 文件的base64ownerInstance.callMethod('chooseFile', {attachName: choicesFiles.name,size: choicesFiles.size,base64Str,})}e.target.value = "";})}}}
</script>

本地打包

生成key的方法

keytool -genkey -alias costmgr -keyalg RSA -keysize 2048 -validity 36500 -keystore costmgr.keystore

查看内容

keytool -list -v -keystore  costmgr.keystore

不推荐,虽然打包很快,但很多设置需要加入,还有对应sdk(消息推送各个厂商sdk,uniapp自己的sdk等)

H5打包

需要nginx进行代理api接口

nginx 修改配置

 server {listen      80;server_name obsidianlyg.top;location / {root   /root/mobile/html;index  index.html index.htm;}location /rest/ {proxy_pass http://obsidianlyg.top/rest/;}}

web文件修改,需要将api接口改为相对url

以当前nginx配置为例:

这里仅做参考,后期可以直接放入store中通过uniapp独有的#ifdef H5注释可以自动判别

// 封装请求方法
function request(url, method, data) {return new Promise((resolve, reject) => {uni.request({// app// url: 'https://obsidianlyg.top' + url,// 网页专属url: url,method: method,data: data,header: {'Content-Type': 'application/json', },success: (res) => {if (res.statusCode === 200) {resolve(res.data);} else {reject(res);}},fail: (err) => {reject(err);},});});
}

App远程打包

命令行打包

消息发送

本地消息发送

// 开启Socket
let socket;export function connectWebSocket(empId) {socket = uni.connectSocket({url: 'ws://obsidianlyg.top/ws/' + empId,complete: () => {}});socket.onOpen(() => {console.log('WebSocket连接已打开');});socket.onMessage((res) => {console.log('收到消息:', res.data);sendNotification('新消息', res.data);});socket.onClose(() => {console.log('WebSocket连接已关闭');// 可以在这里实现重连逻辑});socket.onError((err) => {console.error('WebSocket连接错误:', err);});
}function sendNotification(title, message) {uni.createPushMessage({title: title,content: message,success: function (res) {console.log('推送消息发送成功', res);},fail: function (err) {console.error('推送消息发送失败', err);}});
}// 在页面加载时调用connectWebSocket
// connectWebSocket();

消息推送

采用uni-cloud-push,实际也是使用的WebSocket,接入云端,app离线后仍然接收不到消息,但是再次打开app后可以接收到原来发送的消息

需要申请各个手机品牌的appid接入后才能实现离线接收消息

参考文档

实现云函数代码

'use strict';  
const uniPush = uniCloud.getPushManager({appId:"__UNI__A0D029F"}) 
exports.main = async (event) => {  let obj = JSON.parse(event.body)  //这是重点 解析json字符串const res = await uniPush.sendMessage({  "push_clientid": obj.cids, // 设备id,支持多个以数组的形式指定多个设备,如["cid-1","cid-2"],数组长度不大于1000  "title": obj.title, // 标题  "content": obj.content, // 内容  "payload": obj.data, // 数据  "force_notification": true,  // true 自动创建通知栏,没有回调;false 无通知栏,触发onMessage回调 "request_id": obj.request_id ,//请求唯一标识号,10-32位之间;如果request_id重复,会导致消息丢失  "options":obj.options //消息分类,没申请可以不传这个参数  })  return res;  
};

设置手机通知权限提示

setPermissions,这个方法可以放入onLaunch,但是其下方不能放入其他方法,会被阻止,所以需要将对应方法加入到created中(虽然可以放到上方,但是测试发现使用uni自带api获取远端信息的方法加入后,setPermissions无法正常运行)

// 设置手机通知权限setPermissions() {let bool = uni.getStorageSync("notificationStatus");// #ifdef APP-PLUS  if (plus.os.name == 'Android') { // 判断是Androidvar main = plus.android.runtimeMainActivity();var pkName = main.getPackageName();var uid = main.getApplicationInfo().plusGetAttribute("uid");var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");//android.support.v4升级为androidxif (NotificationManagerCompat == null) {NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");}var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();// 未开通‘允许通知’权限,则弹窗提醒开通,并点击确认后,跳转到系统设置页面进行设置  if (!areNotificationsEnabled && !bool) {uni.showModal({title: '通知权限开启提醒',content: '您还没有开启通知权限,无法接受到消息通知,请前往设置!',// showCancel: false,confirmText: '去设置',success: function(res) {if (res.confirm) {var Intent = plus.android.importClass('android.content.Intent');var Build = plus.android.importClass("android.os.Build");//android 8.0引导  if (Build.VERSION.SDK_INT >= 26) {var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);} else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0  var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');intent.putExtra("app_package", pkName);intent.putExtra("app_uid", uid);} else { //(<21)其他--跳转到该应用管理的详情页  intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);intent.setData(uri);}// 跳转到该应用的系统通知设置页  main.startActivity(intent);} else {console.log(res,"cancel");uni.setStorageSync("notificationStatus", false);}}});}} else if (plus.os.name == 'iOS') { // 判断是ISOvar isOn = undefined;var types = 0;var app = plus.ios.invoke('UIApplication', 'sharedApplication');var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');if (settings) {types = settings.plusGetAttribute('types');plus.ios.deleteObject(settings);} else {types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');}plus.ios.deleteObject(app);isOn = (0 != types);if (isOn == false && !bool) {uni.showModal({title: '通知权限开启提醒',content: '您还没有开启通知权限,无法接受到消息通知,请前往设置!',// showCancel: false,confirmText: '去设置',success: function(res) {if (res.confirm) {var app = plus.ios.invoke('UIApplication', 'sharedApplication');var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');plus.ios.invoke(app, 'openURL:', setting);plus.ios.deleteObject(setting);plus.ios.deleteObject(app);} else {uni.setStorageSync("notificationStatus", false);}}});}}// #endif  },

清除缓存

  1. 移除指定缓存
uni.removeStorageSync("key值"); 
  1. 清空所有缓存
uni.clearStorageSync(); 

相关文章:

关于UniApp使用的个人笔记

UniApp 开发者中心 用于注册应用以及申请对应证书 https://dev.dcloud.net.cn/pages/app/list https://blog.csdn.net/fred_kang/article/details/124988303 下载证书后&#xff0c;获取SHA1关键cmd keytool -list -v -keystore test.keystore Enter keystore password…...

autoware.universe源码略读(3.16)--perception:object_range_splitter

autoware.universe源码略读3.16--perception:object_range_splitter Overviewnode&#xff08;Class Constructor&#xff09;ObjectRangeSplitterNode::ObjectRangeSplitterNode&#xff08;mFunc&#xff09;ObjectRangeSplitterNode::objectCallback Overview 这里处理的依…...

深度学习落地实战:人脸五官定位检测

前言 大家好,我是机长 本专栏将持续收集整理市场上深度学习的相关项目,旨在为准备从事深度学习工作或相关科研活动的伙伴,储备、提升更多的实际开发经验,每个项目实例都可作为实际开发项目写入简历,且都附带完整的代码与数据集。可通过百度云盘进行获取,实现开箱即用 …...

270-VC709E 基于FMC接口的Virtex7 XC7VX690T PCIeX8 接口卡

一、板卡概述 本板卡基于Xilinx公司的FPGA XC7VX690T-FFG1761 芯片&#xff0c;支持PCIeX8、两组 64bit DDR3容量8GByte&#xff0c;HPC的FMC连接器&#xff0c;板卡支持各种FMC子卡扩展。软件支持windows&#xff0c;Linux操作系统。 二、功能和技术指标&#xff1a; 板卡功…...

【go】Excelize处理excel表 带合并单元格、自动换行与固定列宽的文件导出

文章目录 1 简介2 相关需求与实现2.1 导出带单元格合并的excel文件2.2 导出增加自动换行和固定列宽的excel文件 1 简介 之前整理过使用Excelize导出原始excel文件与增加数据校验的excel导出。【go】Excelize处理excel表 带数据校验的文件导出 本文整理使用Excelize导出带单元…...

uniapp自定义tabBar

uniapp自定义tabBar 1、在登录页中获取该用户所有的权限 getAppFrontMenu().then(res>{if(res.length > 0){// 把所有权限存入缓存中let firstPath res.reverse()[0].path;uni.setStorageSync(qx_data, res);uni.switchTab({url: firstPath,})// 方法二 通过uni.setTabB…...

IDEA2023版本创建JavaWeb项目及配置Tomcat详细步骤!

一、创建JavaWeb项目 第一步 之前的版本能够在创建时直接选成Web项目&#xff0c;但是2023版本在创建项目时没有该选项&#xff0c;需要在创建项目之后才能配置&#xff0c;首先先创建一个项目。 第二步 在创建好的项目中选中项目后&#xff08;一定要注意选中项目名称然后继…...

WPF中MVVM常用的框架

在WPF开发中&#xff0c;MVVM&#xff08;Model-View-ViewModel&#xff09;是一种广泛使用的设计模式&#xff0c;它有助于分离应用程序的用户界面&#xff08;View&#xff09;、业务逻辑&#xff08;Model&#xff09;和数据表现层&#xff08;ViewModel&#xff09;。以下是…...

Mysql----内置函数

前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、日期函数 日期&#xff1a;年月日 时间&#xff1a;时分秒 查询&#xff1a;当前时间&#xff0c;只显示当前日期 注意&#xff1a;如果类型为date或者datetime。表中数据类型为date,你插入时…...

去除重复字母

题目链接 去除重复字母 题目描述 注意点 s 由小写英文字母组成1 < s.length < 10^4需保证 返回结果的字典序最小&#xff08;要求不能打乱其他字符的相对位置&#xff09; 解答思路 本题与移掉 K 位数字类似&#xff0c;需要注意的是&#xff0c;并不是每个字母都能…...

Xcode进行真机测试时总是断连,如何解决?

嗨。大家好&#xff0c;我是兰若姐姐。最近我在用真机进行app自动化测试的时候&#xff0c;经常会遇到xcode和手机断连&#xff0c;每次断连之后需要重新连接&#xff0c;每次断开都会出现以下截图的报错 当这种情况出现时&#xff0c;之前执行的用例就相当于白执行了&#xff…...

Redis的使用(五)常见使用场景-分布式锁实现原理

1.绪论 为了解决并发问题&#xff0c;我们可以通过加锁的方式来保证数据的一致性&#xff0c;比如java中的synchronize关键字或者ReentrantLock&#xff0c;但是他们只能在同一jvm进程上加锁。现在的项目基本上都是分布式系统&#xff0c;如何对多个java实例进行加锁&#xff…...

AppML 案例:Products

AppML 案例&#xff1a;Products AppML&#xff08;Application Markup Language&#xff09;是一种创新的、基于XML的标记语言&#xff0c;旨在简化Web应用程序的开发。它允许开发者通过声明性的方式定义应用程序的界面和数据绑定&#xff0c;从而提高开发效率和减少代码量。…...

数据库端口LookUp功能:从数据库中获取并添加数据到XML

本文将为大家介绍如何使用知行之桥EDI系统数据库端口的Lookup功能&#xff0c;从数据库中获取数据&#xff0c;并添加进输入的XML中。 使用场景&#xff1a;期待以输入xml中的值为判断条件从数据库中获取数据&#xff0c;并添加进输入xml中。 例如&#xff1a;接收到包含采购…...

视频联网共享平台LntonCVS视频监控汇聚平台视频云解决方案

LntonCVS流媒体平台是一款遵循国家GB28181标准协议的先进视频监控与云服务平台。该平台设计独特&#xff0c;能够同时接入并处理多路设备的视频流&#xff0c;支持包括RTSP、RTMP、FLV、HLS、WebRTC在内的多种视频流格式的分发。其功能丰富多样&#xff0c;涵盖了视频直播监控、…...

深入探索Python中的`__slots__`类属性:优化内存与限制灵活性

深入探索Python中的__slots__类属性&#xff1a;优化内存与限制灵活性 在Python编程的广阔领域中&#xff0c;性能优化总是开发者们关注的焦点之一。特别是在处理大量对象或资源受限的环境中&#xff0c;减少内存占用和提高访问速度显得尤为重要。Python的__slots__类属性正是…...

llama 2 改进之 RMSNorm

RMSNorm 论文&#xff1a;https://openreview.net/pdf?idSygkZ3MTJE Github&#xff1a;https://github.com/bzhangGo/rmsnorm?tabreadme-ov-file 论文假设LayerNorm中的重新居中不变性是可有可无的&#xff0c;并提出了均方根层归一化(RMSNorm)。RMSNorm根据均方根(RMS)将…...

Matlab【光伏预测】基于雪融优化算法SAO优化高斯过程回归GPR实现光伏多输入单输出预测附代码

% 光伏预测 - 基于SAO优化的GPR % 数据准备 % 假设有多个输入特征 X1, X2, …, Xn 和一个目标变量 Y % 假设数据已经存储在 X 和 Y 中&#xff0c;每个变量为矩阵&#xff0c;每行表示一个样本&#xff0c;每列表示一个特征 % 参数设置 numFeatures size(X, 2); % 输入特征的…...

ES6 模块

ES6 模块学习记录 ES6&#xff08;ECMAScript 2015&#xff09;模块是JavaScript官方的标准模块系统。它允许开发者以模块化的方式编写代码&#xff0c;模块可以在不同的文件之间进行组织和重用。 基本特征 默认导出&#xff08;Default Exports&#xff09;&#xff1a;每个…...

谷粒商城-全文检索-ElasticSearch

1.简介 一个分布式的开源搜索和分析引擎,可以 秒 级的从海量数据中检索 主要功能:做数据的检索和分析(MySQL专攻于数据的持久化存储与管理CRUD达到百万以上的数据MSQL就会很慢,海量数据的检索和分析还是要用ElasticSearch) 用途:我们电商项目里的所有的检索功能都是由Elasti…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...