提醒 2015-3-12 14：19

今天自己在使用的时候发现导航条动态添加的时候有问题，会出现效果无法实现。主要是因为有个计算的一页显示的地方出现问题。
现在给出一个临时的解决方案。使用css rem单位进行控制。
css代码 这里是一页显示4个样例

.mui-segmented-control .mui-control-item{  
    width: 5rem;  
}  

添加js代码段

var handlerOrientationChange = function() {  
                var width = window.innerWidth;  
                var fontSize = 16 * (width / 320);  
                document.documentElement.style.fontSize = fontSize + "px";  
            };  
            window.onresize = handlerOrientationChange;  
            setTimeout(function() {  
                handlerOrientationChange();  
            }, 0)

以上如果有问题可以加我QQ：75811329.共同研究。

update time:2015-3-10 20:55

附件已经是最新项目包，解决了到scrollIIndex=-1或者大于0时的bug。请大家及时更新

最近看到大家都在找网易客户端的导航条，今天花了一天时间给大家在mui.js的基础上进行了封装一下，规范完全按照mui进行封装的。可以直接用我mui.js替换你项目目录下的mui.js就可以使用了此功能。
由于我的机型不是太多，所以没有做太多的适配。

参数解释

   var scroll = mui('.mui-slider');  
        scroll.slider({  
        isScroll:true, //是否可滑动  
        pageSize:6, //导航条可显示几条数据 默认为4  
            scrollIndex:-1//最小为-1 最大不能大于pageSize-3  也就是当滑倒第几个项时会出现隐藏的项默认为最后一项  
   });

注意这里

<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-2"></div>

mui-col-xs-2 这个css样式还是需要大家自己去设置的。

具体实现的效果大家自己去运行demo吧。我把demo的源码放上来了

效果类似与

使用了一段时间的mui了，发现很多mui的控件使用静态加载的就可以，动态加载的不可以。
希望工作人员能够把那些动态加载需要手动初始化的整理出来下或者是改进。

目前有4.0和4.1beta的文件参见如下
extjs4.0-v0.1.sdocml
extjs4.1.beta-v.0.1.sdocml
由于这两个文件太大了，直接集成会导致包体积大增，所以没有集成
如果需要请右键项目->引入框架语法提示->导入即可

1. 将产生崩溃的设备连接到PC，打开iTunes, 等待iTunes同步Crash日志完成
2. Mac机器打开Finder，进入~/Library/Logs/CrashReporter/MobileDevice目录
   Widnows机器进入C:\Users\<user_name>\AppData\Roaming\Apple computer\Logs\CrashReporter/MobileDevice
   Windows XP进入C:\Documents and Settings\<user_name>\Application Data\Apple computer\Logs\CrashReporter
3. 在上述目录中找到以设备名命名的文件夹中,过滤以DCloud_Pandora 开始的文件,根据产生Crash的时间确定Crash的日志文件
   
   

emmet快速生成浏览器兼容数据很方便，但某些情况下，我们可能只需要兼容数据中的一条或两条，该如何做呢？
如在css为div指定transition时，如果直接输入trans按下tab生成如下代码

.div{  
            -webkit-transition: prop time;  
            -moz-transition: prop time;  
            -ms-transition: prop time;  
            -o-transition: prop time;  
            transition: prop time;  
 }

但实际上，我们可能仅需要-webkit和-moz类型的兼容数据
如果你想手工指定想要的前缀，可以这样做 ，先输入一个小横线，然后是前缀的缩写形式
w 表示 webkit 前缀，m 是 moz 前缀，s 是 ms 前缀 .. o 就是 o 前缀
比如我们只想使用 webkit 前缀 输入一个 w ，我们可以继续指定其它的前缀
最后再加上一个小横线 .
然后是属性的缩写-wm-trans然后按下tab
生成结果如下

.div{  
            -webkit-transition: prop time;  
            -moz-transition: prop time;  
            transition: prop time;  
}

感谢网友 @南安 的分享

