1、uni-app 　　uni-app是DCloud推出的终极跨平台解决方案，是一个使用Vue.js开发所有前端应用的框架，官网：https://uniapp.dcloud.io/ 　　2、mui 　　号称最接近原生APP体验的高性能前端框架，官网：https://dev.dcloud.net.cn/mui/ 　　个人觉得，mui除了页面设计很接近原生App之外，还有一个特点就是能方便的使用App扩展规范Html5 Plus（http://www.html5plus.org/doc/h5p.html），我们能在它的源码中看到比较多的地方都有使用到 　　3、开发工具 　　使用HBuilderX开发工具写uni-app的代码，以及打包App等工作，主要的业务功能依旧是使用我们熟悉的idea开发，不过页面从webPC端风格改成了移动端风格 　　4、整体架构 　　我们采用uni-app + mui的方式，使用的是官方推荐的 uni-app原生标题栏跟导航栏 + 嵌入webview远程服务的页面，也就是说除了头部、尾部，中间的内容都是类似iframe嵌入进去 　　简单的说，uni-app，包括头部标题栏、底部导航栏作为App的“壳”，java后端+mui前端页面作为App的“内容”，这样选型的目的是为了方便后期的运维、升级 　　webview嵌入：直接升级后端服务并重新部署即可，无需重新打包、升级App 　　头尾使用原生组件：提升App流畅度 　　 　　为方便以后查阅，特此记录 　　uni-app部分 　　我在App.vue中对uni对象进行全局赋值，这样在每个页面都调用到，这样做的目的是为了方便全局修改，比如全局该监听方法、后期需要换进度条样式、更换后端服务地址等 　　 　　tabBar导航栏 　　底部的导航栏比较简单，在page.json进行配置就可以 　　page.json View Code 　　 　　监听标题栏按钮 　　设置进度条颜色 　　设置进度条颜色、监听webview的url变化判断是否需要标题栏按钮等操作全都在App.vue中进行，具体页面可以直接调用样式对象、监听方法 　　App.vue View Code 　　index.vue View Code 　　然后其他的页面跟首页差不多，只是this.url的路径不同，同时，如果标题栏还需要其他按钮（比如右边再来个分享、或者添加按钮），就再加一个按钮，然后操作不同的下标 　　配置错误页面 　　webview组件 　　webview组件介绍：https://uniapp.dcloud.io/component/web-view 　　webview网页与App的交互 　　1、webview调用uni-app的api，那几个路径的跳转都没有问题，postMessage说是在特定时机（后退、分享等）中才会触发，但是我一次都没有成功 　　需要注意：在webview网页中调uni-app的api或者是5+扩展规范，需要监听原生扩展的事件，等待plus ready 复制代码 document.addEventListener('UniAppJSBridgeReady', function() { uni.navigateTo({ url: 'page/index/index' }); }); 复制代码 　　或者使用mui已经帮我们封装好了方法，所有的5+规范的api都可以调 复制代码 mui.plusReady(function() { plus.nativeUI.toast("xxxxxxx"); }); 复制代码 　　2、uni-app调用webview网页的方法，可以直接在uni-app的代码里面使用5+规范中的webview对象的evaljs方法，将js代码发生到webview页面去执行， 　　api地址：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.evalJS，例如 plus.webview.currentWebview()[0].evalJS("alert('哈哈哈')"); 　　webview页面就会弹出"哈哈哈"弹窗 　　但有一点要注意，比如在webview页面使用5+规范去操作uni-app原生标题栏按钮的回调事件中，我们发现，在回调方法的作用域可以访问到外面的对象，也可以是获取到dom文档里的标签、元素，但直接修改DOM文档发现时不起作用的，看文档才发现，原来webview的层级比里面的内容要高，这时候我们选择下面这样方案 复制代码 mui.plusReady(function () { let webView = plus.webview.currentWebview(); //webView加载完成时触发，开始监听子对象的onloaded事件 webView.onloaded = function() { let wv = webView.children()[0]; //webView的子对象加载完成时触发 wv.onloaded = function () { /* 标题栏按钮 */ webView.setTitleNViewButtonStyle(1, { onclick: function (event) { // 将JS脚本发送到Webview窗口中运行，可用于实现Webview窗口间的数据通讯 wv.evalJS("show()"); } }); } } }); function show() { } 复制代码 　　mui部分 　　项目工程结构就是我们之前熟悉的springboot + thymeleaf + springdata-jpa，开发起来除了页面风格（移动端）不同，其他的都还好 　　mui部分主要是业务页面、功能的开发，有时候也需要调用5+规范的api，比如调用手机相机、文件管理、系统通知等，需要用到的时候就看api：http://www.html5plus.org/doc/h5p.html 　　页面开发主要就参考mui的新手文档（https://dev.dcloud.net.cn/mui/getting-started/）、官网演示（https://www.dcloud.io/mui.html）、文档（https://dev.dcloud.net.cn/mui/ui/）等，同时也参考别人的App页面设计（QQ、微信、支付宝、京东等） 　　 　　mui封装弹窗 　　比如类似京东他们的这种弹窗，我认为比较好看，比较具有通用性 　　所以也基于mui封装了自己的一套弹窗效果 　　先看下演示 　　 　　代码 　　css 　　封装在common.css中 View Code 　　js 　　封装在common.js中 View Code 　　html 　　测试页面 View Code 　　其实后面的警告框、确认框的样式就是mui的5+端样式，那我们为什么还要封装呢？在开发中我们发现，在PS端浏览器将调试模式改成手机端，mui的封装的弹窗是上面的效果，但到真机上运行它又变成原生的弹窗样式，原来mui底层有进行了判断，安卓、苹果、5+等样式都不一样，这里我们为了弹窗风格的统一，同时也是为了方便后期的统一调整，因此再进行了一层封装 　　App调试、打包 　　运行 -> 运行到手机或模拟器 　　需要安装个模拟器（我的是雷电）、或者直接用USB数据先连接进行调试（PS：我的模拟器连接经常会断开，不知道是什么回事，有时候调试调试着就断开了，检查了也没有其他应用占用adb） 　　App打包是在：发行 - > 原生App-云打包 　　开发阶段，使用Dcloud公司的公用证书云打包就可以了，正式上线就需要自己的证书去打包 　　打包成功后控制台就会返回下载链接 　　后记 　　移动端App uni-app + mui 开发暂时先记录到这，后续再补充；由于是公司的App，就不方便演示，等有空了再做个demo把完整的一套东西再做完整演示； 作者：huanzi-qch 出处：https://www.cnblogs.com/huanzi-qch/ 若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利. 请注意：作者五行缺钱，如果喜欢这篇文章，请随意打赏！ 分类: 移动端开发https://www.cnblogs.com/huanzi-qch/p/11972723.html