遇到这个问题时候，通过排查发现；tab创建的页面除了第一个都隐藏了，导致了echart的无法初始化；
折腾了好久终于找到一个解决方案；
在tab选项卡切换时候加一个自定义事件，然后在echart那个页面监听；
window.addEventListener('send', function(event) {
//获得事件参数
mui.plusReady(function() { //这个是关键，不加这个也不显示
..//调用图表初始化方法
})
});
有些道理也无法说明，填坑多一个是一个；还希望官方继续完善下去；

重写css。可以在自定义的css里面增加
.mui-modal.right-to-left
{

-webkit-transform: translate3d(100%, 0, 0);  
        transform: translate3d(100%, 0, 0);  

}
.mui-modal.right-to-left.mui-active
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

}
然后modal的html增加right-to-left样式即可实现从右到左，其他方向类似

<div id="modal" class="mui-modal right-to-left">
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
<h1 class="mui-title">Modal</h1>
</header>
<div class="mui-content" style="height: 100%;">
<p class="mui-content-padded">bala bala bala.</p>
</div>
</div>

更新HBuilder 9.0.2.201803061935后，在小米note3手机上toast显示的内容前面带了app名称，如：
HBuilder:你好！！
plus.nativeUI.toast跟mui.toast都是这样,其他手机上好像正常
重现步骤
随便新建个项目就能重现

什么是5+Runtime?
首先简单介绍一下5+Runtime:

HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与之配套的IDE时Hbuilder,使用Dcloud提供的这一套方案可以方便快捷的开发和打包出具有原生能力的混合APP(Hybrid APP).

什么是HTML5 Plus?
HTML5+ 是由"中国HTML5产业联盟(Dcloud公司,中国信通院等是成员)"提出的一套HTML5的增强版规范,此规范让HTML5使用js即可具备原生调用能力,包括但不限于摄像头调用,第三方支付,第三方分享,窗口管理(多Webview管理),原生组件等.

5+Runtime与HTML5 Plus的关系:
5+Runtime引擎是对HTML5 Plus规范的一种实现.

HTML5 Plus规范与MUI的关系:
MUI是一套UI框架,是对HTML5 Plus规范中的js的再一次封装.

HTML5 Plus & HBuilder & MUI:
HBuilder具备APP打包能力,其打包出的APP的浏览器引擎为5+Runtime,能运行HTML5 Plus规范语法,简言之其可以打包出具有原生能力的混合APP. 您可直接编写HTML5 Plus的js语法实现原生扩展能力的使用,或者使用MUI更加便捷的使用其封装好的方法.

HTML5 Plus规范的其他实现与例子:
具我所知的不确定消息,360应用市场轻应用应该是使用了5+Runtime引擎实现了对HTML5+规范的支持,HBuilder也推出了"流应用"市场.

与以上一套"使用HTML5"开发APP的解决方案相似的其他方案:
APICloud , 就是前段时间因为抄袭Dcloud,被Dcloud告并且官司失败那个.

其他相似技术的一些简单说明:
Native APP. 使用前端技术开发原生APP(Native APP)的方案:React Native 和 Weex.这种方案可以开发出原生APP,APP运行时最终渲染的UI为原生组件,APP运行性能比Hybrid APP高.但是开发成本相对来说较低,学习难度也较大.

Hybrid APP. 使用前端技术开发混合APP(Hybrid APP)的方案:Dcloud(上文所述), APICloud 以及其他. 使用这种方案开发出的APP,实质上是一个或多个Webview窗口,此类方案具备一些原生调用能力,以及一些简单的原生组件的创建.开发效率较低,运行效率中等,优化好的话可以开发出用户体验好的产品.

Web APP 使用前端技术开发的H5APP,只是为其加了一层外壳,打包成了一个APP.其始终运行在一个Webview中.这种APP如果业务逻辑复杂,则运行效率低,用户体验差.开发效率较Hybrid APP快.

好了,以上简单介绍了Dcloud方案的一套东西和原生app,混合app,Web APP之间的关系和差别.

那么,本文要讨论什么问题?
本文要讨论 : 如何使用Webpack + Gulp便捷开发运行于Dcloud平台HTML5 Plus Runtime引擎的HybridAPP项目.

传统HBuilder项目开发模式痛点:
很难使用ES6语法以及新特性,包特性,Promise,对象,数组新特性等.
繁琐的重复任务,开发进度无法加快,几乎没有自动化.
无类似于Vue和React的路由概念,传统路由跳转繁琐
为什么不使用Vue和React开发运行于5+Runtime的单页应用?
因为之前有过实践,这种架构做出来就和Web APP差不多,几乎很难使用到多窗口(Webview)调用能力,整个项目运行于一个Webview中,开发效率提升了但是其运行效率低和用户体验却低. 这种架构基于Vue-cli,可以使用到前端新特性,但是综合考虑还是很难做出运行效率告,用户体验好的产品.

