请选择 进入手机版 | 继续访问电脑版
搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

移动端App uni-app + mui 开发记录

[复制链接]
查看: 71|回复: 0

1万

主题

2万

帖子

4万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
48026
发表于 2019-12-2 23:50 | 显示全部楼层 |阅读模式
  前言

  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),我们能在它的源码中看到比力多的地方都有益用到
移动端App uni-app + mui 开发记录  游戏 1353055-20191202171045823-1707796625


  3、开辟工具
  利用HBuilderX开辟工具写uni-app的代码,以及打包App等工作,严重的营业功用仍然是利用我们熟悉的idea开辟,不外页面从webPC端气概改成了移动端气概

  4、团体架构
  我们采取uni-app + mui的方式,利用的是官方举荐的 uni-app原生题目栏跟导航栏 + 嵌入webview远程办事的页面,也就是说除了头部、尾部,中心的内容都是类似iframe嵌入进去
移动端App uni-app + mui 开发记录  游戏 1353055-20191202173809367-4821508

  简单的说,uni-app,包含头部题目栏、底部导航栏作为App的“壳”,java后端+mui前端页面作为App的“内容”,这样选型的目标是为了方便前期的运维、升级
  webview嵌入:间接升级后端办事并重新安排即可,无需重新打包、升级App
  头尾利用原生组件:提拔App流利度
  
  为方便今后查阅,特此记录

  uni-app部分

  我在App.vue中对uni工具举行全局赋值,这样在每个页面都挪用到,这样做的目标是为了方便全局点窜,比如全局该监听方式、前期需要换进度条款式、更换后端办事地址等
  
  tabBar导航栏

  底部的导航栏比力简单,在page.json举行设备便可以

  page.json
