feat: first commit

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["taro/react"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc

babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: true
+    }]
+  ]
+}

config/dev.ts

@@ -0,0 +1,11 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    esnextModules: ['taro-ui']
+  }
+}

config/index.ts

@@ -0,0 +1,87 @@
+const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
+const config = {
+  projectName: 'crab-wxapp',
+  date: '2024-6-21',
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: [],
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'react',
+  compiler: 'webpack5',
+  cache: {
+    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+  },
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    },
+    webpackChain(chain, webpack) {
+      chain.merge({
+        plugin: {
+          install: {
+            plugin: UnifiedWebpackPluginV5,
+            args: [{
+              appType: 'taro'
+            }]
+          }
+        }
+      })
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.ts

@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}

package.json

@@ -0,0 +1,89 @@
+{
+  "name": "crab-wxapp",
+  "version": "1.0.0",
+  "private": true,
+  "description": "crab wx app",
+  "templateInfo": {
+    "name": "taro-ui",
+    "typescript": true,
+    "css": "Sass",
+    "framework": "React"
+  },
+  "scripts": {
+    "postinstall": "weapp-tw patch",
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@tarojs/components": "3.6.32",
+    "@tarojs/helper": "3.6.32",
+    "@tarojs/plugin-framework-react": "3.6.32",
+    "@tarojs/plugin-platform-alipay": "3.6.32",
+    "@tarojs/plugin-platform-h5": "3.6.32",
+    "@tarojs/plugin-platform-jd": "3.6.32",
+    "@tarojs/plugin-platform-qq": "3.6.32",
+    "@tarojs/plugin-platform-swan": "3.6.32",
+    "@tarojs/plugin-platform-tt": "3.6.32",
+    "@tarojs/plugin-platform-weapp": "3.6.32",
+    "@tarojs/react": "3.6.32",
+    "@tarojs/runtime": "3.6.32",
+    "@tarojs/shared": "3.6.32",
+    "@tarojs/taro": "3.6.32",
+    "lodash": "4.17.15",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "supabase-wechat-stable-v2": "^2.2.0",
+    "taro-ui": "^3.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@tarojs/cli": "3.6.32",
+    "@tarojs/taro-loader": "3.6.32",
+    "@tarojs/webpack5-runner": "3.6.32",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "autoprefixer": "^10.4.19",
+    "babel-preset-taro": "3.6.32",
+    "eslint": "^8.12.0",
+    "eslint-config-taro": "3.6.32",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "postcss": "^8.4.38",
+    "postcss-rem-to-responsive-pixel": "^6.0.1",
+    "react-refresh": "^0.11.0",
+    "stylelint": "9.3.0",
+    "tailwindcss": "^3.4.4",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.1.0",
+    "weapp-tailwindcss": "^3.3.1",
+    "webpack": "^5.78.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-rem-to-responsive-pixel': {
+      // 32 意味着 1rem = 32rpx
+      rootValue: 32,
+      // 默认所有属性都转化
+      propList: ['*'],
+      // 转化的单位,可以变成 px / rpx
+      transformUnit: 'rpx',
+    },
+  },
+}

project.config.json

@@ -0,0 +1,40 @@
+{
+  "miniprogramRoot": "dist/",
+  "projectname": "crab-wxapp",
+  "description": "crab wx app",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": false,
+    "newFeature": true,
+    "autoAudits": false,
+    "coverView": true,
+    "showShadowRootInWxmlPanel": false,
+    "scopeDataCheck": false,
+    "useCompilerModule": false,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "compileType": "miniprogram",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "libVersion": "3.4.3",
+  "srcMiniprogramRoot": "dist/",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "crab-wxapp",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

project.tt.json

@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "crab-wxapp",
+  "description": "crab wx app",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

src/api/index.ts

@@ -0,0 +1,28 @@
+import Taro from "@tarojs/taro"
+import { BASE_URL } from "../config"
+import { stringify } from "qs"
+
+export const request = ({
+  url = '',
+  baseUrl = BASE_URL,
+  data = {},
+  method = "GET",
+  header = {},
+  params = {},
+  isToken = true
+}) => {
+  const requestParams = stringify(params, { indices: false })
+  return new Promise((resolve:Function, reject:Function) => {
+    if (isToken) header['Authorization'] = 'Bearer ' + Taro.getStorageSync('token')
+    Taro.showLoading({ title: '加载中...' })
+    Taro.request({
+      url: baseUrl + url + (requestParams ? ('?' + requestParams) : ''),
+      data,
+      method: method as any,
+      header,
+      success: (res) => { resolve(res.data) },
+      fail: (err) => { reject(err) },
+      complete: () => { Taro.hideLoading() }
+    })
+  })
+}

src/api/supabaseClient.ts

@@ -0,0 +1,5 @@
+import { createClient } from 'supabase-wechat-stable-v2'
+
+const SUPABASE_URL:string = 'https://cprtmla5g6h8gtmd6cc0.baseapi.memfiredb.com';
+const SUPABASE_KEY:string = ''
+export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

src/app.config.ts

@@ -0,0 +1,20 @@
+export default defineAppConfig({
+  lazyCodeLoading: 'requiredComponents',
+  pages: [
+    'pages/login/index',
+    'pages/index/index'
+  ],
+  // subPackages: [
+  //   {
+  //     root: 'pagesHome',
+  //     pages: []
+  //   }
+  // ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#0fc87c',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'white',
+    navigationStyle: 'custom'
+  }
+})

