JDReactWeb环境配置
1. 检查主目录/package.json
检查package.json的script脚本中是否有以下内容，如果没有，请添加。
"web-init": "node ./node_modules/@jdreact/jdreact-core-web/local-cli/cli.js init",
"web-start": "node ./node_modules/@jdreact/jdreact-core-web/local-cli/cli.js start",
"web-bundle": "rm -rf build-web && node ./node_modules/@jdreact/jdreact-core-web/local-cli/cli.js bundle"
2. 初始化
npm run web-init
当这条命令执行完后，就可以看到在项目根路径下多了web的目录 |-根目录 |-web |-config.js |-index.tpl.vm |-jdShare.js |-webpack.config.base.js |-webpack.config.dev.js |-webpack.config.prod.js
* config.js: 编译时所需的一些配置，这个配置文件里面包含build配置和develop配置
```json
{
/**
* 入口文件
*/
entry: 'jsbundles/index.web.js',
/**
* 编译时静态资源的地址，可以是CDN
*/
publicPath: '/',
/**
* 编译到哪个目录下面
*/
assetsRoot: 'build-web',
/**
* js代码地址
* @type {String}
*/
src: 'jsbundles',
/**
* 生成的vm模板的配置
* title: 生成模板的title
* nofooter: 不包含京东公共底部
* noheader: 不包含京东公共头部
* downloadAppPlugIn: 不使用当打开m页面是唤起想要原生页面的能力
*/
template: {
title: '京东商城',
nofooter: true,
// noheader: true,
/* M下载浮层通用组件接入控制 */
downloadAppPlugIn: false,
},
/**
* 是否要包含京东WebView的分享能力
*/
includeJDShare: false,
},
- index.tpl.vm: 最终生成vm模板文件
- jdShare.js: JD客户端提供的分享用到的js组件调用代码，可以在config中配置是否加载
- webpack.config.base.js: webpack基本配置文件
- webpack.config.prod.js: webpack上线编译的配置文件
- webpack.config.dev.js: webpack开发是的配置文件
3. 检查 web/webpack.config.base.js 文件
如果在 npm run web-bundle 控制台出现报错，那么你需要检查一下 web/webpack.config.base.js，看看是否是如下配置:
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: ['react-native', 'stage-1'],
plugins: process.env.NODE_ENV === 'development' ? [] : ['transform-remove-console']
},
include: [
resolve(config.src),
process.env.NODE_ENV === 'development' ? resolve('node_modules/@jdreact') : resolve('node_modules'),
resolve('node_modules/@ares'),
resolve('node_modules/@areslabs'),
],
},
//...
]
}
如果不是，可以进行手动修改，当然，你也可以选择使用 npm run web-init 重新生成一份，注意合并之前你的修改。
4. 开发/打包
定义一个入口文件，比如index.web.js(JDReactWeb的入口文件和JDReactNative的入口文件最好分开，写法不同)
// index.web.js
import {
AppRegistry,
Platform,
} from 'react-native';
import {
JDNetwork,
} from '@jdreact/jdreact-core-lib';
import fetchJsonp from '@jdreact/jdreact-core-web/Libraries/Fetch/Jsonp';
import './JDReactGuessBall/external.css';
import JDReactGuessBall from './JDReactGuessBall/Navigation';
// 配置网络请求接口，目前网关接口可以通过jsonp方式调用
var host = '//api.m.jd.com';
if ((/^beta-/gi).test(location.host) || (/\.care$/gi).test(location.host) || location.port === '3000') {
host = '//beta-api.m.jd.com'
}
JDNetwork.setFetchProxy(function(functionId, params) {
return fetchJsonp(`${host}/client.action?appid=JDReactToWeb&functionId=${functionId}&body=${encodeURIComponent(params)}`, {
jsonpCallback: 'jsonp'
})
});
AppRegistry.registerComponent('JDReactGuessBall', () => JDReactGuessBall);
var app = document.getElementById('m_common_content');
if (!app) {
app = document.createElement('div');
document.body.appendChild(app);
}
AppRegistry.runApplication('JDReactGuessBall', {
rootTag: app
});
上面的 JDReactToWeb 是 appId，如果你不清楚是什么，可以咨询网关小妹/你的服务端同学，在 color平台 申请M的网关 appId。
命令:
在平时开发JDReactWeb，可以执行这条命令:
npm run web-start
如果要发布打包的话，可以执行下面这条命令:
npm run web-bundle
最终会在项目根目录下生成
build-web
|-index.html
|-main.[hash].js
|-manifest.[hash].js
|-vendor.[hash].js
|-[hash].png
|-[hash].png
|-...
其中 index.html 在浏览器中打开会京东统一头部，如果在主站APP中打开，不会带有京东统一头部。
4. 额外的能力
4.1 分享
默认情况下JDReactWeb是不提供JD客户端的分享能力的，如果项目需要分享，可以在webpack.config.js中将jdShare.js引入
// webpack.config.js 添加plugin
new webpack.ProvidePlugin({
JdShare: path.join(__dirname, 'jdShare'),
}),
// 调用的地方可以直接使用JdShare变量
componentDidMount() {
if (Platform.OS === 'web') {
const userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf('jdapp') >= 0 && typeof JdShare !== 'undefined') {
JdShare.setShareInfo({
title: '京东',
content: '京东购物',
url: 'https://m.jd.com',
img: 'https//st.360buyimg.com/m/images/index/top-jdlogo.png',
channel: '',
callback: null,
clickcallback: null,
qrparam: null,
timeline_title: '',
})
}
}
}
4.2 CSS
JDReactWeb也提供了支持CSS的能力，这对于Native开发不会产生任何影响
如果你需要为哪个元素指定CSS，要先为该元素指定一个 className，然后创建一个CSS文件，在入口文件中require进去
<Animated.View className="detail-cell-panel">
...
</Animated.View>
在写CSS的时候，框架已经集成进了PostCSS，所以你只需要写标准的CSS即可，最终框架会编译出兼容各个浏览器的CSS
// index.css
.detail-cell-panel {
animation: detailCellPanel 200ms linear 800ms;
animation-fill-mode: forwards;
}
// 入口文件 index.web.js
require('./index.css');
...
4.3 在m页里打开原生页面
JDReactWeb提供了在M页里打开原生页面的能力，使用如下
- 在config.js中配置downloadAppPlugIn为true,
- 在业务代码里，如果某个页面打开是需要打开原生页面，可以在componentDidMount中这样写
const { JDJumpingApp } = require('@jdreact/jdreact-core-lib');
const Page = React.createClass({
...
componentDidMount() {
/**
* inteneUrl: 要跳的原生页面openapp
*/
JDJumpingApp.autoOpenApp({
inteneUrl : 'openapp.jdmobile://virtual?',//打开客户端协议
});
},
...
})
你可能遇到的一些问题
1. 上线
经常有童鞋咨询如何上线的问题，在这里，我想说一句，其它的M页是怎么上线的，JDReact转web就如何上线，按照你们惯常的上线习惯即可。
现在打包生成的是 index.html 文件，如果是给后台上线，需要 vm 文件的话，你可以直接修改后缀为 .vm 提供给后台。
2. 修改title的名字
如果是针对整个工程修改，那么直接在 web/config.js 中配置即可。
如果是针对某个页面修改，那么可以在 componentDidMount 中进行:
//...
componentDidMount() {
document.querySelector('.jd-header-title').innerText = 'title由你决定';
}
//...
3. 不管是不是在浏览器中打开，都不想要京东的统一登录头
这个时候，你可以修改 web/index.tpl.vm 模板文件，隐藏头部。当然你也可以将 m_common_header 相关的代码全部删除。然后重新执行 npm run web-bundle，生成的 index.html 就不会再显示京东统一登录头。
#m_common_header {
min-height: 45px;
z-index: 1;
display: none;
}
如果这是你第一次上线，那么这个问题已经搞定。如果此前你的 html 文件 / vm 文件已经提供给了服务端，那么你需要联系你的服务端进行修改(假设这部分上线工作是服务端完成的)。
4. 希望打出来的js文件名不带有hash
修改 web/webpack.config.prod.js 文件，删除 output的 filename 字段中的 [chunkhash]
module.exports = merge({}, baseWebpackConfig, {
devtool: '#source-map',
output: {
filename: '[name].js',
chunkFilename: '[id].[chunkhash].js'
},
//...
}
5. 获取url上的参数
与原生略有不同的是，原生的 openapp 所带参数必须在入口页中通过 props 获取，而 web 页，如果你希望从通过 props 获取，那么必须要在第一个页面中获取，如你的 url 地址，所展示的页面是 Home.js，那么你可以在 Home.js 中，通过 props 去获取参数。
当然，你也可以在入口页中获取，平台判断之后，获取当前的 url 地址，如:
if(Platfrom.OS === 'web') {
let url = location.href;
//获取到 url 地址之后，随便你搓圆捏扁。
}