通过给后台传递last 和amount两个参数，获取json数组数据。

        <script>  
            mui.init({  
                swipeBack: false,  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    }  
                }  
            });  
            /**  
             * 下拉刷新具体业务实现  
             */  
            var last=-5,amount=5;  
            function pulldownRefresh() {  
                    last =last+amount;  

                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    mui.ajax({  
                    type: "post",  
                    dataType: "json",  
                    url: "http://localhost/amazeui/data.php?action=item",  
                    data: "last="+last+"&amount="+amount,  
                    complete :function(){$("#load").hide();},  
                    success: function(msg){  
                        var data = msg;  
                        var tmp='';  

                        $.each(data, function(i, n){  

                                var li = document.createElement('li');  
                                li.className = 'mui-table-view-cell';  
                                li.innerHTML = '<a class="mui-navigate-right">' + n.itemname + '</a>';  
                        //下拉刷新，新纪录插到最前面；  
                        table.insertBefore(li, table.firstChild);  
                             });    

                        }  
                    });    

                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  

            }  

            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }  
        </script>

mui的popover只提供了toggle，也就是说每次调用只能根据现有的状态决定是显示还是隐藏。这显然是一个没人性，噢不，是不人性化的设计。

之前在官方ASK里看到有人提供了解决方法，是这么说的：

mui('#popover').popover('hide');

我当时就信了啊，结果实验发现和toggle的效果一样，还是一次弹出一次隐藏。于是乎打开mui.js开始读源码。读到4845行，差点没吐出一口老血……你们看看这代码：

    $.fn.popover = function() {  
        var args = arguments;  
        this.each(function() {  
            $.targets._popover = this;  
            if (args[0] === 'show' || args[0] === 'hide' || args[0] === 'toggle') {  
                togglePopover(this, args[1]);  
            }  
        });  
    };

这3个参数实际上并没有区别，纯粹逗我玩啊！！

只好自己修改了一下，找到togglePopover的位置（4699行），然后与其同层级再加一个函数hidePopover。

    var hidePopover = function(popover) {  
        popover.classList.remove(CLASS_ACTIVE);  
        removeBackdrop(popover);  
    }

再将刚才4845行那个操蛋的逗你玩函数改成下面这样。

    $.fn.popover = function() {  
        var args = arguments;  
        this.each(function() {  
            $.targets._popover = this;  
            if (args[0] === 'show' || args[0] === 'toggle') {  
                togglePopover(this, args[1]);  
            }  
            else if(args[0] === 'hide') {  
                hidePopover(this);  
            }  
        });  
    };

这样就妥妥了，可以用hide参数来强制隐藏了。

mui('.mui-popover').popover('hide');

强制显示因为我暂时用不到，所以没写，需要的可以用类似方法自己添加。

设置系统状态栏样式背景

关于该设置的具体介绍和可取值参考该文档
以下两步缺一不可切记
1.打开info.plist文件找到Statusbarstyle项目（没有该项按下图格式创建），在右侧的列表中选择对应值

设置系统状态栏背景颜色

关于该设置的具体介绍和可取值参考该文档
打开info.plist文件找到StatusBarBackground项目(没有该项按下图格式创建)，在右侧填入对应值

设置应用沉浸式状态栏

关于该设置的具体介绍和可取值参考文档iOS平台设置沉浸式状态栏显示效果
打开info.plist文件找到UIReserveStatusbarOffset项目(没有该项按下图格式创建)，在右侧选择对应值

设置应用是否启动时全屏

打开info.plist文件找到Status bar is initially hidden项目(没有该项按下图格式创建)，YES为全屏，NO非全屏在右侧选择对应值

通过UrlSchemes与第三方应用相互调用

关于该设置的具体介绍可参考该文档
打开info.plist文件找到URL types项目，按照下图格式添加scheme项目，红圈中输入urlidentifier，绿圈中输入scheme，
如果需要设置多个scheme，重复上边步骤

后台音乐播放

在info.plist中找到Required background modes项目没有则按照下图格式建立，添加一项在弹出的列表中选择App plays audio or streams audio/video using AirPlay

个推push和UniPush配置

添加push插件

注: Linker Flags、framework添加方法参考该文档

1. 依次添加下列Linker Flags: -lGeTuiPush, 注意：如果是UniPush 则把-lGeTuiPush 换成 -lUniPush。
   -lGeTuiSdk,
   -llibPush
2. 添加下列framework:"GTSDK.framework",
   "CoreTelephony.framework",
   "AVFoundation.framework",
   "CoreLocation.framework",
   "SystemConfiguration.framework",
   "MobileCoreServices.framework",
   "Security.framework",
   "libresolv.tbd",
   "libz.tbd",
   "libsqlite3.tbd",
   "libc++.tbd",
   "UserNotifications.framework"

   帐号配置

   1.首先到个推申请appkey等信息,查看该文档
   注意：如果是UniPush 去这个链接申请
   2.打开info.plist，找到getui项，填入自己帐号的信息，如果没有该项，按照图中的格式创建

