Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
xianna.liang
/
ChatScreen
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

feat:初始化

xianna.liang 9 сар өмнө
commit
7ab26393ed
16 өөрчлөгдсөн 517 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 16 0
      .vscode/launch.json
  2. 17 0
      App.vue
  3. 20 0
      index.html
  4. 22 0
      main.js
  5. 77 0
      manifest.json
  6. 13 0
      package-lock.json
  7. 12 0
      package.json
  8. 19 0
      pages.json
  9. 102 0
      pages/index/index.vue
  10. BIN
      static/Ai-avatar.png
  11. BIN
      static/logo.jpg
  12. BIN
      static/logo.png
  13. BIN
      static/user-avatar.png
  14. 133 0
      theme/chat.css
  15. 10 0
      uni.promisify.adaptor.js
  16. 76 0
      uni.scss

+ 16 - 0
.vscode/launch.json
Файл харах 

@@ -0,0 +1,16 @@
 
+{
 
+    // Use IntelliSense to learn about possible attributes.
 
+    // Hover to view descriptions of existing attributes.
 
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 
+    "version": "0.2.0",
 
+    "configurations": [
 
+    
+        {
 
+            "type": "chrome",
 
+            "request": "launch",
 
+            "name": "Launch Chrome against localhost",
 
+            "url": "http://localhost:8080",
 
+            "webRoot": "${workspaceFolder}"
 
+        }
 
+    ]
 
+}

+ 17 - 0
App.vue
Файл харах 

@@ -0,0 +1,17 @@
 
+<script>
 
+	export default {
 
+		onLaunch: function() {
 
+			console.log('App Launch')
 
+		},
 
+		onShow: function() {
 
+			console.log('App Show')
 
+		},
 
+		onHide: function() {
 
+			console.log('App Hide')
 
+		}
 
+	}
 
+</script>
 
+
 
+<style>
 
+	/*每个页面公共css */
 
+</style>

+ 20 - 0
index.html
Файл харах 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <script>
 
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
 
+        CSS.supports('top: constant(a)'))
 
