beichen
5 years ago
parent
6222454bf6
commit
5ce9f4cc15
@ -0,0 +1,306 @@ |
|||||||
|
# dependencies |
||||||
|
/node_modules |
||||||
|
|
||||||
|
# production |
||||||
|
/dist |
||||||
|
|
||||||
|
# misc |
||||||
|
.DS_Store |
||||||
|
.vscode |
||||||
|
.ideal |
||||||
|
|
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
yarn.lock |
||||||
|
package-lock.json |
||||||
|
|
||||||
|
|
||||||
|
# General |
||||||
|
.DS_Store |
||||||
|
.AppleDouble |
||||||
|
.LSOverride |
||||||
|
|
||||||
|
# Icon must end with two \r |
||||||
|
Icon |
||||||
|
|
||||||
|
# Thumbnails |
||||||
|
._* |
||||||
|
|
||||||
|
# Files that might appear in the root of a volume |
||||||
|
.DocumentRevisions-V100 |
||||||
|
.fseventsd |
||||||
|
.Spotlight-V100 |
||||||
|
.TemporaryItems |
||||||
|
.Trashes |
||||||
|
.VolumeIcon.icns |
||||||
|
.com.apple.timemachine.donotpresent |
||||||
|
|
||||||
|
# Directories potentially created on remote AFP share |
||||||
|
.AppleDB |
||||||
|
.AppleDesktop |
||||||
|
Network Trash Folder |
||||||
|
Temporary Items |
||||||
|
.apdisk |
||||||
|
|
||||||
|
|
||||||
|
# Compiled class file |
||||||
|
*.class |
||||||
|
|
||||||
|
# Log file |
||||||
|
*.log |
||||||
|
|
||||||
|
# BlueJ files |
||||||
|
*.ctxt |
||||||
|
|
||||||
|
# Mobile Tools for Java (J2ME) |
||||||
|
.mtj.tmp/ |
||||||
|
|
||||||
|
# Package Files # |
||||||
|
*.jar |
||||||
|
*.war |
||||||
|
*.nar |
||||||
|
*.ear |
||||||
|
*.zip |
||||||
|
*.tar.gz |
||||||
|
*.rar |
||||||
|
|
||||||
|
# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml |
||||||
|
hs_err_pid* |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Built application files |
||||||
|
*.apk |
||||||
|
*.ap_ |
||||||
|
*.aab |
||||||
|
|
||||||
|
# Files for the ART/Dalvik VM |
||||||
|
*.dex |
||||||
|
|
||||||
|
# Java class files |
||||||
|
*.class |
||||||
|
|
||||||
|
# Generated files |
||||||
|
bin/ |
||||||
|
gen/ |
||||||
|
out/ |
||||||
|
release/ |
||||||
|
|
||||||
|
# Gradle files |
||||||
|
.gradle/ |
||||||
|
build/ |
||||||
|
|
||||||
|
# Local configuration file (sdk path, etc) |
||||||
|
local.properties |
||||||
|
|
||||||
|
# Proguard folder generated by Eclipse |
||||||
|
proguard/ |
||||||
|
|
||||||
|
# Log Files |
||||||
|
*.log |
||||||
|
|
||||||
|
# Android Studio Navigation editor temp files |
||||||
|
.navigation/ |
||||||
|
|
||||||
|
# Android Studio captures folder |
||||||
|
captures/ |
||||||
|
|
||||||
|
# IntelliJ |
||||||
|
*.iml |
||||||
|
.idea/workspace.xml |
||||||
|
.idea/tasks.xml |
||||||
|
.idea/gradle.xml |
||||||
|
.idea/assetWizardSettings.xml |
||||||
|
.idea/dictionaries |
||||||
|
.idea/libraries |
||||||
|
# Android Studio 3 in .gitignore file. |
||||||
|
.idea/caches |
||||||
|
.idea/modules.xml |
||||||
|
# Comment next line if keeping position of elements in Navigation Editor is relevant for you |
||||||
|
.idea/navEditor.xml |
||||||
|
|
||||||
|
# Keystore files |
||||||
|
# Uncomment the following lines if you do not want to check your keystore files in. |
||||||
|
#*.jks |
||||||
|
#*.keystore |
||||||
|
|
||||||
|
# External native build folder generated in Android Studio 2.2 and later |
||||||
|
.externalNativeBuild |
||||||
|
|
||||||
|
# Google Services (e.g. APIs or Firebase) |
||||||
|
# google-services.json |
||||||
|
|
||||||
|
# Freeline |
||||||
|
freeline.py |
||||||
|
freeline/ |
||||||
|
freeline_project_description.json |
||||||
|
|
||||||
|
# fastlane |
||||||
|
fastlane/report.xml |
||||||
|
fastlane/Preview.html |
||||||
|
fastlane/screenshots |
||||||
|
fastlane/test_output |
||||||
|
fastlane/readme.md |
||||||
|
|
||||||
|
# Version control |
||||||
|
vcs.xml |
||||||
|
|
||||||
|
# lint |
||||||
|
lint/intermediates/ |
||||||
|
lint/generated/ |
||||||
|
lint/outputs/ |
||||||
|
lint/tmp/ |
||||||
|
# lint/reports/ |
||||||
|
|
||||||
|
|
||||||
|
# Xcode |
||||||
|
# |
||||||
|
# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore |
||||||
|
|
||||||
|
## Build generated |
||||||
|
build/ |
||||||
|
DerivedData/ |
||||||
|
|
||||||
|
## Various settings |
||||||
|
*.pbxuser |
||||||
|
!default.pbxuser |
||||||
|
*.mode1v3 |
||||||
|
!default.mode1v3 |
||||||
|
*.mode2v3 |
||||||
|
!default.mode2v3 |
||||||
|
*.perspectivev3 |
||||||
|
!default.perspectivev3 |
||||||
|
xcuserdata/ |
||||||
|
|
||||||
|
## Other |
||||||
|
*.moved-aside |
||||||
|
*.xccheckout |
||||||
|
*.xcscmblueprint |
||||||
|
|
||||||
|
## Obj-C/Swift specific |
||||||
|
*.hmap |
||||||
|
*.ipa |
||||||
|
*.dSYM.zip |
||||||
|
*.dSYM |
||||||
|
|
||||||
|
# CocoaPods |
||||||
|
# |
||||||
|
# We recommend against adding the Pods directory to your .gitignore. However |
||||||
|
# you should judge for yourself, the pros and cons are mentioned at: |
||||||
|
# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control |
||||||
|
# |
||||||
|
# Pods/ |
||||||
|
# |
||||||
|
# Add this line if you want to avoid checking in source code from the Xcode workspace |
||||||
|
# *.xcworkspace |
||||||
|
|
||||||
|
# Carthage |
||||||
|
# |
||||||
|
# Add this line if you want to avoid checking in source code from Carthage dependencies. |
||||||
|
# Carthage/Checkouts |
||||||
|
|
||||||
|
Carthage/Build |
||||||
|
|
||||||
|
# fastlane |
||||||
|
# |
||||||
|
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the |
||||||
|
# screenshots whenever they are needed. |
||||||
|
# For more information about the recommended setup visit: |
||||||
|
# https://docs.fastlane.tools/best-practices/source-control/#source-control |
||||||
|
|
||||||
|
fastlane/report.xml |
||||||
|
fastlane/Preview.html |
||||||
|
fastlane/screenshots/**/*.png |
||||||
|
fastlane/test_output |
||||||
|
|
||||||
|
# Code Injection |
||||||
|
# |
||||||
|
# After new code Injection tools there's a generated folder /iOSInjectionProject |
||||||
|
# https://github.com/johnno1962/injectionforxcode |
||||||
|
|
||||||
|
iOSInjectionProject/ |
||||||
|
|
||||||
|
|
||||||
|
# Xcode |
||||||
|
# |
||||||
|
# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore |
||||||
|
|
||||||
|
## Build generated |
||||||
|
build/ |
||||||
|
DerivedData/ |
||||||
|
|
||||||
|
## Various settings |
||||||
|
*.pbxuser |
||||||
|
!default.pbxuser |
||||||
|
*.mode1v3 |
||||||
|
!default.mode1v3 |
||||||
|
*.mode2v3 |
||||||
|
!default.mode2v3 |
||||||
|
*.perspectivev3 |
||||||
|
!default.perspectivev3 |
||||||
|
xcuserdata/ |
||||||
|
|
||||||
|
## Other |
||||||
|
*.moved-aside |
||||||
|
*.xccheckout |
||||||
|
*.xcscmblueprint |
||||||
|
|
||||||
|
## Obj-C/Swift specific |
||||||
|
*.hmap |
||||||
|
*.ipa |
||||||
|
*.dSYM.zip |
||||||
|
*.dSYM |
||||||
|
|
||||||
|
## Playgrounds |
||||||
|
timeline.xctimeline |
||||||
|
playground.xcworkspace |
||||||
|
|
||||||
|
# Swift Package Manager |
||||||
|
# |
||||||
|
# Add this line if you want to avoid checking in source code from Swift Package Manager dependencies. |
||||||
|
# Packages/ |
||||||
|
# Package.pins |
||||||
|
# Package.resolved |
||||||
|
.build/ |
||||||
|
|
||||||
|
# CocoaPods |
||||||
|
# |
||||||
|
# We recommend against adding the Pods directory to your .gitignore. However |
||||||
|
# you should judge for yourself, the pros and cons are mentioned at: |
||||||
|
# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control |
||||||
|
# |
||||||
|
# Pods/ |
||||||
|
# |
||||||
|
# Add this line if you want to avoid checking in source code from the Xcode workspace |
||||||
|
# *.xcworkspace |
||||||
|
|
||||||
|
# Carthage |
||||||
|
# |
||||||
|
# Add this line if you want to avoid checking in source code from Carthage dependencies. |
||||||
|
# Carthage/Checkouts |
||||||
|
|
||||||
|
Carthage/Build |
||||||
|
|
||||||
|
# Accio dependency management |
||||||
|
Dependencies/ |
||||||
|
.accio/ |
||||||
|
|
||||||
|
# fastlane |
||||||
|
# |
||||||
|
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the |
||||||
|
# screenshots whenever they are needed. |
||||||
|
# For more information about the recommended setup visit: |
||||||
|
# https://docs.fastlane.tools/best-practices/source-control/#source-control |
||||||
|
|
||||||
|
fastlane/report.xml |
||||||
|
fastlane/Preview.html |
||||||
|
fastlane/screenshots/**/*.png |
||||||
|
fastlane/test_output |
||||||
|
|
||||||
|
# Code Injection |
||||||
|
# |
||||||
|
# After new code Injection tools there's a generated folder /iOSInjectionProject |
||||||
|
# https://github.com/johnno1962/injectionforxcode |
||||||
|
|
||||||
|
iOSInjectionProject/ |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
# dependencies |
||||||
|
/node_modules |
||||||
|
|
||||||
|
# production |
||||||
|
/dist |
||||||
|
|
||||||
|
# misc |
||||||
|
.DS_Store |
||||||
|
.vscode |
||||||
|
.ideal |
||||||
|
|
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
yarn.lock |
||||||
|
package-lock.json |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
# JSBridgeH5 |
||||||
|
`JSBridge` 实例中 `H5` 端代码实现。 |
||||||
|
|
||||||
|
此项目使用 react 进行编写，但是关于 react 的代码不多，其中关于 jsbridge 使用的代码在任意项目或者框架中均可使用。 |
||||||
|
|
||||||
|
代码中有详细注释。 |
||||||
|
|
||||||
|
|
||||||
|
## 下载项目 |
||||||
|
``` bash |
||||||
|
git clone https://github.com/beichensky/jsbridge-example.git |
||||||
|
``` |
||||||
|
|
||||||
|
## 安装插件 |
||||||
|
``` bash |
||||||
|
# 打开 JSBridgeH5 项目 |
||||||
|
cd JSBridgeH5 |
||||||
|
|
||||||
|
# 安装依赖 |
||||||
|
npm install |
||||||
|
``` |
||||||
|
|
||||||
|
|
||||||
|
## 运行项目 |
||||||
|
``` bash |
||||||
|
npm run start |
||||||
|
``` |
||||||
|
|
||||||
|
打开浏览器，输入：`localhost:8000` 查看项目运行效果。 |
||||||
|
|
||||||
|
运行项目后，才能在原生应用中展示，否则移动端 Webview 加载不出来页面。请记得在将当前的 ip 地址和端口替换到移动端 url 上。 |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 项目打包 |
||||||
|
``` bash |
||||||
|
npm run build |
||||||
|
``` |
||||||
|
|
||||||
|
新增 `dist` 目录，里面是打包好的项目代码 |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 更多 |
||||||
|
关于项目的更多介绍请查看我的博客：[使用 JSBridge 与原生 IOS、Android 进行交互（含H5、Android、IOS端代码，附 Demo）]() |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
module.exports = (api) => { |
||||||
|
api.cache(true); |
||||||
|
|
||||||
|
return { |
||||||
|
presets: [ |
||||||
|
"@babel/preset-env", |
||||||
|
"@babel/preset-react" |
||||||
|
], |
||||||
|
plugins: [ |
||||||
|
[ |
||||||
|
"@babel/plugin-proposal-decorators", |
||||||
|
{ |
||||||
|
"legacy": true |
||||||
|
} |
||||||
|
], |
||||||
|
[ |
||||||
|
"import", |
||||||
|
{ |
||||||
|
"libraryName": "antd", |
||||||
|
"style": true |
||||||
|
} |
||||||
|
], |
||||||
|
[ |
||||||
|
"@babel/plugin-transform-runtime", |
||||||
|
{ |
||||||
|
"corejs": 2 |
||||||
|
} |
||||||
|
], |
||||||
|
[ |
||||||
|
"@babel/plugin-proposal-class-properties",
|
||||||
|
{
|
||||||
|
"loose": true |
||||||
|
} |
||||||
|
], |
||||||
|
"@babel/plugin-syntax-dynamic-import", |
||||||
|
// "@babel/plugin-syntax-import-meta",
|
||||||
|
// 可以用 const ex = "before
|
||||||
|
// after"; 这种方式编写字符串
|
||||||
|
// "@babel/plugin-proposal-json-strings",
|
||||||
|
// 可以使用 generate 语法
|
||||||
|
// "@babel/plugin-proposal-function-sent",
|
||||||
|
// 可以使用 export * 这种命名空间的方式导出模块
|
||||||
|
"@babel/plugin-proposal-export-namespace-from", |
||||||
|
// 可以使用数字分离器书写数字
|
||||||
|
// "@babel/plugin-proposal-numeric-separator"
|
||||||
|
// 可以使用异常抛出表达式,
|
||||||
|
"@babel/plugin-proposal-throw-expressions", |
||||||
|
// 默认导出
|
||||||
|
"@babel/plugin-proposal-export-default-from", |
||||||
|
// 可以使用逻辑赋值运算符
|
||||||
|
"@babel/plugin-proposal-logical-assignment-operators", |
||||||
|
// 可以使用可选链的方式访问深层嵌套的属性或者函数 ?.
|
||||||
|
"@babel/plugin-proposal-optional-chaining", |
||||||
|
// 可以使用管道运算符 |>
|
||||||
|
[ |
||||||
|
"@babel/plugin-proposal-pipeline-operator", |
||||||
|
{ |
||||||
|
"proposal": "minimal" |
||||||
|
} |
||||||
|
], |
||||||
|
// 可以使用空值合并语法 ??
|
||||||
|
"@babel/plugin-proposal-nullish-coalescing-operator", |
||||||
|
// 可以使用 do 表达式（可以认为是三元运算符的复杂版本）
|
||||||
|
"@babel/plugin-proposal-do-expressions", |
||||||
|
// 可以使用功能绑定语法 obj::func
|
||||||
|
"@babel/plugin-proposal-function-bind" |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
{ |
||||||
|
"name": "jsbridge-h5", |
||||||
|
"version": "1.0.0", |
||||||
|
"description": "", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"start": "webpack-dev-server --config webpack/webpack.config.dev.js", |
||||||
|
"build": "webpack --config webpack/webpack.config.prod.js" |
||||||
|
}, |
||||||
|
"keywords": [], |
||||||
|
"author": "", |
||||||
|
"license": "ISC", |
||||||
|
"devDependencies": { |
||||||
|
"@babel/core": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-class-properties": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-decorators": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-do-expressions": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-export-default-from": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-export-namespace-from": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-function-bind": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-optional-chaining": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-pipeline-operator": "^7.0.0", |
||||||
|
"@babel/plugin-proposal-throw-expressions": "^7.0.0", |
||||||
|
"@babel/plugin-syntax-dynamic-import": "^7.0.0", |
||||||
|
"@babel/plugin-transform-runtime": "^7.0.0", |
||||||
|
"@babel/preset-env": "^7.0.0", |
||||||
|
"@babel/preset-react": "^7.0.0", |
||||||
|
"@babel/runtime-corejs2": "^7.0.0", |
||||||
|
"autoprefixer": "^9.5.1", |
||||||
|
"babel-loader": "^8.0.0", |
||||||
|
"babel-plugin-import": "^1.11.0", |
||||||
|
"clean-webpack-plugin": "^2.0.1", |
||||||
|
"css-loader": "^2.1.1", |
||||||
|
"csv-loader": "^3.0.2", |
||||||
|
"file-loader": "^3.0.1", |
||||||
|
"friendly-errors-webpack-plugin": "^1.7.0", |
||||||
|
"html-loader": "^0.5.5", |
||||||
|
"html-webpack-plugin": "^3.2.0", |
||||||
|
"less": "^3.9.0", |
||||||
|
"less-loader": "^4.1.0", |
||||||
|
"markdown-loader": "^5.0.0", |
||||||
|
"mini-css-extract-plugin": "^0.5.0", |
||||||
|
"optimize-css-assets-webpack-plugin": "^5.0.1", |
||||||
|
"postcss-loader": "^3.0.0", |
||||||
|
"style-loader": "^0.23.1", |
||||||
|
"uglifyjs-webpack-plugin": "^2.1.2", |
||||||
|
"webpack": "^4.29.6", |
||||||
|
"webpack-cli": "^3.3.0", |
||||||
|
"webpack-dev-server": "^3.1.4", |
||||||
|
"webpack-merge": "^4.2.1", |
||||||
|
"xml-loader": "^1.2.1" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"antd": "^3.16.2", |
||||||
|
"js-cookie": "^2.2.0", |
||||||
|
"moment": "^2.24.0", |
||||||
|
"prop-types": "^15.7.2", |
||||||
|
"qs": "^6.7.0", |
||||||
|
"react": "^16.8.6", |
||||||
|
"react-dom": "^16.8.6" |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,12 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||||
|
<title>JSBridge Demo</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"></div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,79 @@ |
|||||||
|
import React, { Component, useState } from 'react'; |
||||||
|
import { Button, Input, message } from 'antd'; |
||||||
|
import Cookie from 'js-cookie'; |
||||||
|
|
||||||
|
// 使用 CSS Module 的方式引入 App.less
|
||||||
|
import styles from './App.less'; |
||||||
|
|
||||||
|
|
||||||
|
const isAndroid = navigator.userAgent.endsWith('android'); |
||||||
|
|
||||||
|
export default (props) => { |
||||||
|
|
||||||
|
const [user, setUser] = useState(); |
||||||
|
const [name, setName] = useState(); |
||||||
|
const [token, setToken] = useState(Cookie.get('token')); |
||||||
|
|
||||||
|
window.setupWebViewJavascriptBridge(bridge => { |
||||||
|
bridge.registerHandler("changeName", (data, fn) => { |
||||||
|
setName(data); |
||||||
|
fn && fn(""); |
||||||
|
}); |
||||||
|
|
||||||
|
bridge.registerHandler("syncCookie", (data, fn) => {
|
||||||
|
setToken(Cookie.get('token')); |
||||||
|
fn && fn(""); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* 调用原生的默认接受方法 |
||||||
|
*/ |
||||||
|
const handleInit = () => { |
||||||
|
window.setupWebViewJavascriptBridge(bridge => { |
||||||
|
bridge.send("JS 传递给原生的消息", (data) => { |
||||||
|
message.success(data); |
||||||
|
}) |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 调用原生方法刷新 H5 界面 |
||||||
|
*/ |
||||||
|
const handleReload = () => { |
||||||
|
window.setupWebViewJavascriptBridge(bridge => { |
||||||
|
bridge.callHandler('reloadUrl'); |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 修改原生界面的 User 名称 |
||||||
|
*/ |
||||||
|
const handleChangeUser = () => { |
||||||
|
window.setupWebViewJavascriptBridge(bridge => { |
||||||
|
bridge.callHandler('changeUser', user, () => { |
||||||
|
message.success('user 修改成功！'); |
||||||
|
setUser(''); |
||||||
|
}); |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={ styles.app }> |
||||||
|
<h2>H5 界面：</h2> |
||||||
|
{ isAndroid ? <Button style={{ margin: '10px 0 30px' }} type="primary" onClick={ handleInit }>调用原生默认接收方法</Button> : null} |
||||||
|
<br /> |
||||||
|
<Button style={{ marginBottom: 30 }} type="primary" onClick={ handleReload }>调用原生方法刷新 H5 界面</Button> |
||||||
|
<br /> |
||||||
|
<Button type="primary" onClick={ handleChangeUser }>修改原生界面的 user 值</Button> |
||||||
|
<Input value={ user } onChange={ (e) => setUser(e.target.value) } style={{ marginLeft: 10, width: 160 }} placeholder="请输入新的 user 名称" /> |
||||||
|
<div style={{ marginTop: 30, fontSize: 16 }}> |
||||||
|
<label>Name 值：</label><span style={{ marginLeft: 40 }}>{ name }</span> |
||||||
|
</div> |
||||||
|
<div style={{ marginTop: 30, fontSize: 16 }}> |
||||||
|
<label>同步原生设置的 Cookie 值：</label><span style={{ marginLeft: 20 }}>{ token }</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
.app { |
||||||
|
padding: 20px; |
||||||
|
background: #f0f0f0; |
||||||
|
} |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import ReactDom from 'react-dom'; |
||||||
|
import { LocaleProvider, message } from 'antd'; |
||||||
|
import zh_CN from 'antd/lib/locale-provider/zh_CN'; |
||||||
|
import 'moment/locale/zh-cn'; |
||||||
|
|
||||||
|
import App from './App'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 使用 JSBridge 总结： |
||||||
|
* 1、跟 IOS 交互的时候，只需要且必须注册 iosFuntion 方法即可， |
||||||
|
* 不能在 setupWebViewJavascriptBridge 中执行 bridge.init 方法，否则 IOS 无法调用到 H5 的注册函数； |
||||||
|
* 2、与安卓进行交互的时候 |
||||||
|
* ①、使用 iosFuntion，就可以实现 H5 调用 安卓的注册函数，但是安卓无法调用 H5 的注册函数， |
||||||
|
* 并且 H5 调用安卓成功后的回调函数也无法执行 |
||||||
|
* ②、使用 andoirFunction 并且要在 setupWebViewJavascriptBridge 中执行 bridge.init 方法， |
||||||
|
* 安卓才可以正常调用 H5 的回调函数，并且 H5 调用安卓成功后的回调函数也可以正常执行了 |
||||||
|
*/ |
||||||
|
|
||||||
|
const isAndroid = navigator.userAgent.endsWith('android'); |
||||||
|
|
||||||
|
/** |
||||||
|
* Android 与安卓交互时： |
||||||
|
* 1、不调用这个函数安卓无法调用 H5 注册的事件函数； |
||||||
|
* 2、但是 H5 可以正常调用安卓注册的事件函数； |
||||||
|
* 3、还必须在 setupWebViewJavascriptBridge 中执行 bridge.init 方法，否则： |
||||||
|
* ①、安卓依然无法调用 H5 注册的事件函数 |
||||||
|
* ①、H5 正常调用安卓事件函数后的回调函数无法正常执行 |
||||||
|
*
|
||||||
|
* @param {*} callback
|
||||||
|
*/ |
||||||
|
const andoirFunction = (callback) => { |
||||||
|
if (window.WebViewJavascriptBridge) { |
||||||
|
callback(window.WebViewJavascriptBridge); |
||||||
|
} else { |
||||||
|
document.addEventListener('WebViewJavascriptBridgeReady', function () { |
||||||
|
callback(window.WebViewJavascriptBridge); |
||||||
|
}, false) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* IOS 与 IOS 交互时，使用这个函数即可，别的操作都不需要执行 |
||||||
|
* @param {*} callback
|
||||||
|
*/ |
||||||
|
const iosFuntion = (callback) => { |
||||||
|
if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge) } |
||||||
|
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback) } |
||||||
|
window.WVJBCallbacks = [callback]; |
||||||
|
var WVJBIframe = document.createElement('iframe'); |
||||||
|
WVJBIframe.style.display = 'none'; |
||||||
|
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; |
||||||
|
document.documentElement.appendChild(WVJBIframe); |
||||||
|
setTimeout(function(){ |
||||||
|
document.documentElement.removeChild(WVJBIframe); |
||||||
|
}, 0); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 注册 setupWebViewJavascriptBridge 方法 |
||||||
|
* 之所以不将上面两个方法融合成一个方法，是因为放在一起，那么就只有 iosFuntion 中相关的方法体生效 |
||||||
|
*/ |
||||||
|
window.setupWebViewJavascriptBridge = isAndroid ? andoirFunction : iosFuntion; |
||||||
|
|
||||||
|
/** |
||||||
|
* 这里如果不做判断是不是安卓，而是直接就执行下面的方法，就会导致
|
||||||
|
* 1、IOS 无法调用 H5 这边注册的事件函数 |
||||||
|
* 2、H5 可以正常调用 IOS 这边的事件函数，并且 H5 的回调函数可以正常执行 |
||||||
|
*/ |
||||||
|
if (isAndroid) { |
||||||
|
/** |
||||||
|
* 与安卓交互时，不调用这个函数会导致： |
||||||
|
* 1、H5 可以正常调用 安卓这边的事件函数，但是无法再调用到 H5 的回调函数 |
||||||
|
*
|
||||||
|
* 前提 setupWebViewJavascriptBridge 这个函数使用的是 andoirFunction 这个，否则还是会导致上面 1 的现象出现 |
||||||
|
*/ |
||||||
|
window.setupWebViewJavascriptBridge(function (bridge) { |
||||||
|
// 注册 H5 界面的默认接收函数（与安卓交互时，不注册这个事件无法接收回调函数）
|
||||||
|
bridge.init(function (msg, responseCallback) { |
||||||
|
message.success(msg); |
||||||
|
responseCallback("JS 返回给原生的消息内容"); |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
ReactDom.render( |
||||||
|
<LocaleProvider locale={zh_CN}> |
||||||
|
<App /> |
||||||
|
</LocaleProvider>, |
||||||
|
document.querySelector('#root') |
||||||
|
); |
||||||
@ -0,0 +1,146 @@ |
|||||||
|
const path = require('path'); |
||||||
|
const HTMLWebpackPlugin = require('html-webpack-plugin'); |
||||||
|
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); |
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
||||||
|
const autoprefixer = require('autoprefixer'); |
||||||
|
|
||||||
|
const appSrc = path.resolve(__dirname, '../src'); |
||||||
|
const appDist = path.resolve(__dirname, '../dist'); |
||||||
|
const appPublic = path.resolve(__dirname, '../public'); |
||||||
|
const appIndex = path.resolve(appSrc, 'index.js'); |
||||||
|
const appHtml = path.resolve(appPublic, 'index.html'); |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
entry: { |
||||||
|
main: [appIndex], |
||||||
|
common: ['react', 'react-dom'] |
||||||
|
}, |
||||||
|
output: { |
||||||
|
filename: 'public/js/[name].[hash:8].js', |
||||||
|
path: appDist, |
||||||
|
publicPath: '/' |
||||||
|
}, |
||||||
|
plugins: [ |
||||||
|
// 自动在出口目录生成 html 并自动引入 js 文件
|
||||||
|
new HTMLWebpackPlugin({ |
||||||
|
template: appHtml, |
||||||
|
filename: 'index.html' |
||||||
|
}), |
||||||
|
// 在命令行展示更清晰地提示信息
|
||||||
|
new FriendlyErrorsWebpackPlugin() |
||||||
|
], |
||||||
|
module: { |
||||||
|
rules: [ |
||||||
|
// 解析 js
|
||||||
|
{ |
||||||
|
test: /\.(js|jsx)$/, |
||||||
|
loader: 'babel-loader?cacheDirectory', |
||||||
|
include: [ appSrc ], |
||||||
|
exclude: /node_modules/ |
||||||
|
}, |
||||||
|
// 解析样式
|
||||||
|
{ |
||||||
|
test: /\.(css|less)$/, |
||||||
|
exclude: /node_modules/, |
||||||
|
use: [ |
||||||
|
{ |
||||||
|
// 使用 MiniCssExtractPlugin.loader 代替 style-loader
|
||||||
|
loader: MiniCssExtractPlugin.loader |
||||||
|
}, |
||||||
|
{ |
||||||
|
loader: 'css-loader', |
||||||
|
options: { |
||||||
|
sourceMap: true, |
||||||
|
modules: true, |
||||||
|
localIdentName: '[local].[hash:8]' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
loader: 'postcss-loader', |
||||||
|
options: { |
||||||
|
plugins: () => [autoprefixer()] |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
loader: 'less-loader', |
||||||
|
options: { |
||||||
|
javascriptEnabled: true |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
test: /\.(css|less)$/, |
||||||
|
include: /node_modules/, |
||||||
|
use: [ |
||||||
|
{ |
||||||
|
loader: MiniCssExtractPlugin.loader |
||||||
|
}, |
||||||
|
{ |
||||||
|
loader: 'css-loader', |
||||||
|
options: {} |
||||||
|
}, |
||||||
|
{ |
||||||
|
loader: 'postcss-loader', |
||||||
|
options: { |
||||||
|
plugins: () => [autoprefixer()] |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
loader: 'less-loader', |
||||||
|
options: { |
||||||
|
javascriptEnabled: true |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
// 解析图片资源
|
||||||
|
{ |
||||||
|
test: /\.(png|svg|jpg|gif)$/, |
||||||
|
use: [ |
||||||
|
'file-loader' |
||||||
|
] |
||||||
|
}, |
||||||
|
// 解析 字体
|
||||||
|
{ |
||||||
|
test: /\.(woff|woff2|eot|ttf|otf)$/, |
||||||
|
use: [ |
||||||
|
'file-loader' |
||||||
|
] |
||||||
|
}, |
||||||
|
// 解析数据资源
|
||||||
|
{ |
||||||
|
test: /\.(csv|tsv)$/, |
||||||
|
use: [ |
||||||
|
'csv-loader' |
||||||
|
] |
||||||
|
}, |
||||||
|
// 解析数据资源
|
||||||
|
{ |
||||||
|
test: /\.xml$/, |
||||||
|
use: [ |
||||||
|
'xml-loader' |
||||||
|
] |
||||||
|
}, |
||||||
|
// 解析 MakeDown 文件
|
||||||
|
{ |
||||||
|
test: /\.md$/, |
||||||
|
use: [ |
||||||
|
'html-loader', |
||||||
|
'markdown-loader' |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
resolve: { |
||||||
|
// 设置别名
|
||||||
|
alias: { |
||||||
|
src: appSrc, |
||||||
|
utils: path.resolve(__dirname, '../src/utils'), |
||||||
|
pages: path.resolve(__dirname, '../src/pages'), |
||||||
|
components: path.resolve(__dirname, '../src/components') |
||||||
|
}, |
||||||
|
// 设置模块查找范围
|
||||||
|
modules: [path.resolve(__dirname, '../node_modules')] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
const path = require('path'); |
||||||
|
const webpack = require('webpack'); |
||||||
|
const merge = require('webpack-merge'); |
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
||||||
|
const common = require('./webpack.common'); |
||||||
|
|
||||||
|
const appPublic = path.resolve(__dirname, '../public'); |
||||||
|
|
||||||
|
const config = merge(common, { |
||||||
|
mode: 'development', |
||||||
|
devtool: 'inline-source-map', |
||||||
|
devServer: { |
||||||
|
// 作为服务器发布的目录
|
||||||
|
contentBase: appPublic, |
||||||
|
// 热加载
|
||||||
|
hot: true, |
||||||
|
// host 地址，设置成 0.0.0.0 才能在移动端使用 ip 地址访问到
|
||||||
|
host: '0.0.0.0', |
||||||
|
// 端口号
|
||||||
|
port: 8000, |
||||||
|
historyApiFallback: true, |
||||||
|
// 是否在浏览器蒙层展示错误信息
|
||||||
|
overlay: true, |
||||||
|
inline: true, |
||||||
|
// 展示的统计信息
|
||||||
|
stats: 'errors-only', |
||||||
|
// 配置代理
|
||||||
|
proxy: { |
||||||
|
'/api': { |
||||||
|
changeOrigin: true, |
||||||
|
target: 'https://easy-mock.com/mock/5c2dc9665cfaa5209116fa40/example', |
||||||
|
pathRewrite: { |
||||||
|
'^/api/': '/' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
plugins: [ |
||||||
|
// 热加载插件
|
||||||
|
new webpack.HotModuleReplacementPlugin(), |
||||||
|
// 提取 css 文件
|
||||||
|
new MiniCssExtractPlugin({ |
||||||
|
filename: 'public/styles/[name].css', |
||||||
|
chunkFilename: 'public/styles/[name].chunk.css' |
||||||
|
}) |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
module.exports = config; |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
const webpack = require('webpack'); |
||||||
|
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); |
||||||
|
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); |
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
||||||
|
const CleanWebpackPlugin = require('clean-webpack-plugin'); |
||||||
|
const merge = require('webpack-merge'); |
||||||
|
const common = require('./webpack.common'); |
||||||
|
|
||||||
|
const config = merge(common, { |
||||||
|
mode: 'production', |
||||||
|
devtool: 'hidden-source-map', |
||||||
|
plugins: [ |
||||||
|
// 提取 css 文件
|
||||||
|
new MiniCssExtractPlugin({ |
||||||
|
filename: 'public/styles/[name].[contenthash:8].css', |
||||||
|
chunkFilename: 'public/styles/[name].[contenthash:8].chunk.css' |
||||||
|
}), |
||||||
|
// 区分环境
|
||||||
|
new webpack.DefinePlugin({ |
||||||
|
// 定义 NODE_ENV 环境变量为 production
|
||||||
|
'process.env': { |
||||||
|
NODE_ENV: JSON.stringify('production') |
||||||
|
} |
||||||
|
}), |
||||||
|
// 清理 dist 文件，2.0。0 版本之后不需要设置参数就可以自动清除打包生成的目录
|
||||||
|
new CleanWebpackPlugin() |
||||||
|
], |
||||||
|
optimization: { |
||||||
|
// 打包压缩js/css文件
|
||||||
|
minimizer: [ |
||||||
|
new UglifyJsPlugin({ |
||||||
|
uglifyOptions: { |
||||||
|
compress: { |
||||||
|
// 在UglifyJs删除没有用到的代码时不输出警告
|
||||||
|
warnings: false, |
||||||
|
// 删除所有的 `console` 语句，可以兼容ie浏览器
|
||||||
|
drop_console: true, |
||||||
|
// 内嵌定义了但是只用到一次的变量
|
||||||
|
collapse_vars: true, |
||||||
|
// 提取出出现多次但是没有定义成变量去引用的静态值
|
||||||
|
reduce_vars: true, |
||||||
|
}, |
||||||
|
output: { |
||||||
|
// 最紧凑的输出
|
||||||
|
beautify: false, |
||||||
|
// 删除所有的注释
|
||||||
|
comments: false, |
||||||
|
} |
||||||
|
} |
||||||
|
}), |
||||||
|
// 压缩 CSS 代码
|
||||||
|
new OptimizeCSSAssetsPlugin({}) |
||||||
|
], |
||||||
|
// 拆分公共模块
|
||||||
|
splitChunks: { |
||||||
|
cacheGroups: { |
||||||
|
styles: { |
||||||
|
name: 'styles', |
||||||
|
test: /\.(css|less)/, |
||||||
|
chunks: 'all', |
||||||
|
enforce: true, |
||||||
|
// 表示是否使用已有的 chunk
|
||||||
|
reuseExistingChunk: true
|
||||||
|
}, |
||||||
|
commons: { |
||||||
|
name: 'commons', |
||||||
|
chunks: 'initial', |
||||||
|
minChunks: 2, |
||||||
|
reuseExistingChunk: true |
||||||
|
}, |
||||||
|
vendors: { |
||||||
|
name: 'vendors', |
||||||
|
test: /[\\/]node_modules[\\/]/, |
||||||
|
priority: -10, |
||||||
|
reuseExistingChunk: true |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 为每个仅含有 runtime 的入口起点添加一个额外 chunk
|
||||||
|
runtimeChunk: true |
||||||
|
}, |
||||||
|
// 性能提醒
|
||||||
|
performance: { |
||||||
|
hints: false |
||||||
|
}, |
||||||
|
// 统计信息展示
|
||||||
|
stats: { |
||||||
|
modules: false, |
||||||
|
children: false, |
||||||
|
chunks: false, |
||||||
|
chunkModules: false |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
module.exports = config; |
||||||
Loading…
Reference in new issue