src/app.scss

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

src/app.ts

@@ -0,0 +1,18 @@
+import { Component, PropsWithChildren } from 'react'
+import './app.scss'
+
+class App extends Component<PropsWithChildren>  {
+
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  // this.props.children 是将要会渲染的页面
+  render () {
+    return this.props.children
+  }
+}
+
+export default App

src/components/HeaderNation/index.tsx

@@ -0,0 +1,22 @@
+import { View } from "@tarojs/components"
+import { APP_TITLE_HEIGHT } from "../../config";
+import Taro from "@tarojs/taro";
+
+const HeaderNation = (props) => {
+  const { title = '', height = APP_TITLE_HEIGHT, background = 'white' } = props
+  const showBack = Taro.getCurrentPages().length > 1
+  return (
+    <View
+      className="w-full flex justify-between items-center px-3 relative z-[3]"
+      style={{ height, background }}
+    >
+      <View className="w-[4rem]">
+        { showBack ? '返回' : 'X' }
+      </View>
+      <View>{ title }</View>
+      <View className="w-[4rem]"></View>
+    </View>
+  )
+}
+
+export default HeaderNation;

src/components/OuterFrame/index.tsx

@@ -0,0 +1,16 @@
+import { View, Image } from '@tarojs/components'
+import Img from './bg.png'
+
+const OuterFrame = ({ children }) => {
+  return (
+    <View
+      className="overflow-hidden w-full h-[100vh] relative"
+      onTouchMove={(e) => { e.stopPropagation() }}
+    >
+      <Image src={Img} className="absolute top-0 w-full z-[-1]"></Image>
+      { children }
+    </View>
+  )
+}
+
+export default OuterFrame;

src/config.ts

@@ -0,0 +1,15 @@
+import Taro from "@tarojs/taro"
+
+export const BASE_URL = 'http://127.0.0.1:3000'
+
+const { statusBarHeight = 0, screenHeight } = Taro.getSystemInfoSync()
+// 获取胶囊信息
+const { height, top } = Taro.getMenuButtonBoundingClientRect()
+// 计算顶部导航栏高度
+export const APP_TITLE_HEIGHT = height + (top - statusBarHeight) * 2
+// 状态栏高度， 时间和电量
+export const APP_HEAD_HEIGHT = statusBarHeight
+const APP_NAV_HEIGHT = statusBarHeight + APP_TITLE_HEIGHT
+//去掉顶部导航栏，屏幕剩余的高度
+export const APP_FULL_HEIGHT = screenHeight - APP_NAV_HEIGHT
+    

src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title>crab-wxapp</title>
+  <script><%= htmlWebpackPlugin.options.script %></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/index/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页',
+  disableScroll: true
+})