+      document.write(
 
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
 
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
 
+    </script>
 
+    <title></title>
 
+    <!--preload-links-->
 
+    <!--app-context-->
 
+  </head>
 
+  <body>
 
+    <div id="app"><!--app-html--></div>
 
+    <script type="module" src="/main.js"></script>
 
+  </body>
 
+</html>

+ 22 - 0
main.js
Файл харах 

@@ -0,0 +1,22 @@
 
+import App from './App'
 
+
 
+// #ifndef VUE3
 
+import Vue from 'vue'
 
+import './uni.promisify.adaptor'
 
+Vue.config.productionTip = false
 
+App.mpType = 'app'
 
+const app = new Vue({
 
+  ...App
 
+})
 
+app.$mount()
 
+// #endif
 
+
 
+// #ifdef VUE3
 
+import { createSSRApp } from 'vue'
 
+export function createApp() {
 
+  const app = createSSRApp(App)
 
+  return {
 
+    app
 
+  }
 
+}
 
+// #endif

+ 77 - 0
manifest.json
Файл харах 

@@ -0,0 +1,77 @@
 
+{
 
+    "name" : "Chat",
 
+    "appid" : "__UNI__E15E1AD",
 
+    "description" : "",
 
+    "versionName" : "1.0.0",
 
+    "versionCode" : "100",
 
+    "transformPx" : false,
 
+    /* 5+App特有相关 */
 
+    "app-plus" : {
 
+        "usingComponents" : true,
 
+        "nvueStyleCompiler" : "uni-app",
 
+        "compilerVersion" : 3,
 
+        "splashscreen" : {
 
+            "alwaysShowBeforeRender" : true,
 
+            "waiting" : true,
 
+            "autoclose" : true,
 
+            "delay" : 0
 
+        },
 
+        /* 模块配置 */
 
+        "modules" : {},
 
+        /* 应用发布信息 */
 
+        "distribute" : {
 
+            /* android打包配置 */
 
+            "android" : {
 
+                "permissions" : [
 
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
 
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
 
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
 
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
 
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
 
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
 
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
 
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
 
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
 
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
 
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
 
+                ],
 
+                "abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
 
+            },
 
+            /* ios打包配置 */
 
+            "ios" : {
 
+                "dSYMs" : false
 
+            },
 
+            /* SDK配置 */
 
+            "sdkConfigs" : {
 
+                "ad" : {}
 
+            }
 
+        }
 
+    },
 
+    /* 快应用特有相关 */
 
+    "quickapp" : {},
 
+    /* 小程序特有相关 */
 
+    "mp-weixin" : {
 
+        "appid" : "",
 
+        "setting" : {
 
+            "urlCheck" : false
 
+        },
 
+        "usingComponents" : true
 
+    },
 
+    "mp-alipay" : {
 
+        "usingComponents" : true
 
+    },
 
+    "mp-baidu" : {
 
+        "usingComponents" : true
 
+    },
 
+    "mp-toutiao" : {
 
+        "usingComponents" : true
 
+    },
 
+    "uniStatistics" : {
 
+        "enable" : false
 
+    },
 
+    "vueVersion" : "3"
 
+}

+ 13 - 0
package-lock.json
Файл харах 

@@ -0,0 +1,13 @@
 
+{
 
+  "name": "chat",
 
+  "version": "1.0.0",
 
+  "lockfileVersion": 3,
 
+  "requires": true,
 
+  "packages": {
 
+    "": {
 
+      "name": "chat",
 
+      "version": "1.0.0",
 
+      "license": "ISC"
 
+    }
 
+  }
 
+}

+ 12 - 0
package.json
Файл харах 

@@ -0,0 +1,12 @@
 
+{
 
+  "name": "chat",
 
+  "version": "1.0.0",
 
+  "main": "main.js",
 
+  "scripts": {
 
+    "test": "echo \"Error: no test specified\" && exit 1"
 
+  },
 
+  "keywords": [],
 
+  "author": "",
 
+  "license": "ISC",
 
+  "description": ""
 
+}

+ 19 - 0
pages.json
Файл харах 

@@ -0,0 +1,19 @@
 
+{
 
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 
+		{
 
+			"path": "pages/index/index",
 
+			"style": {
 
+				"navigationBarTitleText": "uni-app"
 
+			}
 
+		}
 
+	],
 
+	"globalStyle": {
 
+		"pageOrientation": "auto",
 
+		"navigationBarTextStyle": "black",
 
+		"navigationBarTitleText": "uni-app",
 
+		"navigationBarBackgroundColor": "#F8F8F8",
 
+		"backgroundColor": "#F8F8F8",
 
+		"navigationStyle": "custom"
 
+	},
 
+	"uniIdRouter": {}
 
+}

+ 102 - 0
pages/index/index.vue
Файл харах 

@@ -0,0 +1,102 @@
 
+<template>
 
+	<view class="pageView">
 
+		<view class="sidebar-left"></view>
 
+		<view class="body">
 
+			<view class="head">
 
+				<text>uniapp聊天框</text>
 
+			</view>
 
+			<view class="list-wrap">
 
+				<scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
 
+					<!-- 聊天主体 -->
 
+					<view id="content-overflow">
 
+						<view class="scrollview-item" v-for="(item,index) in msgList.myList" :key='index'>
 
+							<!-- user方-聊天内容 -->
 
+							<view class="item self" v-if="item.userContent != ''">
 
+								<image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
 
+								<view class="content right" disabled>{{ item.userContent }}</view>
 
+							</view>
 
+							<!-- ai方-聊天内容 -->
 
+							<view class="item other" v-if="item.otherContent != ''">
 
+								<view class="content left">{{ item.otherContent }}</view>
 
+								<image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
 
+							</view>
 
+						</view>
 
+					</view>
 
+				</scroll-view>
 
+			</view>
 
+
 
+			<view class="chat-bottom">
 
+				<view class="send-msg">
 
+					<view class="uni-textarea">
 
+						<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
 
+							confirm-type="send" @confirm="handleSend" maxlength="300" />
 
+					</view>
 
+					<view class="uni-button">
 
+						<button class="send-btn" @click="handleSend" type="primary">发送</button>
 
+					</view>
 
+				</view>
 
+			</view>
 
+		</view>
 
+		<view class="sidebar-right">
 
+			<image src="../../static/logo.png" mode="aspectFit"></image>
 
+		</view>
 
+	</view>
 
+</template>
 
+
 
+<script setup>
 
+	import {
 
+		nextTick,
 
+		reactive,
 
+		watch
 
+	} from 'vue';
 
