- 执行 dev:weapp => 打包生成对应的原生小程序文件(dist 文件夹)
- 再通过微信小程序打开打包后的文件夹，可以查看项目 1.
- 每次更新代码，微信小程序需要重新编译才能更新
Error: module 'vendors-node_modules_taro_weapp_prebundle_react-dom_js.js' is not defined, require args is './vendors-node_modules_taro_weapp_prebundle_react-dom_js.js'- 解决方案 在./config/index 文件中，
// 原本
compiler: 'webpack5',
// 改后
compiler: { type: "webpack5", prebundle: { enable: false } },- config 文件夹下的 index 文件
- baseConfig 对象中 添加 sass 对象设置
sass: {
// 设置全局样式变量
data: `$primaryColor: '#0080ff';`,
},- 重新配置
// 配置
// app.scss
.color-red {
color: red;
}
// 使用
// flight => tab => index
<SwiperItem className="color-red">111</SwiperItem>// vscode 配置 - jsconfig.js
"baseUrl": ".",
"paths": {
"@/components/*": ["./src/components/*"],
"@/common/*": ["./src/common/*"]
}// vscode 配置 jsconfig.json
"experimentalDecorators": true, //加上
// eslint 配置
"parserOptions": {
"ecmaFeatures" : {
"legacyDecorators": true, // 允许使用修饰符
}
}- 库：dva.js
- dva 实例注册 => src/dva.js => export default createApp
- 模块管理 => src/models => index 统一导出 models 数组
- app 引入
import { Provide } from "react-redux";
import createApp from "./src/dva.js";
import models from "./src/models";
const store = createApp({
initialState: {},
models,
});- store 属性提供 配置
import { connect } from "react-redux";
const mapStoreToProps = (store) => store.flightIndex;
export default connect(mapStoreToProps)(FlightContent);- 安装 taro-ui
- h5 常见问题: You may need an appropriate loader to handle this file type 需要在 config/index.js 文件中添加如下配置项：
// config/index.js
h5: {
esnextModules: ["taro-ui"];
}- 右上角菜单“转发”
- Button 组件 openType='share'
- 在当前页面设置 onShareAppMessage
- onShareAppMessage 只有在页面才能触发，组件无法触发
// 封装装饰器实现页面分享功能
const withShare = (opts) => {
// 返回react高阶组件
/**
* WrapperComponent withShare包裹的组件
* @{param}
*/
return (WrapperComponent) => {
class MyComponent extends WrapperComponent {
onShareAppMessage() {
console.log(this.props);
return {
...opts,
path: `/${this.props.tid}`,
};
}
}
return MyComponent;
};
};
export default withShare;参考 小程序登录文档： https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
// express 新增两个中间件
// 当请求体content-type 时application/json时,并映射到req.body上
app.use(express.json());
// 当请求体content-type 时application/x-www-form-urlencoded时
app.use(express.urlencoded({ extended: false }));- 创建 user 表&store 中的 user 模块
- 用户输入相关信息，接受并对比数据库中是否存在
- 如果存在，则说明登录操作 => 登录成功/失败
- 如果不村子，则说明注册操作 => 提示
- 登录成功后，将用户信息存到 storage 以及 store 中 => setStorageSync
- 后续操作需要从 storage 中获取信息并携带过去 => getStorageSync
- 最后 removeStorageSync
- 设置缓存时，传入一个缓存的有效时间， 缓存一个过期时间的值 => 设置缓存时 + 缓存有效时间
- 获取缓存时，用当前获取缓存的时间与过期时间进行比较，大于则已过期，此时会移除数据，如果小于就返回数据
- 服务端验证 => 需要后端接口返回登录态
- 客户端验证 => 前端验证
- 通过封装高阶组件，在生命周期中判断 storage 中是否存有用户信息进而判断是否需要重定向到登录页
- 两种 connect 方式不同，props 获取不到
// 情况一：
import { connect } from 'react-redux'
@connect((store) => {
return ({
...store
})
})
class Detail extends React.PureComponent {...
render() {
const { nickName,isLogin } = this.props.user // 能拿到
return (...)
}
}
// 情况二
import { connect } from 'react-redux'
class Detail extends React.PureComponent {...
render() {
const { nickName,isLogin } = this.props.user // 拿不到
return (...)
}
}
const mapStateToProps = (store) => {
return ({
...store
})
}
export default connect(mapStateToProps)(Detail)- 类似于防抖节流的原理，将函数传进入，先走一段判断是否需要重定向登录页的逻辑
- 用户信息与订单信息进行强绑定
- 根据不同的环境 生成 对应的包文件夹
// config/index.js
const TARO_ENT = process.env.TARO_ENV // 获取环境
const baseConfig = {
...
// 编译输出的路径
outputRoot: `dist/${TARO_ENV}`,
}- 运行对应的命令 - 详见 package.json
// 支付宝
yarn run dev:alipay
// 微信
yarn run dev:weapp
// ...- 根据不同的环境做兼容性处理 - https://taro-docs.jd.com/docs/apis/about/env#taroenv_type
// 以支付宝小程序为例
// 1. taro当前的环境
isAlipay: Taro.ENV_TYPE.ALIPAY === Taro.getEnv()
// 2. 根据环境是否使用滑动动画
<ScrollView
scrollY
scrollAnimationDuration={!tools.isAlipay}
scrollIntoView={...}
>
...
</ScrollView>
// 3. 方法上的兼容
// 支付宝小程序对promise支持不太友好
// 安装包解决
yarn add promise-prototype-finally
// 入口文件引用 isH5: Taro.ENV_TYPE.WEB === Taro.getEnv(),
// 修改api前缀
const API_PRE = tools.isH5 ? "" : "http://localhost:3000";
// 开发环境配置
export default {
...
h5: {
devServer: {
proxy: [
{
context: ["/"], //代理本地所有以'/'开头的接口
target: "http://localhost:3000",
changeOrigin: true,
},
],
},
},
};Error
[object Object]
Call Stack
rejectionHandler
node_modules/@pmmmwh/react-refresh-webpack-plugin/client/utils/errorEventHandlers.js:52:21
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent