域名空间都有了怎么做网站,沈阳网站提升排名,淘宝优惠网站怎么做,网页设计期末作品源代码需求目的#xff1a; 手机机通过webView展示H5网页#xff0c;在特殊场景下#xff0c;需要使用相机拍照或者从相册获取照片#xff0c;上传后台。
完整流程效果#xff1a; 如下图
一、H5界面样例代码
使用html文件格式#xff0c;文件直接打开就可以展示布局#…需求目的 手机机通过webView展示H5网页在特殊场景下需要使用相机拍照或者从相册获取照片上传后台。
完整流程效果 如下图
一、H5界面样例代码
使用html文件格式文件直接打开就可以展示布局一会在andriod webview中直接加载
!DOCTYPE html
html langen xmlns:v-onhttp://www.w3.org/1999/xhtmlheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headdiv idapph1alllalalallalal 默认会被覆盖/h1
/div
template idwhydivh2{{message}}/h2h2{{counter}}/h2button clickincrement1/buttonbutton clickdecrement-1/buttonh1 styletext-align: center;{{ title }}/h1divh2 styletext-align: center;android选中照片H5展示/h2!--HTML5提供了input typefile元素来实现选取文件的功能,在WebView表现为调用onShowFileChooser--input acceptimage/* capturecamera refimgFile typefile multiplechangepreviewFilesdiv idpreviewimg v-forimgSrc in imageSources :srcimgSrc :keyimgSrcstylemax-width: 100px; max-height: 100px; margin: 10px;/div/div/div
/templatebody
!-- 引入 Vue 3 的 CDN 资源网络加载不了 --
!-- script srchttps://unpkg.com/vuenext/script --
!-- 引入 Vue 3 的 CDN 资源,本地引用 --
script srcvue3.2.12global.js/script
scriptVue.createApp({template: #why,data: function () {return {message: 功能开发中敬请期待,counter: 100,pictureSelectorContent: 相机选择结果:,imageSources: [] // 存储图片的数据URL}},// 在你的 Vue 组件中处理 Webview 传递的数据mounted() {// 设置全局函数用于接收 WebView 调用// window.pictureSelectorResult this.pictureSelectorResult;},methods: {increment() {this.counter;console.log(点击了1);},decrement() {this.counter--;consloe.log(点击了-1);},startPictureSelector() {window.android.startPictureSelector();},previewFiles() {const files this.$refs.imgFile.files;this.imageSources [];for (let i 0; i files.length; i) {const file files[i];const reader new FileReader();reader.onload (e) {this.imageSources.push(e.target.result);};reader.readAsDataURL(file);}},},}).mount(#app)/script
styleh1 {font-size: 80px;font-weight: bold;margin-bottom: 20px;}h2 {font-size: 20px;font-weight: bold;color: #C8EFD4;}h3 {font-size: 10px;font-weight: bold;color: #C8EFD4;}button1 {font-size: 60px;padding: 10px 20px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;margin-bottom: 20px;margin-top: 20px;text-align: center;/* 将文字水平居中显示 */display: flex;/* 将按钮设置为flex容器 */align-items: center;/* 将文字在垂直方向上居中显示 */}/style
/body/html上述代码是前端代码使用vue3框架展示一个基础 加减demo界面不重要的冗余以及 一个打开文件的按钮以及展示图片
其中HTML5提供了元素来实现选取文件的功能当在WebView表现为调用onShowFileChooser后回调图片uri列表一一获取并展示
二、Android打开相机以及相册的两种方式
方式一android 原生方式
实际效果和流程示图
1.android界面逻辑代码 这边使用的是kotlin语言使用的fragment界面展示,使用binding加载了布局以及声明了webview组件在webview上导入html链接使本地H5界面展示 class VisitorFragment : Fragment() {private lateinit var binding: FragmentVisitorBindinglateinit var mActivity: Activityprivate lateinit var mRoot: Viewcompanion object {const val TAG VisitorFragment}private var mWebViewUrl: String file:///android_asset/vue_android_demo.htmlvar mAppName MainApplication.instance.configuration.BASE_APP_LOGIN_IDENTITYvar mSystemName WebViewConstant.DEFAULT_SYSTEM_NAMEprivate var mVisitorAndroidJs: VisitorAndroidJs VisitorAndroidJs(this)private var mWebView: WebView? nullvar mAndroidId: String WebViewConstant.DEFAULT_DEVICE_SIGNvar mApiKey: String WebViewConstant.DEFAULT_API_KEY//回传H5时使用的对象private var mUploadCallback: ValueCallbackArrayUri? null//拍照传递的路径uriprivate var mImageUri: Uri? null/*** onCreate方法是Activity生命周期的第一个回调方法* 当Activity被创建时被调用。* 在这个方法中你可以进行一些初始化的操作比如设置布局、绑定控件、初始化数据等。** param savedInstanceState If the fragment is being re-created from* a previous saved state, this is the state.*/override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding FragmentVisitorBinding.inflate(layoutInflater)mRoot binding.root//记录val viewModel ViewModelProvider(requireActivity())[DashboardViewModel::class.java]viewModel.setFragment(this)LogUtils.d(TAG, onCreate)}/*** onCreateView方法是Fragment生命周期的回调方法* 当Fragment创建并绘制其用户界面时被调用。* 在这个方法中你可以通过返回一个View对象来定义Fragment的用户界面。* 它常用于加载布局文件、查找和初始化控件等操作。** return*/override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View {LogUtils.d(TAG, onCreateView)initView(mRoot, layoutInflater, null)return mRoot}fun initView(parent: View?, inflater: LayoutInflater?, container: ViewGroup?) {//设置当前fragmentmAndroidId DeviceUtils.getUniqueId(mActivity)initWebView()mWebView?.loadUrl(mWebViewUrl)//弹出展示链接showToast(${getString(R.string.current_develop_environment)}$mWebViewUrl)initData()}override fun onAttach(context: Context) {super.onAttach(context)mActivity context as Activity}/*** param msg 内容*/fun showToast(msg: String?) {val activity: Activity? activityactivity?.runOnUiThread {Toast.makeText(activity,msg,Toast.LENGTH_SHORT).show()}}private fun initData() {}override fun onResume() {super.onResume()LogUtils.d(TAG, onResume)}SuppressLint(SetJavaScriptEnabled)private fun initWebView() {LogUtils.d(TAG, initWebView)mWebView binding.mainWebViewmWebView?.requestFocus()mWebView?.isHorizontalScrollBarEnabled falsemWebView?.isVerticalScrollBarEnabled falseval setting mWebView?.settingssetting?.mixedContentMode WebSettings.MIXED_CONTENT_ALWAYS_ALLOW;setting?.javaScriptEnabled true//用于开启或禁用其 DOM文档对象模型存储功能浏览器缓存这些数据setting?.domStorageEnabled true//允许访问文件默认允许setting?.allowFileAccess true//设置不会引起webView重新不急默认NARROW_COLUMNSsetting?.layoutAlgorithm WebSettings.LayoutAlgorithm.NARROW_COLUMNS//自动缩放setting?.setSupportZoom(true)setting?.builtInZoomControls true//自适应屏幕setting?.useWideViewPort truesetting?.loadWithOverviewMode true//支持多窗口setting?.setSupportMultipleWindows(true)setting?.setAppCacheEnabled(true)setting?.domStorageEnabled true//定位setting?.setGeolocationEnabled(true)//优先使用缓存数据在缓存数据不存在的情况下才去获取网络数据setting?.cacheMode WebSettings.LOAD_CACHE_ELSE_NETWORKsetting?.savePassword false//设置js接口mVisitorAndroidJs.let { mWebView?.addJavascriptInterface(it, android) }//页面不跳转浏览器mWebView?.webViewClient object : WebViewClient() {override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {LogUtils.d(TAG, url $url)view.loadUrl(url)return true}override fun shouldInterceptRequest(view: WebView,request: WebResourceRequest): WebResourceResponse? {var uri request.urlvar path uri.pathLogUtils.d(TAG, uri: $uri, path: $path)return super.shouldInterceptRequest(view, request)}}//webView官方打开文件选取方法onShowFileChooser把网页回传文件mWebView?.webChromeClient object : WebChromeClient() {//API 21(android 5.0.1)回调此方法override fun onShowFileChooser(webView: WebView?,filePathCallback: ValueCallbackArrayUri?,fileChooserParams: FileChooserParams?): Boolean {mUploadCallback filePathCallback//使用拍照或者打开文件mImageUri ChoosePhotoFile.takePhoto(mActivity)//设置false会IllegalStateException: Duplicate showFileChooser resultreturn true}}}fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {LogUtils.d(TAG,onActivityResultResponse requestCode $requestCode, resultCode$resultCode)// 扫描二维码/条码回传if (requestCode ScanCodeUtils.REQUEST_CODE_SCAN resultCode Activity.RESULT_OK) {LogUtils.d(TAG, onActivityResultResponse ${intent?.extras})if (intent null) {//弹出展示链接showToast(扫描结果为空)return}//传递给js格式是scanCodeResult(${data.extras})其中单引号很重要可能导致js script error//codedContent是组件中定义的参数名setEvaluateJavascript(scanCodeResult(${intent.getStringExtra(codedContent)}))} else if (requestCode ChoosePhotoFile.REQUEST_CODE) {//拍照界面跳回后结果文件的使用ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)}}Overrideoverride fun onDestroy() {//防止更新dialog内存泄漏super.onDestroy()}/*** 登录成功后跳转*/open fun loginSuccessJump() {}/*** 给网页传值* 传递给js格式是scanCodeResult(${data.extras})* 其中单引号很重要可能导致js script error*/private fun setEvaluateJavascript(jspMethodAndValue: String) {LogUtils.d(TAG,setEvaluateJavascript mWebView ${mWebView}, jspMethodAndValue $jspMethodAndValue)mWebView?.evaluateJavascript(jspMethodAndValue, ValueCallbackString() {LogUtils.d(TAG, 给网页传值为: $jspMethodAndValue)})}
}android layout布局
?xml version1.0 encodingutf-8?
androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentWebViewandroid:idid/main_web_viewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent //androidx.constraintlayout.widget.ConstraintLayout2.获取照片的主要思路是两个方法
webView官方打开文件选取方法onShowFileChooser把网页回传文件 //webView官方打开文件选取方法onShowFileChooser把网页回传文件mWebView?.webChromeClient object : WebChromeClient() {//API 21(android 5.0.1)回调此方法override fun onShowFileChooser(webView: WebView?,filePathCallback: ValueCallbackArrayUri?,fileChooserParams: FileChooserParams?): Boolean {mUploadCallback filePathCallback//使用拍照或者打开文件mImageUri ChoosePhotoFile.takePhoto(mActivity)//设置false会IllegalStateException: Duplicate showFileChooser resultreturn true}}拍照或者相册选中后界面跳回后使用ValueCallbackArray回传 fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {LogUtils.d(TAG,onActivityResultResponse requestCode $requestCode, resultCode$resultCode)if (requestCode ChoosePhotoFile.REQUEST_CODE) {//拍照或者相册选中后界面跳回后结果文件的使用ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)}}以上onActivityResultResponse方法需要在actvity onActivityResult方法中使用 因为我这里是activity嵌套fragment的,如果直接在activity使用webview就不需我这太麻烦 override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {super.onActivityResult(requestCode, resultCode, data)LogUtils.d(TAG,onActivityResult requestCode11 $requestCode, resultCode$resultCode)//设置当前fragmentval fragment mDashboardViewModel.fragment.valueLog.d(TAG, fragment: $fragment)Log.d(TAG, fragment.isResumed: ${fragment?.isResumed})//界面返回时VisitorFragment还没有Resumedif (fragment is VisitorFragment) {val visitorFragment: VisitorFragment fragmentvisitorFragment.onActivityResultResponse(requestCode, resultCode, data)}}3.打开相机和相册的工具类
object ChoosePhotoFile {private const val TAG ChoosePhotoFileconst val REQUEST_CODE: Int 12345fun takePhoto(activity: Activity): Uri {//相机可以访问的公共位置才能存储获取时需要读取文件权限val file: String Environment.getExternalStorageDirectory().toString() File.separator Environment.DIRECTORY_PICTURES File.separatorval fileName Image_${SimpleDateFormat(yyyyMMdd_HHmmss).format(Date())}.jpgval realFile File(file, fileName)val imageUri Uri.fromFile(realFile)LogUtils.d(TAG, realFile$realFile, imageUri: $imageUri)// 拍照后获取图片需要文件权限界面跳转直接拿文件不需要权限//检查申请读文件权限CheckPermissionUtils.requestPermissions(activity,arrayOf(Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA))//调起相机,拍一张照片val captureIntent Intent(MediaStore.ACTION_IMAGE_CAPTURE)captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri)//调起相册取一张照片val photoIntent Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI)//选择方式拍照或者相册val chooserIntent Intent.createChooser(photoIntent, Image Chooser)chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, arrayOfParcelable(captureIntent))activity.startActivityForResult(chooserIntent, REQUEST_CODE)return imageUri}/*** H5针对从拍照或者相册中选中的图片做处理* param imageUri 拍照返回的数据*/fun takeActivityResult(requestCode: Int,intent: Intent?,filePathCallback: ValueCallbackArrayUri?,imageUri: Uri?) {if (requestCode REQUEST_CODE) {//从相册获取返回的intentif (intent ! null intent.data ! null) {var uri: Uri intent.data as UriLogUtils.d(TAG, file uri: $uri)filePathCallback?.onReceiveValue(arrayOfUri(uri))} else {//从拍照中获取图片已经返回的imageUriLogUtils.d(TAG, take photo imageUri: $imageUri)if (imageUri ! null) {filePathCallback?.onReceiveValue(arrayOfUri(imageUri))} else {filePathCallback?.onReceiveValue(null)}}}}
}方式二使用android 组件库是实现-朋友圈获取照片功能
实际效果和流程示图 1.获取照片的主要思路是两个方法-替换
webView官方打开文件选取方法onShowFileChooser把网页回传文件 //webView官方打开文件选取方法onShowFileChooser把网页回传文件mWebView?.webChromeClient object : WebChromeClient() {//API 21(android 5.0.1)回调此方法override fun onShowFileChooser(webView: WebView?,filePathCallback: ValueCallbackArrayUri?,fileChooserParams: FileChooserParams?): Boolean {mUploadCallback filePathCallback//使用拍照或者打开文件
// mImageUri ChoosePhotoFile.takePhoto(mActivity)//模拟微信朋友圈获取照片模式LogUtils.d(TAG,onShowFileChooser)PictureSelectorUtils.startPictureSelector(mActivity)//设置false会IllegalStateException: Duplicate showFileChooser resultreturn true}}拍照或者相册选中后界面跳回后使用ValueCallbackArray回传 fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {LogUtils.d(TAG,onActivityResultResponse requestCode $requestCode, resultCode$resultCode)if (requestCode PictureSelectorUtils.REQUEST_PICTURE_SELECTOR) {LogUtils.d(TAG, onActivityResultResponse REQUEST_PICTURE_SELECTOR)PictureSelectorUtils.takeActivityResult(requestCode, intent, mUploadCallback)}}2.打开相机和相册的工具类
object PictureSelectorUtils {const val REQUEST_PICTURE_SELECTOR 10012const val TAG PictureSelectorUtilsfun startPictureSelector(activity: Activity) {LogUtils.d(TAG, startPictureSelector)// 拍照后获取图片需要文件权限界面跳转直接拿文件不需要权限//检查申请读文件权限
// CheckPermissionUtils.requestPermissions(
// activity,
// arrayOf(
// Manifest.permission.CAMERA,
// Manifest.permission.READ_EXTERNAL_STORAGE,
// Manifest.permission.WRITE_EXTERNAL_STORAGE
// )
// )//插件里自带了静态权限以及权限校验PictureSelector.create(activity).openGallery(PictureMimeType.ofImage()).imageEngine(GlideEngine) // Please refer to the Demo GlideEngine.java.isWeChatStyle(true) // 是否开启微信图片选择风格.selectionMode(PictureConfig.MULTIPLE).forResult(REQUEST_PICTURE_SELECTOR)}fun getPictures(data: Intent): MutableListUri {val selectList PictureSelector.obtainMultipleResult(data)LogUtils.d(TAG, getPicture selectList: $selectList)// 将照片路径转换成 Uri 列表val imageUris: MutableListUri ArrayList()if (selectList.isEmpty()) {LogUtils.d(TAG, getPicture selectList isEmpty)return imageUris}for (imagePath in selectList) {var path imagePath.pathLogUtils.d(TAG, path: $path)val uri Uri.parse(path)LogUtils.d(TAG, uri: $uri)imageUris.add(uri)}LogUtils.d(TAG, imageUris: ${imageUris.toString()})return imageUris}/*** H5针对从文件钟选中的图片做处理*/fun takeActivityResult(requestCode: Int,intent: Intent?,filePathCallback: ValueCallbackArrayUri?,) {if (requestCode REQUEST_PICTURE_SELECTOR) {val selectList PictureSelector.obtainMultipleResult(intent)LogUtils.d(TAG, getPicture selectList: $selectList)// 将照片路径转换成 Uri 列表val imageUris: MutableListUri ArrayList()if (selectList.isEmpty()) {LogUtils.d(TAG, getPicture selectList isEmpty)filePathCallback?.onReceiveValue(null)return}for (imagePath in selectList) {var path imagePath.pathLogUtils.d(TAG, path: $path)val uri Uri.parse(path)LogUtils.d(TAG, uri: $uri)imageUris.add(uri)}LogUtils.d(TAG, imageUris: ${imageUris.toString()})filePathCallback?.onReceiveValue(imageUris.toTypedArray())}}}其中使用第三方组件库-实现类似朋友圈获取照片的样式需要引入一下依赖 //照片获取类微信朋友圈implementation com.github.LuckSiege.PictureSelector:picture_library:v2.6.0拍照后获取图片需要文件权限界面跳转直接拿文件不需要权限,且第三方插件库里自带了静态权限以及权限请求
3.我完整的代码——类似朋友圈获取界面逻辑
class VisitorFragment : Fragment() {private lateinit var binding: FragmentVisitorBindinglateinit var mActivity: Activityprivate lateinit var mRoot: Viewcompanion object {const val TAG VisitorFragment}private var mWebViewUrl: String file:///android_asset/vue_android_demo.htmlvar mAppName MainApplication.instance.configuration.BASE_APP_LOGIN_IDENTITYvar mSystemName WebViewConstant.DEFAULT_SYSTEM_NAMEprivate var mVisitorAndroidJs: VisitorAndroidJs VisitorAndroidJs(this)private var mWebView: WebView? nullvar mAndroidId: String WebViewConstant.DEFAULT_DEVICE_SIGNvar mApiKey: String WebViewConstant.DEFAULT_API_KEY//回传H5时使用的对象private var mUploadCallback: ValueCallbackArrayUri? null//拍照传递的路径uriprivate var mImageUri: Uri? null/*** onCreate方法是Activity生命周期的第一个回调方法* 当Activity被创建时被调用。* 在这个方法中你可以进行一些初始化的操作比如设置布局、绑定控件、初始化数据等。** param savedInstanceState If the fragment is being re-created from* a previous saved state, this is the state.*/override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding FragmentVisitorBinding.inflate(layoutInflater)mRoot binding.root//记录val viewModel ViewModelProvider(requireActivity())[DashboardViewModel::class.java]viewModel.setFragment(this)LogUtils.d(TAG, onCreate)}/*** onCreateView方法是Fragment生命周期的回调方法* 当Fragment创建并绘制其用户界面时被调用。* 在这个方法中你可以通过返回一个View对象来定义Fragment的用户界面。* 它常用于加载布局文件、查找和初始化控件等操作。** return*/override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View {LogUtils.d(TAG, onCreateView)initView(mRoot, layoutInflater, null)return mRoot}fun initView(parent: View?, inflater: LayoutInflater?, container: ViewGroup?) {//设置当前fragmentmAndroidId DeviceUtils.getUniqueId(mActivity)initWebView()mWebView?.loadUrl(mWebViewUrl)//弹出展示链接showToast(${getString(R.string.current_develop_environment)}$mWebViewUrl)initData()}override fun onAttach(context: Context) {super.onAttach(context)mActivity context as Activity}/*** param msg 内容*/fun showToast(msg: String?) {val activity: Activity? activityactivity?.runOnUiThread {Toast.makeText(activity,msg,Toast.LENGTH_SHORT).show()}}private fun initData() {}override fun onResume() {super.onResume()LogUtils.d(TAG, onResume)}SuppressLint(SetJavaScriptEnabled)private fun initWebView() {LogUtils.d(TAG, initWebView)mWebView binding.mainWebViewmWebView?.requestFocus()mWebView?.isHorizontalScrollBarEnabled falsemWebView?.isVerticalScrollBarEnabled falseval setting mWebView?.settingssetting?.mixedContentMode WebSettings.MIXED_CONTENT_ALWAYS_ALLOW;setting?.javaScriptEnabled true//用于开启或禁用其 DOM文档对象模型存储功能浏览器缓存这些数据setting?.domStorageEnabled true//允许访问文件默认允许setting?.allowFileAccess true//设置不会引起webView重新不急默认NARROW_COLUMNSsetting?.layoutAlgorithm WebSettings.LayoutAlgorithm.NARROW_COLUMNS//自动缩放setting?.setSupportZoom(true)setting?.builtInZoomControls true//自适应屏幕setting?.useWideViewPort truesetting?.loadWithOverviewMode true//支持多窗口setting?.setSupportMultipleWindows(true)setting?.setAppCacheEnabled(true)setting?.domStorageEnabled true//定位setting?.setGeolocationEnabled(true)//优先使用缓存数据在缓存数据不存在的情况下才去获取网络数据setting?.cacheMode WebSettings.LOAD_CACHE_ELSE_NETWORKsetting?.savePassword false//设置js接口mVisitorAndroidJs.let { mWebView?.addJavascriptInterface(it, android) }//页面不跳转浏览器mWebView?.webViewClient object : WebViewClient() {override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {LogUtils.d(TAG, url $url)view.loadUrl(url)return true}override fun shouldInterceptRequest(view: WebView,request: WebResourceRequest): WebResourceResponse? {var uri request.urlvar path uri.pathLogUtils.d(TAG, uri: $uri, path: $path)return super.shouldInterceptRequest(view, request)}}//webView官方打开文件选取方法onShowFileChooser把网页回传文件mWebView?.webChromeClient object : WebChromeClient() {//API 21(android 5.0.1)回调此方法override fun onShowFileChooser(webView: WebView?,filePathCallback: ValueCallbackArrayUri?,fileChooserParams: FileChooserParams?): Boolean {mUploadCallback filePathCallback//使用拍照或者打开文件
// mImageUri ChoosePhotoFile.takePhoto(mActivity)//模拟微信朋友圈获取照片模式LogUtils.d(TAG,onShowFileChooser)PictureSelectorUtils.startPictureSelector(mActivity)//设置false会IllegalStateException: Duplicate showFileChooser resultreturn true}}}fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {LogUtils.d(TAG,onActivityResultResponse requestCode $requestCode, resultCode$resultCode)// 扫描二维码/条码回传if (requestCode ScanCodeUtils.REQUEST_CODE_SCAN resultCode Activity.RESULT_OK) {LogUtils.d(TAG, onActivityResultResponse ${intent?.extras})if (intent null) {//弹出展示链接showToast(扫描结果为空)return}//传递给js格式是scanCodeResult(${data.extras})其中单引号很重要可能导致js script error//codedContent是组件中定义的参数名setEvaluateJavascript(scanCodeResult(${intent.getStringExtra(codedContent)}))
// } else if (requestCode ChoosePhotoFile.REQUEST_CODE) {
// //拍照界面跳回后结果文件的使用
// ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)} else if (requestCode PictureSelectorUtils.REQUEST_PICTURE_SELECTOR) {LogUtils.d(TAG, onActivityResultResponse REQUEST_PICTURE_SELECTOR)PictureSelectorUtils.takeActivityResult(requestCode, intent, mUploadCallback)}}Overrideoverride fun onDestroy() {//防止更新dialog内存泄漏super.onDestroy()}/*** 登录成功后跳转*/open fun loginSuccessJump() {}/*** 给网页传值* 传递给js格式是scanCodeResult(${data.extras})* 其中单引号很重要可能导致js script error*/private fun setEvaluateJavascript(jspMethodAndValue: String) {LogUtils.d(TAG,setEvaluateJavascript mWebView ${mWebView}, jspMethodAndValue $jspMethodAndValue)mWebView?.evaluateJavascript(jspMethodAndValue, ValueCallbackString() {LogUtils.d(TAG, 给网页传值为: $jspMethodAndValue)})}
}三、总结一下
H5调用公共获取图片文件方法在android手机端H5主要依赖Webview,这边在webview声明并重写该方法onShowFileChooser使用工具类打开相机或相册可以两种方式安卓原生方式或者利用第三方组件库方式选中图片返回uri列表给H5H5收到uri照片列表并且使用前端方式展示
创造价值乐哉分享
