无终街支付小程序项目初始化
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