精华内容
下载资源
问答
  • MUI项目基础框架

    2019-09-23 16:48:36
    码云SVN仓库地址:... MUI项目基础框架,底部导航栏切换 目录结构 index为入口页主体,sub1-4为要切换的子页面 index页代码: <!DOCTYPE html> <html> <head> <m...

    码云SVN仓库地址:https://gitee.com/lim2018/vx/tree/master

     

    MUI项目基础框架,底部导航栏切换

    目录结构

    index为入口页主体,sub1-4为要切换的子页面

    index页代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title></title>
            <script src="js/mui.min.js"></script>
            <link href="css/mui.min.css" rel="stylesheet" />
            <style>
                /**头部标题栏**/
                
                .mui-bar-nav {
                    background: #000000;
                }
                
                .mui-title {
                    color: #FFFFFF;
                }
                /**导航图标颜色**/
                
                .mui-bar-tab .mui-tab-item.mui-active {
                    color: #4cd964;
                }
            </style>
        </head>
    
        <body>
            <!--
            作者:2184291781@qq.com
            时间:2019-01-06
            描述:头部
        -->
            <header class="mui-bar mui-bar-nav">
                <h1 class="mui-title">微信</h1>
            </header>
    
            <!--主体为子页面-->
    
            <!--
                作者:2184291781@qq.com
                时间:2019-01-06
                描述:底部导航
            -->
            <nav class="mui-bar mui-bar-tab">
                <a class="mui-tab-item mui-active mui-tab-href" href="sub1.html">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <span class="mui-tab-label">微信</span>
                </a>
                <a class="mui-tab-item mui-tab-href" href="sub2.html">
                    <span class="mui-icon mui-icon-bars"></span>
                    <span class="mui-tab-label">通讯录</span>
                </a>
                <a class="mui-tab-item mui-tab-href" href="sub3.html">
                    <span class="mui-icon mui-icon-navigate"></span>
                    <span class="mui-tab-label">发现</span>
                </a>
                <a class="mui-tab-item mui-tab-href" href="sub4.html">
                    <span class="mui-icon mui-icon-person"></span>
                    <span class="mui-tab-label">我</span>
                </a>
            </nav>
        </body>
        <script type="text/javascript" charset="utf-8">
            //mui初始化
            mui.init();
            //mui加载完成
            mui.plusReady(function() {
                //定义子页面数组
                var subPages=[];
                //取href所在的dom对象
                var href=document.getElementsByClassName("mui-tab-href");
                for(var i=0;i<href.length;i++){
                    //把每个导航页对应的href放入数组
                    subPages[i]=href[i].getAttribute("href");
                }
                //定义主页面的样式,主要是大小位置
                var subPageStyle = {
                    top: "44px", //子页面距离顶部高度
                    bottom: "50px" //子页面距离底部距离
                };
                //获取主的webview
                var mainView = plus.webview.currentWebview();
                //遍历数组,根据每个url创建webviwe
                for(var i = 0; i < subPages.length; i++) {
                    //括号内参数分别为 url id style
                    var subView = plus.webview.create(subPages[i], subPages[i], subPageStyle);
                    //把子webviwe追加到主的webviwe中 子webviwe默认隐藏
                    mainView.append(subView);
                }
                //然后要第一个子webview显示出来 也就是导航微信那页
                //补充:index这页是入口页 默认打开APP时候就是显示webview中,所以不用另外加入webview中
                plus.webview.show(subPages[0]);
                
                //给每个导航图标注册单击事件
                mui(".mui-bar-tab").on("tap","a",function(){
                    //设置当前点击的导航图标对应的子页面的webview显示,根据指定的id设置
                    //id在a标签的href内 取里面的值就行
                    var id=this.getAttribute("href");
                    plus.webview.show(id);
                })
            })
        </script>
    </html>

    子页面sub1代码 其他页类似

    <!doctype html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <!--
            作者:2184291781@qq.com
            时间:2019-01-06
            描述:主体
        -->
            <div class="mui-content">
                <h1>微信</h1>
            </div>
    
        </body>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
    </html>

     

    转载于:https://www.cnblogs.com/wordblog/p/10230615.html

    展开全文
  • mui 性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机...
  • MUI项目实战源码

    2018-05-09 10:39:37
    本代码是基于 MUI和 VUE 框架,调用的接口是豆瓣网的开放 API,开发出的一款跨平台的 APP,可查看当前热门电影,根据条件搜索的功能。
  • 【实例简介】本代码是基于 MUI和 VUE 框架,调用的接口是豆瓣网的开放 API,开发出的一款跨平台的 APP,可查看当前热门电影,根据条件搜索的功能。【实例截图】【核心代码】34e12973-53d9-415f-b3ec-b110c2878caf├...

    【实例简介】

    本代码是基于 MUI和 VUE 框架,调用的接口是豆瓣网的开放 API,开发出的一款跨平台的 APP,可查看当前热门电影,根据条件搜索的功能。

    【实例截图】

    【核心代码】

    34e12973-53d9-415f-b3ec-b110c2878caf

    ├── __MACOSX

    │   └── 璞嗙摚鐢靛奖婧愮爜

    │   └── workspace

    │   └── html

    └── 璞嗙摚鐢靛奖婧愮爜

    └── workspace

    ├── css

    │   ├── mui.css

    │   ├── mui.min.css

    │   └── style.css

    ├── fonts

    │   ├── iconfont.ttf

    │   └── mui.ttf

    ├── html

    │   ├── about.html

    │   ├── billboard-box.html

    │   ├── billboard-top.html

    │   ├── cast-detail.html

    │   ├── main-billboard.html

    │   ├── main-setting.html

    │   ├── movie-detail.html

    │   ├── search.html

    │   └── search-result.html

    ├── images

    │   ├── 60x60.gif

    │   ├── banner1.jpg

    │   ├── banner2.jpg

    │   ├── banner3.jpg

    │   ├── icon_commentphoto.jpg

    │   ├── logo.png

    │   └── ma.png

    ├── index.html

    ├── js

    │   ├── mui.js

    │   ├── mui.min.js

    │   ├── util.js

    │   └── vue.min.js

    ├── manifest.json

    ├── README.md

    └── unpackage

    12 directories, 28 files

    展开全文
  • MUI项目源码MUI消息推送 新手最快上手最全面安卓平台消息推送教程 MUI官方也是有案例得但是案例也是2014年的了 4年前的文章,,你懂的而且有些代码不一定要添加 新手最简单的操作2分钟搞定安卓MUI消息推送步骤说明0x...
     本帖最后由 fengrui99 于 2018-10-10 19:58 编辑 

    原文来自:https://www.frbkw.com/1018/
    MUI项目源码MUI消息推送 新手最快上手最全面安卓平台消息推送教程

    MUI官方也是有案例得但是案例也是2014年的了 4年前的文章,,你懂的而且有些代码不一定要添加
    新手最简单的操作2分钟搞定安卓MUI消息推送步骤说明
    0x0 首先在个推平台注册一个用户地址:https://www.getui.com


    0x1  后台点击个推-消息推送-》登记应用



    0x2 输入app名字


    0x3 如何获取应用标识 打开Hbuilder项目 发行-》云打包-打包原生安装包


    0x4 记录 包名 复制到0x3的应用标识中




    0x5 保存应用,回到主界面 点击应用配置




    0x6 复制appid appsecret appkey



    0x7 粘贴到到HBuilder项目SDK配置文件



    粘贴好后保存 生成app安装包(要生成,真机调试没有包含SDK的)先在手机上打开app ,随后去个推发送消息就好了



    展开全文
  • mui是Dcloud团队出品,号称是最接近原生app体验的前端框架。为什么这么说呢?那是因为mui集成了h5+的api,h5+又是什么呢?这也是Dcloud团队弄出来的,是一个规范,隶属于http://www.html5plus.org,定义了HTML5规范...

    mui是Dcloud团队出品,号称是最接近原生app体验的前端框架。

    为什么这么说呢?

    那是因为mui集成了h5+的api,h5+又是什么呢?这也是Dcloud团队弄出来的,是一个规范,隶属于http://www.html5plus.org,定义了HTML5规范中没有但开发者做App需要的扩展规范。      DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js,一种通过js调用几十万原生API的技术。而mui仅仅使用了h5+的常用api,然后又封装了一些窗体控件提供给广大开发者,它的定位仅仅是一个应用框架,不是规范。

    好了,废话不多说,接下来把开发环境的搭建步骤列出来供大家参考!

    第一步:下载安装hbuilderx,地址:

    https://www.dcloud.io/hbuilderx.html

    下载之后,直接解压,双击exe文件即可使用,可以将此文件发送到桌面快捷方式,方便使用。

    第二步:创建一个mui项目(如果已经有了就直接打开文件夹,找到mui项目就可以了),选择mui项目,mui属于h5+app;

    第三步:下载安装手机模拟器,推荐夜神模拟器吧,这个过程就简单了,不再细说。

    第四步:模拟器打开开发者模式

    1、首先打开设置,注意是模拟器内置的设置app

    打开后就看到这个界面

    注意第一次打开是没有开发者选项的,点击下面的“关于”,连续点击5次,再重新进入设置,就可以看到开发者选项了。

    2、打开usb调试

    点击开发者选项,进入后打开usb调试选项,在弹出框选择确定

    第五步:将hbuilderx连接到模拟器

    找到模拟器快捷键,右键—属性—打开文件所在位置,找到debugReport.bat这个文件,双击打开

    打开之后将第一行的端口号复制粘贴备用

    打开hbuilderx工具-设置-运行配置,将端口号粘贴替换

    到这里,基本上就可以进行基于mui的app开发了,如果在运行时还有连接不上的问题,可以这样解决:

    1、找到HBuilderX安装目录下的

    D:\soft\IDE\HBuilderX.2.5.1.20200103.full\HBuilderX\plugins\launcher\tools\adbs

    2、先备份该录下的除了文件夹外的其他三个文件。      3、然后把1.0.31目录下的文件拷贝到

    D:\soft\IDE\HBuilderX.2.5.1.20200103.full\HBuilderX\plugins\launcher\tools\adbs,直接覆盖即可。      4、重启HBuilderX就可以检测到模拟器了。

    第六步,最后一步进行app开发的页面调试

    用Chrome 浏览器调试移动端网页,在谷歌浏览器输入

    chrome://inspect/#devices

    可以看到与app对应的当前打开的页面,点击inspect fallback即可像调试web应用一样调试app。

    展开全文
  • HbuilderX创建mui项目和Hbuilder不太一样刚开始学找不到(dcloud在大力推广HbuilderX)
  • MUI项目集合

    2019-10-05 16:24:57
    目录 1、海掌柜_空壳模板 2、外卖 3、菜谱大全 4、麒麟出行 5、物业管家 6、新闻 7、会员积分管理 8、智能垃圾桶 9、卡游精灵 注:所有资源来源于网络,仅供学习参考 下载 1、海掌柜_空壳模板 ......
  • mui项目实时更新

    2019-09-26 12:14:31
    mui.ajax(banurl,{ dataType:'json',//服务器返回json格式数据 type:'get',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ if(data.version!=...
  • 项目遇到的一些问题,在此记录一下,以后也养成记录问题的习惯 1.登录页面:输入框聚焦,软键盘遮住输入框 解决办法:输入框聚焦的时,将输入框移动到可视范围,调整输入框上面的内容间距 2.打开子页面,返回...
  • 第一个MUI项目心得

    千次阅读 2018-12-07 10:09:09
    第一次使用Mui框架写webapp,主要是通过学习Mui官方文档进行开发,所以刚开始会遇到很多坑,也百度了很多东西,慢慢开始学会了爬坑,下面总结下我在使用Mui框架中遇到的坑,并解决的方法。 Mui下拉刷新,有单...
  • 一、MUI资源索引及MUI介绍 1,资源索引 官网:http://dev.dcloud.net.cn/mui/ MUI官方文档:http://dev.dcloud.net.cn/mui/ui/ 调用手机硬件(相册、摄像头等)的官方文档:...
  • 首先从官网http://www.dcloud.io/ 下载...接下来就是如何将写好的HBuilder引入到我们的安卓项目中。 先到http://ask.dcloud.net.cn/article/103下载HBuilder离线打包Android版SDK,SDK里面有个HBuilder-Integrate工...
  • mui项目的ajax请求问题

    2019-06-19 21:46:42
    重点要注意测试手机与电脑的ip在同一个局域网下,请求消息!!!!
  • 记录项目中遇到的各种坑。 1、mui下拉刷新问题。 mounted() { let that = this; this.mui.init({ pullRefresh: { container: ".list", //下拉刷新容器标识 down: { ...
  • 转载于:http://www.bcty365.com/content-146-3661-1.html最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的。原生JS挺简单,为何需要jq?jq的成功当时是因为ie6、7、8、9、10、chrome...
  • 原生JS挺简单,为何需要jq? jq的成功当时是因为ie6、7、8、9、10、...手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom。 选择元素 //jq $('.el'); //js  documen
  • Sqoop项目开始于2009年,最早是作为Hadoop的一个第三方模块存在,后来为了让使用者能够快速部署,也为了让开发人员能够更快速的迭代开发,Sqoop独立成为一个Apache项目。由于目前Sqoop1.4.6-CDH版本,把关系数据库...
  • 最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的。 原生JS挺简单,为何需要jq? jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器...
  • <link href="css/mui.css" rel="stylesheet" /> .clipbg{ position: fixed;background-color: #C7C7CC;top: 0;z-index: 999;width: 100%;height: 100%;left: 0; } .loading{ position: absolute;top: ...
  • 1、页面结构,header组件中添加mui-bar-transparent类。   2、轮播的滚动触发了scroll事件,导致scroll-y一直为0,mui.js找到如下内容,禁止掉。   3、页面中添加了scroll组件,导致transparent不生效,...
  • 测试环境:华为手机,Hbuilderx2.7.14 , 5+app1、首先创建一个app项目或已经有app项目2、连接手机端,电脑端和手机端下载Hisuite(华为手机助手),如果是其他手机,下载一个连接手机和电脑的应用助手即可,如360手机...
  • 如题,没用过GitHub.想导些项目来研究一下.求大神指点指点,好让我进入门槛...
  • 测试环境:华为手机,Hbuilderx2.7.14 , 5+app1、首先创建一个app项目或已经有app项目2、连接手机端,电脑端和手机端下载Hisuite(华为手机助手),如果是其他手机,下载一个连接手机和电脑的应用助手即可,如360手机...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,088
精华内容 1,235
关键字:

mui项目