jinjinwa / umi-antd-mobile Goto Github PK

View Code? Open in Web Editor NEW

294.0 8.0 74.0 321 KB

基于umi+antd-mobile的移动端项目模板

JavaScript 57.59% CSS 23.87% HTML 18.54%

umi antd-mobile dva

umi-antd-mobile's Introduction

umi-antd-mobile

如果本项目对你有帮助，请不要吝啬你的star

以 UMI + DVA 为底层框架，包含完整的前端工程化实践

参考了 ant-pro

目录结构

|-- config                                # umi配置，包含路由配置
|-- mock                                  # 本地模拟数据
|-- chrome-mac                            # chrome，用来支持E2E测试
|-- public                                
|   |-- favicon.png                       # Favicon
|   |-- iconfont                          # 字体图标资源
|-- src                                   # 开发目录
|   |-- assets                            # 本地静态资源
|   |-- components                        # 业务组件
|   |-- layout                            # 布局组件
|   |-- models                            # 全局dva model
|   |-- services                          # 接口服务
|   |-- pages                             # 页面模板
|   |-- tests                             # 单元测试
|   |-- e2e                               # 冒烟测试／ui测试
|   |-- global.css                        # 全局css
|-- .gitignore                            # git忽略文件
|-- .editorconfig                         # 编辑器代码风格配置
|-- .eslintignore                         # eslint忽略文件
|-- .eslintrc                             # eslint规则
|-- .prettierignore                       # 代码风格配置忽略文件
|-- .prettierrc                           # 代码风格配置文件
|-- .stylelintrc                          # 样式风格配置文件
|-- package.json                          # 依赖及配置
|-- README.md                             # 简介

使用

// 安装项目

git clone --depth=1 https://github.com/jinjinwa/umi-antd-mobile.git my-project

cd my-project

// 检出依赖
yarn

// 运行
yarn start

// 打包
yarn build

// 更多命令可在package.json中查看

测试

单元测试你需要掌握的几个库

Google Chrome官方出品的无洁面chrome工具： puppeteer
FaceBook推出的javascript单元测试框架，可搭配别的一起使用： jest
Airbnb推出的React测试框架: enzyme

1:puppeteer 下载问题：env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

2:启动Chromium问题，请手动下载Chromium对应版本（和puppeteer对应），并在puppeteer.launch的executablePath配置中对应路径。 https://npm.taobao.org/mirrors/chromium-browser-snapshots/Mac/

(在 node_modules 中找到puppeteer，在package.json中找到对应的chromium_revision依赖版本，在以上链接下载。然后保存至根目录 chrome-mal)

ps：参考 https://juejin.im/post/5b99c9ece51d450e51625630

样式

使用less作为样式语言，在使用期前，可以了解一下less的相关特性。Less

为了避免样式的全局污染和多人开发带来的命名冲突，推荐使用Css modules模块化方案。 Css Modules 严格区分全局样式，局部样式，以及组件库样式覆盖。

业务图标库

使用阿里 iconfont 图标库，在这里创建项目，Font class方式使用。开发阶段可以使用在线链接，发布时候采用，将源文件下载至本地。/src/public/iconfont 目录下。

1:在 /src/pages/document.ejs 引入iconfont目录下css文件(在线链接)。

//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.css

<link href="/iconfont/iconfont.css" rel="stylesheet" />

2: 在 /src/components简单封装了图标组件，你可以这样使用

import BizIcon from '../BizIcon'

<BizIcon type="xxx" />

移动端滚动问题

避免使用外层容器设置overflow:hidden模拟的滚动，在ios下会很卡顿，加了-webkit-overflow-scrolling : touch；之后，会引起更多的问题。详情请看这里深入研究-webkit-overflow-scrolling:touch以及ios滚动

正确的姿势：

通过布局技巧，使用body滚动。如本项目中，我对tabBar组件嵌套路由的处理。
�封装滚动容器实现局部滚动。目前封装了 better-scroll

