Skip to content

Z
zhu_wap_bridge
Commit 68cfcca0 authored by westzmg's avatar westzmg
Browse files
Options

初始化提交

parents
Hide whitespace changes
Inline Side-by-side
Showing with 852 additions and 0 deletions
.babelrc 0 → 100644
View file @ 68cfcca0
{ "presets":
[
[
"@babel/env",
{
"modules": false,
"useBuiltIns": "usage"
}
], "@babel/react"] ,
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
["@babel/plugin-proposal-class-properties",{
"loose": true
}],
"babel-plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime",
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
.gitignore 0 → 100644
View file @ 68cfcca0
# Created by .ignore support plugin (hsz.mobi)
node_modules
app/dist/
dist/
npm-debug.log
.idea/
workspace.xml
pages/.umi/
*/.umi/
.umirc.js 0 → 100644
View file @ 68cfcca0
export default {
context: {
title: 'Unnamed Page',
},
history: 'hash',
disableCSSModules: true,
plugins: [
[
'umi-plugin-react',
{
dva: {
immer: true,
},
hd:false,
},
'dva-logger',
]
],
publicPath: './',
routes: [
{ path: '/', component: '../pages', },
{ path: '/takePicture', component: '../pages/takePicture' },
{ path: '/recordVideo', component: '../pages/recordVideo' },
{ path: '/barcode', component: '../pages/barcode' },
{ path: '/openWindow', component: '../pages/openWindow' },
{ path: '/getPosition', component: '../pages/getPosition' },
{ path: '/launchCQDigitalSign', component: '../pages/launchCQDigitalSign' },
{ path: '/launchFingerSign', component: '../pages/launchFingerSign' },
{ path: '/launchShare', component: '../pages/launchShare' },
{ path: '/getToken', component: '../pages/getToken' },
]
}
package.json 0 → 100644
View file @ 68cfcca0
{
"name": "zhu_wap_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "PORT=15001 COMPILE_ON_DEMAND=none umi dev",
"build": "umi build",
"dist": "babel components -d libs",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "westzmg",
"license": "MIT",
"peerDependencies": {
"react-native-webview-invoke": "^0.5.1"
},
"dependencies": {
"antd-mobile": "^2.3.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-eva": "^1.1.7",
"react-native-webview-invoke": "^0.5.1",
"superagent": "^5.1.1",
"umi": "^2.12.2",
"umi-plugin-react": "^1.14.5"
},
"devDependencies": {
}
}
pages/_Bridge.js 0 → 100644
View file @ 68cfcca0
import invoke from 'react-native-webview-invoke/browser'
/*
* 检测是否app环境
* @name isNative
* @return true app环境,false 非app环境
*/
export const isNative = () => {
if(!window) return false;
const userAgent = window.navigator.userAgent;
if(userAgent.indexOf('QB/NATIVE')>-1) return true;
if(userAgent.toLocaleLowerCase().indexOf('native')) return true;
return false;
};
/*
* 拍摄照片
* @name takePicture
* @详情参考 https://github.com/react-native-image-picker/react-native-image-picker
* @params opt{
* mediaType: 'photo' or 'video'
* maxWidth: To resize the image
* maxHeight: To resize the image
* videoQuality: 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android
* durationLimit: Video max duration in seconds
* quality: 0 to 1, photos
* includeBase64: If true, creates base64 string of the image (Avoid using on large image files due to performance)
* saveToPhotos: (Boolean) Only for launchCamera, saves the image/video file captured to public photo
* }
* @return {
* didCancel: true if the user cancelled the process
* errorCode: camera_unavailable/permission/others
* errorMessage: Description of the error, use it for debug purpose only
* base64: The base64 string of the image (photos only)
* uri: The uri to the local file on the device (uri might change for same file for different session so don't save it)
* width: Image dimensions (photos only)
* height: Image dimensions (photos only)
* fileSize: The file size (photos only)
* type: The file type (photos only)
* fileName: The file name
* }
*/
export const takePhoto = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('takePhoto', async (data) => {resolve(data)});
invoke.define('takePhotoCompleted', async (result) => {resolve(result)});
await invoke.bind("takePhoto")(opt)
})
};
export const recordVideo = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('recordVideo', async (data) => {resolve(data)});
invoke.define('recordVideoCompleted', async (result) => {resolve(result)});
await invoke.bind("recordVideo")(opt)
})
};
/*
* 扫描二维码
* @name barCodeScan
* @return
*/
export const barCodeScan = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('barCodeScan', async (data) => {resolve(data)});
invoke.define('barCodeScanCompleted', async (result) => {resolve(result)});
await invoke.bind("barCodeScan")(opt)
})
};
/*
* 打开新的WebView
* @name openWindow
* @return
*/
export const openWindow = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('openWindow', async (data) => {resolve(data)});
await invoke.bind("openWindow")(opt)
})
};
/*
* 关闭当前的WebView
* @name closeWindow
* @return
*/
export const closeWindow = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('closeWindow', async (data) => {resolve(data)});
await invoke.bind("closeWindow")(opt)
})
};
/*
* 获取坐标信息
* @name getPosition
* @return
*/
export const getPosition = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('getPosition', async (data) => {resolve(data)});
invoke.define('getPositionCompleted', async (result) => {resolve(result)});
await invoke.bind("getPosition")(opt)
})
};
/*
* 使用重庆电子签章
* @name launchCQDigitalSign
* @return
*/
export const launchCQDigitalSign = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('launchCQDigitalSign', async (data) => {resolve(data)});
invoke.define('launchCQDigitalSignCompleted', async (result) => {resolve(result)});
await invoke.bind("launchCQDigitalSign")(opt)
})
};
/*
* 使用手写板签名
* @name launchFingerSign
* @return
*/
export const launchFingerSign = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('launchFingerSign', async (data) => {resolve(data)});
invoke.define('launchFingerSignCompleted', async (result) => {resolve(result)});
await invoke.bind("launchFingerSign")(opt)
})
};
/*
* 社交应用分享
* @name launchShare
* @return
*/
export const launchShare = async (opt) => {
return new Promise(async (resolve) => {
invoke.define('launchShare', async (data) => {resolve(data)});
invoke.define('launchShareCompleted', async (result) => {resolve(result)});
await invoke.bind("launchShare")(opt)
})
};
/*
* 获取token
* @name getToken
* @return
*/
export const getToken = async () => {
return new Promise(async (resolve) => {
invoke.define('getToken', async () => {resolve()});
invoke.define('getTokenCompleted', async (result) => {resolve(result)});
await invoke.bind("getToken")()
})
};
export const EVENTS_TYPE = {
keyboardWillShow: 'keyboardWillShow', // 键盘即将出现
keyboardDidShow: 'keyboardDidShow', // 键盘已经出现
keyboardDidHide: 'keyboardDidHide', // 键盘已经隐藏
keyboardWillHide: 'keyboardWillHide', // 键盘即将隐藏
appStateChange: 'appStateChange', // app前后台切换
aliPushMessage: 'aliPushMessage', // 阿里云推送监听
};
pages/barcode.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import _ from 'lodash'
import {Button} from "antd-mobile";
import {barCodeScan} from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
}
}
doFunc = async (options)=> {
this.setState({result: null}, async ()=>{
const result = await barCodeScan(options);
this.setState({result: result})
})
};
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>二维码扫描</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>二维码扫描</Button>
{
this.state.result?(
<React.Fragment>
<p>扫描结果：</p>
<p>{_.get(this.state, "result.data.data")}</p>
<p>扫描内容</p>
<p>{JSON.stringify(this.state.result)}</p>
</React.Fragment>
):(
<p>空</p>
)
}
</div>
</div>
);
}
};
pages/document.ejs 0 → 100644
View file @ 68cfcca0
<!DOCTYPE html>
<html>
<head>
<title>测试Native的WebView</title>
<meta charset="utf-8"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
<meta name="format-detection" content="telephone=no,address=no">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
</head>
<body>
<div id="root">
<div style="display: flex; height: 100%; width: 100%; align-items: center; justify-content: center">
<div style="text-align: center">正在进入，请稍后...</div>
</div>
</div>
</body>
</html>
pages/getPosition.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import moment from 'moment'
import {Button, Toast} from "antd-mobile";
import {getPosition} from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
}
}
doFunc = async (options)=> {
Toast.loading("获取坐标");
this.setState({result: null}, async ()=>{
try {
const result = await getPosition(options);
this.setState({result: JSON.stringify(result)})
} catch (e) {
console.error(e)
} finally {
Toast.hide();
}
})
};
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>二维码扫描</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>获取坐标信息</Button>
<p>结果：</p>
<p>{this.state.result||"空"}</p>
</div>
</div>
);
}
};
pages/getToken.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import moment from 'moment'
import {Button} from "antd-mobile";
import {getToken} from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
}
}
doFunc = async (options)=> {
this.setState({result: null}, async ()=>{
const result = await getToken(options);
this.setState({result: result})
})
};
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>获取Token</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>获取Token</Button>
<p>结果：</p>
<p>{this.state.result||"空"}</p>
</div>
</div>
);
}
};
pages/index.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import moment from 'moment'
import {Link} from 'umi'
import 'antd-mobile/dist/antd-mobile.css'
import {Button} from "antd-mobile";
import {closeWindow} from "./_Bridge"
moment.locale("zh-CN");
export default class extends React.Component {
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>WebView测试</h1>
<div style={{padding: 20}}>
<Link to={`/takePicture`}>
<Button style={{marginBottom: 20}}>拍摄照片</Button>
</Link>
<Link to={`/recordVideo`}>
<Button style={{marginBottom: 20}}>录制视频</Button>
</Link>
<Link to={`/barcode`}>
<Button style={{marginBottom: 20}}>扫描二维码</Button>
</Link>
<Link to={`/getPosition`}>
<Button style={{marginBottom: 20}}>获取坐标信息</Button>
</Link>
<Link to={`/launchCQDigitalSign`}>
<Button style={{marginBottom: 20}}>重庆建委人脸认证</Button>
</Link>
<Link to={`/launchFingerSign`}>
<Button style={{marginBottom: 20}}>手写签名</Button>
</Link>
<Link to={`/launchShare`}>
<Button style={{marginBottom: 20}}>社交应用分享</Button>
</Link>
<Link to={`/openWindow`}>
<Button style={{marginBottom: 20}}>打开WebView</Button>
</Link>
<Link to={`/getToken`}>
<Button style={{marginBottom: 20}}>获取Token</Button>
</Link>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await closeWindow()
}}
>关闭WebView</Button>
</div>
</div>
);
}
};
pages/launchCQDigitalSign.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import _ from 'lodash'
import {Button} from "antd-mobile";
import {launchCQDigitalSign} from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
}
}
doFunc = async (options)=> {
this.setState({result: null}, async ()=>{
const result = await launchCQDigitalSign(options);
this.setState({result: result})
})
};
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>重庆建委人脸识别认证</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>重庆建委人脸识别认证</Button>
{
this.state.result?(
<React.Fragment>
<p>结果</p>
<p>{JSON.stringify(this.state.result)}</p>
</React.Fragment>
):(
<p>空</p>
)
}
</div>
</div>
);
}
};
pages/launchFingerSign.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import _ from 'lodash'
import {Button} from "antd-mobile";
import {launchFingerSign} from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
}
}
doFunc = async (options)=> {
this.setState({result: null}, async ()=>{
const result = await launchFingerSign(options);
this.setState({result: result})
})
};
render() {
let base64String = null;
if(_.get(this.state, 'result.data')) {
base64String = _.get(this.state, 'result.data');
}
return (
<div>
<h1 style={{textAlign: "center"}}>手写签名</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>手写签名</Button>
<div style={{width: "100%", background: "#888", marginBottom: 20}}>
<img
src={base64String} alt=""
style={{width: "100%"}}
/>
</div>
</div>
</div>
);
}
};
pages/launchShare.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import _ from 'lodash'
import {Button} from "antd-mobile";
import {launchShare} from "./_Bridge"
import {InputItem} from "antd-mobile";
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null,
message: null,
}
}
doFunc = async ()=> {
this.setState({result: null}, async ()=>{
const options = {
message: this.state.message
};
const result = await launchShare(options);
this.setState({result: result})
})
};
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>社交应用分享</h1>
<div style={{padding: 20}}>
<InputItem onChange={(val)=>{
this.setState({message: val})
}} />
<div style={{height :20}} />
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>社交应用分享</Button>
{
this.state.result?(
<React.Fragment>
<p>结果</p>
<p>{JSON.stringify(this.state.result)}</p>
</React.Fragment>
):(
<p>空</p>
)
}
</div>
</div>
);
}
};
pages/openWindow.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import moment from 'moment'
import {Button} from "antd-mobile";
import {openWindow} from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
doFunc = async (options)=> {
const result = await openWindow(options);
};
render() {
return (
<div>
<h1 style={{textAlign: "center"}}>打开窗口</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc({url: "http://ucookie.z023.cn/app/index.html"});
}}
>友酷客</Button>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc({url: "http://www.baidu.com"});
}}
>百度</Button>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc({url: "http://taobao.com"});
}}
>淘宝</Button>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc({url: "http://toutiao.com"});
}}
>头条</Button>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc({url: "http://192.168.1.53:15001/#/"});
}}
>打开当前</Button>
</div>
</div>
);
}
};
pages/recordVideo.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import _ from 'lodash'
import {Button, Toast} from "antd-mobile";
import * as _Bridge from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
}
}
doFunc = async (options)=> {
Toast.loading("正在装载");
this.setState({result: null}, async ()=>{
const result = await _Bridge.recordVideo(options);
this.setState({result: result}, ()=>{
Toast.hide()
})
})
};
render() {
let base64String = null;
if(_.get(this.state, 'result.data.base64')) {
base64String = `data:video/mp4;base64,${_.get(this.state, 'result.data.base64')}`;
}
return (
<div>
<h1 style={{textAlign: "center"}}>录制视频</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>录制视频</Button>
{
base64String?(
<div style={{width: "100%", background: "#888", marginBottom: 20}}>
<video
controls="controls"
autobuffer="autobuffer"
autoPlay="autoplay"
style={{width: "100%"}}
>
<source src={base64String}/>
</video>
</div>
):null
}
</div>
</div>
);
}
};
pages/takePicture.js 0 → 100644
View file @ 68cfcca0
import React from 'react'
import _ from 'lodash'
import {Button, Toast} from "antd-mobile";
import {takePhoto} from "./_Bridge"
export default class extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
}
}
doFunc = async (options)=> {
Toast.loading("正在装载");
this.setState({result: null}, async ()=>{
const result = await takePhoto(options);
this.setState({result: result}, ()=>{
Toast.hide()
})
})
};
render() {
let base64String = null;
if(_.get(this.state, 'result.data.base64')) {
base64String = `data:image/jpg;base64,${_.get(this.state, 'result.data.base64')}`;
}
return (
<div>
<h1 style={{textAlign: "center"}}>拍摄照片</h1>
<div style={{padding: 20}}>
<Button
style={{marginBottom: 20}}
onClick={async ()=>{
await this.doFunc();
}}
>拍摄照片</Button>
<p>拍照结果：</p>
<div style={{width: "100%", background: "#888", marginBottom: 20}}>
<img
// src={`https://p1-tt.byteimg.com/origin/pgc-image/466feaa43c4b42b8a3a7aad7fa7e36c5?from=pc`} alt=""
src={base64String} alt=""
style={{width: "100%"}}
/>
</div>
{/*<div style={{wordBreak: "break-all"}}>{base64String||"空"}</div>*/}
</div>
</div>
);
}
};
yarn.lock 0 → 100644
View file @ 68cfcca0
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment