react生成apk安装包

工具:hbuilder
新建移动app得到一个mainfest.json文件,并进行配置
如下:

{
    "@platforms": ["android", "iPhone", "iPad"],
    "id": "H5EC95E07",/*应用的标识,创建应用时自动生成,勿手动修改*/
    "name": "vivo浏览器",/*应用名称,程序桌面图标名称*/
    "version": {
        "name": "1.0",/*应用版本名称*/
        "code": ""
    },
    "description": "",/*应用描述信息*/
    "icons": {
        "72": "icon.png"
    },
    "launch_path": "index.html",/*应用的入口页面,默认为根目录下的index.html;支持网络地址,必须以http://或https://开头*/
    "developer": {
        "name": "",/*开发者名称*/
        "email": "",/*开发者邮箱地址*/
        "url": ""/*开发者个人主页地址*/
    },
    "permissions": {
        "Messaging":{
        	"description": "短彩邮件插件"
        },
        "Cache": {
            "description": "管理应用缓存"
        },
        "Console": {
            "description": "跟踪调试输出日志"
        },
        "Contacts": {
            "description": "访问系统联系人信息"
        },
        "Events": {
            "description": "应用扩展事件"
        },
        "Maps": {
            "description": "管理地图插件"
        },
        "Speech": {
            "description": "管理语音识别插件"
        }
    },
    "plus": {
        "splashscreen": {
            "autoclose": false,/*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/
            "waiting": false/*是否在程序启动界面显示等待雪花,true表示显示,false表示不显示。*/
        },
        "popGesture": "close",/*设置应用默认侧滑返回关闭Webview窗口,"none"为无侧滑返回功能,"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/
        "runmode": "normal",/*应用的首次启动运行模式,可取liberate或normal,liberate模式在第一次启动时将解压应用资源(Android平台File API才可正常访问_www目录)*/
        "signature": "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==",/*可选,保留给应用签名,暂不使用*/
        "distribute": {
            "apple": {
                "appid": "",/*iOS应用标识,苹果开发网站申请的appid,如io.dcloud.HelloH5*/
                "mobileprovision": "",/*iOS应用打包配置文件*/
                "password": "",/*iOS应用打包个人证书导入密码*/
                "p12": "",/*iOS应用打包个人证书,打包配置文件关联的个人证书*/
                "devices": "universal",/*iOS应用支持的设备类型,可取值iphone/ipad/universal*/
                "frameworks":[
                ]/*调用Native.js调用原生Objective-c API需要引用的FrameWork,如需调用GameCenter,则添加"GameKit.framework"*/
            },
            "google": {
                "packagename": "",/*Android应用包名,如io.dcloud.HelloH5*/
                "keystore": "",/*Android应用打包使用的密钥库文件*/
                "password": "",/*Android应用打包使用密钥库中证书的密码*/
                "aliasname": "",/*Android应用打包使用密钥库中证书的别名*/
               "permissions": ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]
				/*使用Native.js调用原生安卓API需要使用到的系统权限*/
            },
            "orientation": [
                "portrait-primary"
            ],/*应用支持的方向,portrait-primary:竖屏正方向;portrait-secondary:竖屏反方向;landscape-primary:横屏正方向;landscape-secondary:横屏反方向*/
            "icons": {
                "ios": {
                    "prerendered": true, /*应用图标是否已经高亮处理,在iOS6及以下设备上有效*/
                     /*应用图标,分辨率:512x512,用于自动生成各种尺寸程序图标*/
                    "iphone": {
                        "normal": "", /*iPhone3/3GS程序图标,分辨率:57x57*/
                        "retina": "", /*iPhone4程序图标,分辨率:114x114*/
                         /*iPhone4S/5/6程序图标,分辨率:120x120*/
			 /*iPhone6 Plus程序图标,分辨率:180x180*/
                        "spotlight-normal": "", /*iPhone3/3GS Spotlight搜索程序图标,分辨率:29x29*/
                        "spotlight-retina": "", /*iPhone4 Spotlight搜索程序图标,分辨率:58x58*/
                         /*iPhone4S/5/6 Spotlight搜索程序图标,分辨率:80x80*/
                        "settings-normal": "", /*iPhone4设置页面程序图标,分辨率:29x29*/
                         /*iPhone4S/5/6设置页面程序图标,分辨率:58x58*/
			"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","settings@3x":"unpackage/res/icons/87x87.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png","notification@3x":"unpackage/res/icons/60x60.png","notification@2x":"unpackage/res/icons/40x40.png" /*iPhone6Plus设置页面程序图标,分辨率:87x87*/
                    },
                    "ipad": {
                        "normal": "", /*iPad普通屏幕程序图标,分辨率:72x72*/
                        "retina": "", /*iPad高分屏程序图标,分辨率:144x144*/
                         /*iPad iOS7程序图标,分辨率:76x76*/
                         /*iPad iOS7高分屏程序图标,分辨率:152x152*/
                        "spotlight-normal": "", /*iPad Spotlight搜索程序图标,分辨率:50x50*/
                        "spotlight-retina": "", /*iPad高分屏Spotlight搜索程序图标,分辨率:100x100*/
                        /*iPad iOS7 Spotlight搜索程序图标,分辨率:40x40*/
                        /*iPad iOS7高分屏Spotlight搜索程序图标,分辨率:80x80*/
                        /*iPad设置页面程序图标,分辨率:29x29*/
                        "app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","settings":"unpackage/res/icons/29x29.png","proapp@2x":"unpackage/res/icons/167x167.png","spotlight":"unpackage/res/icons/40x40.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight@2x":"unpackage/res/icons/80x80.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png" /*iPad高分屏设置页面程序图标,分辨率:58x58*/
                    },"appstore":"unpackage/res/icons/1024x1024.png"
                },
                "android": {
                    "mdpi": "unpackage/res/icons/48x48.png", /*普通屏程序图标,分辨率:48x48*/
                    "ldpi": "unpackage/res/icons/48x48.png", /*大屏程序图标,分辨率:48x48*/
                    "hdpi": "unpackage/res/icons/72x72.png", /*高分屏程序图标,分辨率:72x72*/
                    "xhdpi": "unpackage/res/icons/96x96.png",/*720P高分屏程序图标,分辨率:96x96*/
                    "xxhdpi": "unpackage/res/icons/144x144.png","xxxhdpi":"unpackage/res/icons/192x192.png"/*1080P 高分屏程序图标,分辨率:144x144*/
                }
            },
            "splashscreen": {
                "ios": {
                    "iphone": {
                        "default": "", /*iPhone3启动图片选,分辨率:320x480*/
                        "retina35": "",/*3.5英寸设备(iPhone4)启动图片,分辨率:640x960*/
                        "retina40": "",/*4.0 英寸设备(iPhone5/iPhone5s)启动图片,分辨率:640x1136*/
                        "retina47": "",/*4.7 英寸设备(iPhone6)启动图片,分辨率:750x1334*/
                        "retina55": "",/*5.5 英寸设备(iPhone6 Plus)启动图片,分辨率:1242x2208*/
                        "retina55l": ""/*5.5 英寸设备(iPhone6 Plus)横屏启动图片,分辨率:2208x1242*/
                    },
                    "ipad": {
                        "portrait": "", /*iPad竖屏启动图片,分辨率:768x1004*/
                        "portrait-retina": "",/*iPad高分屏竖屏图片,分辨率:1536x2008*/
                        "landscape": "", /*iPad横屏启动图片,分辨率:1024x748*/
                        "landscape-retina": "", /*iPad高分屏横屏启动图片,分辨率:2048x1496*/
                        "portrait7": "", /*iPad iOS7竖屏启动图片,分辨率:768x1024*/
                        "portrait-retina7": "",/*iPad iOS7高分屏竖屏图片,分辨率:1536x2048*/
                        "landscape7": "", /*iPad iOS7横屏启动图片,分辨率:1024x768*/
                        "landscape-retina7": ""/*iPad iOS7高分屏横屏启动图片,分辨率:2048x1536*/
                    }
                },
                "android": {
                    "mdpi": "", /*普通屏启动图片,分辨率:240x282*/
                    "ldpi": "", /*大屏启动图片,分辨率:320x442*/
                    "hdpi": "C:/Users/user/Pictures/Screenshots/屏幕截图(16).png", /*高分屏启动图片,分辨率:480x762*/
                    "xhdpi": "", /*720P高分屏启动图片,分辨率:720x1242*/
                    "xxhdpi": ""/*1080P高分屏启动图片,分辨率:1080x1882*/
                }
            }
        },"adid":"124583110310"
    }
}

二、新建create-react-app
修改package.json

{
  "name": "my-vivo-brower",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "@babel/core": "7.12.3",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@svgr/webpack": "5.5.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "antd-mobile": "^5.0.0-beta.14",
    "axios": "^0.22.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "bfj": "^7.0.2",
    "camelcase": "^6.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "4.3.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^7.11.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.5.2",
    "file-loader": "6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "4.5.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "26.6.0",
    "jest-circus": "26.6.0",
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
    "mini-css-extract-plugin": "0.11.3",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.2.1",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "5.0.2",
    "prompts": "2.4.0",
    "react": "^17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.3",
    "react-dom": "^17.0.2",
    "react-refresh": "^0.8.3",
    "resolve": "1.18.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^10.0.5",
    "semver": "7.3.2",
    "style-loader": "1.3.0",
    "terser-webpack-plugin": "4.2.3",
    "ts-pnp": "1.2.0",
    "url-loader": "4.1.1",
    "web-vitals": "^1.1.2",
    "webpack": "4.44.2",
    "webpack-dev-server": "3.11.1",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "5.1.4"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "testRunner": "E:\\React-resource\\my-vivo-brower\\node_modules\\jest-circus\\runner.js",
    "transform": {
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ],
    "resetMocks": true
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "react-router-dom": "^5.3.0",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2"
  },
  "proxy":"http://127.0.0.1:8080"
}

homepage是启动目录
三、将build之后的文件内的mainfest.json中的文件外其他·文件拷贝到移动app下,检查其mainfest.json是否正确,如果实名注册了hbuilder直接发行打包,并将生成的apk运行到模拟器或手机。

上一篇:微信小程序配置导航窗口


下一篇:PDF转图片