iPhone x兼容处理例子

第一步：设置网页在可视窗口的布局方式

<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：页面主体内容限定在安全区域内

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

fixed元素适配。示例：

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

参考： iphone X 适配方案

<!-- 布局例子 -->

<div className="container">
<div className="box"></div>
<div className="fixed-bottom footer"></div>
</div>

/* 定义在global.css，可以直接使用 */

.fixed-bottom{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  z-index: 10;
  background-color: #fff;
  /* 具体应用位置，通过叠加css确定元素本身样式
  width: 100%;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 50px; */
}
.footer{
   width:100%;
   height:50px;
   left:0px;
   right:0px;
   bottom:0px;
}
.box{
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

支持环境

iOS Safari	Android
iOS 7+	Android 4.4+

FAQ

1、运行git commit后发现 less文件 length-zero-no-unit报错。

由于开启了stylelint以及git precommit验证，触发验证规则则无法提交。可参考 length-zero-no-unit 解决验证问题。

TODO

与我联系

umi-antd-mobile's People

Contributors

Stargazers

Watchers

umi-antd-mobile's Issues

currHref 写错了

currHref 写错了位置。
每次判断都是不同的。

class BasicLayout extends PureComponent {
  render() {
    const { children, location, loading } = this.props;

    let currHref = '';
    const { href } = window.location; // 浏览器地址栏中地址
    if (currHref !== href) {
      // currHref 和 href 不一致时说明进行了页面跳转
      NProgress.start(); // 页面开始加载时调用 start 方法
      if (!loading.global) {
        // loading.global 为 false 时表示加载完毕
        NProgress.done(); // 页面请求完毕时调用 done 方法
        currHref = href; // 将新页面的 href 值赋值给 currHref
      }
    }

    if (BarRoutes.indexOf(location.pathname) < 0) {
      return <div>{children}</div>;
    }

    return (
      <div style={{ overflowX: 'hidden' }}>
        <MenuBar pathname={location.pathname}>{children}</MenuBar>
      </div>
    );
  }
}

应该为

let currHref = '';

class BasicLayout extends PureComponent {
  render() {
    const { children, location, loading } = this.props;

    
    const { href } = window.location; // 浏览器地址栏中地址
    if (currHref !== href) {
      // currHref 和 href 不一致时说明进行了页面跳转
      NProgress.start(); // 页面开始加载时调用 start 方法
      if (!loading.global) {
        // loading.global 为 false 时表示加载完毕
        NProgress.done(); // 页面请求完毕时调用 done 方法
        currHref = href; // 将新页面的 href 值赋值给 currHref
      }
    }

    if (BarRoutes.indexOf(location.pathname) < 0) {
      return <div>{children}</div>;
    }

    return (
      <div style={{ overflowX: 'hidden' }}>
        <MenuBar pathname={location.pathname}>{children}</MenuBar>
      </div>
    );
  }
}

api请求都是返回相同的html

本地开发时将https://hmj.jahwaec.com修改localhost:8099返回请求都是html页面，即使在mock文件下创建mock文件也不行。

deploy的node服务是做什么用的?

初入门react,到umi还能循序渐进,但是到了这个demo, 顿时头大.

依赖库的多个单元测试和校验了解了.
config.js的复杂用法,也看到了.

问题?

deploy这个就太难懂了,为什么要这样做? 没有明白什么意思,达到什么目的.
按umi教程, 本地执行 serve ./deploy/dist 本地验证时,出现的是404错误. 咋个解决?

请问项目里在哪里处理的px自动转成rem的?

在less文件中都是用px写的, 在浏览器中发现都自动转成了rem格式, 请问这一步是有特殊处理吗?

项目打包生成的dist文件本地查看

项目打包生成的静态文件下的index.html直接在本地浏览器打开访问是空的请问这是什么原因啊

使用本地 svg 文件的Icon组件使用方式为什么不用antd-mobile的官方写法？

安卓自带浏览器打开白屏

手机：摩托罗拉
系统：4.0.4
浏览器：自带浏览器

表现：
输入地址，白屏，但是Pro的标题图标出来了；
ps：我已经把umi的targets改成andriod：4了

umi配置“define”不生效

将define配置加入不生效，相同的配置在antd-pro脚手架是生效的

"define": {
"process.env.TEST": 1,
"USE_COMMA": 2,
},

less 写代码的时候 npm run build 出现样式编译错误？

我在开发模式不出现错误以但打包发布就报错，感觉是webpack build 配置有问题，求解决！
错误如下：
umi build

Build completed in 42.202s

ERROR Failed to compile with 1 errors 3:47:22 PM
error in ./src/pages/index/index.less

Module build failed (from ./node_modules/_mini-css-extract-plugin@0.7.0@mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'images/bg.png' in 'D:\www\dtk_react_flow_www\wap\src\pages\index'
at factory.create (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\Compilation.js:888:10)
at factory (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:401:22)
at resolver (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:130:21)
at asyncLib.parallel (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:224:22)
at D:\www\dtk_react_flow_www\wap\node_modules_neo-async@2.6.1@neo-async\async.js:2830:7
at D:\www\dtk_react_flow_www\wap\node_modules_neo-async@2.6.1@neo-async\async.js:6877:13
at normalResolver.resolve (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:214:25)
at doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:184:12)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :15:1)
at resolver.doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\UnsafeCachePlugin.js:37:5)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :15:1)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :27:1)
at resolver.doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)

