Initial commit

imaffe · Aug 5, 2023 · cd5cbc7 · cd5cbc7
commit cd5cbc7
Show file tree

Hide file tree

Showing 14 changed files with 1,390 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+unpackage
+node_modules
+.hbuilderx
diff --git a/App.vue b/App.vue
@@ -0,0 +1,18 @@
+<script>
+export default {
+	onLaunch: function () {
+		console.log('App Launch')
+	},
+	onShow: function () {
+		console.log('App Show')
+	},
+	onHide: function () {
+		console.log('App Hide')
+	}
+}
+</script>
+
+<style lang="scss">
+@import 'tailwindcss/base';
+@import 'tailwindcss/utilities';
+</style>
diff --git a/README.md b/README.md
@@ -0,0 +1,50 @@
+# uni-app-vue3-tailwind-hbuilder-template
+
+- [uni-app-vue3-tailwind-hbuilder-template](#uni-app-vue3-tailwind-hbuilder-template)
+  - [HbuilderX 智能提示工具](#hbuilderx-智能提示工具)
+  - [Related projects](#related-projects)
+    - [插件核心](#插件核心)
+    - [CLI 工具](#cli-工具)
+    - [模板 template](#模板-template)
+    - [预设 tailwindcss preset](#预设-tailwindcss-preset)
+  - [Bugs \& Issues](#bugs--issues)
+
+这是一个使用 `hbuilderx` + `uni-app` + `vue3` + `tailwind` 构建的小程序模板。可以直接在 `hbuilderx` 中导入运行。
+
+目前已经升级到了 v2 版本
+
+## HbuilderX 智能提示工具
+
+DCloud-HBuilderX团队提供了对应的插件，可以去
+
+<https://ext.dcloud.net.cn/plugin?id=8560> 进行下载，即可产生智能提示。
+
+## Related projects
+
+### 插件核心
+
+[weapp-tailwindcss-webpack-plugin](https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin) 提供转义功能，欢迎 `fork`/`star`
+
+### CLI 工具
+
+[weapp-ide-cli](https://github.com/sonofmagic/utils/tree/main/packages/weapp-ide-cli): 一个微信开发者工具命令行，快速方便的直接启动 ide 进行登录，开发，预览，上传代码等等功能。
+
+### 模板 template
+
+[uni-app-vite-vue3-tailwind-vscode-template](https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template)
+
+[uni-app-vue3-tailwind-vscode-template](https://github.com/sonofmagic/uni-app-vue3-tailwind-vscode-template)
+
+[uni-app-vue2-tailwind-vscode-template](https://github.com/sonofmagic/uni-app-vue2-tailwind-vscode-template)
+
+[weapp-native-mina-tailwindcss-template](https://github.com/sonofmagic/weapp-native-mina-tailwindcss-template)
+
+### 预设 tailwindcss preset
+
+[tailwindcss-miniprogram-preset](https://github.com/sonofmagic/tailwindcss-miniprogram-preset)
+
+## Bugs & Issues
+
+目前这个插件正在快速的开发中，如果遇到 `Bug` 或者想提出 `Issue`
+
+[欢迎提交到此处](https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/issues)
diff --git a/index.html b/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>
diff --git a/main.js b/main.js
@@ -0,0 +1,21 @@
+import App from './App'
+
+// #ifndef VUE3
+import Vue from 'vue'
+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
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,72 @@
+{
+    "name" : "uni-app-vue3-tailwind-hbuilder-template",
+    "appid" : "",
+    "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" : "3"
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "uni-app-vue3-tailwind-hbuilder-template",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "postinstall": "weapp-tw patch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template/issues"
+  },
+  "homepage": "https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template#readme",
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.27",
+    "postcss-rem-to-responsive-pixel": "^5.1.3",
+    "tailwindcss": "^3.3.3",
+    "weapp-tailwindcss": "^2.6.2"
+  }
+}
diff --git a/pages.json b/pages.json
@@ -0,0 +1,17 @@
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "uni-app"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"uniIdRouter": {}
+}
diff --git a/pages/index/index.vue b/pages/index/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <view class="content">
+    <view
+      class="bg-[url(https://pic1.zhimg.com/v2-3ee20468f54bbfefcd0027283b21aaa8_720w.jpg)] bg-[length:100%_100%] bg-no-repeat w-screen h-[41.54vw]">
+    </view>
+
+    <view class="after:content-['uni-app-vite-vue3-tailwind-vscode-template'] text-sky-400"></view>
+
+    <view class="text-gray-900/50 mb-2 before:content-['当前系统主题:']">
+      {{ themeRef }}
+    </view>
+    <view :class="'border-[#999] border-b-[6rpx]'">:border-[#999]</view>
+    <view :class="'border-[#999] border-b-[6rpx]'">:border-[#999] border-b-[6rpx]</view>
+    <view class="border-[#999999] border-b-[6rpx]">border-[#999999] border-b-[6rpx]</view>
+    <view class="bg-gray-100 dark:bg-zinc-800 h-10 w-10" hover-class="!bg-[#ffff00] !dark:bg-green-500"></view>
+    <view class="h-5 w-5 shadow-[0px_2px_11px_0px_rgba(0,0,0,0.4)] before:content-['Festivus']"></view>
+    <view class="h-5 w-5 shadow-[0px_2px_11px_0px_#00000a]"></view>
+    <view class="text-[30px] dark:text-yellow-400">text-[22px]</view>
+    <view class="text-[#bada55]">text-[#bada55]</view>
+    <view class="text-[var(--my-var)]">text-[var(--my-var)]</view>
+    <div class="text-[length:var(--my-var)]">...</div>
+    <div class="text-[color:var(--my-var)]">...</div>
+    <button class="!bg-green-500 !sr-onlytext-white" :class="{
+      'opacity-50': disabled,
+    }" :disabled="disabled">
+      disable
+    </button>
+    <view class="test">test</view>
+    <view :key="v" class="h-[20px] w-[20px]" :class="v" v-for="(v, i) in cardsColor"></view>
+    <!-- <view :key="i" class="h-[20px] w-[20px]" :class="cardsColor[i - 1]" v-for="i in 5"></view> -->
+    <view class="w-2 h-2 bg-[#123456]"></view>
+    <view class="w-2 h-2 bg-blue-500/50"></view>
+    <view class="flex items-center justify-center w-screen h-screen">
+      <view class="!font-bold !text-[#990000]" :class="['text-2xl', { underline: true }]">{{ title }}</view>
+    </view>
+
+    <view class="text-area">
+      <text class="title h-[200%]">{{ title }}</text>
+    </view>
+    <view class="p-[20px] -mt-2 mb-[-20px]">p-[20px] -mt-2 mb-[-20px] margin的jit 可不能这么写 -m-[20px]</view>
+    <view class="space-y-[1.6rem]">
+      <view class="w-[300rpx] text-black text-opacity-[0.19]">w-[300rpx] text-black text-opacity-[0.19]</view>
+      <view class="min-w-[300rpx] max-h-[100px] text-[20px] leading-[0.9]">min-w-[300rpx] max-h-[100px] text-[20px]
+        leading-[0.9]</view>
+      <view class="max-w-[300rpx] min-h-[100px] text-[#dddddd]">max-w-[300rpx] min-h-[100px] text-[#dddddd]</view>
+      <view
+        class="flex items-center justify-center h-[100px] w-[100px] rounded-[40px] bg-[#123456] bg-opacity-[0.54] text-[#ffffff]"
+        :class="['text-[#123456]', flag ? 'bg-[#666600]' : 'bg-[#410000]']">Hello</view>
+      <view class="border-[10px] border-[#098765] border-solid border-opacity-[0.44]">border-[10px] border-[#098765]
+        border-solid border-opacity-[0.44]</view>
+      <view class="grid grid-cols-3 divide-x-[10px] divide-[#010101] divide-solid">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+      </view>
+      <view class="w-32 py-2 rounded-md font-semibold text-white bg-pink-500 ring-4 ring-pink-300"> Default </view>
+    </view>
+  </view>
+</template>
+
+
+<script setup lang="ts">
+
+import { ref, onBeforeUnmount } from 'vue';
+const title = ref('测试标题');
+const flag = ref(true);
+
+const cardsColor = ref([
+  'bg-[#4268EA] shadow-indigo-100',
+  'bg-[#123456] shadow-blue-100',
+  'bg-green-500 shadow-green-100',
+  'bg-cyan-500 shadow-cyan-100',
+  'bg-amber-500 shadow-amber-100',
+]);
+const disabled = ref(true);
+const sysInfo = uni.getSystemInfoSync()
+console.log(sysInfo)
+const themeRef = ref(sysInfo.theme ?? 'light');
+// #ifdef MP
+uni.onThemeChange(({ theme }: { theme: 'dark' | 'light' }) => {
+  themeRef.value = theme;
+});
+// #endif
+onBeforeUnmount(() => {
+  // #ifdef MP
+  uni.offThemeChange(() => { });
+  // #endif
+});
+</script>
+
+<style lang="scss">
+page {
+  --primary-color-hex: #4268ea;
+  --primary-color-bg: yellow;
+}
+</style>
+
+<style lang="scss" scoped>
+.test {
+  @apply flex items-center justify-center h-[100px] w-[100px] rounded-[40px] bg-[#123456] bg-opacity-[0.54] text-[#ffffff] #{!important};
+}
+</style>
diff --git a/static/.gitkeep b/static/.gitkeep
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,19 @@
+const path = require("path");
+const resolve = (p) => {
+  return path.resolve(__dirname, p);
+};
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./**/*.vue"].map(resolve),
+  theme: {
+    extend: {
+      colors: {
+        primary: '#18db9e'
+      }
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+};