尽可能多且准确地采集用户意见，对于产品改进至关重要；常见的用户反馈入口有两种：

• 主动弹框提醒：用户需要中断当前操作，手动关闭弹框，体验不好
• 深藏设置菜单：用户一般很少看设置界面，很少看到问题反馈入口

如何高频提醒但又不打扰用户业务操作呢？我们提供了一种在应用退出的toast信息中，增加"反馈意见"的入口，效果图如下：

实现如上效果图，思路比较简单：

• 重写首页的mui.back，用户按下back键时校验是否存在退出的toast；若存在toast，则直接退出应用；否则显示toast信息；
• toast信息中传入HTML代码，增加一个“反馈意见”的链接
• 点击“反馈意见”链接，打开问题反馈页面

备注：plus环境下使用div模式的toast，需保证mui版本在v3.5.0以上；

根据如上思路，我们可以写出如下框架代码：

/**  
 * 打开问题反馈页面  
 */  
 window.__openFeed = function() {  
     //TODO 实现打开问题反馈页面逻辑  
 }  

var _toast = false;  
/**  
 * 重写mui.back，用户退出时提示反馈使用体验  
 */  
mui.back = function() {  
    if(!_toast || !_toast.isVisible()) {  
        _toast = mui.toast('再按一次返回键退出<br>点此可&nbsp;<span style="border-bottom:1px solid #fff" onclick="__openFeed();">反馈意见</span>', {  
            duration: 'long',  
            type: 'div'  
        });  
    } else {  
        plus.runtime.quit();  
    }  
}

接下来的工作就是实现打开问题反馈页面的window.__openFeed方法，这里有两种实现思路：

• 打开本地问题反馈页面
• 打开云端问题反馈页面

打开本地问题反馈页面

mui很早就发布了问题反馈的页面模板，在HBuilder中新建HTML页面时选择"mui问题反馈"模板组即可，如下图所示：

然后填充如上代码中的window.__openFeed方法，如下：

//打开本地问题反馈页面  
window.__openFeed = function() {  
    plus.nativeUI.showWaiting();  
    //feedback.html路径根据实际工程代码调整  
    var feedbackWebview = plus.webview.create("feedback.html", "__W2A_FEEDBACK");  
    feedbackWebview.addEventListener('titleUpdate', function() {  
        plus.nativeUI.closeWaiting();  
        feedbackWebview.show('slide-in-right', 300);  
    });  
}

该模式的优缺点如下：

• 优点：支持自定义，可随意修改样式、快捷输入内容等
• 缺点：增加应用资源包大小

打开云端问题反馈页面(流应用下推荐)

DCloud同时提供了云端问题反馈页面，开发者无需在项目中集成feedback页面模板资源，直接打开在线反馈地址，同样可以完成问题反馈；这种模式的实现代码如下：

/*****开发者需修改的部分   开始*****/  
var _appinfo = {  
    app_name: "", //应用名称  
    about: "" //关于页面路径，注意需要_www前缀  
}  
/*****开发者需修改的部分   结束*****/  

/**  
 * 打开在线问题反馈页面  
 */  
 window.__openFeed = function() {  
    plus.nativeUI.showWaiting();  
    var _p = plus.os.name === 'Android' ? 'a' : plus.os.name === 'iOS' ? 'i' : '';  
    //TODO：这里使用的是FeedBack云地址，开发者也可以替换为本地页面地址  
    var url = 'https://service.dcloud.net.cn/feedback?p=' + _p;  
    url += "&plus_version=" + plus.runtime.innerVersion;  
    url += "&vendor=" + plus.device.vendor;  
    url += "&md=" + plus.device.model;  
    _appinfo.app_name && (url += "&app_name=" + encodeURIComponent(_appinfo.app_name));  
    _appinfo.about && (url += "&about=" + _appinfo.about);  

    var feedbackWebview = plus.webview.create(url, "__W2A_FEEDBACK");  
    feedbackWebview.addEventListener('titleUpdate', function() {  
        plus.nativeUI.closeWaiting();  
        feedbackWebview.show('slide-in-right', 300);  
    });  
}

_appinfo中的字段均为选填项：

• app_name若填写，以这里的app_name为准；若未填写，则自动读取manifest.json中的name节点；
• about为关于页面地址，若填写，则可从云端“问题反馈”页面，跳转到本地的关于页面；

该模式的优缺点如下：

• 优点：在线打开，减少应用资源包大小，提高发行效率
• 缺点：可定制性较弱

