湖南中海建设集团有限公司网站,网站开发语言作用,小型餐饮店面设计,wordpress out of memory文章目录 Uniapp项目Web打包部署为什么不部署小程序Web打包前对项目进行调整网站、小程序切换增加constant.js来控制常量将js绑定到main.js的全局变量中 WebSocket差异监听键盘呼出导航条打包部署 后端项目打包部署打包前准备打包部署 Uniapp项目Web打包部署
为什么不部署小程… 文章目录 Uniapp项目Web打包部署为什么不部署小程序Web打包前对项目进行调整网站、小程序切换增加constant.js来控制常量将js绑定到main.js的全局变量中 WebSocket差异监听键盘呼出导航条打包部署 后端项目打包部署打包前准备打包部署 Uniapp项目Web打包部署
为什么不部署小程序
因为小程序部署审核比较严格还需要备案而且我现在还没有完全开发完成研究生开学之后基本没有时间开发了到时候再摸索一下吧。之所以还没有开发完成我就部署是因为我那弱小的服务器已经时日不多了/(ㄒoㄒ)/~~再不部署就白买了 Web打包前对项目进行调整
客户端的开发是基于uniappuniapp的一个优点是支持跨平台一次开发可以多端适配即开发一次可以打包成小程序、网站、安卓等程序但并没有想象的这么简单不同平台之间支持的组件、功能还是有所差距的如下图所示。因为之前的开发是根据微信小程序来开发的如键盘呼出事件的处理、websocket的连接方式、页面的导航条都需要调整 网站、小程序切换
对项目调整让其可以适配网站的前提是不能丧失原有对小程序的适配因此不能直接修改项目的代码来适配网站而是增加代码来完成对网站的适配再增加一个切换开关来控制这样在打包之前就可以控制是打包为小程序还是网站程序
增加constant.js来控制常量 // 类型 0小程序 1网站
const softType 1;
// socket的ip:端口
const socketUrl 23.23.147.200:8085;
// const socketUrl 10.23.17.164:8085;export default {softType,socketUrl
}将js绑定到main.js的全局变量中 import Constant from /constant/constant.js
Vue.prototype.Constant Constant后面直接使用this.Constant.softType来获取常量的值即可 WebSocket差异
【连接差异】
/*** 创建websocket连接*/
initWebsocket() {// console.log(this.socket: JSON.stringify(this.$socket))// this.$socket null刚刚进入首页还没有建立过websocket连接// this.$socket.readyState0 表示正在连接当中// this.$socket.readyState1 表示处于连接状态// this.$socket.readyState2 表示连接正在关闭// this.$socket.readyState3 表示连接已经关闭let socket null;if (this.Constant.softType 0) {socket this.$socket;} else if (this.Constant.softType 1) {socket this.$store.state.ws;}if (socket null || (socket.readyState ! 1 socket.readyState ! 0)) {// --if--小程序类型let socketUrl this.Constant.socketUrl;// console.log(socketUrl: socketUrl)if (this.Constant.softType 0) {this.$socket uni.connectSocket({url: ws:// socketUrl /websocket/ uni.getStorageSync(curUser).userName,success(res) {console.log(WebSocket连接成功, res);},})// 监听WebSocket连接打开事件this.$socket.onOpen((res) {console.log(websocket连接成功)Vue.prototype.$socket this.$socket;// 连接成功开启心跳this.headbeat();});// 连接异常this.$socket.onError((res) {console.log(websocket连接出现异常);// 重连this.reconnect();})// 连接断开this.$socket.onClose((res) {console.log(websocket连接关闭);// 重连this.reconnect();})} else if (this.Constant.softType 1) {// --if--网站类型socket new WebSocket(ws:// socketUrl /websocket/ uni.getStorageSync(curUser).userName);// 网站类型//监听WebSocket连接打开事件let _that this;socket.onopen function() {console.log(websocket连接成功)// Vue.prototype.Constant.WebSocket socket;console.log(常量socket: JSON.stringify(socket));store.commit(SET_WS, socket);// console.log(Vue.prototype.$socket: Vue.prototype.WebSocket)// 连接成功开启心跳_that.headbeat();};socket.onmessage function(msg) {console.log(接收到socket服务器的数据 JSON.stringify(msg))};// 连接异常socket.onerror function() {console.log(websocket连接出现异常);// 重连_that.reconnect();};// 连接断开socket.onclose function() {console.log(websocket连接关闭);// 重连_that.reconnect();};}}
},【发送消息差异】
/*** 发送消息*/
send() {if (this.messageInput ! ) {let message {from: this.me.userName,to: this.you.username,text: this.messageInput}// console.log(this.socket.send: this.$socket)// 将组装好的json发送给服务端由服务端进行转发if (this.Constant.softType 0) {this.$socket.send({data: JSON.stringify(message)});} else if (this.Constant.softType 1) {// 网站类型let socket this.$store.state.ws;socket.send(JSON.stringify(message));}this.total;let newMessage {// code: this.messageList.length,type: 1,content: this.messageInput};this.messageList.push(newMessage);this.messageInput ;this.toBottom();}
},【接收消息差异】
/*** 接收消息*/
receiveMessage() {if (this.Constant.softType 0) {this.$socket.onMessage((response) {// console.log(接收消息 response.data);let message JSON.parse(response.data);let newMessage {// code: this.messageList.length,type: 0,content: message.text};this.messageList.push(newMessage);this.total;// 让scroll-view自动滚动到最新的数据那里this.toBottom();})} else if (this.Constant.softType 1) {// 网站类型let socket this.$store.state.ws;let _that this;socket.onmessage function(response) {console.log(接收消息 response.data);let message JSON.parse(response.data);let newMessage {// code: this.messageList.length,type: 0,content: message.text};_that.messageList.push(newMessage);this.total;// 让scroll-view自动滚动到最新的数据那里_that.toBottom();};}
},监听键盘呼出 onReady() {// 监听键盘高度变化以便设置输入框的高度(适用于小程序不适用于网站)uni.onKeyboardHeightChange(res {if (this.Constant.softType 0) {let keyBoardHeight res.height;this.chatSuitable(keyBoardHeight);}})
},methods: {/*** 键盘呼出适用于网站*/keyboardUp(value, height) {if (this.Constant.softType 1) {this.chatSuitable(height);}},/*** 键盘呼出时聊天框自适应缩短*/chatSuitable(keyBoardHeight) {this.scrollViewHeight calc(100vh - 20px - 44px - ${keyBoardHeight}px);this.scrollToView ;setTimeout(() {this.scrollToView message this.messageList[this.messageList.length - 1].id;}, 150)},
}导航条
使用安卓手机打开网页时上面已经有导航标题了因此可以隐藏掉小程序的标题不然重复的标题显得多余。 uniapp自带的标题无法直接使用代码来隐藏uniapp只提供了设置导航栏的颜色和内容的方法可能是我没有找到 因此我只能想到直接修改配置文件pages.json的方式通过设置navigationStyle为custom来实现当需要切换成小程序来打包时可以通过将custom替换为default来实现 打包
uniapp项目的打包h5程序较为简单首先修改配置文件的运行的基础路径修改为./作用是将程序运行的基础路径设为当前路径而不是默认的根目录使得程序在不同的环境中更加灵活可以更方便地进行部署和迁移 修改完成之后使用菜单栏下面的发行操作即可完成打包
部署
打包成功之后将这两个文件拖入到服务器的文件夹中即可部署我部署的方式使用宝塔面板具体步骤可以学习SpringBootVue 前后端分离 微服务项目 打包部署全流程原始部署/宝塔部署的前端部署下面的宝塔部署。 后端项目打包部署
后端项目基于若依管理系统进行开发
打包前准备
创建两个配置文件来分别存储开发环境和生产环境的配置application.yml可以用来存储开发环境和生产环境的公共配置例如mysql、redis、rabbitmq这些中间件开发时可能是使用的本地电脑进行开发部署时使用的是云服务器因为开发环境和生产环境中中间件的ip和端口有所不同因此使用两个文件来进行区分方便切换 在application.yml中可以指定使用dev还是prod文件当然在打包之前并不需要对其进行修改因为在运行jar包的时候还可以二次指定jar包运行的端口、使用的内存、使用的配置文件……如java -Xmx256M -Xms256M -jar sss-enterprise-0.0.1-SNAPSHOT.jar --server.port6002 --spring.profiles.activeprod 打包
打包直接使用maven工具里面的clean和install命令即可因为若依管理系统已经在pom.xml中内置了打包配置 部署
本文使用的是若依的单机版本并非微服务版本因此只需要在服务器中启动admin的jar包即可具体的操作步骤可以学习SpringBootVue 前后端分离 微服务项目 打包部署全流程原始部署/宝塔部署
