尝试兼容小程序

client/package.json

@@ -88,6 +88,7 @@
     "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
+    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.5.6",
     "@dcloudio/types": "^3.0.4",
     "@dcloudio/uni-automator": "^2.0.1-alpha-36920221121001",
     "@dcloudio/uni-cli-i18n": "^2.0.1-alpha-36920221121001",
@@ -109,9 +110,12 @@
     "mini-types": "*",
     "miniprogram-api-typings": "*",
     "postcss": "^8.4.21",
+    "postcss-class-rename": "^1.0.1",
     "postcss-comment": "^2.0.0",
     "tailwindcss": "^3.2.4",
-    "vue-template-compiler": ">= 2.6.14 < 2.7"
+    "tailwindcss-miniprogram-preset": "^2.1.2",
+    "vue-template-compiler": ">= 2.6.14 < 2.7",
+    "windicss-webpack-plugin": "^1.8.0"
   },
   "browserslist": [
     "Android >= 4.4",

client/src/App.vue

@@ -14,5 +14,4 @@ export default {
 </script>
 
 <style>
-@import "./styles.css";
 </style>

client/src/components/button.vue

@@ -1,6 +1,6 @@
 <template>
     <button
-      class="rounded-lg border-0 after:border-0 bg-primary active:opacity-90 text-white h-14 flex justify-center items-center w-full"
+      class="rounded-lg border-0 after:border-0 bg-primary bg-gray-900 active:opacity-90 text-white h-14 flex justify-center items-center w-full"
       @tap="button_click"
     >
       <slot></slot>

client/src/components/steps.vue

@@ -3,7 +3,7 @@
     <div
       class="group flex-1 flex flex-col space-y-3 items-start text-xs first:items-start last:items-end last:absolute last:right-0"
       v-for="(item, index) in step_nodes"
-      :key="'tab' + index"
+      :key="index"
       @tap="switchStep(index)"
       :class="index == step_index ? 'step-active' : ''"
     >

client/src/components/tabbar.vue

@@ -7,7 +7,7 @@
       class="group w-16 flex flex-col items-center text-xs text-gray-500"
       :class="index == selectIndex ? 'text-primary' : ''"
       v-for="(item, index) in list"
-      :key="'tab' + index"
+      :key=" index"
       @tap="switchTab(index)"
     >
       <div class="w-6 h-6 mb-1">

client/src/main.js

@@ -8,8 +8,10 @@ import tabBar from 'components/tabbar.vue'
 import head from 'components/head.vue'
 import phoneContainer from 'components/phone-container.vue'
 import loading1 from 'components/loading1.vue'
-import vconsole from 'vconsole' 
-Vue.prototype.$vconsole = new vconsole()
+// import 'windi.css'
+import "./styles.css";
+// import vconsole from 'vconsole' 
+// Vue.prototype.$vconsole = new vconsole()
 Vue.component('tab-bar',tabBar)
 Vue.component('head-bar',head)
 Vue.component('load-panl1',loading1)

client/src/pages/components/login.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="w-full">
     <div class="mb-10">
-      <div class="text-3xl text-center font-bold">LOGO</div>
+      <div class="text-2xl font-bold flex items-center justify-center">
+        <image src="../../static/logo.png" class=" w-14 h-14 rounded-xl mr-2" mode="widthFix" alt="" /> 月亮相机
+      </div>
     </div>
     <div class="space-y-6 mb-8">
       <div
@@ -27,7 +29,7 @@
         />
       </div>
     </div>
-    <lbutton class="shadow-xl h-12 mb-4" v-if="!loging" @tap="login"
+    <lbutton class="shadow-xl h-12 mb-4 " v-if="!loging" @tap="login"
       >确认登录</lbutton
     >
     <lbutton class="shadow-xl h-12 mb-4" v-else

client/src/pages/components/register.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="w-full">
     <div class="mb-10">
-      <div class="text-3xl text-center font-bold">LOGO</div>
+      <div class="text-2xl font-bold flex items-center justify-center">
+        <image src="../../static/logo.png" class=" w-14 h-14 rounded-xl mr-2" mode="widthFix" alt="" /> 月亮相机
+      </div>
     </div>
     <div class="space-y-6 mb-8">
       <div

client/src/pages/components/templateDetail.vue

@@ -16,7 +16,7 @@
         <view class="text-base text-gray-500">{{item.desc}}</view>
      </view>
      <view class="flex flex-col space-y-2">
-      <image v-for="(img,index) in item.imgs" :key="'i'+index"  :src="cos_host+img.compress_img" class="w-full" mode="widthFix" alt="">
+      <image lazy-load="true"  v-for="(img,index) in item.imgs" :key="index"  :src="cos_host+img.compress_img" class="w-full" mode="widthFix" alt="">
       </view>
     </template>
 

client/src/pages/components/templates.vue

@@ -1,9 +1,9 @@
 <template>
   <view class="w-full grid grid-cols-2 gap-3">
-      <view class="overflow-hidden flex flex-col mb-1" v-for="(item,index) in list" :key="'k'+index" @tap="selectItem(item)">
+      <view class="overflow-hidden flex flex-col mb-1" v-for="(item,index) in list" :key="index" @tap="selectItem(item)">
         <template v-if="item.imgs && item.imgs.length>0">
           <div class="w-full aspect-square ">
-            <image mode="aspectFill"  :src="cos_host + item.imgs[0].compress_img" class="w-full h-full rounded-xl " alt="">
+            <image lazy-load="true" mode="aspectFill"  :src="cos_host + item.imgs[0].compress_img" class="w-full h-full rounded-xl " alt="">
           </div>
 
         </template>

client/src/pages/tab/tasks.vue

@@ -37,7 +37,7 @@
           <div
             class="border-b-px border-b-gray-100 py-4 space-y-1 px-4"
             v-for="(item, index) in list"
-            :key="'k' + index"
+            :key="index"
           >
             <div class="text-lg h-8 text-stone-800">
               {{ item.type_name }}
@@ -59,11 +59,11 @@
                 <whatImg
                   class="w-full group-[.hw]:h-24 group-[.d]:h-56"
                   v-if="img == 'whatimg'"
-                  :key="'wi' + img_index"
+                  :key="img_index"
                 ></whatImg>
-                <image
+                <image lazy-load="true" 
                   v-else
-                  :key="'i' + img_index"
+                  :key="img_index"
                   class="w-full group-[.hw]:h-24"
                   :mode="item > 1 ? 'aspectFill' : 'widthFix'"
                   :src="cos_host + img.compress_img"

client/src/store/index.js

@@ -1,14 +1,12 @@
 import Vuex from 'vuex';
 import Vue from 'vue';
-import createPersistedState from "vuex-persistedstate";
 
 Vue.use(Vuex);
 
 import socket from "./modules/socket";
 import user from "./modules/user";
 
 export default new Vuex.Store({
-  plugins: [createPersistedState()],
   strict: false,
   modules:{
     socket,

client/src/util/crypto.js

@@ -73,7 +73,7 @@ const rsa = {
       prikey: rsa_key.exportKey("pkcs8-private-pem")
     };
     console.log("rsa_key_info.prikey", rsa_key_info.prikey)
-    sessionStorage.setItem(key, JSON.stringify(rsa_key_info));
+    uni.setStorageSync(key, JSON.stringify(rsa_key_info));
   },
   /*
    * 获得公钥
@@ -83,7 +83,7 @@ const rsa = {
     var t = this;
     var ret = "";
     key = key || "rsa_key_info";
-    var rsa_key_info = sessionStorage.getItem(key);
+    var rsa_key_info =  uni.getStorageSync(key);
     if (!rsa_key_info) {
       rsa.reload(key);
       ret = rsa_key.exportKey("pkcs8-public-pem");
@@ -113,7 +113,7 @@ const rsa = {
    */
   encrypt: (key, content) => {
     key = key || "rsa_key_info";
-    var rsa_key_info = sessionStorage.getItem(key);
+    var rsa_key_info =  uni.getStorageSync(key);
     if (!rsa_key_info) throw '不存在这个key，加密失败';
     rsa_key_info = JSON.parse(rsa_key_info);
     const nodersa = new NodeRSA(rsa_key_info.prikey);
@@ -137,7 +137,7 @@ const rsa = {
    */
   decrypt: (key, en_content) => {
     key = key || "rsa_key_info";
-    var rsa_key_info = sessionStorage.getItem(key);
+    var rsa_key_info =  uni.getStorageSync(key);
     if (!rsa_key_info) throw '不存在这个key，解密失败';
     rsa_key_info = JSON.parse(rsa_key_info);
     console.log("rsa_key_info.prikey", rsa_key_info.prikey)

client/tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
+
   purge: ['./index.html', './src/*.vue', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {
@@ -76,4 +77,8 @@ module.exports = {
     },
   },
   plugins: [],
+  corePlugins: {
+    // 禁用掉在小程序环境中不可能用到的 plugins
+    container: false
+  }
 };

client/vue.config.js

@@ -9,12 +9,16 @@
 //     }
 //   },
 // };
-
+const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin");
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 module.exports = {
   // Other rules...
   configureWebpack: {
-    plugins: [new NodePolyfillPlugin()],
+    plugins: [
+      new NodePolyfillPlugin(),
+      new MiniProgramTailwindWebpackPlugin({
+        // options
+      })],
   },
 };