홈 탐색 도움말
로그인
renevy
/
toilet_h5_show
1
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

add h5

renoce 2 년 전
부모
3e8b991b18
커밋
2f455a80a6
14개의 변경된 파일과 403개의 추가작업 그리고 0개의 파일을 삭제
통합 보기 변경상태 보기
  1. 2 0
      .gitignore
  2. 22 0
      App.vue
  3. 15 0
      README.md
  4. 20 0
      index.html
  5. 22 0
      main.js
  6. 81 0
      manifest.json
  7. 17 0
      package-lock.json
  8. 5 0
      package.json
  9. 18 0
      pages.json
  10. 115 0
      pages/index/index.vue
  11. BIN
      static/logo.png
  12. BIN
      static/tel.png
  13. 10 0
      uni.promisify.adaptor.js
  14. 76 0
      uni.scss

+ 2 - 0
.gitignore
파일 보기 

@@ -0,0 +1,2 @@
 
+unpackage
 
+node_modules

+ 22 - 0
App.vue
파일 보기 

@@ -0,0 +1,22 @@
 
+<script>

+	export default {

+		onLaunch: function() {

+			console.log('App Launch')

+		},

+		onShow: function() {

+			console.log('App Show')

+		},

+		onHide: function() {

+			console.log('App Hide')

+		}

+	}

+</script>

+

+<style>

+	/*每个页面公共css */
 
+	
+	uni-page-body,html,body{  
+	     height: 100%;  
+	 }
 
+

+</style>

+ 15 - 0
README.md
파일 보기 

@@ -0,0 +1,15 @@
 
+# kitking toilet h5 
+
 
+
 
+## Build & Deploy
 
+
 
+1. HBuilderX  -> Build -> Web(for uniapp only)
 
+
 
+填写 website title， 域名（可以直接写服务器ip）
 
+
 
+在项目目录生成 unpackage/dist/h5
 
+
 
+
 
+2. 将h5在nginx部署
 
+
 
+部署的目录要可以直接访问到index.html即可

+ 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

+ 81 - 0
manifest.json
파일 보기 

@@ -0,0 +1,81 @@
 
+{
 
+    "name" : "KitkingAdverShow",
 
+    "appid" : "__UNI__A4AC75F",
 
+    "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\"/>"
 
+                ]
 
+            },
 
+            /* ios打包配置 */
 
+            "ios" : {},
 
+            /* SDK配置 */
 
+            "sdkConfigs" : {}
 
+        }
 
+    },
 
+    /* 快应用特有相关 */
 
+    "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" : "2",
 
+    "h5" : {
 
+        "router" : {
 
+            "base" : "./",
 
+            "mode" : "hash"
 
+        },
 
+        "devServer" : {
 
+            "https" : false
 
+        }
 
+    }
 
+}

+ 17 - 0
package-lock.json
파일 보기 

@@ -0,0 +1,17 @@
 
+{
 
+  "name": "KitkingAdverShow",
 
+  "lockfileVersion": 3,
 
+  "requires": true,
 
+  "packages": {
 
+    "": {
 
+      "dependencies": {
 
+        "jweixin-module": "^1.6.0"
 
+      }
 
+    },
 
+    "node_modules/jweixin-module": {
 
+      "version": "1.6.0",
 
+      "resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
 
+      "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
 
+    }
 
+  }
 
+}

+ 5 - 0
package.json
파일 보기 

@@ -0,0 +1,5 @@
 
+{
 
+  "dependencies": {
 
+    "jweixin-module": "^1.6.0"
 
+  }
 
+}

+ 18 - 0
pages.json
파일 보기 

@@ -0,0 +1,18 @@
 
+{

+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

+		{

+			"path": "pages/index/index",

+			"style": {

+				"navigationBarTitleText": "康乃心智能马桶",
 
+				"app-plus": {
 
+					"titleNView": false //禁用原生导航栏  
+				}

+			}

+		}

+	],

+	"globalStyle": {

+		"navigationBarTextStyle": "black",
 
+		"navigationStyle": "default"

+	},

+	"uniIdRouter": {}

+}

+ 115 - 0
pages/index/index.vue
파일 보기 

@@ -0,0 +1,115 @@
 
+<template>
 
+	<view class="page">
 
+		<view class="container">
 
