F

babel.config.js

@@ -5,8 +5,6 @@ module.exports = {
     ['taro', {
       framework: 'react',
       ts: false,
-      // hot:false,
-      // 'dynamic-import-node': true,
     }]
   ],
   plugins: [

config/dev.js

@@ -3,8 +3,8 @@ module.exports = {
     NODE_ENV: '"development"',
   },
   defineConstants: {
-    // HOST: '"http://127.0.0.1:9087"',
-    HOST: '"http://192.168.89.13:9087"',
+    HOST: '"http://127.0.0.1:9087"',
+    // HOST: '"http://192.168.89.13:9087"',
     // HOST: '"https://wmcj.huoshannews.com"',
     AD_IMAGE: '"https://h5.njyunzhi.com/images/citizen_banner.png"',
     DEFAULT_POS: '"116.3476917447715,31.409912844296578"', // 霍山县人民政府 gcj02

config/index.js

@@ -4,6 +4,7 @@ const path = require("path");
 
 import devConfig from "./dev";
 import prodConfig from "./prod";
+const url = "http://127.0.0.1:9087";
 
 export default defineConfig(async (merge, { command, mode }) => {
   const config = {
@@ -14,6 +15,7 @@ export default defineConfig(async (merge, { command, mode }) => {
       640: 2.34 / 2,
       750: 1,
       828: 1.81 / 2,
+      375: 2 / 1,
     },
 
     sourceRoot: "src",
@@ -29,73 +31,83 @@ export default defineConfig(async (merge, { command, mode }) => {
     alias: {
       "@": path.resolve(__dirname, "..", "src"),
     },
-  
-    mini: {
-      postcss: {
-        pxtransform: {
-          enable: true,
-          config: {},
-        },
-        url: {
-          enable: true,
-          config: {
-            limit: 1024, // 设定转换尺寸上限
-          },
-        },
-        cssModules: {
-          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
-          config: {
-            namingPattern: "module", // 转换模式，取值为 global/module
-            generateScopedName: "[name]__[local]___[hash:base64:5]",
-          },
-        },
-      },
-    },
+
+    // mini: {
+    //   postcss: {
+    //     pxtransform: {
+    //       enable: true,
+    //       config: {},
+    //     },
+    //     url: {
+    //       enable: true,
+    //       config: {
+    //         limit: 1024, // 设定转换尺寸上限
+    //       },
+    //     },
+    //     cssModules: {
+    //       enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
+    //       config: {
+    //         namingPattern: "module", // 转换模式，取值为 global/module
+    //         generateScopedName: "[name]__[local]___[hash:base64:5]",
+    //       },
+    //     },
+    //   },
+    // },
     h5: {
       publicPath: "/",
       staticDirectory: "static",
-      outputDir: 'dist',
-      router : {
-        mode : "hash",
-        // base : "./"
+      outputDir: "dist",
+      router: {
+        mode: "hash",
       },
-      // output: {
-      //   filename: "js/[name].[hash:8].js",
-      //   chunkFilename: "js/[name].[chunkhash:8].js",
-      // },
+      esnextModules: ["@antmjs/vantui"],
       miniCssExtractPluginOption: {
         ignoreOrder: true,
         filename: "css/[name].[hash].css",
-        chunkFilename: "css/[name].[chunkhash].css",
+        chunkFilename: "css/[id].css",
       },
+
       postcss: {
-        autoprefixer: {
+      
+     
+        pxtransform: {
           enable: true,
-          config: {},
+          config: {
+            // 设置rpx转换为目标单位为rem
+            unitToRem: true,
+            // 设计稿宽度与 rem 基准值，默认设计稿宽度为 750，即 1rem = 75px
+            designWidth: 750,
+            // 可选，选择器黑名单
+            selectorBlackList: [],
+            // // 可选，替换rpx为其他单位后缀，例如 'px' 或 'rem'
+            propList: ["*"],
+            // 可选，媒体查询中是否禁用转换
+            mediaQuery: false,
+            // 可选，是否转换页面根节点字体大小，如body: font-size: 16px
+            minPixelValue: 0,
+
+          },
         },
         cssModules: {
-          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
           config: {
-            namingPattern: "module", // 转换模式，取值为 global/module
+            namingPattern: "module", // 转换模式，取值为 global/module，下文详细说明
             generateScopedName: "[name]__[local]___[hash:base64:5]",
           },
         },
       },
-      // devServer: {
-      //   host: "0.0.0.0",
-      //   // port: ,
-      //   proxy: {
-      //     "/api": {
-      //       target: "http://127.0.0.1:9087", // 服务端地址
-      //       pathRewrite: {
-      //         '/api': ''
-      //       },
-      //       changeOrigin: true,
-      //     },
-      //   },
-      // },
+      devServer: {
+        proxy: {
+          "/api": {
+            target: url, // 服务端地址
+            pathRewrite: {
+              "^/api": "",
+            },
+            changeOrigin: true,
+          },
+        },
+      },
     },
- 
   };
   if (process.env.NODE_ENV === "development") {
     return merge({}, config, devConfig);

jsconfig.json

@@ -4,10 +4,10 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    // 解决prettier对于装饰器语法的警告
-    "experimentalDecorators": true,
-    // 解决.jsx文件无法快速跳转的问题
-    "jsx": "preserve"
+    // // 解决prettier对于装饰器语法的警告
+    // "experimentalDecorators": true,
+    // // 解决.jsx文件无法快速跳转的问题
+    // "jsx": "preserve"
   },
   //提高  性能
   "exclude": ["node_modules", "dist", "build"]

package.json

@@ -41,12 +41,12 @@
     "@tarojs/helper": "3.6.25",
     "@tarojs/plugin-framework-react": "3.6.25",
     "@tarojs/plugin-platform-h5": "3.6.25",
-    "@tarojs/plugin-platform-weapp": "3.6.25",
     "@tarojs/plugin-platform-harmony-hybrid": "3.6.25",
-    "@tarojs/shared": "3.6.25",
+    "@tarojs/plugin-platform-weapp": "3.6.25",
     "@tarojs/react": "3.6.25",
     "@tarojs/router": "3.5.7",
     "@tarojs/runtime": "3.6.25",
+    "@tarojs/shared": "3.6.25",
     "@tarojs/taro": "3.6.25",
     "@zjxpcyc/js_event": "^1.0.0",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
@@ -62,11 +62,12 @@
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.11.0",
     "@tarojs/cli": "3.6.25",
-    "@tarojs/test-utils-react": "^0.1.1",
     "@tarojs/mini-runner": "3.6.25",
+    "@tarojs/test-utils-react": "^0.1.1",
     "@tarojs/webpack-runner": "3.6.25",
+    "@types/jest": "^29.3.1",
+    "@types/node": "^18.15.11",
     "@types/react": "^18.0.0",
     "@types/webpack-env": "^1.13.6",
     "babel-plugin-import": "^1.13.5",
@@ -76,12 +77,12 @@
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "@types/node": "^18.15.11",
-    "@types/jest": "^29.3.1",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.5.0",
-    "stylelint": "^14.4.0",
     "postcss": "^8.4.18",
+    "postcss-pxtorem": "^6.1.0",
+    "react-refresh": "^0.11.0",
+    "stylelint": "^14.4.0",
     "webpack": "4.46.0"
   }
 }

project.config.json

@@ -1,8 +1,8 @@
 {
     "miniprogramRoot": "dist/",
     "projectname": "civilized-miniapp",
-    "description": "文明城市小程序",
-    "appid": "wx39d721c54a0a11c4",
+    "description": "云致公众号",
+    "appid": "wxd3bab568bc42d1de",
     "setting": {
         "urlCheck": true,
         "es6": false,

src/app.js

@@ -1,25 +1,37 @@
-import Taro from '@tarojs/taro';
-import store, { Provider } from '@/store';
-import './app.less'
+import Taro from "@tarojs/taro";
+import store, { Provider, getState } from "@/store";
+import "./app.less";
+import { useEffect, useMemo } from "react";
+// import wxsdk from "./utils/wx";
 
 const App = (props) => {
+  // useEffect(async() => {
+  //   const userState = store.getState("user");
 
-  Taro.useLaunch(() => {
-    Taro.login({
-      success: (res) => {
-        console.log(res)
-        store.getState('user').login(res.code);
-      }
-    });
+  //   // 等待组件挂载完成
+  //   await Promise.resolve();
 
-    store.getState('user').current();
-  });
+  //   // 然后执行异步操作
+  //   await userState.login(123);
+  //   userState.current();
+  // }, []);
+  const init = async () => {
+    console.log(11111111111)
+    const userState = store.getState("user");
+    // 等待组件挂载完成
+    await Promise.resolve();
 
-  return (
-    <Provider>
-      {props.children}
-    </Provider>
-  );
-}
+    // 然后执行异步操作
+    await userState.login(123);
+    await userState.current();
+  };
+ 
 
-export default App
+  useEffect(() => {
+    init()
+  }, []);
+
+  return <Provider>{props.children}</Provider>;
+};
+
+export default App;

src/app.less

@@ -1,11 +1,11 @@
 /* stylelint-disable CssSyntaxError */
-
-page {
+:root {
   height: 100%;
   box-sizing: border-box;
   background: #f8f8f8;
   --main-bg-color: #1A7565;
   --main-space: 4vw;
+  // --main-space: 20px; /* 基准字体大小，您可以根据实际情况调整 */
 
   // antm-js 样式修改
   // 按钮
@@ -35,4 +35,12 @@ page {
 
 view {
   box-sizing: border-box;
-}
+}
+
+
+
+// @media (min-width: 750px) {
+//   page {
+//     font-size: calc(100vw / 7.5); /* 基于设计稿宽度750px计算的自适应字体大小 */
+//   }
+// }

src/index.html

@@ -8,6 +8,7 @@
   <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" >
+  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   <title>civilized-miniapp</title>
   <script><%= htmlWebpackPlugin.options.script %></script>
 </head>

src/layouts/index.jsx

@@ -14,16 +14,16 @@ export default (props) => {
   const { person, user, duty } = useModel('user');
   const containerClass = `${laySty['page-conatiner']} ${tabBar ? laySty['with-tabbar'] : ''} ${className}`;
 
-  React.useEffect(() => {
-    if (person && !user) {
-      const currentPage = Taro.getCurrentPages().slice().pop();
-      if ('pages/login/index' !== currentPage.route) {
-        Taro.navigateTo({
-          url: '/pages/login/index',
-        })
-      }
-    }
-  }, [person, user]);
+  // React.useEffect(() => {
+  //   if (person && !user) {
+  //     const currentPage = Taro.getCurrentPages().slice().pop();
+  //     if ('pages/login/index' !== currentPage.route) {
+  //       Taro.navigateTo({
+  //         url: '/pages/login/index',
+  //       })
+  //     }
+  //   }
+  // }, [person, user]);
 
   Taro.useShareAppMessage(() => {
     return {

src/services/wxma.js

@@ -15,6 +15,13 @@ export const authUser = (data) => request(`/api/ma/auth-user`, { data, method: '
  */
 export const login = (code) => request(`/api/ma/login?code=${code}`, { method: 'post', silent: true });
 
+/**
+ * 
+ * @param {*} data 
+ * @returns 
+ */
+login
+
 /*
  * 小程序登录
  */

src/store/user.js

@@ -17,11 +17,13 @@ export default function useUser() {
   const [duty, setDuty] = React.useState();
 
   const maLogin = (code) => {
-    console.log(code);
+    console.log(code)
     login(code).then((res) => {
       setPerson(res.person);
       Taro.setStorage({ key: "personId", data: res.person.personId });
       Taro.setStorage({ key: "sessionKey", data: res.sessionKey });
+    }).catch(e => {
+      console.log(e)
     });
   };
 
@@ -62,6 +64,8 @@ export default function useUser() {
     currentUser().then((res) => {
       setUser(res.user);
       initDuty(res.user);
+    }).catch(e => {
+      console.log(e)
     });
   };
 

src/utils/log.js

@@ -1,5 +1,9 @@
-import Taro from '@tarojs/taro';
+import Taro from "@tarojs/taro";
+import { H5 } from "./token";
 
-const logger = Taro.getRealtimeLogManager()
+let logger;
+if (!H5) {
+  logger = Taro.getRealtimeLogManager();
+}
 
 export default logger;

src/utils/request.js

@@ -1,36 +1,50 @@
-import Taro from '@tarojs/taro';
-import { getToken, setToken } from './token';
-import logger from './log';
+import Taro from "@tarojs/taro";
+import { H5, TARO_ENV, getToken, setToken } from "./token";
 
-const getQueryStrByParams = params => {
+import logger from "./log";
+
+const getQueryStrByParams = (params) => {
   if (!params) return undefined;
 
-  return Object.keys(params).map(key => {
-    const value = params[key];
-    return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-  }).join('&')
-}
+  return Object.keys(params)
+    .map((key) => {
+      const value = params[key];
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+    .join("&");
+};
 
 export default function request(api, options = {}) {
   return new Promise((resolve, reject) => {
-    const { method = 'GET', params, data = {}, header = {}, silent = false, noSuccesTip, ...cfgs } = options;
+    const {
+      method = "GET",
+      params,
+      data = {},
+      header = {},
+      silent = false,
+      noSuccesTip,
+      ...cfgs
+    } = options;
     const queryStr = params ? getQueryStrByParams(params) : undefined;
     // eslint-disable-next-line no-undef
     const url = queryStr ? `${HOST}${api}?${queryStr}` : `${HOST}${api}`;
-    const personId = Taro.getStorageSync('personId');
-    const duty = Taro.getStorageSync('duty');
-    
+    const personId = Taro.getStorageSync("personId");
+    const duty = Taro.getStorageSync("duty");
+
     const onError = (err) => {
       console.error(err);
-      logger.error(`接口 [${method}]: ${url}`);
-      logger.error('参数: ', data);
-      logger.error(err);
+      if (!H5) {
+        console.log(1)
+        logger.error(`接口 [${method}]: ${url}`);
+        logger.error("参数: ", data);
+        logger.error(err);
+      }
 
-      if (!silent && 'GET' !== method.toUpperCase()) {
+      if (!silent && "GET" !== method.toUpperCase()) {
         Taro.showModal({
           title: err.message || err,
           showCancel: false,
-        })
+        });
       }
 
       reject(err);
@@ -40,47 +54,50 @@ export default function request(api, options = {}) {
       url,
       data,
       method,
+      // mode: "no-cors",
       header: {
-        'x-client': 'miniapp',
-        'x-personId': personId,
-        'x-duty': duty,
-        'content-type': 'application/json',
-        'authorization': getToken(),
+        "x-client": "miniapp",
+        "x-personId": personId,
+        "x-duty": duty,
+        "content-type": "application/json",
+        authorization: getToken(),
         ...header,
       },
       ...cfgs,
-    }).then(({ statusCode, header, data = result }) => {
-      if (statusCode >= 300) {
-        logger.error(header);
-        return onError(`网络错误 ${statusCode}`);
-      }
-
-      if (data.code === 1000) {
-        if (data.data?.token) {
-          setToken(data.data.token);
+    })
+      .then(({ statusCode, header, data = result }) => {
+        if (statusCode >= 300) {
+          if (!H5) {
+            logger.error(header);
+          }
+          return onError(`网络错误 ${statusCode}`);
         }
 
-        if (!silent && 'GET' !== method.toUpperCase()) {
-          if (!noSuccesTip) {
-            Taro.showToast({
-              title: '操作成功',
-              icon: 'none',
-            })
+        if (data?.code === 1000) {
+          if (data.data?.token) {
+            setToken(data?.data?.token);
           }
-        }
 
-        resolve(data.data);
-      } else {
-        onError(data);
-      }
-    }).catch(onError);
+          if (!silent && "GET" !== method.toUpperCase()) {
+            if (!noSuccesTip) {
+              Taro.showToast({
+                title: "操作成功",
+                icon: "none",
+              });
+            }
+          }
 
+          resolve(data.data);
+        } else {
+          onError(data);
+        }
+      })
+      .catch(onError);
   });
 }
 
-
 export const uploadFiles = async (files, url) => {
-  const uploads = []
+  const uploads = [];
   const token = getToken();
   for (var i = 0; i < files.length; i++) {
     uploads[i] = new Promise((resolve, reject) => {
@@ -89,27 +106,27 @@ export const uploadFiles = async (files, url) => {
         url: url || `${HOST}/api/ma/file`,
         filePath: files[i].tempFilePath,
         header: {
-          'authorization': token,
+          authorization: token,
         },
-        name: 'file',
+        name: "file",
         formData: {
           fileType: files[i].fileType,
         },
         success: function (res) {
           // debugger
-          const _data = JSON.parse(res.data)
+          const _data = JSON.parse(res.data);
           // if (_data.code !== CODE_SUCCESS) {
           //   reject(new Error(_data.message))
           // }
 
-          resolve(_data.data)
+          resolve(_data.data);
         },
         fail(err) {
-          reject(err)
-        }
-      })
-    })
+          reject(err);
+        },
+      });
+    });
   }
 
-  return Promise.all(uploads)
-}
+  return Promise.all(uploads);
+};

src/utils/token.js

@@ -1,9 +1,15 @@
-import Taro from '@tarojs/taro';
+import Taro from "@tarojs/taro";
 
 export const getToken = function () {
-  return Taro.getStorageSync('token');
-}
+  return Taro.getStorageSync("token");
+};
 
 export const setToken = function (data) {
-  return Taro.setStorage({ key: 'token', data })
-}
+  return Taro.setStorage({ key: "token", data });
+};
+
+export const TARO_ENV = process.env.TARO_ENV; //那个端的
+
+export const H5 = TARO_ENV == "h5";
+
+export const Weapp = TARO_ENV == "weapp";

src/utils/wx.js

@@ -0,0 +1,121 @@
+let APPID = '';
+const isDev = false
+
+const API_BASE="http://127.0.0.1:9087"
+
+
+/**
+ * 获取 code
+ * @returns 
+ */
+export function getCode () {
+    if (isDev) return '123';
+  
+    const matched = /[?&]*code=([^&]+)/.exec(location.search)
+    if (matched) {
+      return decodeURIComponent(matched[1])
+    }
+  }
+  
+  /**
+   * 跳转授权页面
+   */
+  export function redirect () {
+    if (isDev) return;
+  
+    const appid = APPID || 'wxd3bab568bc42d1de';
+    const local = encodeURIComponent(location.origin + location.pathname)
+    const scope = 'snsapi_userinfo'; // snsapi_base
+    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=${scope}&state=123#wechat_redirect`
+    window.location.href = url;
+  }
+  function wxsdk() {
+    // API_BASE 来源 public/config.js
+    const apiBase = API_BASE // import.meta.env.VITE_APP_API_BASE
+  
+    // 分享接口
+    const shareAPIs = [
+      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
+      'updateAppMessageShareData',
+      // 自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
+      'updateTimelineShareData',
+      // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
+      'onMenuShareTimeline',
+      // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
+      'onMenuShareAppMessage',
+      // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
+      'onMenuShareQQ',
+      // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
+      'onMenuShareWeibo',
+      // 获取“分享到 QQ 空间”按钮点击状态及自定义分享内容接口（即将废弃）
+      'onMenuShareQZone',
+    ]
+  
+    let inited = false;
+  
+    function init() {
+      if (isDev) return;
+      const url = window.location.href;
+  
+      // 请求后台接口
+      fetch(`${apiBase}/api/wx/jsapi?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
+        if (res.code === 1000) {
+          const data = res.data;
+  
+          APPID = data.appId;
+  
+          wx.config({
+            debug: isDev, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
+            appId: data.appId, // 必填，公众号的唯一标识
+            timestamp: data.timestamp, // 必填，生成签名的时间戳
+            nonceStr: data.nonceStr, // 必填，生成签名的随机串
+            signature: data.signature,// 必填，签名
+            jsApiList: [
+              ...shareAPIs,
+              'openLocation',
+            ] // 必填，需要使用的 JS 接口列表
+          });
+        }
+      })
+    }
+  
+    function share(params = {}) {
+      if (isDev) return;
+  
+      if (!inited) {
+        init();
+      }
+  
+      wx.ready(() => {
+  
+        const shareData = {
+          ...shareOptTpl,
+          ...params
+        }
+  
+        console.log('---分享参数-->', shareData);
+  
+        for (let api of shareAPIs) {
+          wx[api]({
+            ...shareData,
+            success: () => {
+              console.log('分享成功: ', api)
+            },
+          });
+        }
+      });
+  
+      wx.error(function(res){
+        console.error('wx js-sdk error');
+        console.error(res);
+        console.error('<==============');
+      });
+    }
+  
+    return {
+      share,
+      getCode,
+      redirect,
+    }
+  }
+  export default wxsdk;