小米推送配置

注: Linker Flags、framework添加方法参考该文档

1. 依次添加下列Linker Flags:-lXiaomiPush,-lMiPushSDK
2. 添加下列framework:libresolv.dylib, libxml2.dylib,libz.dylib,SystemConfiguration.framework,MobileCoreServices.framework,CFNetwork.framework,CoreTelephony.framework,

   帐号配置

   1.首先到小米申请appkey等信息,查看该文档
   2.打开info.plist，找到"MiSDKAppID"项，填入自己小米推送帐号的的APPID，如果没有该项，按照图中的格式创建
   找到"MiSDKAppKey"项，填入自己小米推送帐号的的appKey，如果没有该项，按照图中的格式创建
   3 小米推送调试/发布时需要设置不同的MiSDKRun值 调试证书对应值设置为“debug”，生产证书对应值设置为“online”，可参考小米推送文档

申请带APNS功能的profile文件(缺少该项将导致后台收不到推送)

1.创建应用程序ID
登陆iOS Dev Center选择进入iOS Provisioning Portal。
在Certificates，Identifiers &Profiles中，点iOS Apps的任何一项进入
在iOS Provisioning Portal中，点击App IDs进入App ID列表。
创建App ID，如果ID已经存在可以直接跳过此步骤

为App开启Push Notification功能。如果是已经创建的App ID也可以通过设置开启Push Notification功能。

根据实际情况完善App ID信息并提交,注意此处需要指定具体的Bundle ID不要使用通配符。

2. 重新生成新的profile,下载到本地双击导入，并在Code signing 配置中选择该profile文件

生成APNS证书并上传到个推平台(缺少该项将导致后台收不到推送)

如果你之前没有创建过Push证书或者是要重新创建一个新的，请在证书列表下面新建。
新建证书需要注意选择证书种类（开发证书用于开发和调试使用，生产证书用于App Store发布）

点击Continue后选择证书对应的应用ID，然后继续会出现“About Creating a Certificate Signing Request (CSR)”

根据它的说明创建Certificate Signing Request。

然后点击Continue ，上传刚刚生成的 .certSigningRequest文件 点”generate”生成APNs Push Certificate。

下载并双击打开证书，证书打开时会启动“钥匙串访问”工具。
在“钥匙串访问”中你的证书会显示在“我的证书”中，注意选择“My Certificates” 和”login”
导出 .p12证书文件
在“钥匙串访问”中，选择刚刚加进来的证书，选择右键菜单中的“导出“...””。

将文件保存为Personal Information Exchange (.p12)格式。
注意：务必选择证书然后再导出。

保存p12文件时，需为其设置密码，上传到个推平台

UniPush使用指南：http://ask.dcloud.net.cn/article/35622

目前分享插件支持新浪微博分享、QQ分享、腾讯微博分享、微信分享
分享插件首先需要到各开放平台申请帐号,申请查看该文档
注: Linker Flags、framework等添加方法参考该文档

新浪微博分享插件配置

1.添加以下Linker Flags: -llibShare、-lSinaShare、-lWeiboSDK

2. 添加以下framwork: QuartzCore.framework、ImageIO.framework、SystemConfiguration.framework、Security.framwork、CoreTelephny。framwork、CoreText.framework、libz.dylib、libsqlite3.dylib
3. 添加下列文件:WeiboSDK.bundle
4. 打开info.plist，找到sinweibo项，填入自己帐号的信息，如果没有该项，按照图中的格式创建
   
   
   
   5.找到URL types ，打开URL identifier为com.weibo的项目，修改item0值为wb[这个是你的appkey] ,如果没有该项按照图中的格式创建
   
   
5. iOS9.0以上版本需要在info.plist增加以下配置
   
   

QQ分享插件配置

1.添加以下Linker Flags: -llibShare、-lQQShare
2.添加以下framwork: TencentOpenAPI.framework

3. 添加下列文件: TencentOpenApi_IOS_Bundle.bundle
   4.找到URL types,打开URL identifier为tencentopenapi的项目， 修改item0值为tencent[这个是你的appId] ,如果没有该项按照图中的格式创建
   
   
4. iOS9.0以上版本需要在info.plist增加以下配置
   
   

微信分享插件配置

