添加uni-app x示例

a6077a36 · DCloud-yyl · fceede10 · a6077a36 · a6077a36 · a6077a36
9 changed file
--- a/test_uniappx_slider_100/App.uvue
+++ b/test_uniappx_slider_100/App.uvue
+<script lang="uts">
+	let firstBackTime = 0
+	export default {
+		onLaunch: function () {
+			console.log('App Launch')
+		},
+		onShow: function () {
+			console.log('App Show')
+		},
+		onHide: function () {
+			console.log('App Hide')
+		},
+		onLastPageBackPress: function () {
+			console.log('App LastPageBackPress')
+			if (firstBackTime == 0) {
+				uni.showToast({
+					title: '再按一次退出应用',
+					position: 'bottom',
+				})
+				firstBackTime = Date.now()
+				setTimeout(() => {
+					firstBackTime = 0
+				}, 2000)
+			} else if (Date.now() - firstBackTime < 2000) {
+				firstBackTime = Date.now()
+				uni.exit()
+			}
+		},
+		onExit: function () {
+			console.log('App Exit')
+		},
+	}
+</script>
+
+<style>
+/*每个页面公共css */
+.uni-row {
+	flex-direction: row;
+}
+
+.uni-column {
+	flex-direction: column;
+}
+</style>
\ No newline at end of file
--- a/test_uniappx_slider_100/index.html
+++ b/test_uniappx_slider_100/index.html
+<!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"></script>
+	</body>
+</html>
\ No newline at end of file
--- a/test_uniappx_slider_100/main.uts
+++ b/test_uniappx_slider_100/main.uts
+import App from './App.uvue'
+
+import { createSSRApp } from 'vue'
+export function createApp() {
+	const app = createSSRApp(App)
+	return {
+		app
+	}
+}
\ No newline at end of file
--- a/test_uniappx_slider_100/manifest.json
+++ b/test_uniappx_slider_100/manifest.json
+{
+    "name" : "test_uniappx_slider",
+    "appid" : "__UNI__05186D0",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "uni-app-x" : {},
+    /* 快应用特有相关 */
+    "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",
+    "app" : {
+        "distribute" : {
+            "icons" : {
+                "android" : {
+                    "hdpi" : "",
+                    "xhdpi" : "",
+                    "xxhdpi" : "",
+                    "xxxhdpi" : ""
+                }
+            }
+        }
+    }
+}
--- a/test_uniappx_slider_100/pages.json
+++ b/test_uniappx_slider_100/pages.json
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "uni-app x"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app x",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"uniIdRouter": {}
+}
--- a/test_uniappx_slider_100/pages/index/index.uvue
+++ b/test_uniappx_slider_100/pages/index/index.uvue
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view class="page">
+  <!-- #endif -->
+    <page-head :title="title"></page-head>
+    <view class="flex-row">
+      <view class="flex-fill">
+        <slider ref="slider1" v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging"
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider ref="slider2" v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging"
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider ref="slider3" v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging"
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider ref="slider4" v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging"
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: 'slider 滑块 x 100',
+        sliderValue: 50
+      }
+    },
+    methods: {
+      sliderChange(e : SliderChangeEvent) {
+        this.updateSliderValue(e.detail.value)
+      },
+      sliderChanging(e : SliderChangeEvent) {
+        this.updateSliderValue(e.detail.value)
+      },
+      updateSliderValue(value : number) {
+        // this.sliderValue = value
+
+        // TODO 跳过vue框架，直接修改原生组件
+        (this.$refs["slider1"] as UniSliderElement[]).forEach((item) => {
+          item.value = value
+        });
+        (this.$refs["slider2"] as UniSliderElement[]).forEach((item) => {
+          item.value = value
+        });
+        (this.$refs["slider3"] as UniSliderElement[]).forEach((item) => {
+          item.value = value
+        });
+        (this.$refs["slider4"] as UniSliderElement[]).forEach((item) => {
+          item.value = value
+        });
+      }
+    },
+  }
+</script>
+
+<style>
+  .page {
+    flex: 1;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-fill {
+    flex: 1;
+  }
+
+  .slider {
+    margin: 1px 0.5px;
+  }
+</style>
--- a/test_uniappx_slider_100/static/logo.png
+++ b/test_uniappx_slider_100/static/logo.png
--- a/test_uniappx_slider_100/test_uniappx_slider-release.apk
+++ b/test_uniappx_slider_100/test_uniappx_slider-release.apk
--- a/test_uniappx_slider_100/uni.scss
+++ b/test_uniappx_slider_100/uni.scss
+/**
+ * 这里是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;