备注：云端问题反馈页面对于5+ App和流应用均适用。

云端查看数据

不管以何种模式打开问题反馈页面，云端查看数据的方式都是一致的，都是登录开发者中心，选择对应应用查看，具体参考问题反馈云服务已上线

MUI的picker选择器中item条目文字过长溢出，导致内容无法全部显示。

经过修改mui.picker.js源码，实现选中item后弹出toast显示全部文字，修改方便无bug，分享~~

    Picker.prototype.endScroll = function() {  
        var self = this;  
        if (self.list.angle < self.beginAngle) {  
            self.list.style.webkitTransition = "150ms ease-out";  
            self.setAngle(self.beginAngle);  
        } else if (self.list.angle > self.endAngle) {  
            self.list.style.webkitTransition = "150ms ease-out";  
            self.setAngle(self.endAngle);  
        } else {  
            var index = parseInt((self.list.angle / self.itemAngle).toFixed(0));  
            self.list.style.webkitTransition = "100ms ease-out";  
            self.setAngle(self.itemAngle * index);  
        }  
        self.triggerChange();  

        // -------------选择完item后，弹出toast显示选中项文本  
        self.elementItems.forEach(function(item) {  
            if(item.classList.contains('highlight'))  
                plus.nativeUI.toast(item.innerText, {verticalAlign:"center"});  
        });  
        // -------------------------------------------------  
    };

在mui.picker.js源码的 Picker.prototype.endScroll 方法中插入一段foreach循环判断当前item状态

效果：

目前有同学在最新版的夜神模拟器上调试app时不打印控制台日志了，经查应该是夜神模拟器升级到最新版本导致的这个问题。
现在有部分同学通过下面2种方式解决了问题，有同样的问题的同学可以试试。

1. 使用老版本夜神模拟器，经其他同学测试3.8.0.2是没有问题的。夜神模拟器历史版本下载地址
2. 在夜神模拟器的配置界面如下图所示，使用平板模式可正常输出日志，手机模式不行。
   
   
3. 更换其他模拟器，比如海马玩.

如有同学有其他解决方案，欢迎在评论区补充！

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布！

课程总计 4个半小时，包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识！
收费50元，有经济困难的在校学生可以联系客服 1265928288 进行优惠（不是勿扰）。
购买方式
腾讯课堂：
https://ke.qq.com/course/194834#tuin=4f8da6

资料包包含：源码、素材、文字资料，购买后即可下载！ 观看时候选择超清模式，代码清晰可见！

交流qq群
1群 335126794(已满), 2群 340610532

hcoder 一直致力于奉献高质量 教程，官网上 mui h5+ 等免费教程播放量已经达到5万，收点费用为了做的更好，希望大家理解。
免费教程地址
http://www.hcoder.net/course

各位编程的同学，花钱看了好多慕课网的视频，有需要的可以找我啊，加koukou吧 3325942711。

var oH=0;  
            mui.plusReady(function() {  
                initNativeObjects();  
                showSoftInput();                  
                if(plus.os.name=="Android"){  

                }else{  
                    var iosH=plus.screen.resolutionWidth*plus.screen.scale;  
                    if(iosH==640){ //iphone5  
                        oH=screen.height-271;  
                    }  
                    if(iosH==750){ //iphone6  
                        oH=screen.height-258;  
                    }  
                    if(iosH==1080){ //iphone6 plus  
                        oH=screen.height-226;  
                    }  
                }                 

            });  
            function goFooter(oh){  
                $('.say-menu').animate({'bottom':oh},200);  
                $('.text-sum').animate({'bottom':oh+50},200);  
            }  
            $(function(){  
                /*var x=20,oH=$(window).height(); alert(oH);  
                $(window).on('resize',function(){  
                    var oH2=$(window).height();alert(oH2);  
                });*/  
                $("textarea").on('blur',function(){  
                    $('.say-menu').animate({'bottom':0},200);  
                    $('.text-sum').animate({'bottom':50},200);  
                });  
                $("textarea").on('focus',function(){  
                    $('.say-menu').animate({'bottom':oH},200);  
                    $('.text-sum').animate({'bottom':oH+50},200);  
                });  
            });  
            var nativeWebview, imm, InputMethodManager;  
            var initNativeObjects = function() {  
                if (mui.os.android) {  
                    var main = plus.android.runtimeMainActivity();  
                    var Context = plus.android.importClass("android.content.Context");  
                    InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");  
                    imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);  
                } else {  
                    nativeWebview = plus.webview.currentWebview().nativeInstanceObject();  
                }  
            };  
            var showSoftInput = function() {  
                var nativeWebview = plus.webview.currentWebview().nativeInstanceObject();  
                if (mui.os.android) {  
                    //强制当前webview获得焦点  
                    plus.android.importClass(nativeWebview);  
                    nativeWebview.requestFocus();  
                    imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);  
                } else {  
                    nativeWebview.plusCallMethod({  
                        "setKeyboardDisplayRequiresUserAction": false  
                    });  
                }  
                setTimeout(function() {  
                   //此处可写具体逻辑设置获取焦点的input  
                   var inputElem = document.querySelector('textarea');  
                    inputElem.focus();   
                    goFooter(oH);  
                }, 200);  
            };