1.添加以下Linker Flags: -llibShare、 -lweixinShare、-lWeChatSDK
2.添加以下framwork: Social.framework、Accounts.framework
3.找到URL types ,打开URL identifier为weixin的项目，修改item0值为wx[这个是你的appid] ,如果没有该项按照图中的格式创建

<a id="ulink"/>
5.HBuilderX2.3.4+ 版本需要配置 Universal Link
在info.plist root 节点添加UniversalLinks项，值和微信开放平台配置的一致，参考如下：

腾讯微博分享分享插件配置

1.添加以下Linker Flags: -llibShare、-lTCWeiboSDK
2.找到URL types ，打开URL identifier为com.tencent的项目，修改item0值为wb[这个是你的appkey] ,如果没有该项按照图中的格式创建

3. 打开info.plist，找到tencentweibo项，填入自己帐号的信息，如果没有该项，按照图中的格式创建
   
   
   
   
   
4. iOS9.0以上版本需要在info.plist增加以下配置
   
   

百度地图配置

Linker Flags、framework等添加方法请参考这个文档
1.添加下列Linker Flags: -llibMap、-lBaiduKeyVerify、-lbmapimp

2. 添加下列framework:	添加下列framework
   libstdc++.tbd
   libsqlite3.0.dylib
   QuartzCore.framework
   CoreGraphics.framework
   CoreTelephony.framework
   SystemConfiguration.framework
   Security.framework
   MapKit.framework
   OpenGLES.framework
   CoreLocation.framework
   BaiduMapAPI_Utils.framework
   BaiduMapAPI_Base.framework
   BaiduMapAPI_Search.framework
   BaiduMapAPI_Map.framework
   BaiduMapAPI_Location.framework
   libbmapimp.a
   libBaiduKeyVerify.a
   libssl.a
   libcrypto.a

3. 添加下列文件: mapapi.bundle
   4.申请Appkey,如果没有appkey将会导致地图显示不出
   参考百度地图Appkey申请章节

4. 打开Info.plist文件找到baidu项，如果没有按图片中的格式添加该项，在下图中的红色区域输入申请的Appkey
   注意info.plist中Bundle identifier要和你输入的安全码一致
   

   
   
   
   

   常见问题解决

   1.如下图只能看见栅格图可能的原因appkey配置不对、Bundle identifier和安全码不一致、百度地图缓存导致的可以删除app重新安装
   

   
   
   2.提示appKey校验错误
   
   
   
   在XCode控制台搜索baidu maponGetPermissionState 查看错误码是多少,对比百度开发平台错误信息

高德地图配置

Linker Flags、framework等添加方法请参考这个文档
1.添加下列Linker Flags: -llibMap、-lAMapImp

2. 添加下列依赖库:
   libAMapImp.a、liblibMap.a和
   参考高德地图章节
3. 添加下列文件: AMap.bundle
   4.申请Appkey,如果没有appkey将会导致地图显示不出
   参考高德地图Appkey申请章节
4. 打开Info.plist文件找到amap项，如果没有按图片中的格式添加该项，在下图中输入申请的appkey

注意：工程里只能有一个地图，其他的地图功能，要删除info.plist里的key，和对应的库文件,请详细根据Feature-iOS.xml文件的内容配置

离线打包可以根据需要进行插件的增删，这个过程需要对工程做出修改。

目前插件需要修改的项目包含 LinkerFlags、 Library、Framework、资源文件、宏定义、info.plist文件几项。

并不是所有的插件都要修改以上几项，大部分插件只需要修改其中几项即可。

如果app中出现“缺失模块提醒框”，需要按照下面步骤添加相应的模块即可。

每个插件需要修改哪些项目，每个项目需要配置的值是什么，可以查看SDK中的Feature-iOS.xls文件。

具体修改方法：

如何修改LinkerFlags配置

按照下图找到Other Linker Flags 点击该项，在弹出的窗口中点击+可以添加flag 点击-可以删除flag

如何修改Library配置

library为插件对应的库文件和依赖库， 目前离线打包工程包括所有的库，不需要修改

如何修改framework配置

framework为插件依赖的系统库，按照下图找到framework的配置位置，点击+可以添加，选中framework点击-可以删除

如何添加删除文件

资源为插件需要使用的资源如图片、国际化文件等， 点击File->addFile 在弹出的对话框中选择响应文件即可，
删除时在工程中选中该项目，点击delete键

如何修改宏定义

按照下图找到Macors，在弹出的窗口中点击+可以添加添加-可以删除