关于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();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/46599.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

k8s logstash多管道配置

k8s logstash多管道配置

背景 采用的是标准的ELKfilebeat架构 ES版本&#xff1a;7.17.15 logstash版本&#xff1a;7.17.15 filebeat版本&#xff1a; 7.17.15 helm版本&#xff1a;7.17.3&#xff0c;官方地址&#xff1a;elastic/helm-charts 说一下为什么会想到使用多管道的原因 我们刚开始…
阅读更多...
PublicCMS：企业级的Java CMS系统

PublicCMS：企业级的Java CMS系统

PublicCMS&#xff1a;企业级的Java CMS系统 在当今互联网飞速发展的时代&#xff0c;PublicCMS作为一款功能强大的开源Java CMS系统&#xff0c;为用户提供了全面的建站解决方案。本文将介绍PublicCMS的基本信息、特点以及如何快速部署和使用。 软件简介 PublicCMS是一款现代…
阅读更多...
[MAUI 项目实战] 笔记App（二）：数据库设计

[MAUI 项目实战] 笔记App（二）：数据库设计

文章目录 Sqlite配置创建实体笔记实体类笔记分组实体笔记片段实体笔记片段负载实体笔记片段仓库实体笔记模板&#xff08;场景&#xff09;实体笔记片段模板实体笔记片段模板负载实体 配置EF创建映射迁移和种子数据项目地址 Sqlite配置 应用程序里使用Sqlite作为数据库&#x…
阅读更多...
Visual Studio 2022美化

Visual Studio 2022美化

说明&#xff1a; VS版本&#xff1a;Visual Studio Community 2022 背景美化 【扩展】【管理扩展】搜索“ClaudiaIDE”&#xff0c;【下载】&#xff0c;安装完扩展要重启VS 在wallhaven下载壁纸图片作为文本编辑器区域背景图片 【工具】【选项】搜索ClaudiaIDE&#xff…
阅读更多...
计算机视觉8 图像增广

计算机视觉8 图像增广

图像增广&#xff08;image augmentation&#xff09;是通过对训练图像进行一系列随机改变&#xff0c;从而产生相似但又不同的训练样本的技术。 图像增广有以下两个主要作用&#xff1a; 扩大训练数据集的规模&#xff1b;随机改变训练样本可以降低模型对某些属性的依赖&#…
阅读更多...
python---迭代器生成器

python---迭代器生成器

迭代器是一种支持next()操作的对象,它包含了一组元素,当执行next()操作时,返回其中一个元素。 当所有元素都被返回后&#xff0c;再执行next()报异常---StopIteration #coding:utf-8 """ 迭代器&#xff1a;对象包含__iter__方法就是一个迭代器 特点:惰性使用,…
阅读更多...
linux 或 mac 系统的操作指令

linux 或 mac 系统的操作指令

sudo 是 "superuser do" 的缩写&#xff0c;它是一个Linux和Unix系统中常用的命令&#xff0c;用于以超级用户&#xff08;root&#xff09;权限执行命令。 lsof -i :8080 lsof 是 "list open files" 的缩写。在 Unix 和类 Unix 操作系统&#xff08;如…
阅读更多...
如何在 Vue 和 JavaScript 中截取视频任意帧图片

如何在 Vue 和 JavaScript 中截取视频任意帧图片

大家好&#xff01;今天我们来聊聊如何在 Vue 和 JavaScript 中截取视频的任意一帧图片。这个功能在很多场景下都非常有用&#xff0c;比如视频编辑、视频预览等。本文将带你一步步实现这个功能&#xff0c;并且会提供详细的代码示例。 准备工作 首先&#xff0c;我们需要一个…
阅读更多...
如何判断c盘d盘e盘哪个是固态硬盘

如何判断c盘d盘e盘哪个是固态硬盘

怎么区分电脑里面的C盘、D 盘、E盘是机械硬盘还是固态硬盘&#xff1f;在电脑里&#xff0c;硬盘是存储数据的核心部件&#xff0c;负责存储操作系统、软件以及用户数据。硬盘的性能也会影响电脑的流畅度。平时我们最常使用的硬盘分为机械硬盘和固态硬盘。在日常使用中&#xf…
阅读更多...
Python酷库之旅-第三方库Pandas(032)

Python酷库之旅-第三方库Pandas(032)

