1、创建项目，这里使用dva新建项目
dva new YGAntdMobileDemo2、安装antd-mobile
npm install antd-mobile --save3、按需加载，安装babel-plugin-import
官网强烈推荐使用，可以提高打包的编译速度和浏览器下载资源的速度，babel-plugin-import 可以从组件库中仅仅引入需要的模块，而不是把整个库都引入，从而提高性能
npm install babel-plugin-import --save-dev4、将原有的.roadhogrc文件修改为.roadhogrc.js，配置文件如下
import pxtorem from 'postcss-pxtorem';
const path = require( 'path' );
export default {
entry : "src/index.js" ,
disableCSSModules : true ,
cssModulesExclude:[
'./src/index.css'
],
publicPath : "/go-nifty/pp/app/index/" ,
autoprefixer : {
browsers : [
"iOS >= 8" ,
"Android >= 4"
]
} ,
extraPostCSSPlugins : [
pxtorem( {
rootValue : 100 ,
propWhiteList : [] ,
} ) ,
] ,
extraBabelPlugins : [
"transform-runtime" ,
[
"import" ,
{ libraryName : "antd-mobile" , "libraryDirectory" : "lib", "style": true }
]
] ,
env : {
development : {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime"
]
}
}
};以上代码段注意点：
1>、extraBabelPlugins节点下是组件按需加载主要配置项
注意：样式必须加载 less 。保持 babel-plugin-import 的 style 属性配置为 true。
2>、运行会报错，安装postcss-pxtorem（移动端采用Flexible将px转换rem适配）
npm install postcss-pxtorem5、添加 webpack.config.js，配置文件如下
const path = require('path');
const pxtorem = require('postcss-pxtorem');
let webpack = require('webpack');
const vendors = [
'react',
'react-dom',
'react-redux',
'react-router',
'react-router-redux',
'redux',
];
module.exports = function (webpackConfig, env) {
webpackConfig.entry = {
index: './src/index.js',
vendor: vendors,
};
const svgDirs = [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
path.resolve(__dirname, 'src/svg-foler'), // 2. 自己私人的 svg 存放目录
];
// 因为一个 SVG 文件不能被处理两遍. 在 atool-build 默认为 svg配置的svg-url-loade 里 exclude 掉需要 svg-sprite-loader处理的目录
// https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js#L162
// https://github.com/kisenka/svg-sprite-loader/issues/4
if (webpackConfig.module.loaders && Array.isArray(webpackConfig.module.loaders)) {
webpackConfig.module.loaders.forEach((loader) => {
if (loader.test && typeof loader.test.test === 'function' && loader.test.test('.svg')) {
loader.exclude = svgDirs;
}
});
// 4. 配置 webpack loader
webpackConfig.module.loaders.unshift({
test: /\.(svg)$/i,
loader: 'svg-sprite',
include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
});
}
webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
minChunks: Infinity,
}));
return webpackConfig;
};以上代码段注意点：
1>、Array.isarray(XXX)的方法必须加上，不然会报错：TypeError: Cannot read property 'forEach' of undefined
2>、编译过程中报错指定的CSS文件无法导入，报错
Module parse failed .css Unexpected token (1:0) You may need an appropriate loader to handle this file type
（并没有找到为什么会这样，然后配置完成之后安装以下插件，再编译又通过了。。。。。。）
配置支持svg图片，需要安装插件
npm install --save-dev gulp-svg-spritesnpm i svg-sprite-loader6、高清方案配置，修改index.ejs文件，将Viewport的设置通过一个js脚本来代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 原来的meta配置 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 更改后的配置，将viewport的设置通过一个js脚本代替 -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script>
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
// 原来值为100，修改为200了，则正常展示了，此处修改待考究
flex(200, 1);
</script>
<title>登录系统</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
</body>
</html>在运行时，开始组件超级大，后来在谷歌上只展示50%的大小，就修改了flex里的值为200页面就正常展示了
7、页面测试，修改indexPage.js页面，运行成功
import React from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { connect } from 'dva';
function IndexPage() {
return (
<div>
<NavBar
mode="light"
icon={<Icon type="left" />}
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>标题啊喂</NavBar>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm start1>、新建themes文件夹，新增default.less文件，内容如下
@import '~antd-mobile/lib/style/themes/default.less';
// 背景色
@fill-base: #e9102d;
// @fill-base: #fff; // 组件默认背景，设置修改后的色值
@fill-body: #f5f5f9; // 页面背景
// 全局/品牌色
@brand-primary: #e9102d;注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
参数链接：ant-mobile设计变量表以及命名规范 、支付宝钱包默认主题配置文件
2>、新建theme.config.js文件，内容如下
const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');
module.exports = () => {
const themePath = path.join(__dirname, './themes/default.less');
return lessToJs(fs.readFileSync(themePath, 'utf8'));
};通过 less-vars-to-js 的工具读取 less 文件变量，安装 less-vars-to-js
npm install less-vars-to-js
3>、配置在.roadhogrc.js下的theme字段，theme可以配置为对象或文件路径
theme : "./theme.config.js" ,参考博文：点击打开链接
扫一扫
3963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
