初始化提交

.babelrc

+{ "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

+# Created by .ignore support plugin (hsz.mobi)
+node_modules
+app/dist/
+dist/
+npm-debug.log
+.idea/
+workspace.xml
+pages/.umi/
+*/.umi/
+

.umirc.js

+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

+{
+  "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

+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

+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

+<!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

+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

+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

+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

+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

+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

+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

+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

+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

+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>
+        );
+    }
+};
+