今天上司给了个任务，在app注册的时候，拿到manifest.json里配置的umeng的channel，然后跟着登录的接口一块传给后台，自己的服务器上再做一次统计

问题来了，怎么拿呢？

在dcloud问答里搜了一下，就找到一个 plus.push.getClientInfo() 这个是拿到推送的信息的，然后照葫芦画瓢把push换成了statistic，但它没有getClientInfo()方法

然后找到文档 http://www.html5plus.org/doc/zh_cn/statistic.html 确实没有 getClientInfo() 方法

最后问了官方大大 @五块钱的果汁 ，给了个办法

mui.getJSON('http://localhost:13131/_www/manifest.json', function (e) {});

这样直接在回调里取就可以了 e.plus.distribute.plugins.statics.umeng.channelid_android 完美

感谢官方大大的帮助，在这分享给大家

使用requirejs后，下拉可能会报错如下：
Uncaught (in promise) TypeError: mui(...).pullRefresh(...).endPulldownToRefresh is not a function

解决方案：
修改mui.js v3.7.2 5467行

//override h5 pullRefresh  
        $.fn.pullRefresh_native = function(options) {  
            var self;  
            if (this.length === 0) {  
                self = document.createElement('div');  
                self.className = 'mui-content';  
                document.body.appendChild(self);  
            } else {  
                self = this[0];  
                //解决方案：使用requirejs时，这里的this可能有缓存，需要重新获取  
                if (typeof define === 'function' && define.amd) {  
                    self = document.getElementById(self.getAttribute("id"));  
                }  
            }  
            。。。

改完后不报错了，请官方确认此问题并及时修改

热门话题

iOS 权限提示语

iOS 应用权限提示语不符合规范，导致无法上架 AppStore 的问题，依旧困扰了许多小伙伴。相关配置方法，请参考 iOS云打包修改权限提示语。

举例

依旧以出现频率最高的定位权限为例，简要说明下这个配置的填写。就拿外卖应用来说，获取定位信息是为了向用户展示附近的美食信息。因此，提示语应当是类似“获取定位信息用于为用户提供附近的美食信息”这样的，而不是“获取用户位置信息”这样的简（fei）语（hua）。

广告联盟

DCloud 上线了广告联盟平台，意在为更多开发者提供流量变现的渠道。详细的公告信息，看这里。

更新

本周广告平台的更新主要有两项：

• 云端打包，支持开屏广告的配置。
• Android 离线打包的 SDK 更新，具备相关广告能力。http://ask.dcloud.net.cn/article/13141
• iOS 离线打包的 SDK 更新，具备广告能力。http://ask.dcloud.net.cn/article/13147

广告问题

上架被拒

目前存在的问题，主要是开通广告后，上架 AppStore 以及其它应用市场时，会被驳回。http://ask.dcloud.net.cn/question/53077

临时的解决办法是，开发者提供应用 manifest.json 中分配的 appid，先行关闭广告。后续在广告管理平台上，会尽快更新此功能的开关控制。

莫名出现广告

还有一位小伙伴，在关闭了广告功能后依旧在应用内出现了广告。http://ask.dcloud.net.cn/question/53065

根据反馈信息，出现的广告并不是 DCloud 广告平台的内容，极大可能是运营商的流量被劫持插入的。

输入框导致应用崩溃

部分 vivo 和华为手机，输入框输入内容时，应用崩溃。http://ask.dcloud.net.cn/question/53121
该问题之前修复了，但是只更新了 Alpha 版。现在，已经更新到正式版了。升级 HBuilder，卸载原有的 HBuilder 手机基座即可测试。

突发问题

iOS 支付模块失效

本周四，使用 HBuilder Alpha 版打包的 iOS 应用，出现了“打包时未添加 Payment 模块”的问题。http://ask.dcloud.net.cn/question/53083

该问题已于周四晚上修复，重新打包应用即可。

其它问题

可配置权限变少

许多小伙伴发现，manifest.josn 文件的模块权限配置中少了许多权限。http://ask.dcloud.net.cn/question/53093

这是因为一些常用的必须的权限，会在云打包时添加，因此不要惊慌这显示的是正确的。

wap2app 引导页

想要给自己的 wap2app 应用添加引导页的小伙伴，请参考wap2app引导页的简单制作。

原生APP通过webview加载mui开发的功能

额，这位小伙伴应该是没有表述清楚自己的需求，同时也没有理清楚 DCloud 各产品的定位以及关系。http://ask.dcloud.net.cn/question/53100

正如问题中 @回梦無痕 的回复那样，MUI 是个 UI 框架，只要是浏览器环境都可以使用（当然，涉及到 5+API 的部分依赖 5+Runtime）。如果想要在原生应用中使用 5+Runtime 的扩展 API，需要将 5+SDK 集成到自己的原生应用中。

mui.toast()和plus.nativeUI.toast(）有什么区别啊

http://ask.dcloud.net.cn/question/53081

MUI 的文档中，有这样一段描述：mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框。

“原生”就是指的调用 5+API 使用系统的对话框，“h5”就是用 div 模拟的对话框。因为不同的系统或 ROM，系统的对话框会存在差异。如果希望统一样式的话，可以在调用 mui.toast() 时，传入 type: 'div' 来指定使用 h5 模式的对话框。

不只是 mui.toast() 如此，mui 的 dialog 部分，都是如此。如果希望修改样式，可以在浏览器中预览，调整相关节点的 css 即可。

最后

本周的报告就是这些，希望能对大家有所帮助。同时，也希望更多的小伙伴在社区分享自己的经验心得，交流学习。

祝大家周末愉快。

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------
《仿腾讯新闻客户端》- MUI+VUE.JS H5+ APP 实战教程
http://www.hcoder.net/course/info_240.html

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

集成步骤

一 引用库文件

将"SDK\libs"目录下lib.5plus.base-release.aar文件拷贝至自己项目的libs对应目录。

二 配置gradle文件

build.gradle文件中添加如下节点到根目录（即与dependencies节点同级）

repositories {  
    flatDir {  
        dirs 'libs' //自己项目的libs对应目录  
    }  
}

然后在dependencies节点中添加aar文件依赖如下：

compile(name:'lib.5plus.base-release', ext:'aar')

之后执行Rebuild Project命令。

三 在assets文件夹中配置5+应用资源

将"SDK\assets"目录下的data文件夹拷贝到自己项目的assets目录下，并新建名为“apps”的文件夹，然后在data文件夹中新建名为5+App对应appid（如"HelloH5"）的文件夹，最后在已创建的appid（如"HelloH5"）的文件夹中，创建名为www的文件夹并将5+应用资源拷贝至该目录。如下图所示：

<msc version="1.9.9.42094">  
    <apps>  
        <app appid="HelloH5" appver=""/>  
    </apps>  
</msc>

遇到这个问题时候，通过排查发现；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的选项设置里面会有，不过没找到，大家还有其它方法吗？