+			<view style="width: 100%; margin-top: 20px;">
 
+				<video style="width: 100%; border-radius: 10px 10px 10px 10px;" id="myVideo" ref="videoPlayer" src="http://hdcs-3.ifastore.com.cn:9005/api/media/visit?media=5bq35LmD5b+D6ams5qG25Lqn5ZOB5a6j5Lyg6KeG6aKRIyMyMDIzMTEyNTIwMzA1Nzc5Mi5tcDQ="
 
+					@error="videoErrorCallback" controls></video>
 
+			</view>
 
+			<view style="width: 100%; height: 60%; margin-top: 10px; margin-bottom: 10px;" >
 
+				<image style="height: 100%; border-radius: 10px 10px 10px 10px;" src="http://hdcs-3.ifastore.com.cn:9005/api/media/visit?media=5Lit55S15bGV5Lya5Y2w5Yi2LTIjIzIwMjMxMTI1MjAzMjE2Njg2LmpwZw=="></image>
 
+			</view>
 
+			<view style="width: 100%; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; background-color: aliceblue;
 
+						    border-radius: 10px 10px 10px 10px;">
 
+				<view style="display: flex; align-items: center; flex-direction: row;  height: 50px; border-radius: 2%; " 
+				@click="makeCall">
 
+				<text :style="getTextStyle(textFlag)">点击获取优惠价格(拨打400)</text>
 
+				<view style="height: 30px; width: 30px; margin-left: 10px;">
 
+					<image style="height: 100%; width: 100%;" :animation="animationData" mode="aspectFill" src="../../static/tel.png"></image>
 
+				</view>
 
+				</view>
 
+			</view>
 
+		</view> 
+	</view>
 
+</template>
 
+

+<script>
 
+export default {
 
+    data() {
 
+        return {
 
+			animationData: {},
 
+			animation:null,
 
+			textFlag:false
 
+        }
 
+    },
 
+    onReady: function (res) {
 
+    	this.videoContext = uni.createVideoContext('myVideo')
 
+		setTimeout(()=>{
 
+			this.playVideo();   // 自动播放方法
 
+		},1000)
 
+		var animation = uni.createAnimation({
 
+			duration: 500,
 
+			timingFunction: 'ease',
 
+		})	
+		setInterval(()=>{    
+			setTimeout(function() {
 
+				this.animation = animation
 
+				this.animation.scale(1,1).step()
 
+				this.animation.scale(1.5,1.5).step()
 
+				this.animationData = animation.export()
 
+				this.textFlag = !this.textFlag
 
+		  }.bind(this), 1000);  
+		},1000)
 
+    },
 
+	onShow() {
 
+		setTimeout(()=>{
 
+			this.playVideo();
 
+		},2000)
 
+	},
 
+    methods: {
 
+        videoErrorCallback: function (e) {
 
+			console.log('视频错误信息:')
 
+			console.log(e.target.errMsg)
 
+		},
 
+		makeCall() {
 
+			uni.makePhoneCall({
 
+			  phoneNumber: '4001019698',
 
+			});
 
+		},
 
+		playVideo() {
 
+			this.videoContext.play()
 
+			
+		},
 
+		scaleAnimal(){
 
+			this.animation.scale(2,2).step()
 
+			this.animationData = animation.export()
 
+		},
 
+		getTextStyle(flag){
 
+			if(flag){
 
+				return 'font-size: 20px; color: red;'
 
+			}else {
 
+				return 'font-size: 20px; color: gold;'
 
+			}
 
+		}
 
+    }
 
+}
 
+</script>
 
+

+

+<style>
 
+	.page {
 
+		display: flex;
 
+		align-items: center;
 
+		justify-content: center;
 
+		background-color: #bee9fc;
 
+		height: 100%;
 
+		width: 100%;
 
+	}

+

+	.container {

+		display: flex;
 
+		flex-direction: column;
 
+		align-items: center;
 
+		width: 80%;
 
+		height: 100%;

+	}

+

+	.text-area {

+		display: flex;

+		justify-content: center;

+	}

+

+	.title {

+		font-size: 36rpx;

+		color: #8f8f94;

+	}

+</style>

BIN
static/logo.png
파일 보기


BIN
static/tel.png
파일 보기


+ 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:16;
 
+
 
+/* 图片尺寸 */
 
+$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;