+
 
+	const msgList = reactive({
 
+		chatMsg: '',
 
+		myList: [{
 
+			userContent: '',
 
+			otherContent: '',
 
+			image: ''
 
+		}, ],
 
+		// 滚动距离
 
+		scrollTop: 0,
 
+		boxWord: '选择无处不在，面朝大海春暖花开是海子的选择，人不是生来被打败的是海明威的选择，人固有一死，或重于泰山，或轻于鸿毛，是司马迁的选择，选择是一次又一次自我重塑的过程，让我们不断地成长，不断地完善，如果说人生是一次不断选择的旅程，那么当千帆阅尽最终留下的就是一片属于自己的独一无二的风景   ——董卿《朗读者》'
 
+	})
 
+
 
+	// 发送消息
 
+	const handleSend = (() => {
 
+		if (msgList.chatMsg != '') {
 
+			let obj = {
 
+				otherContent: msgList.boxWord,
 
+				userContent: msgList.chatMsg,
 
+				image: ""
 
+			}
 
+			msgList.myList.push(obj)
 
+		}
 
+		msgList.chatMsg = ''
 
+	})
 
+
 
+	// 滚动条回到最底部
 
+	const scrollToBottom = (() => {
 
+		nextTick(() => {
 
+			const query = uni.createSelectorQuery();
 
+			query.select("#content-box").boundingClientRect()
 
+			query.select("#content-overflow").boundingClientRect()
 
+			query.exec(res => {
 
+				const scrollViewHeight = res[0].height
 
+				const scrollContentHeight = res[1].height
 
+				if (scrollViewHeight < scrollContentHeight) {
 
+					const scrollTop = scrollContentHeight - scrollViewHeight
 
+					msgList.scrollTop = scrollTop
 
+				}
 
+			})
 
+		})
 
+	})
 
+	//滚动至聊天底部
 
+	watch(msgList.myList, (newVal) => {
 
+		scrollToBottom()
 
+	})
 
+</script>
 
+
 
+<style>
 
+	@import url("../../theme/chat.css");
 
+</style>

BIN
static/Ai-avatar.png
Файл харах


BIN
static/logo.jpg
Файл харах


BIN
static/logo.png
Файл харах


BIN
static/user-avatar.png
Файл харах


+ 133 - 0
theme/chat.css
Файл харах 

@@ -0,0 +1,133 @@
 
+.pageView {
 
+	display: flex;
 
+	background-color: #f5f5f5;
 
+}
 
+
 
+.body {
 
+	display: flex;
 
+	flex-direction: column;
 
+	height: 100vh;
 
+	width: 50%;
 
+	background-color: #f5f5f5;
 
+}
 
+
 
+/* 头部 */
 
+.head {
 
+	height: 100rpx;
 
+	background-color: #f5f5f5;
 
+	text-align: center;
 
+	line-height: 100rpx;
 
+}
 
+
 
+/* 主内容区 */
 
+.list-wrap {
 
+	flex-grow: 1;
 
+	position: relative;
 
+}
 
+
 
+.scrollview {
 
+	position: absolute;
 
+	height: 100%;
 
+
 
+	.scrollview-item {
 
+		display: flex;
 
+		flex-direction: column;
 
+
 
+
 
+		.item {
 
+			display: flex;
 
+			margin: 0 24rpx 50rpx;
 
+		}
 
+
 
+		.avtar {
 
+			display: flex;
 
+			width: 78rpx;
 
+			height: 78rpx;
 
+			border-radius: 50rpx;
 
+			overflow: hidden;
 
+		}
 
+
 
+		.content {
 
+			position: relative;
 
+			max-width: 750rpx;
 
+			background-color: #fff;
 
+			margin: 40rpx 24rpx 0;
 
+			border-radius: 5px;
 
+			font-size: 32rpx;
 
+			line-height: 42rpx;
 
+			padding: 24rpx;
 
+			word-wrap: break-word;
 
+		}
 
+
 
+		.other {
 
+			justify-content: flex-end;
 
+		}
 
+	}
 
+}
 
+
 
+
 
+
 
+/* 底部发送框 */
 