为什么不直接使用Weex或RN开发原生应用?
这种技术坑多,开发难度大,开发效率慢,虽然能使用到新特性开发出原生应用,但是这种方案对于一些中小公司,是无法承受和负担的.

所以我们到底要做什么?
方便快捷愉快的编码,最终开发出一个多页Hybrid APP.

0.使用Node.js和npm/yarn
本项目基于Node.js和npm/yarn , 请确保您的主机安装了这个环境.

1.使用Webpack进行项目架构
项目使用Webpack,配置sass对css的扩展,配置bable实现es6=>es5的编译.还可配置一些图片处理.
使用Webpack的多页配置,每要新写一个页面,就得增加一条配置.同时一般需要手动新建3个文件 html & js & scss.
2.Webpack的入口数组
Webpack的入口数组配置抽离到了./src/js/config/config.js
每次新增一个js应该在此文件中添加路径.
3.使用Gulp实现上条所述的新建页面的自动化任务
编写了Gulp自动化任务,简单的实现了通过命令行新增和移除页面.

创建页面 : gulp newPage --name testName

删除页面 : gulp delPage --name testName

执行上两条命令,会自动创建和移除html & js & scss文件.以及自动往webpack.config.js配置文件添加配置信息.同时还会自动往上一条所述的配置文件添加配置信息.

执行新增命令时,会自动拷贝test.html/scss/js模板,所以你可以手动更改该模板.

需要注意的是,每次执行完移除命令,需要手动删除webpack.config.js中的配置信息.因为展示没有实现自动删除.

4.自动化任务编写了git自动提交
每次执行新增和删除命令后,会自动提交git变更前的版本和变更后的版本.通过一个仅能运行于Windows的包实现命令行执行.如果不需要git提交,可在gulpfile.js中注释相关代码.

5.公共JS方法类
公共JS方法类在./src/js/class/Tools.js , Webpack配置中已经配置好每个页面公共加载该文件.里面有简单的公共方法.后期会新增窗口创建/显示/隐藏/关闭等方法,以及实现HTML5和5+Runtime不同端的不同操作.

6.Jquery的引用
因为在Webpack中导入全局Jquery太麻烦,项目又赶进度,暂时使用的cdn引入Jquery.
后期会实现导入本地Jquery.
7.关于SASS
*后期会使用less,因为在Windows下装node-sass包太难了.

8.路由跳转
不使用a标签跳转,而是在每个需要跳转事件的节点上 加入css类"Jump" 和data-uri参数,Tool方法初始化后会自动绑定跳转事件.具体可查阅代码.

9.分享出这简单的建构配置的开源地址
这套方案是我对我之前一个方案的升级版,还不完整与严谨,在此简单分享出我的想法,有兴趣的朋友可以与我一起探讨.之前那个版本的架构方案我在本文就不介绍了.写出本文是因为之前零零散散的有在一些群里和大家讨论过Dcloud下的开发分享,现在抽空简单叙述一下.

码云地址:https://gitee.com/izcy/WebpackGulpForHTML5PlusRuntimeDemo

9.后记
因为使用此方案的项目前期刚做完静态页面就中途暂停了,所以很多方法还没写(像窗口管理和跳转也不完善),整套方案不完整,我将持续的更新本文,以分享更多东西.也欢迎广大Dcloud开发者参与进来.

10.联系我
http://www.zhangchaoyue.com

Zcy 于 2018年2月2日 11:51:51

1 创建项目、部署 VUE 、入口页面布局
2 添加子窗口完成新闻列表展示功能及界面
3 新闻详情页面开发
4 新闻搜索功能开发
5 会员登录检查函数封装，登录界面布局
6 完成基于账户密码的会员注册
7 完善登录功能、“我的”页面布局
8 完成微信登录功能
9 完成文章详情页面的评论功能
10 我的评论功能开发（含评论删除功能）
11 文章收藏功能开发
12 混淆加密知识介绍
13 HOA 接口数据字典分析、后端开发原理剖析

购买后请联系客服QQ 1265928288 或HOA接口凭据，感谢大家长期以来对 hcoder.net 的支持,我们会继续努力为大家奉献更好的课程！

腾讯课堂地址:
https://ke.qq.com/course/280558