src/pages/index/index.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react'
+import { View, ScrollView } from '@tarojs/components'
+import './index.scss'
+import { APP_FULL_HEIGHT, APP_HEAD_HEIGHT } from '../../config'
+import OuterFrame from '../../components/OuterFrame'
+import HeaderNation from '../../components/HeaderNation'
+import { supabase } from '../../api/supabaseClient'
+
+const Index = () => {
+  const [headerOpacity, setHeaderOpacity] = useState(0)
+  const applyOpacityColor = (opacity:number = 0, baseColor:string = '#000000') => {
+    if (opacity > 1) opacity = 1
+    const stringNum = parseInt((opacity * 255).toFixed(0)).toString(16)
+    return baseColor + stringNum
+  }
+
+  const bottomNavBarHeight = 68
+
+  const tabArr = ['首页', '购物车', '我的']
+
+  const [dataList, setDataList] = useState<Array<any>>([])
+  const getDataList = async () => {
+    const { data, error } = await supabase.from("custom").select("*")
+    console.log("RES", data);
+    if (Array.isArray(data)) setDataList(data)
+  }
+  useEffect(() => {
+    getDataList()
+  }, [])
+  return (
+    <OuterFrame>
+      <View className='index'>
+        <View style={{
+          height: APP_HEAD_HEIGHT + 'px',
+          backgroundColor: applyOpacityColor(headerOpacity, '#e8d1ac')
+        }}></View>
+        <HeaderNation
+          title={applyOpacityColor(headerOpacity)}
+          background={applyOpacityColor(headerOpacity, '#08d1ac')}
+        ></HeaderNation>
+        <ScrollView
+          type="nested"
+          scrollY
+          style={{
+            height: (APP_FULL_HEIGHT - bottomNavBarHeight) + 'px',
+            backgroundColor: '#14141414'
+          }}
+          className="pb-1 box-border overflow-hidden box-border"
+          onScroll={(e) => {
+            setHeaderOpacity((e.target as any).scrollTop / 150)
+          }}
+        >
+          <View className="p-3 pb-1">
+            {
+              dataList.map(item => (
+                <View
+                  className="bg-white p-3 mb-2 shadow-sm flex justify-between"
+                >
+                  <View>{item.custom_name}</View>
+                  <View>{item.custom_address}</View>
+                </View>
+              ))
+            }
+          </View>
+        </ScrollView>
+        <View
+          className="w-full text-white flex items-start justify-evenly pt-3 box-border text-[#8f6927]"
+          style={{
+            backgroundColor: '#fffbf2',
+            color: '#252525',
+            height: `${bottomNavBarHeight}px`
+          }}
+        >
+          {
+            tabArr.map(item => (
+              <View className="flex flex-col items-center" key={item}>
+                { item }
+              </View>
+            ))
+          }
+        </View>
+      </View>
+    </OuterFrame>
+  )
+}
+
+
+export default Index;

src/pages/login/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '登录',
+  disableScroll: true
+})

src/pages/login/index.tsx

@@ -0,0 +1,53 @@
+import { Button, Input, View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { useEffect } from "react"
+import { supabase } from "../../api/supabaseClient"
+
+const Login = () => {
+  const checkUserStatus = async () => {
+    const { data, error } = await supabase.auth.getSession()
+    console.log("data", data);
+    console.log("data", data);
+    if (!error) Taro.redirectTo({ url: '/pages/index/index' })
+  }
+  useEffect(() => {
+    checkUserStatus()
+  }, [])
+  return (
+    <View className="w-full bg-slate-100 p-3 h-[98vh] flex justify-center items-center">
+      <View className="flex flex-col space-y-2 shadow-lg p-3 relative top-[-3rem]">
+        <Input
+          placeholder="请输入"
+          className="p-2"
+          style={{ border: '1px solid red' }}
+        ></Input>
+        <Input
+          placeholder="请输入"
+          className="p-2 mt-2"
+          style={{ border: '1px solid red' }}
+        ></Input>
+        <Button
+          className="mt-2 w-full bg-[#23b8fd]"
+          onClick={() => {
+            wx.login({
+              success: async (res) => {
+                console.log("USER code", res);
+                const { data, error } = await supabase.auth.signInWithPassword({
+                  email: 'weijialin2020@gmail.com',
+                  password: 'weijialin2020'
+                })
+                console.log("data", data);
+                console.log("error", error);
+                if (!error) {
+                  Taro.redirectTo({ url: '/pages/index/index' })
+                }
+              }
+            })
+          }}
+        >按钮</Button>
+      </View>
+    </View>
+  )
+}
+
+export default Login;

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // 这里给出了一份 taro 通用示例，具体要根据你自己项目的目录结构进行配置
+  // 比如你使用 vue3 项目，你就需要把 vue 这个格式也包括进来
+  // 不在 content glob表达式中包括的文件，在里面编写tailwindcss class，是不会生成对应的css工具类的
+  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx}'],
+  // 其他配置项 ...
+  corePlugins: {
+    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
+    preflight: false,
+  },
+}

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "lib",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "include": ["./src", "./types"],
+  "compileOnSave": false
+}

types/global.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="@tarojs/taro" />
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
+
+