@ ./src/pages/index/index.js 38:36-59
@ ./src/pages/.umi-production/router.js
@ ./src/pages/.umi-production/umi.js
@ multi ./src/pages/.umi-production/umi.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: umi build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tql16\AppData\Roaming\npm-cache_logs\2019-08-05T07_47_22_305Z-debug.log

debug.log 内容：
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\www\dtk_react_flow_www\wap\node_modules.bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\personalcenter\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\backgroundtool\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\kissweather\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\mirrorscreen\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\Bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\Docker\Docker\Resources\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\Program Files\Git\cmd;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;C:\Program Files\nodejs;C:\Users\tql16\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;"C:\Program Files\Java\jdk-11.0.1\bin; C:\Program Files\Java\jdk-11.0.1\jre\bin";;C:\Users\tql16\AppData\Local\Programs\Fiddler;C:\Users\tql16\AppData\Roaming\npm
9 verbose lifecycle [email protected]build: CWD: D:\www\dtk_react_flow_www\wap
10 silly lifecycle [email protected]build: Args: [ '/d /s /c', 'umi build' ]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: null
12 info lifecycle [email protected]build: Failed to exec build script
13 verbose stack Error: [email protected] build: umi build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\www\dtk_react_flow_www\wap
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v10.16.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: umi build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

antd-mobile标签页显示不正确

antd-mobile标签页官方示例是这样的：

在src/pages/index/index.js文件中测试，把antd-mobile的标签页放到页面中，显示结果是这样的：
https://mobile.ant.design/components/tabs-cn/#components-tabs-demo-mutlitabs

上面的那个切换tabs不显示，是哪里没写对？代码如下：

import React, { PureComponent } from 'react';
import { Tabs, WhiteSpace } from 'antd-mobile';


class Index extends PureComponent {
  renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
      <p>Content of {tab.title}</p>
    </div>);

  render() {
    const tabs = [
      { title: '1st Tab' },
      { title: '2nd Tab' },
      { title: '3rd Tab' },
      { title: '4th Tab' },
      { title: '5th Tab' },
      { title: '6th Tab' },
      { title: '7th Tab' },
      { title: '8th Tab' },
      { title: '9th Tab' },
    ];

    return (
      <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
          {this.renderContent}
        </Tabs>
        <WhiteSpace />
      </div>
    );
  }

}

export default Index;