无终街支付小程序项目初始化
This commit is contained in:
commit
2436a113f1
12
.editorconfig
Normal file
12
.editorconfig
Normal file
@ -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
|
3
.env.development
Normal file
3
.env.development
Normal file
@ -0,0 +1,3 @@
|
||||
# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
|
||||
# TARO_APP_ID="开发环境下的小程序 AppID"
|
||||
# appId不在此维护,统一放到config下维护,用process.env.xxx来获取
|
2
.env.production
Normal file
2
.env.production
Normal file
@ -0,0 +1,2 @@
|
||||
# TARO_APP_ID="生产环境下的小程序 AppID"
|
||||
# appId不在此维护,统一放到config下维护,用process.env.xxx来获取
|
2
.env.test
Normal file
2
.env.test
Normal file
@ -0,0 +1,2 @@
|
||||
# TARO_APP_ID="测试环境下的小程序 AppID"
|
||||
# appId不在此维护,统一放到config下维护,用process.env.xxx来获取
|
7
.eslintrc
Normal file
7
.eslintrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": ["taro/react"],
|
||||
"rules": {
|
||||
"react/jsx-uses-react": "off",
|
||||
"react/react-in-jsx-scope": "off"
|
||||
}
|
||||
}
|
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
dist/
|
||||
deploy_versions/
|
||||
.temp/
|
||||
.rn_temp/
|
||||
node_modules/
|
||||
.DS_Store
|
||||
.swc
|
||||
*.local
|
6
README.md
Normal file
6
README.md
Normal file
@ -0,0 +1,6 @@
|
||||
# 无终街小程序
|
||||
# 本地开发启动指令 npm run dev:weapp
|
||||
# 项目基于Taro 文档地址:https://docs.taro.zone/docs/
|
||||
|
||||
# 技术栈:Taro + react + less
|
||||
|
12
babel.config.js
Normal file
12
babel.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
// babel-preset-taro 更多选项和默认值:
|
||||
// https://docs.taro.zone/docs/next/babel-config
|
||||
module.exports = {
|
||||
presets: [
|
||||
['taro', {
|
||||
framework: 'react',
|
||||
ts: false,
|
||||
compiler: 'webpack5',
|
||||
useBuiltIns: process.env.TARO_ENV === 'h5' ? 'usage' : false
|
||||
}]
|
||||
]
|
||||
}
|
14
config/dev.js
Normal file
14
config/dev.js
Normal file
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
env: {
|
||||
NODE_ENV: JSON.stringify('development'),
|
||||
baseApiUrl: JSON.stringify(''),
|
||||
name: JSON.stringify('test'),
|
||||
appId: JSON.stringify('wx87a5db19138da60d'),
|
||||
},
|
||||
logger: {
|
||||
quiet: false,
|
||||
stats: true
|
||||
},
|
||||
mini: {},
|
||||
h5: {}
|
||||
}
|
95
config/index.js
Normal file
95
config/index.js
Normal file
@ -0,0 +1,95 @@
|
||||
import { defineConfig } from '@tarojs/cli'
|
||||
|
||||
import devConfig from './dev'
|
||||
import prodConfig from './prod'
|
||||
|
||||
// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
|
||||
export default defineConfig(async (merge, { command, mode }) => {
|
||||
const baseConfig = {
|
||||
projectName: 'taro-mini',
|
||||
date: '2025-8-01',
|
||||
designWidth: 375,
|
||||
deviceRatio: {
|
||||
640: 2.34 / 2,
|
||||
750: 1,
|
||||
375: 2,
|
||||
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: {
|
||||
|
||||
}
|
||||
},
|
||||
cssModules: {
|
||||
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
|
||||
config: {
|
||||
namingPattern: 'module', // 转换模式,取值为 global/module
|
||||
generateScopedName: '[name]__[local]___[hash:base64:5]'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
h5: {
|
||||
publicPath: '/',
|
||||
staticDirectory: 'static',
|
||||
output: {
|
||||
filename: 'js/[name].[hash:8].js',
|
||||
chunkFilename: 'js/[name].[chunkhash:8].js'
|
||||
},
|
||||
miniCssExtractPluginOption: {
|
||||
ignoreOrder: true,
|
||||
filename: 'css/[name].[hash].css',
|
||||
chunkFilename: 'css/[name].[chunkhash].css'
|
||||
},
|
||||
postcss: {
|
||||
autoprefixer: {
|
||||
enable: true,
|
||||
config: {}
|
||||
},
|
||||
cssModules: {
|
||||
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
|
||||
config: {
|
||||
namingPattern: 'module', // 转换模式,取值为 global/module
|
||||
generateScopedName: '[name]__[local]___[hash:base64:5]'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
rn: {
|
||||
appName: 'taroDemo',
|
||||
postcss: {
|
||||
cssModules: {
|
||||
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
process.env.BROWSERSLIST_ENV = process.env.NODE_ENV
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// 本地开发构建配置(不混淆压缩)
|
||||
return merge({}, baseConfig, devConfig)
|
||||
}
|
||||
// 生产构建配置(默认开启压缩混淆等)
|
||||
return merge({}, baseConfig, prodConfig)
|
||||
})
|
45
config/prod.js
Normal file
45
config/prod.js
Normal file
@ -0,0 +1,45 @@
|
||||
|
||||
|
||||
export default {
|
||||
env: {
|
||||
NODE_ENV: JSON.stringify('production'),
|
||||
baseApiUrl: JSON.stringify(''),
|
||||
name: JSON.stringify('production'),
|
||||
appId: JSON.stringify('wx87a5db19138da60d'),
|
||||
},
|
||||
mini: {},
|
||||
h5: {
|
||||
compile: {
|
||||
include: [
|
||||
// 确保产物为 es5
|
||||
filename => /node_modules\/(?!(@babel|core-js|style-loader|css-loader|react|react-dom))/.test(filename)
|
||||
]
|
||||
},
|
||||
/**
|
||||
* 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') })
|
||||
// }))
|
||||
// }
|
||||
}
|
||||
}
|
87
package.json
Normal file
87
package.json
Normal file
@ -0,0 +1,87 @@
|
||||
{
|
||||
"name": "wuzhongjie-mini",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "无终街",
|
||||
"templateInfo": {
|
||||
"name": "default",
|
||||
"typescript": false,
|
||||
"css": "Less",
|
||||
"framework": "React"
|
||||
},
|
||||
"scripts": {
|
||||
"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:harmony-hybrid": "taro build --type harmony-hybrid",
|
||||
"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:harmony-hybrid": "npm run build:harmony-hybrid -- --watch"
|
||||
},
|
||||
"browserslist": {
|
||||
"development": [
|
||||
"defaults and fully supports es6-module",
|
||||
"maintained node versions"
|
||||
],
|
||||
"production": [
|
||||
"last 3 versions",
|
||||
"Android >= 4.1",
|
||||
"ios >= 8"
|
||||
]
|
||||
},
|
||||
"author": "https://github.com/youyouliangshao",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.24.4",
|
||||
"@tarojs/components": "4.1.2",
|
||||
"@tarojs/helper": "4.1.2",
|
||||
"@tarojs/plugin-framework-react": "4.1.2",
|
||||
"@tarojs/plugin-platform-alipay": "4.1.2",
|
||||
"@tarojs/plugin-platform-h5": "4.1.2",
|
||||
"@tarojs/plugin-platform-harmony-hybrid": "4.1.2",
|
||||
"@tarojs/plugin-platform-jd": "4.1.2",
|
||||
"@tarojs/plugin-platform-qq": "4.1.2",
|
||||
"@tarojs/plugin-platform-swan": "4.1.2",
|
||||
"@tarojs/plugin-platform-tt": "4.1.2",
|
||||
"@tarojs/plugin-platform-weapp": "4.1.2",
|
||||
"@tarojs/react": "4.1.2",
|
||||
"@tarojs/runtime": "4.1.2",
|
||||
"@tarojs/shared": "4.1.2",
|
||||
"@tarojs/taro": "4.1.2",
|
||||
"dayjs": "^1.11.13",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.4",
|
||||
"@babel/plugin-transform-class-properties": "7.25.9",
|
||||
"@babel/preset-react": "^7.24.1",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
|
||||
"@tarojs/cli": "4.1.2",
|
||||
"@tarojs/taro-loader": "4.1.2",
|
||||
"@tarojs/webpack5-runner": "4.1.2",
|
||||
"@types/node": "^18",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/webpack-env": "^1.13.6",
|
||||
"babel-preset-taro": "4.1.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-taro": "4.1.2",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.4.0",
|
||||
"less": "^4.2.0",
|
||||
"postcss": "^8.4.38",
|
||||
"react-refresh": "^0.14.0",
|
||||
"stylelint": "^16.4.0",
|
||||
"webpack": "5.91.0"
|
||||
}
|
||||
}
|
46
project.config.json
Normal file
46
project.config.json
Normal file
@ -0,0 +1,46 @@
|
||||
{
|
||||
"miniprogramRoot": "dist/",
|
||||
"projectname": "wuzhongjie-mini",
|
||||
"description": "无终街",
|
||||
"appid": "wx87a5db19138da60d",
|
||||
"setting": {
|
||||
"enableDebug": true,
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
"enhance": true,
|
||||
"compileHotReLoad": false,
|
||||
"postcss": false,
|
||||
"minified": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"compileWorklet": false,
|
||||
"uglifyFileName": false,
|
||||
"uploadWithSourceMap": true,
|
||||
"packNpmManually": false,
|
||||
"packNpmRelationList": [],
|
||||
"minifyWXSS": true,
|
||||
"minifyWXML": true,
|
||||
"localPlugins": false,
|
||||
"disableUseStrict": false,
|
||||
"useCompilerPlugins": false,
|
||||
"condition": false,
|
||||
"swc": false,
|
||||
"disableSWC": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "3.8.9",
|
||||
"srcMiniprogramRoot": "dist/",
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "auto",
|
||||
"tabSize": 4
|
||||
},
|
||||
"simulatorPluginLibVersion": {}
|
||||
}
|
24
project.private.config.json
Normal file
24
project.private.config.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"projectname": "myApp",
|
||||
"setting": {
|
||||
"compileHotReLoad": true,
|
||||
"urlCheck": false,
|
||||
"coverView": false,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"skylineRenderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"autoAudits": false,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"showShadowRootInWxmlPanel": false,
|
||||
"useStaticServer": false,
|
||||
"useLanDebug": false,
|
||||
"showES6CompileOption": false,
|
||||
"checkInvalidKey": true,
|
||||
"ignoreDevUnusedFiles": true,
|
||||
"bigPackageSizeSupport": true
|
||||
},
|
||||
"libVersion": "3.8.9",
|
||||
"condition": {}
|
||||
}
|
8
src/api/home.js
Normal file
8
src/api/home.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { RequestMini } from './request';
|
||||
|
||||
/***********首页相关api****************/
|
||||
|
||||
// 首页
|
||||
export function homePageInfoList(data) {
|
||||
return RequestMini.request('/v1/xxx', data);
|
||||
}
|
80
src/api/request.js
Normal file
80
src/api/request.js
Normal file
@ -0,0 +1,80 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
import { getToken, removeToken, removeUserInfo } from '../utils/util';
|
||||
|
||||
function Request(baseApiUrl) {
|
||||
this.baseApiUrl = baseApiUrl; //后端接口域名
|
||||
}
|
||||
// 过滤数据
|
||||
const filterDataNull = data => {
|
||||
if (!data) return {};
|
||||
Object.keys(data).forEach(key => {
|
||||
if (typeof data[key] == 'undefined' || data[key] === 'undefined' || data[key] === null) {
|
||||
delete data[key];
|
||||
}
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
// 请求
|
||||
Request.prototype.request = function (url, data = {}, options = {}) {
|
||||
|
||||
data = filterDataNull(data);
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let token = getToken() || '';
|
||||
let timestamp = parseInt(+new Date() / 1000);
|
||||
const requestData = {
|
||||
...data,
|
||||
};
|
||||
Taro.request({
|
||||
url: `${this.baseApiUrl}${url}`, //获取域名接口地址
|
||||
method: options.method || 'POST', //配置method方法
|
||||
data: requestData,
|
||||
//如果是GET,GET自动让数据成为query String,其他方法需要让options.data转化为字符串
|
||||
header: {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
// token: token,
|
||||
Authorization: `Bearer ${token}`,
|
||||
timestamp,
|
||||
},
|
||||
timeout: 300000,
|
||||
//header中可以监听到token值的变化
|
||||
success: response => {
|
||||
const requestConf={
|
||||
'接口地址=>>': `${this.baseApiUrl}${url}`,
|
||||
'请求参数:':JSON.stringify({ ...data, ...options }),
|
||||
'接口请求结果=>>':JSON.stringify(response.data||'')
|
||||
}
|
||||
console.log('接口=>>>>>>>>>>>>>>>>', requestConf);
|
||||
//监听成功后的操作
|
||||
if (response.data.code === 0) {
|
||||
resolve(response.data);
|
||||
} else if ( response.data.code === 3 || response.data.code === 4 ) {
|
||||
Taro.showToast({
|
||||
title: response.data.msg || '当前登录用户状态已失效,请重新登陆!',
|
||||
icon: 'error',
|
||||
});
|
||||
removeUserInfo();
|
||||
removeToken();
|
||||
Taro.reLaunch({
|
||||
url: '/pages/index/index',
|
||||
});
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: response.data.msg || '抱歉服务器出小差了!',
|
||||
icon: 'none',
|
||||
duration: 3000,
|
||||
});
|
||||
//如果没有获取成功返回值,把request.data传入到reject中
|
||||
reject(response.data);
|
||||
}
|
||||
},
|
||||
fail: error => {
|
||||
// console.error('接口请求失败=>>', `${this.baseApiUrl}${url}`, JSON.stringify(error))
|
||||
//返回失败也同样传入reject()方法
|
||||
reject(error);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const RequestMini = new Request(process.env.baseApiUrl); // 小程序接口请求体
|
12
src/app.config.js
Normal file
12
src/app.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
// eslint-disable-next-line
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/index/index'
|
||||
],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationBarTitleText: 'WeChat',
|
||||
navigationBarTextStyle: 'black'
|
||||
}
|
||||
})
|
35
src/app.js
Normal file
35
src/app.js
Normal file
@ -0,0 +1,35 @@
|
||||
import Taro, { useLaunch } from '@tarojs/taro';
|
||||
import { View } from '@tarojs/components';
|
||||
import { setGlobalData } from './utils/globalData';
|
||||
|
||||
import './app.less'
|
||||
function App({ children }) {
|
||||
useLaunch(async () => {
|
||||
setCustomNav();
|
||||
});
|
||||
|
||||
// 自定义导航
|
||||
const setCustomNav = () => {
|
||||
const MenuButton = Taro.getMenuButtonBoundingClientRect();
|
||||
const res = Taro.getWindowInfo();
|
||||
let statusBarHeight = res.statusBarHeight;
|
||||
const contentPaddingLeft = res.windowWidth - MenuButton.right;
|
||||
const navHeight = statusBarHeight + MenuButton.height + (MenuButton.top - statusBarHeight) * 2; //导航高度
|
||||
setGlobalData('customNav', {
|
||||
height: navHeight,
|
||||
menuButtonTop: MenuButton.top,
|
||||
menuButtonHeight: MenuButton.height,
|
||||
menuButtonWidth: MenuButton.width,
|
||||
contentPaddingLeft,
|
||||
statusBarHeight,
|
||||
});
|
||||
|
||||
};
|
||||
// children 是将要会渲染的页面
|
||||
return <View>{children}
|
||||
</View>
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default App
|
9
src/app.less
Normal file
9
src/app.less
Normal file
@ -0,0 +1,9 @@
|
||||
|
||||
.taro-textarea {
|
||||
resize: none;
|
||||
}
|
||||
View{
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: break-spaces;
|
||||
}
|
48
src/hooks/useScrollLoad.js
Normal file
48
src/hooks/useScrollLoad.js
Normal file
@ -0,0 +1,48 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
export default function useScrollLoad(fetchFn, dataKey = 'data_list') {
|
||||
const [list, setList] = useState([]);
|
||||
const next_cursor = useRef("0");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [noMore, setNoMore] = useState(false);
|
||||
|
||||
const loadData = async (cursor) => {
|
||||
if (loading || noMore) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data = {} } = await fetchFn({ next_cursor: cursor });
|
||||
setList((prev) => [...prev, ...((data ? data[dataKey] : []) || [])]);
|
||||
next_cursor.current = data?.next_cursor;
|
||||
if (!data?.has_more) {
|
||||
setNoMore(true);
|
||||
}
|
||||
} catch (error) {
|
||||
Taro.showToast({ title: "加载失败", icon: "none" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const refresh = () => {
|
||||
setList([]);
|
||||
(next_cursor.current = "0"), setNoMore(false);
|
||||
loadData("0");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const userToken = Taro.getStorageSync("token");
|
||||
if (userToken) {
|
||||
loadData("0");
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
list,
|
||||
loading,
|
||||
noMore,
|
||||
loadMore: () => loadData(next_cursor.current),
|
||||
refresh,
|
||||
};
|
||||
}
|
BIN
src/images/common/goBack.png
Normal file
BIN
src/images/common/goBack.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 183 B |
17
src/index.html
Normal file
17
src/index.html
Normal file
@ -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>无终街</title>
|
||||
<script><%= htmlWebpackPlugin.options.script %></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
4
src/pages/index/index.config.js
Normal file
4
src/pages/index/index.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
// eslint-disable-next-line no-undef
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '无终街'
|
||||
})
|
52
src/pages/index/index.jsx
Normal file
52
src/pages/index/index.jsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { View, Text, Image } from '@tarojs/components'
|
||||
import { useState} from 'react'
|
||||
import './index.less'
|
||||
|
||||
export default function Index () {
|
||||
// 切换tab
|
||||
const [courseList, setCourseList] = useState(
|
||||
[{
|
||||
id:1,
|
||||
name:'第一节课',
|
||||
characters:'课程简介',
|
||||
price:'免费',
|
||||
bgUrl:'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9e65ef7e8657491fab18b3595e48dfde.png'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:'第二节课',
|
||||
characters:'课程简介',
|
||||
price:'免费',
|
||||
bgUrl:'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/8e33ab68ef734558bdc158d6b1b1451f.png'
|
||||
}
|
||||
]
|
||||
);
|
||||
const goDetailPage =()=>{
|
||||
|
||||
}
|
||||
const renderIndexCourseList = ()=>{
|
||||
return courseList.map(item=>{
|
||||
return(
|
||||
<View onClick={goDetailPage} className="product-card" key={item.id}>
|
||||
<View className="image-container">
|
||||
<Image mode="aspectFit" src={item.bgUrl}/>
|
||||
</View>
|
||||
<View className="context">
|
||||
<View className="title-top">{item.name}</View>
|
||||
<View className="con-center">{item.characters}</View>
|
||||
<Text className="price">免费</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<View class="main">
|
||||
{
|
||||
renderIndexCourseList()
|
||||
}
|
||||
<view className="coming">更多课程敬请期待~</view>
|
||||
</View>
|
||||
|
||||
)
|
||||
}
|
82
src/pages/index/index.less
Normal file
82
src/pages/index/index.less
Normal file
@ -0,0 +1,82 @@
|
||||
|
||||
.main {
|
||||
width: 375px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
background: #f5f0eb;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
.product-card {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
.image-container {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
Image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.context {
|
||||
margin-left: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-top {
|
||||
font-size: 17px;
|
||||
color: #303030;
|
||||
font-weight: bold;
|
||||
line-height: 33px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 180px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.con-center {
|
||||
font-size: 13px;
|
||||
color: #606060;
|
||||
line-height: 22.5px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
width: 180px;
|
||||
margin-right: 25px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 18px;
|
||||
color: rgb(240, 30, 30);
|
||||
font-weight: bold;
|
||||
/* position: absolute;
|
||||
left: 0;
|
||||
bottom: 7px;*/
|
||||
}
|
||||
}
|
||||
.coming {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
9
src/utils/globalData.js
Normal file
9
src/utils/globalData.js
Normal file
@ -0,0 +1,9 @@
|
||||
const globalData = {}
|
||||
|
||||
export function setGlobalData(key, val) {
|
||||
globalData[key] = val
|
||||
}
|
||||
|
||||
export function getGlobalData(key) {
|
||||
return globalData[key]
|
||||
}
|
80
src/utils/userInfo.js
Normal file
80
src/utils/userInfo.js
Normal file
@ -0,0 +1,80 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
import { weChatMiniLogin } from '../api/user';
|
||||
import {setToken, setUserInfo} from "./util";
|
||||
|
||||
// 开始获取code去登录
|
||||
const initLogin = (params,maxCount = 2) => {
|
||||
return new Promise((resolve, reject) =>{
|
||||
Taro.login({
|
||||
force: true,
|
||||
success: async (res) => {
|
||||
try{
|
||||
if(res.errMsg == 'login:ok'){
|
||||
resolve(await doLogin({...res,...params}));
|
||||
} else {
|
||||
reject(res);
|
||||
}
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
},
|
||||
fail: (err)=>{
|
||||
maxCount <= 1? reject(err) : initLogin(params,maxCount-1);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 登录 获取用户信息
|
||||
const doLogin = (resData) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
weChatMiniLogin({
|
||||
wechat_token: resData.code,
|
||||
appId: process.env.appId,
|
||||
nickname: resData.nickname,
|
||||
avatar_url: resData.avatar_url,
|
||||
}).then(res => {
|
||||
// 缓存用户信息
|
||||
Taro.setStorageSync('userInfo', res.data);
|
||||
setToken(res?.data?.session_token||'');
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
// 登录且返回用户信息
|
||||
export const userLogin = async (params)=> {
|
||||
// 全局事件池
|
||||
Taro.userInfoPoolList = Taro.userInfoPoolList || [];
|
||||
const userInfo = Taro.getStorageSync('userInfo') || {}
|
||||
return new Promise((resolve, reject) => {
|
||||
/*const LOGIN_TIME = Taro.getStorageSync('LOGIN_TIME');
|
||||
const NEW_TIME = +new Date().getTime();*/
|
||||
// if (userInfo.token && !!LOGIN_TIME && ((NEW_TIME - LOGIN_TIME) < 1000*60*60*24)) { // 登录时效性为1天
|
||||
if (userInfo.token) { // 登录时效性为1天
|
||||
// 有token直接执行
|
||||
resolve(userInfo);
|
||||
} else {
|
||||
Taro.userInfoPoolList.push({
|
||||
resolve,
|
||||
reject
|
||||
});
|
||||
if (!Taro.isUserInfo) {
|
||||
Taro.isUserInfo = true;
|
||||
initLogin(params).then((data) => {
|
||||
Taro.userInfoPoolList.forEach((item) => {
|
||||
item.resolve && item.resolve(data);
|
||||
});
|
||||
}).catch((error) => {
|
||||
// 登陆接口失败遍历执行reject
|
||||
Taro.userInfoPoolList.forEach((item) => {
|
||||
item.reject && item.reject(error);
|
||||
});
|
||||
}).finally(() => {
|
||||
Taro.isUserInfo = false;
|
||||
Taro.userInfoPoolList = [];
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
212
src/utils/util.js
Normal file
212
src/utils/util.js
Normal file
@ -0,0 +1,212 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
// 随机字符串
|
||||
export const randomString = (length = 32) => {
|
||||
const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
let result = '';
|
||||
for (let i = length; i > 0; ) {
|
||||
result += chars[Math.floor(Math.random() * chars.length)];
|
||||
i -= 1;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
// 深度拷贝
|
||||
export const deepClone = source => {
|
||||
if (!source && typeof source !== 'object') {
|
||||
throw new Error('error arguments', 'deepClone');
|
||||
}
|
||||
const targetObj = source.constructor === Array ? [] : {};
|
||||
Object.keys(source).forEach(keys => {
|
||||
if (source[keys] && typeof source[keys] === 'object') {
|
||||
targetObj[keys] = deepClone(source[keys]);
|
||||
} else {
|
||||
targetObj[keys] = source[keys];
|
||||
}
|
||||
});
|
||||
return targetObj;
|
||||
};
|
||||
// 本地存储
|
||||
const setStorageSync = (key, value) => {
|
||||
Taro.setStorageSync(key, value);
|
||||
};
|
||||
|
||||
// 本地存储
|
||||
const getStorageSync = key => {
|
||||
return Taro.getStorageSync(key);
|
||||
};
|
||||
|
||||
// 移除本地存储
|
||||
const removeStorageSync = key => {
|
||||
Taro.removeStorageSync(key);
|
||||
};
|
||||
|
||||
// 设置用户信息
|
||||
export const setUserInfo = userInfo => {
|
||||
if(userInfo){
|
||||
setStorageSync('userInfo', userInfo);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取用户信息
|
||||
export const getUserInfo = () => {
|
||||
return getStorageSync('userInfo') || {};
|
||||
|
||||
};
|
||||
|
||||
// 移除用户信息
|
||||
export const removeUserInfo = () => {
|
||||
return removeStorageSync('userInfo');
|
||||
};
|
||||
|
||||
// 设置token
|
||||
export const setToken = token => {
|
||||
setStorageSync('token', token);
|
||||
};
|
||||
|
||||
// 获取token
|
||||
export const getToken = () => {
|
||||
return getStorageSync('token');
|
||||
};
|
||||
|
||||
// 移除token
|
||||
export const removeToken = () => {
|
||||
return removeStorageSync('token');
|
||||
};
|
||||
|
||||
// 判断是否是微信小程序
|
||||
export const isWeapp = () => {
|
||||
return true;
|
||||
};
|
||||
|
||||
// 是否小程序webview
|
||||
export const isMiniWebview = () => {
|
||||
return (window.__wxjs_environment && window.__wxjs_environment === 'miniprogram') || navigator.userAgent.toLowerCase().includes('miniprogram')
|
||||
};
|
||||
|
||||
/*
|
||||
* 判断当前设备类型是否为ios
|
||||
**/
|
||||
export const isApp = () => {
|
||||
return isAndroid() || isIos();
|
||||
};
|
||||
|
||||
/*
|
||||
* 判断当前设备类型是否为Android
|
||||
**/
|
||||
export const isAndroid = () => {
|
||||
let u = navigator.userAgent;
|
||||
// console.log(u)
|
||||
if (u.indexOf('app/Android') != -1) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
/*
|
||||
* 判断当前设备类型是否为ios
|
||||
**/
|
||||
export const isIos = () => {
|
||||
let u = navigator.userAgent;
|
||||
if (u.indexOf('app/iOS') != -1) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 获取剪贴板
|
||||
export const getClipCopy = callback => {
|
||||
Taro.getClipboardData({
|
||||
success: function (res) {
|
||||
Taro.showToast({
|
||||
title: toastText || '复制成功',
|
||||
icon: 'none',
|
||||
});
|
||||
if (callback && typeof callback === 'function') {
|
||||
callback(res.data);
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '获取剪贴板内容失败',
|
||||
icon: 'error',
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 节流函数 在delay ms内 只触发一次,从而提升性能,
|
||||
// 如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。
|
||||
export const throttle = (fn, gapTime = 1500) => {
|
||||
let _lastTime = null;
|
||||
// 返回新的函数
|
||||
return function () {
|
||||
let _nowTime = +new Date();
|
||||
if (_nowTime - _lastTime > gapTime || !_lastTime) {
|
||||
fn.apply(this, arguments); //将this和参数传给原函数
|
||||
_lastTime = _nowTime;
|
||||
}
|
||||
};
|
||||
};
|
||||
// 防抖函数
|
||||
// 基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:
|
||||
|
||||
// 如果在200ms内没有再次触发滚动事件,那么就执行函数
|
||||
// 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
|
||||
export const debounce = (fn, delay = 300) => {
|
||||
let timer = null; // 借助闭包
|
||||
return function () {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(fn, delay); // 简化写法
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 将分转换为元,保留两位小数
|
||||
* @param {number} fen 金额(分)
|
||||
* @returns {string} 金额(元),保留两位小数
|
||||
*/
|
||||
export const fenToYuan =(fen)=> {
|
||||
// 确保输入是数字
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
if (typeof fen !== 'number' || isNaN(fen)) {
|
||||
return '0.00'
|
||||
throw new Error('输入必须是一个有效的数字');
|
||||
}
|
||||
|
||||
// 分转换为元并保留两位小数
|
||||
const yuan = (fen / 100).toFixed(2);
|
||||
|
||||
return yuan;
|
||||
}
|
||||
|
||||
|
||||
// 拉起支付
|
||||
export const requestWeixinPay = (payParams,successCallBack,failCallBack) => {
|
||||
return new Promise((resolve, reject) =>{
|
||||
Taro.requestPayment({
|
||||
timeStamp: payParams.time_stamp || "",
|
||||
nonceStr: payParams.nonce_str || "",
|
||||
package: payParams.package || "",
|
||||
signType: payParams.sign_type,
|
||||
paySign: payParams.pay_sign || "",
|
||||
success: function () {
|
||||
resolve()
|
||||
},
|
||||
fail: function (res) {
|
||||
reject()
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
// 随机生成某区间的数值不重复
|
||||
export const generateRandomNumbers = (length = 10) => {
|
||||
const arr = Array.from({ length: length }, (_, i) => i + 1); // 创建1-20的数组
|
||||
for (let i = arr.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1)); // 随机索引 [0, i]
|
||||
[arr[i], arr[j]] = [arr[j], arr[i]]; // 交换元素
|
||||
}
|
||||
return arr;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user