+.chat-bottom {
 
+	height: 300rpx;
 
+	margin: 50rpx;
 
+	position: relative;
 
+
 
+	.send-msg {
 
+		display: flex;
 
+
 
+		.uni-textarea {
 
+			flex: 1;
 
+
 
+			textarea {
 
+				width: 100%;
 
+				height: 270rpx;
 
+				border-radius: 40rpx;
 
+				line-height: 1.5;
 
+				padding: 25rpx;
 
+				right: 50rpx;
 
+				background-color: #fff;
 
+
 
+			}
 
+
 
+			textarea ::-webkit-scrollbar {
 
+				display: none;
 
+			}
 
+		}
 
+
 
+		.send-btn {
 
+			align-items: center;
 
+			justify-content: center;
 
+			width: 320rpx;
 
+			height: 320rpx;
 
+			border-radius: 50rpx;
 
+			font-size: 35rpx;
 
+			font-weight: 500;
 
+			color: #fff;
 
+			line-height: 320rpx;
 
+		}
 
+	}
 
+}
 
+
 
+.sidebar-left {
 
+	height: 100vh;
 
+	width: 20%;
 
+}
 
+
 
+.sidebar-right {
 
+	height: 100vh;
 
+	width: 30%;
 
+
 
+	image {
 
+		display: inline-block;
 
+		height: 400px;
 
+		left: 8%;
 
+		top: 48%;
 
+	}
 
+}
 
+
 
+/* 去除导航条 */
 
+.scrollview ::-webkit-scrollbar {
 
+	display: none;
 
+
 
+}

+ 10 - 0
uni.promisify.adaptor.js
Файл харах 

@@ -0,0 +1,10 @@
 
+uni.addInterceptor({
 
+  returnValue (res) {
 
+    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
 
+      return res;
 
+    }
 
+    return new Promise((resolve, reject) => {
 
+      res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
 
+    });
 
+  },
 
+});

+ 76 - 0
uni.scss
Файл харах 

@@ -0,0 +1,76 @@
 
+/**
 
+ * 这里是uni-app内置的常用样式变量
 
+ *
 
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 
+ *
 
+ */
 
+
 
+/**
 
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 
+ *
 
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 
+ */
 
+
 
+/* 颜色变量 */
 
+
 
+/* 行为相关颜色 */
 
+$uni-color-primary: #007aff;
 
+$uni-color-success: #4cd964;
 
+$uni-color-warning: #f0ad4e;
 
+$uni-color-error: #dd524d;
 
+
 
+/* 文字基本颜色 */
 
+$uni-text-color:#333;//基本色
 
+$uni-text-color-inverse:#fff;//反色
 
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
 
+$uni-text-color-placeholder: #808080;
 
+$uni-text-color-disable:#c0c0c0;
 
+
 
+/* 背景颜色 */
 
+$uni-bg-color:#ffffff;
 
+$uni-bg-color-grey:#f8f8f8;
 
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
 
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 
+
 
+/* 边框颜色 */
 
+$uni-border-color:#c8c7cc;
 
+
 
+/* 尺寸变量 */
 
+
 
+/* 文字尺寸 */
 
+$uni-font-size-sm:12px;
 
+$uni-font-size-base:14px;
 
+$uni-font-size-lg:16px;
 
+
 
+/* 图片尺寸 */
 
+$uni-img-size-sm:20px;
 
+$uni-img-size-base:26px;
 
+$uni-img-size-lg:40px;
 
+
 
+/* Border Radius */
 
+$uni-border-radius-sm: 2px;
 
+$uni-border-radius-base: 3px;
 
+$uni-border-radius-lg: 6px;
 
+$uni-border-radius-circle: 50%;
 
+
 
+/* 水平间距 */
 
+$uni-spacing-row-sm: 5px;
 
+$uni-spacing-row-base: 10px;
 
+$uni-spacing-row-lg: 15px;
 
+
 
+/* 垂直间距 */
 
+$uni-spacing-col-sm: 4px;
 
+$uni-spacing-col-base: 8px;
 
+$uni-spacing-col-lg: 12px;
 
+
 
+/* 透明度 */
 
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
+
 
+/* 文章场景相关 */
 
+$uni-color-title: #2C405A; // 文章标题颜色
 
+$uni-font-size-title:20px;
 
+$uni-color-subtitle: #555555; // 二级标题颜色
 
+$uni-font-size-subtitle:26px;
 
+$uni-color-paragraph: #3F536E; // 文章段落颜色
 
+$uni-font-size-paragraph:15px;