记前端混合式开发中遇到的一些问题

项目开发中app的功能从开始的几个页面到后来日渐丰富的功能打包的体积越来越大这时就要借助混合开发来解决问题了。目前项目中用到了两种混合开发方式:1、wgt热更新wgt包是用于存放Web应用程序数据的一种打包形式它通常包含了HTML、CSS、JavaScript等文件。通过wgt包开发者可以将应用程序的静态资源打包到一个文件中然后通过热更新机制进行更新原理热更新核心是利用网络请求从服务器获取最新的wgt包然后进行解压、替换应用程序中已有的资源2、H5内嵌app端通过webview技术展示对应的H5内容比较灵活替换方便问题记录问题1描述从H5获取APP安卓里的普通类型数据字符串、数字正常但是获取对象类型一直报稀奇古怪的问题出现场景H5和APP进行交互从H5中获取APP里的数据H5页面是通过uniapp开发缓存获取数据//安卓接收参数 function common(jsondata, callback) { console.log(jsondata); console.log(安卓安卓); jsondata eval(( jsondata )); //APP原生端选择的就诊人id字符串 localStorage.getItem(recordId, jsondata.recordId); //就诊人信息对象类型 localStorage.getItem(patients, jsondata.patients); } //patients{name:小米,age:24} /* eval可以解析()里的内容 jsondata从APP端传来的是JSON串此处的eval函数的作用就是把jsondata解析为对象 当jsondata中包含对象的时候解析会报错 */代码存放位置解决方案jsondata中包含的对象需要进行一次编码而且传值的时候需要用双引号括住进行传递在H5中拿到数据后再进行解码即可问题2描述前端处理字符串的时候特别是剔除特殊字符时需要用到replace和replaceAll这两个字符串方法但是在使用uniapp开发的项目在打包wgt运行到app上时会有报错提示 replaceAll is not a function解决方案使用基础的字符串处理方法如split切割jion拼接问题3描述uniapp开发的H5使用webview嵌套其他H5页时父级项目和内嵌的H5页通信时父级webview中用window.addEventListener(message, function(e) {}, false)监听子集页面传递来的参数当退出webview页再次进入时window.addEventListener监听触发次数会累加解决方案弃用addEventListener事件监听改用window.onmessage来获取子级传递来的参数即可调用方式window.onmessage (e) { console.log(父级组件拿到了message, e.data.data); }问题4描述uniapp开发中使用uView框架中的u-input当输入框是只读模式时给输入框及父级组件设置点击事件无反应在oppo find2折叠屏中出现的问题解决方案u-input添加:style{ pointer-events: none }属性设置即可穿透u-input input-alignright placeholder请输入 typetext placeholder-stylecolor:#999; :disabledtrue :style{ pointer-events: none } /