目录 一、用法精讲 91、pandas.Series.set_flags方法 91-1、语法 91-2、参数 91-3、功能 91-4、返回值 91-5、说明 91-6、用法 91-6-1、数据准备 91-6-2、代码示例 91-6-3、结果输出 92、pandas.Series.astype方法 92-1、语法 92-2、参数 92-3、功能 92-4、返回…
阅读更多...
创建tls并替换至Elasticsearch8，实现通过IP实现https访问

创建tls并替换至Elasticsearch8，实现通过IP实现https访问

O、背景 今天在配置Elasticsearch8相关内容&#xff0c;原本很简单就可以应用&#xff0c;安装ES时&#xff0c;可以选择是否使用https&#xff0c;如果就是测试使用的话&#xff0c;或内网使用&#xff0c;直接使用http协议即可&#xff0c;比较简单。但手头的项目比较特殊&a…
阅读更多...
​1：1公有云能力整体输出，腾讯云“七剑”下云端

​1：1公有云能力整体输出，腾讯云“七剑”下云端

【全球云观察 &#xff5c; 科技热点关注】 曾几何时&#xff0c;云计算技术的兴起&#xff0c;为千行万业的数字化创新带来了诸多新机遇&#xff0c;同时也催生了新产业新业态新模式&#xff0c;激发出高质量发展的科技新动能。很显然&#xff0c;如今的云创新已成为高质量发…
阅读更多...
vue3封装el-table及实现表头自定义筛选

vue3封装el-table及实现表头自定义筛选

带完善内容 提示&#xff1a;二合一&#xff0c;封装el-table以及给表头配置类自定义筛选和排序 文章目录 一、pandas是什么&#xff1f; 一、pandas是什么&#xff1f; el-table.vue <template><div class"page-view"><el-table v-loading"ta…
阅读更多...
液氮罐搬运过程中的安全注意事项有哪些

液氮罐搬运过程中的安全注意事项有哪些

在液氮罐搬运过程中&#xff0c;安全性是至关重要的考虑因素。液氮是一种极低温的液体&#xff0c;其温度可达零下196摄氏度&#xff0c;在接触到人体或物体时会迅速引发严重的冷冻伤害。因此&#xff0c;正确的搬运和使用液氮罐是保障操作安全的关键。 液氮是一种无色、无味的…
阅读更多...
RK3568笔记四十：设备树

RK3568笔记四十：设备树

若该文为原创文章&#xff0c;转载请注明原文出处。 一、介绍 设备树 (Device Tree) 的作用就是描述一个硬件平台的硬件资源&#xff0c;一般描述那些不能动态探测到的设备&#xff0c;可以被动态探测到的设备是不需要描述。 设备树可以被 bootloader(uboot) 传递到内核&#x…
阅读更多...
分布式服务框架zookeeper+消息队列kafaka

分布式服务框架zookeeper+消息队列kafaka

一、zookeeper概述 zookeeper是一个分布式服务框架&#xff0c;它主要是用来解决分布式应用中经常遇到的一些数据管理问题&#xff0c;如&#xff1a;命名服务&#xff0c;状态同步&#xff0c;配置中心&#xff0c;集群管理等。 在分布式环境下&#xff0c;经常需要对应用/服…
阅读更多...
项目的一些操作

项目的一些操作

一、发送qq邮箱验证码以及倒计时 要发送验证码需要用到邮箱的授权码&#xff1a; qq邮箱获取方式&#xff0c;打开qq邮箱点设置找到如下界面&#xff1a; 然后获取授权码&#xff1b; 导入依赖 <dependency><groupId>com.sun.mail</groupId><artifactId&…
阅读更多...
cmake configure_package_config_file指令详解

cmake configure_package_config_file指令详解

在 CMake 中&#xff0c;configure_package_config_file 命令用于生成包配置文件&#xff08;Package Configuration File&#xff09;&#xff0c;这些文件用于指定如何使用和链接某个库或工具。通常情况下&#xff0c;这些文件用于支持 CMake 的 find_package 命令来查找和加…
阅读更多...
LeetCode 算法：单词搜索 c++

LeetCode 算法：单词搜索 c++

原题链接&#x1f517;&#xff1a;单词搜索 难度&#xff1a;中等⭐️⭐️ 题目 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通…
阅读更多...
Perl 语言的特点

Perl 语言的特点

Perl 语言入门学习可以涵盖多个方面&#xff0c;包括其特点、基本语法、高级特性以及学习资源和社区支持等。以下是一个详细的入门学习指南&#xff1a; 一、Perl 语言的特点 文本处理能力强&#xff1a;Perl 提供了丰富的字符串处理函数和正则表达式的支持&#xff0c;非常适…
阅读更多...
最新文章

Copyright @ 2022~2023