移动端App uni-app + mui 开发记录  游戏 ContractedBlock
移动端App uni-app + mui 开发记录  游戏 ExpandedBlockStart
  1. {    "pages": [        //pages数组中第一项表示利用启动页        {            "path": "pages/index/index",            "style": {                "navigationBarTitleText": "首页",                "titleNView": {                    "buttons": [{                        "type": "none",                        "float": "left"                    }, {                        "type": "none",                        "float": "right",                        "fontSrc":"/static/fonts/mui.ttf"                    }]                }            }        }    ],    "globalStyle": {        "navigationBarTextStyle": "black",        "navigationBarTitleText": "",        "navigationBarBackgroundColor": "#F8F8F8",        "backgroundColor": "#F8F8F8",        "backgroundColorTop": "#F4F5F6",        "backgroundColorBottom": "#F4F5F6"    },    "tabBar": {        "color": "#7A7E83",        "selectedColor": "#007AFF", //#007AFF 蓝色  #f07837 橙色        "borderStyle": "black",        "backgroundColor": "#F8F8F8",        "list": [{            "pagePath": "pages/index/index",            "iconPath": "static/image/index/index_.png",            "selectedIconPath": "static/image/index/index.png",            "text": "首页"        }],        "position": "bottom"    }}
复制代码
View Code   
  监听题目栏按钮

  设备进度条色彩

  设备进度条色彩、监听webview的url变化判定能否需要题目栏按钮等操纵全都在App.vue及第行,具体页面可以间接挪用款式工具、监听方式
  App.vue
移动端App uni-app + mui 开发记录  游戏 ContractedBlock
移动端App uni-app + mui 开发记录  游戏 ExpandedBlockStart
  1.     /*每个页面公共css */
复制代码
View Code
  index.vue
移动端App uni-app + mui 开发记录  游戏 ContractedBlock
移动端App uni-app + mui 开发记录  游戏 ExpandedBlockStart
  1.                                 /* css内部文件导入 */    @import "../../common/css/uni.css";
复制代码
View Code
  然后其他的页面跟首页差不多,只是this.url的途径差别,同时,假如题目栏还需要其他按钮(比如右侧再来个分享、大要增加按钮),就再加一个按钮,然后操纵差别的下标

  设备毛病页面

移动端App uni-app + mui 开发记录  游戏 1353055-20191202191810518-820345486

移动端App uni-app + mui 开发记录  游戏 1353055-20191202191749406-1083988376



  webview组件

  webview组件先容:https://uniapp.dcloud.io/component/web-view

  webview网页与App的交互

  1、webview挪用uni-app的api,那几个途径的跳转都没有题目,postMessage说是在特按机会(退却、分享等)中才会触发,可是我一次都没有乐成
  需要留意:在webview网页中调uni-app的api大如果5+扩大标准,需要监听原生扩大的事变,等待plus ready
  1. document.addEventListener('UniAppJSBridgeReady', function() {        uni.navigateTo({            url: 'page/index/index'        });});   
复制代码
  大要利用mui已经帮我们封装好了方式,全数的5+标准的api都可以调
  1. 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,例如
  1. plus.webview.currentWebview()[0].evalJS("alert('哈哈哈')");
复制代码
  webview页面就会弹出"哈哈哈"弹窗

  但有一点要留意,比如在webview页面利用5+标准去操纵uni-app原生题目栏按钮的回调事变中,我们发现,在回调方式的感化域可以拜候到概况的工具,也可以是获得到dom文档里的标签、元素,但间接点窜DOM文档发现时不起感化的,看文档才发现,本来webview的层级比里面的内容要高,这时候我们挑选下面这样计划
移动端App uni-app + mui 开发记录  游戏 1353055-20191202182926225-1752910672
  1. 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封装弹窗

  比如类似京东他们的这类弹窗,我以为比力好看,比力具有通用性
移动端App uni-app + mui 开发记录  游戏 1353055-20191202184628600-1883887761
  
移动端App uni-app + mui 开发记录  游戏 1353055-20191202184718050-1967933308



  所以也基于mui封装了自己的一套弹窗成果
  先看下演示
移动端App uni-app + mui 开发记录  游戏 1353055-20191202185039963-278071657

  
  代码
  css
  封装在common.css中
移动端App uni-app + mui 开发记录  游戏 ContractedBlock
移动端App uni-app + mui 开发记录  游戏 ExpandedBlockStart
  1. /* 封装自界说弹窗 上右下左,居中 */.huanzi-dialog {    position: fixed;    background-color: white;    z-index: -1;    overflow: hidden;}.huanzi-dialog-top {    width: 100%;    top: -100%;    border-radius: 0 0 13px 13px;}.huanzi-dialog-right {    width: 85%;    top: 0;    right: -85%;    bottom: 0;    border-radius: 13px 0 0 13px;}.huanzi-dialog-bottom {    width: 100%;    bottom: -100%;    border-radius: 13px 13px 0 0;}.huanzi-dialog-left {    width: 85%;    top: 0;    left: -85%;    bottom: 0;    border-radius: 0 13px 13px 0;}.huanzi-dialog-center {    border-radius: 13px;    opacity: 0;    /* 计划一 */    /*margin: auto;    left: 0;    right: 0;    bottom: 0;    top: 0;*/    /* 计划二 */    top: 50%;    left: 50%;    transform: translate3d(-50%, -50%, 0) scale(1.185);}
复制代码
View Code
  js
  封装在common.js中
移动端App uni-app + mui 开发记录  游戏 ContractedBlock
移动端App uni-app + mui 开发记录  游戏 ExpandedBlockStart
  1. /* 封装天讯弹窗 */var HuanziDialog = {    mask: null,//mui遮阴层工具    showSpeed: 300,//弹出速度    hideSpeed: 100,//潜伏速度    removeFlag: true,//close内部能否实行操纵    /**     * 潜伏弹窗,内部方式     * @param select jq元素挑选器,#xxx、.xxx等,假如为空,则潜伏全数     * @param callback 回调方式     * @param speed 速度     */    hideFun: function (select, callback, speed) {        let $huanziDialog = select ? $(select) : $(".huanzi-dialog");        speed = speed ? speed : HuanziDialog.hideSpeed;        //上右下左,居中        $huanziDialog.each(function () {            let dialog = $(this);            let clazz = dialog.attr("class");            if (clazz.indexOf("huanzi-dialog-top") > -1) {                dialog.animate({top: '-100%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-right") > -1) {                dialog.animate({right: '-85%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-bottom") > -1) {                dialog.animate({bottom: '-100%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-left") > -1) {                dialog.animate({left: '-85%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-center") > -1) {                dialog.animate({opacity: 0}, speed);            }            setTimeout(function () {                dialog.css("z-index", "-1");            }, speed)        });        callback && callback();    },    /**     * 表示弹窗,内部方式     * @param select jq元素挑选器,#xxx、.xxx等,假如为空,则表示全数     * @param callback 回调方式     * @param speed 速度     */    showFun: function (select, callback, speed) {        let $huanziDialog = select ? $(select) : $(".huanzi-dialog");        speed = speed ? speed : HuanziDialog.hideSpeed;        //上右下左,居中        $huanziDialog.each(function () {            let dialog = $(this);            dialog.css("z-index", "999");            let clazz = dialog.attr("class");            if (clazz.indexOf("huanzi-dialog-top") > -1) {                dialog.animate({top: '0%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-right") > -1) {                dialog.animate({right: '0%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-bottom") > -1) {                dialog.animate({bottom: '0%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-left") > -1) {                dialog.animate({left: '0%'}, speed);            } else if (clazz.indexOf("huanzi-dialog-center") > -1) {                dialog.animate({opacity: 1}, speed);            }        });        HuanziDialog.removeFlag = true;        callback && callback();    },    /**     * 初始化mui遮阴层工具     */    init: function () {        HuanziDialog.mask = mui.createMask();        /**         * 重写close方式         */        HuanziDialog.mask.close = function () {            if (!HuanziDialog.removeFlag) {                return;            }            //方式间接在这里实行            HuanziDialog.hideFun();            //挪用删除            HuanziDialog.mask._remove();        };    },    /**     * 表示弹窗,供内部挪用(参数同内部方式齐截)     */    show: function (select, callback, speed) {        HuanziDialog.showFun(select, callback, speed);        HuanziDialog.mask.show();//表示遮罩    },    /**     * 潜伏弹窗,供内部挪用(参数同内部方式齐截)     */    hide: function (select, callback, speed) {        HuanziDialog.hideFun(select, callback, speed);        HuanziDialog.mask.close();//封闭遮罩    },    /**     * 警告框     * @param title 题目     * @param message 内容     * @param callback 点击确认的回调     */    alert: function (title, message, callback) {        let $html = $("" +            "" +            "   " + title + "
  2. " +            "   " + message + "
  3. " +            "
  4. " +            "" +            "肯定" +            "
  5. " +            "
  6. ");        $html.find(".confirm-but").click(function () {            HuanziDialog.removeFlag = true;            HuanziDialog.mask.close();            $html.remove();            callback && callback();        });        HuanziDialog.mask.show();//表示遮罩        HuanziDialog.removeFlag = false;        $("body").append($html);    },    /**     * 确认消息框     * @param title 题目     * @param message 内容     * @param callback 点击确认的回调     */    confirm: function (title, message, callback) {        let $html = $("" +            "" +            "   " + title + "
  7. " +            "   " + message + "
  8. " +            "
  9. " +            "" +            "取消" +            "肯定" +            "
  10. " +            "
  11. ");        $html.find(".cancel-but").click(function () {            HuanziDialog.removeFlag = true;            HuanziDialog.mask.close();            $html.remove();        });        $html.find(".confirm-but").click(function () {            $html.find(".cancel-but").click();            callback && callback();        });        HuanziDialog.mask.show();//表示遮罩        HuanziDialog.removeFlag = false;        $("body").append($html);    },    /**     * 自动消失提醒弹窗     * @param message 内容     * @param speed 存在时候     */    toast: function (message, speed) {        speed = speed ? speed : 2000;        let $html = $("" +            "    " + message + "
  12. " +            "
  13. ");        $("body").append($html);        setTimeout(function () {            $html.remove();        }, speed);    }};//先初始化自界说弹窗HuanziDialog.init();
复制代码
View Code
  html
  测试页面
移动端App uni-app + mui 开发记录  游戏 ContractedBlock
移动端App uni-app + mui 开发记录  游戏 ExpandedBlockStart
  1.             基于MUI封装常用弹窗                                             body{            text-align: center;        }        .mui-btn{            width: 50%;            margin: 10px auto;        }        [size=3]基于MUI封装常用弹窗[/size]
  2.     上    下    左    右    居中    警告框    确认框    自动消失提醒框                [size=2]我从上边弹出[/size]
  3.    
  4.                 [size=2]我从下边弹出[/size]
  5.    
  6.                 [size=2]我从左侧弹出[/size]
  7.    
  8.                 [size=2]我从右侧弹出[/size]
  9.    
  10.                 [size=2]我从中心弹出[/size]
  11.    
复制代码
View Code
  实在背面的警告框、确认框的款式就是mui的5+端款式,那我们为什么还要封装呢?在开辟中我们发现,在PS端欣赏器将调试形式改成手机端,mui的封装的弹窗是上面的成果,但到真机上运转它又酿成原生的弹窗款式,本来mui底层有举行了判定,安卓、苹果、5+等款式都纷歧样,这里我们为了弹窗气概的同一,同时也是为了方便前期的同一调解,是以再举行了一层封装

  App调试、打包

  运转 -> 运转得手机或模仿器
  需要安装个模仿器(我的是雷电)、大要间接用USB数据先毗连举行调试(PS:我的模仿器毗连经常会断开,不晓得是什么回事,偶然间调试调试着就断开了,检查了也没有其他利用占用adb)

  App打包是在:刊行 - > 原生App-云打包
  开辟阶段,利用Dcloud公司的公用证书云打包便可以了,正式上线就需要自己的证书去打包
移动端App uni-app + mui 开发记录  游戏 1353055-20191202190830287-855313902

  打包乐成后控制台就会返回下载链接



  后记

  移动端App uni-app + mui 开辟临时先记录到这,后续再补充;由因而公司的App,就不方便演示,等有空了再做个demo把完整的一套工具再做完整演示;



免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 妈妈网-中国妈妈第一,是怀孕、育儿、健康等知识交流传播首选平台 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表