hcoder官网地址（各类教程）
http://www.hcoder.net/course

1 创建项目、部署 VUE 、入口页面布局
2 添加子窗口完成新闻列表展示功能及界面
3 新闻详情页面开发
4 新闻搜索功能开发
5 会员登录检查函数封装，登录界面布局
6 完成基于账户密码的会员注册
7 完善登录功能、“我的”页面布局
8 完成微信登录功能
9 完成文章详情页面的评论功能
10 我的评论功能开发（含评论删除功能）
11 文章收藏功能开发
12 混淆加密知识介绍
13 HOA 接口数据字典分析、后端开发原理剖析

购买后请联系客服QQ 1265928288 或HOA接口凭据，感谢大家长期以来对 hcoder.net 的支持,我们会继续努力为大家奉献更好的课程！

腾讯课堂地址:
https://ke.qq.com/course/280558

hcoder官网地址（各类教程）
http://www.hcoder.net/course

例如：
1.【新建】->【PHP文件】，在弹出窗“创建文件向导”面板上有一个“选择模板”，默认有“default”和“空白文件”。

1. 找到【自定义模板】，点击后会弹出自定义模板的HBuilder模板设置路径文件夹，即【\HBuilder settings\Templates\php】。
2. 里面有一个readme.txt文件，不用管。在这个文件夹里就可以自定义自己需要的模板了，如：
   （1）新建一个名为myPHP.txt的文本文件。
   （2）打开文件，键入自己的文件头注释，如php文件头注释

        <?php  
        /*  
         * @ Author:  
         * @ For:   
         * @ Date:   
         * @ Des:  
        */  
   （3）保存修改即可，当你再次新建PHP文件时，就发现“选择模板”栏中，已经有你自定义的myPHP文件模板啦。  

另，使用自己的自定义模板，不但可以自定义文件头注释，还可以自定义自己的代码块，或者植入自己喜欢的编码风格。除此之外，其它新建文件，如css,js都可以这样来自定义自己的模板。不知道还有没有其它方式自定义模板，我以为在HBuilder的选项设置里面会有，不过没找到，大家还有其它方法吗？

问题：使用夜神模拟器，使用5 Audio模块出现播放出错。代码使用官方demo
使用模拟器：夜神模拟器5.0.0
出现错误：code -99 或 status oX800000000...
原因：夜神模拟器自身不支持原因。

mui.openWindow兼容web&plus环境下的页面传参

背景介绍

• 刚刚好要写个微信公众号和html5+兼容的项目
• 发现总是用localStorage传参不是事啊
• 太不优雅了
• 想了想还是想办法兼容下吧

兼容原理

• 调用mui.openWindow前先判断相关环境,执行相关兼容方法

使用场景

• 需要兼容网页&html5+的项目
• 项目需要引入mui.js
• 打开页面/webview用的是mui.openWindow

使用方法

引入mui.openWindow.js文件,正常写传参代码

mui.openWindow({  
    url: 'target.html',  
    id: 'target',  
    extras: {name:'mui'}  
});  

接收参数页面

// 同步调用  
if (mui.os.plus) {  
    mui.plusReady(function(){  
        var extras = mui.getExtras();  
        console.log(extras);  
    });  
}else{  
    var extras = mui.getExtras();  
    console.log(extras);  
}  
// 异步调用  
mui.getExtras(function(extras){  
    console.log(extras);  
});  

上源码

• github (觉得ok的记得给我点个星星啊)

• 点我在线预览 (记得给我点个星星啊)

