关于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自带的
完整样例
选择文件
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
}
}
}
}
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(); // 模拟click
fileInputDom.addEventListener('change', (e) => {
fileInputDom = null;
let choicesFiles = e.target.files[0];
let reader = new FileReader();
//读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
reader.readAsDataURL(choicesFiles);
reader.onload = function(event) {
const base64Str = event.target.result; // 文件的base64
ownerInstance.callMethod('chooseFile', {
attachName: choicesFiles.name,
size: choicesFiles.size,
base64Str,
})
}
e.target.value = "";
})
}
}
}
本地打包
生成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') { // 判断是Android
var 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升级为androidx
if (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 { //(
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。