Notice

这个老版本的已经不再维护了，后续维护新版下拉刷新

地址:

https://github.com/minirefresh/minirefresh

特点：

• 零依赖（原生JS实现，不依赖于任何库）

• 多平台支持。一套代码，多端运行，支持Android，iOS，主流浏览器

• 丰富的主题，官方提供多种主题（包括默认，applet-仿小程序，drawer3d-3d抽屉效果，taobao-仿淘宝等）

• 高性能。动画采用css3+硬件加速，在主流手机上流畅运行

• 良好的兼容性。支持和各种Scroll的嵌套（包括mui-scroll,IScroll,Swipe等），支持Vue环境下的使用

• 易拓展，三层架构，专门抽取UI层面，方便实现各种的主题，实现一套主题非常方便，而且几乎可以实现任何的效果

• 优雅的API和源码，API设计科学，简单，源码严谨，所有源码通过ESlint检测

• 完善的文档与示例，提供完善的showcase，以及文档

或者查看

【minirefresh】优雅的H5下拉刷新。零依赖，高性能，多主题，易拓展

说明
下拉刷新几乎是移动H5端必用的插件，鄙人第一个封装的h5插件也是下拉刷新，近来正好在整理下拉刷新相关知识，因此重新弄了一个下拉刷新库，统一了API，抽取了基类，提供了各式各样的皮肤，以及支持很方便的进行自定义皮肤的定制。
里面既有直接基于mui下拉刷新封装的皮肤，也有基于mui的IScroll进行拓展的皮肤，也有另起炉灶，重新基于IScroll5进行封装的皮肤，另外还提供方便的拓展，各式各样。

• 效果1
  
• 效果2
  
• 效果3
  
• 效果4
  
• 效果5
  
• 效果6
  

地址
源码: https://github.com/dailc/pulltorefresh-h5-iscroll

PS:
整理这套下拉刷新库费了不少时间(借鉴了不少mui源码)，也感觉到目前H5中还是别用太花哨的动画好，因此决定后续的皮肤更新都是尽量简单的状态切换(会尽量提供多场景下的UI效果)，而不再用那些花哨的动画了。
这个库将API风格统一后，用起来果然舒服多了。。。

另外

如果对大家有帮助，记得star噢！

TODO: 相关博文，后续补上。

H5下拉刷新,多种皮肤，便于拓展！

视频教程汇总

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址：
http://www.hcoder.net/course

以往，为了解决列表流畅滚动等问题，采用了双webview模式等方案。HBuilder8.0.1版新增原生导航栏控件，并推荐优先使用，并建议非必要不使用双webview模式的webview title，而改用原生title。我阅读官网文档并实际做了测试，来代替原先的双webview方案，总结出来的几点经验分享一下，免得有像我一样的菜鸟困惑。

1、要使用openWindowWithTitle，第一步请先修改manifest.json文件，特别要提醒的是，要在代码视图中修改，图形界面是没有的，这一点，官网文档并未提及，只说要修改manifest.json文件。
plus->launchwebview->navigationbar
"plus": {
"launchwebview": {
"navigationbar": {
"backgroundcolor": "#f7f7f7",
"titletext": "首页",
"titlecolor": "#ff461f"
}
}
}

