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