今天最微信分享又遇到了```javascript
分享到"微信"失败: -100 - [Share微信分享:-6]

1. 这个问题根本原因是你微信开发平台上的签名与你的应用签名不一致。顺便一提，微信开放平台上的签名是应用签名的keystore文件的MD5值。MD5值是xx:xx:xx:xx:xx:xx:xx这种格式的秘钥，你复制到微信开发平台上就应该全部转换为小写以及去掉冒号，如f221hghf2h3jhf3k1j这样的一串字符。  
2. 更简单地，可以用[签名检测工具](https://res.wx.qq.com/open/zh_CN/htmledition/res/dev/download/sdk/Gen_Signature_Android2.apk)工具检查一下app的签名，用法就是下载该工具到手机上，打开输入包名即可得到一串字符，不出意外跟上面的方法得出字符串是一样的。  
3. 如果你后面改回来，确认签名已经一致了，但是依旧报这个错误，那么无疑就是微信缓存问题，因为微信记录了app分享的值，删掉微信，重装微信就OK了。  
   以上方法由广大DCloud用户摸索出来，我负责总结，如果在这个问题上你还有其他的情况产生，欢迎评论留言。  
   参考链接：[分享错误码](http://ask.dcloud.net.cn/article/287)以及该文章下面的评论。欢迎点赞。  

//获取TitleNView
var titleView = plus.webview.currentWebview().getTitleNView();

//有两种方法可以在原生的TitleNView画图标
//方法1.用绘制的方式，绘制的方式又有两种
var tags = [
{//用图片做图标
id:'img',
tag:'img',//
src:'images/qq.png',//
position:{
top: "10px",
left: "10px",
width: "24px",
height: "24px"
}
},
{//用字体图标
id:'font',
tag:'font',//
text:'\ue101',//按钮的文本是使用unicode字符的，参考http://ask.dcloud.net.cn/article/12610
position:{
top: "10px",
left: "40px",
width: "24px",
height: "24px"
},
textStyles: {
fontSrc:'fonts/mui.ttf', //
align:'center',
size:'24px'
}
}
]；
//1.1直接绘制
titleView.draw(tags);
//1.2通过setStyle绘制
plus.webview.currentWebview().setStyle({
titleNView:{
'backgroundcolor': '#f7f7f7',
'titletext': 'iflower',
'titlecolor': '#000000',
tags:tags
}
});

//方法2.在TitleNView上加按钮
plus.webview.currentWebview().setStyle({
titleNView:{
'backgroundcolor': '#f7f7f7',
'titletext': 'iflower',
'titlecolor': '#000000',
buttons:[{
text:'\ue502',
fontSrc:'fonts/mui.ttf',
float:'right', //按钮不像绘制的方法，是不能用position绝对定位的，只能左右浮动
onclick:clickButton //按钮有个好处可以直接绑定事件，如果没有事件，跟绘制没有差别了。
}]
}
});
//buttons的属性请参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewCustomButtonStyles
// 点击自定义按钮回调函数
function clickButton(){
plus.nativeUI.alert('clicked!');
}

wap2app支持提示信息的国际化，如下是配置示例（需要使用HBuilder alpha版本）：

{  
    "global": {//global为全局配置，与pages数组中webview对象呈继承关系  
        "webviewParameter": {},  
        "easyConfig": {},  
        "i18n": {//国际化配置  
            "defaultLocale": "zh_CN",//默认语言，内置为中文  
            "en_US": {//英语  
                ...  
            },  
            "zh_CN":{//简体中文，wap2app内置语言，默认可以不配置  
                ...  
            }  
        }  
    },  
    "pages": [ //具体页面配置  
        ...  
    ]  
}

wap2app通过手机操作系统设置的系统语言，切换显示语言，切换逻辑如下：

• 当前操作系统设置的系统语言在sitemap.json中有配置，则使用对应配置；
• 否则，使用defaultLocale属性配置的默认语言，defaultLocale默认为简体中文。

举例，开发者配置了英语、未配置日语，且配置defaultLocale为en_US，则日本用户的提示信息会显示为英语，中国用户的提示信息会显示为内置的简体中文。

wap2app目前支持如下提示信息的语言配置：

• 弱网环境提示
• 应用退出toast提示

弱网环境提示

wap2app会自动判断当前网络环境，发现网络异常时，会自动弹出弱网警告信息，如下：

我们增加如下配置：

{  
    "global": {//global为全局配置，与pages数组中webview对象呈继承关系  
        "webviewParameter": {},  
        "easyConfig": {},  
        "i18n": {//国际化配置  
            "defaultLocale": "en_US",//默认语言  
            "en_US": {//英语配置  
                "errNetwork": {//弱网提醒confirm框  
                    "title": "Tips",  
                    "message": "weak network",  
                    "btnQuit": "quit",  
                    "btnRetry": "retry",  
                    "btnSetting": "setting"  
                }  
            }  
        }  
    },  
    "pages": [ //具体页面配置  
        ...  
    ]  
}

应用退出toast提示

wap2app退出时，默认会弹出toast消息框，提示用户“再按一次返回键退出”，该提示语的多语言配置如下：

{  
    "global": {//global为全局配置，与pages数组中webview对象呈继承关系  
        "webviewParameter": {},  
        "easyConfig": {},  
        "i18n": {//国际化配置  
            "defaultLocale": "en_US",//默认语言  
            "en_US": {//英语配置  
                "quit": {//首页退出提醒  
                    "toast": {  
                        "message": "click back button one more time"  
                    }  
                }  
            }  
        }  
    },  
    "pages": [ //具体页面配置  
        ...  
    ]  
}