2、原先使用双webview方案的时候，打开新页面并没有等待的菊花图显示，实际感觉打开新页面的速度并不慢。
mui的demo中使用的openWindowWithTitle打开新页面总是显示等待的菊花图，感觉要花更多的时间来打开新页面，让我这个强迫症十分不爽。经过仔细查阅文档，加用waiting参数可以不再显示等待的菊花图。例：
mui.openWindowWithTitle({
url:href,
id:href,
styles:webview_style,
show:{
event:"loaded",
extras:extras
},
waiting:{
autoShow: false
}
},{
title:{
text:fire_data.headertitle
},
back:{
image:{ ........................................... 后面的代码略
如果有人觉得显示等待的菊花图会更人性化，此节可以忽略。

3、mui的demo里 不管是老版本，还是新增base64编码的image数据，右上角“关于”的那个图标，点击后打开about.html文件，
这个图标中间的 "i" 符号过于呆板，建议使用plus的demo中提供的image数据，“i” 为斜体展示
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAADkUlEQVR4nO2b63HTQBRGTxj+EyrAVBAzWwBKBYQO0kHcAU4HTgehApwKUArYwa4ApwJwBeGHNuAY2URaSfczuWcmk3jH+xid7N596ej+/h5HhxfWDXAe40LEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEeGndgKbEGEdAkX7GwMmOry6BBVAC8xDCz/5bl8/RodztjTEWwAT40LKIG2AWQii7alMfyAuJMY6BGfC+oyJvgamqGGkhMcYZcNFT8VchhElPZbdGUkiM8Zhq7N8VH7piCRRK8UVulpWGqJL+ZZDqWKQ6JZDqIalnLIA3GcUs0+8mQmV6iloPKWkv4zPwOoQwDiGMgVNg/cS8J6luc2R6SGYAvw0hFDVlzmk2TTYP9BI9JK0xcmZTsx3pq4blXFjHEwkhwLSncs9a5NkldxDMh6zUO75mFvMoKKfJwTXtV/WnVgtHhb2sLsbsE2AVY1ykz7mr+glGQd60h6T/5B9mDdjP2xDCauhKrWNImzF+KAqLSq2FFMb176OwqNRaSFdTzDvgkmqYOaJaFOZiMv21Duq5+1VrYBJCuN5MDCGUMcbMogfZS/sL6x6SwyUw2pYBvycLB8khCllTrROmwPGOh18M2qIOOUQh58AorTm+Uz/WF0M2qEusY0gbvmx+2LGiLgZpSQ8cYg/Z5HY7IQ1hJgG5C6yFLP/9lb0satKKzDIfyG1bK6yF1D3QJpQ1aV2t/nPb1gprIWUP+YvMMveV3TuHLGS5fQaebjXmnMdvMu+onEaYCkm7qTcts5c1aaONv6+oztnbcGN14cG6h0D7E7qyJm1F2tOiOoVsux9ldmpofmIIEGMsaX6otPO8Ip2Lz2k3fNVemBgKlYXhBPjWJEOdjLQGmQCfMtoyzcibjUQPgVbXgD6GEOYp7zHVlsqEvKBufg1IRghA2p966ip7zZ+1Qhc345fpgp0pCkF9k4Knr5BfUYnoQsYdIvtfUkLSVPOc6gENxRI4U7jXC2JD1gPP+XUESSEPPMcXdqSGrG3SAzulZps9g1vgnaIMEO8hm/hLn6Kk+HJGs9eiS4tbiG04OCH/O9Ix5DniQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAxfgHyQw1G9FJgWwAAAABJRU5ErkJggg=="

都说PHP是世界上最好的语言，
我觉得文本编辑器里vim就和PHP的地位一样，
所以，要是HBuilder里能有个vim插件就更好了，鼠标估计用的也更少了

1.微信支付其实不是大家想象的那么难。现在来分享一下心得。

2. 前提条件：
   a、先要有微信开放平台的账号，并创建应用，审核通过。并且获取微信支付能力。
   b、创建应用在填写Android的签名的时候要去掉冒号，并且小写（备注： 签名是用的md5 ）
   c、如何获取签名？ 这个很简单，自行百度。
   d、微信支付，一定要打包为apk 格式的文件，并且需要用到自己的证书，不能用公用证书（创建证书？百度）
   e、打包好的apk或者是ipa 文件 进行安装在手机测试

准备好以上步骤以后就可以开放微信支付了

1.先查看hbuilder 官方从服务返回的数据格式，自己服务器安装此格式拼接，顺序不能乱。  
[http://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/](http://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/)  

2.获取服务器数据代码  java端  

 请看附件-java端  

不能实现联系： 1791480830

JavaScript 快速提高视频教程已经发布！（免费教程）
针对js基础不够好的同学，深度剖析js运行原理、变量作用域、函数、面向对象、闭包等底层知识，快速提升JavaScript技能！
本教程主要目的是提供大家的js学习基础，提供学习思路。
另有：mui、h5+、基于h5+ app开发实战、微信小程序等教程。视频教程观看地址

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址：
http://www.hcoder.net/course