在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):jinjinwa/umi-antd-mobile开源软件地址(OpenSource Url):https://github.com/jinjinwa/umi-antd-mobile开源编程语言(OpenSource Language):JavaScript 57.6%开源软件介绍(OpenSource Introduction):umi-antd-mobile如果本项目对你有帮助,请不要吝啬你的star以 UMI + DVA 为底层框架,包含完整的前端工程化实践 参考了 ant-pro 目录结构
使用// 安装项目
git clone --depth=1 https://github.com/jinjinwa/umi-antd-mobile.git my-project
cd my-project
// 检出依赖
yarn
// 运行
yarn start
// 打包
yarn build
// 更多命令可在package.json中查看 测试单元测试你需要掌握的几个库
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滚动 正确的姿势:
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);
}
这里我们只需要关注 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));
} 支持环境
FAQ1、运行git commit后发现 less文件 length-zero-no-unit报错。由于开启了stylelint以及git precommit验证,触发验证规则则无法提交。可参考 length-zero-no-unit 解决验证问题。 TODO
与我联系 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论