JSON转换工具
JSON-handle.crx——支持多个浏览器

翻墙扩展
翻墙0.8.1_0.crx——免费的

原型查看扩展
Axure RP.crx

apiz扩展
apiano2.0.1.crx——查看API

以上是本人几个常用的扩展，大家有更好更实用的，欢迎留言

问题：
界面输入框接收焦点时，虚拟键盘出现挡住输入框。
环境：
1、全屏显示，不显示状态栏
2、Android系统
3、在云打包后没有出现问题，但是离线打包后就出现这个问题。

既然云打包没有问题，而离线打包后出现了这个问题，那么应该是我离线打包的设置有问题，我打包后其它地方没有问题，这个坑咋都过不去！
求高手给指导。

实现的功能：
1.用户中心：动态生成菜单；判断是否登录，如果登录：显示登录用户资料并显示退出按钮，如果没有登录：显示登录按钮；
2.用户登录页面：输入三位数以上的用户名可以模拟登录，实际项目需要调用api进行登录；
3.用户注册页面：
第一步：输入11位手机号码；
第二步：验证手机号和短信验证码；
第三步：输入用户注册资料；
第四步：注册成功。

可以在APP预览demo
点击下载APP

写在前面

• 页面需要设置如下css样式,
• 页面里实在没办法设置成如下所述样式的,
• 我还没找到办法实现监听键盘弹出/收起

html,body{width:100%;height:100%;overflow:hidden;}

可解决的问题:

1.ios输入文字时header/input不听话

1. 弹出/收起键盘时要想要做一些事情

2. 等问题

   • 附:mui的im-chat的demo,
   • 可尝试用ios手机访问,
   • 体验下我想描述的问题

心路历程

(唔...应该可以跳过)

1.这周六、日因为年前快放假了导致加班

2.刚刚好要写个聊天室的UI

3.聊天室顶部有个header.mui-bar.mui-bar-nav(由于一些原因,用不了父页面的header)

4.底部有个类似手机QQ的输入框
(但是比较简单,只有个输入框和发送按钮)

5.然后重点来了,主角上场了——坑爹的ios

6.所以,输入文字的时候header和底部的textarea开始不听话了

本人又比较菜,大佬们说的各种什么解决方案,
不知道是不是我姿势不对,好像都不是很有效,
具体什么方法,都在公司电脑的浏览器记录里,
就不去翻了,css布局倒是学到了一些,
js方面的,试了的不管用,要不就是很要原生插件配合什么的,
反正最终效果挺不满意的.

进入正题

开发调试信息

• 安卓:一加三
• 苹果:6s
• IDE:hb8.8.1&hb8.8.5

dom结构

header.mui-bar.mui-bar-nav
div.mui-content
footer.mui-input-row>span.mui-btn+textarea

主要样式

/*总体布局*/  
html,body,.mui-content{width:100%;height:100%;overflow:hidden;}  
/*顶部header*/  
header.mui-bar.mui-bar-nav{width: 100%;position: absolute;top: 0px;}  
/*变化动画,可删除*/  
.mui-focusin header.mui-bar.mui-bar-nav{transition: top 0.5s;}  
/*聊天内容*/  
header.mui-bar.mui-bar-nav~.mui-content{position: absolute;top: 0px;bottom: 50px;padding: 44px 0px 50px;overflow: auto;}  
/*底部*/  
footer.mui-input-row{width: 100%;height: 50px;position: absolute;bottom: 0px;padding: 5px 10px;background-color: #EFEFF4;border-top: 1px solid #DEDEDE;}  
/*发送按钮*/  
footer.mui-input-row>span.mui-btn{padding: 10px 0px;margin: 1.5px 0px;}  
/*输入框*/  
footer.mui-input-row>.mui-btn~textarea{width: 82.5%;height: 40px;line-height: 30px;margin-right: 2.5%;padding: 5px 0px;}

解决过程

• 发现ios弹出键盘时,是用键盘将webview"顶起来"弹出键盘的
• (ios在h5+中的webview在弹出键盘时似乎不会触发scroll事件)
• (需要设置softinputMode:adjustResize以触发键盘弹出/收起事件)
• 安卓就是挤压webview咯
• 上面两点,想必各位dalao比我了解
• 所以,我何不监听对应的事件呢

好了,上干货

// 这些demo代码是结合解决"ios的浏览器端输入文字时header/input可能不听话"问题来写的  
// 有其他需求可结合具体逻辑修改  
(function($,doc,win){  
    $.qs = function(selector,context){  
        return $.qsa(selector,context)[0];  
    }  
    var body = doc.body,  
        header = $.qs('header',body),  
        header_style = header.style,  
        content = $.qs('.mui-content',body),  
        content_style = content.style,  
        footer = $.qs('footer',body),  
        text_input = $.qs('textarea',footer),  
        init_width = body.offsetWidth,  
        init_height = body.offsetHeight,  
        is_web_ios = $.os.ios&&!$.os.plus&&!$.os.android,  
        tap_y = 0;  
    // 阻止window滚动  
    function block_window_scroll(e){  
        e.preventDefault();  
        e.stopPropagation();  
    }  
    // 阻止在header/footer上触发iso网页上的滚动/弹性拖拽  
    // 如果在获得焦点时通过header/footer触发了滚动/弹性拖拽,  
    // 会有不想看到的情况  
    header.addEventListener($.EVENT_MOVE,block_window_scroll);  
    footer.addEventListener($.EVENT_MOVE,block_window_scroll);  
    //阻止已经滚动了顶部/底部时,继续拖拽  
    content.addEventListener($.EVENT_START,function(e){  
        tap_y = e.touches[0].screenY;  
    });  
    content.addEventListener($.EVENT_MOVE,function(e){  
        ((!(this.scrollTop)&&(e.touches[0].screenY - tap_y)>0)||((this.scrollTop == (this.scrollHeight-  this.offsetHeight))&&(e.touches[0].screenY - tap_y)<0))&&block_window_scroll(e);  
    });  
    // 键盘弹出事件  
    is_web_ios&&win.addEventListener('keyboardShow',function(e){  
        var keyboard_height = e.detail.keyboardHeight;  
        header_style.top = keyboard_height + 'px';  
        content_style.paddingTop = keyboard_height + 44 + 'px';  
    });  
    // 键盘关闭事件  
    is_web_ios&&win.addEventListener('keyboardHide',function(e){  
        header.removeAttribute('style');  
        content.removeAttribute('style');  
    });  
    // 如果是ios,在浏览器第一次弹出键盘时  
    // 我的6s(ios 11.2.1)footer会错位(浏览器会,html5+的webview不会)  
    // 需要在第二次打开时才不会错位  
    // (第一次不是指的刷新后的第一次)  
    // (而是访问网页后的第一次,哪怕是刷新了,但不是访问的第一次,就不会出现问题)  
    // 很是奇怪,所以在第一次想要弹出键盘时,先阻止一下,  
    // 让用户以为没点到,用户自然会重点一次  
    is_web_ios&&text_input.addEventListener('focus',(function(){  
        var first_focus = true;  
        return function(){  
            if (first_focus) {  
                this.blur();  
                return !(first_focus = false);  
            }  
        }  
    })());  
    // 键盘弹出/收起实现  
    // ios的webview通过设置softinputMode:'adjustResize',  
    // 表现会和android一样不会有header/footer不受控制的情况  
    $.os.ios&&$.os.plus?null:(is_web_ios?win:body).addEventListener(is_web_ios?'scroll':'resize',(function(){  
        var timer;  
        return is_web_ios?function(){  
            clearTimeout(timer);  
            var scroll_height = win.scrollY;  
            // 实时触发  
            // scroll_height>=0&&$.trigger(win,scroll_height?'keyboardShow':'keyboardHide',{  
            //     keyboardHeight:scroll_height  
            // });  
            // 弹出后&收起后触发  
            timer = setTimeout(scroll_height>=0?function(){  
                $.trigger(win,scroll_height?'keyboardShow':'keyboardHide',{  
                    keyboardHeight:scroll_height  
                });  
            }:$.noop,100);  
        }:function(){  
            clearTimeout(timer);  
            if(body.offsetWidth != init_width){ //横竖屏的resize  
                init_height = body.offsetHeight;  
                init_width = body.offsetWidth;  
                return;  
            }  
            var resize_height = init_height - body.offsetHeight;  
            // 实时触发  
            // $.trigger(win,resize_height?'keyboardShow':'keyboardHide',{  
            //     keyboardHeight:resize_height  
            // });  
            // 弹出后&收起后触发  
            timer = setTimeout(function(){  
                $.trigger(win,resize_height?'keyboardShow':'keyboardHide',{  
                    keyboardHeight:resize_height  
                });  
            },100);  
        }  
    })());  
    $.plusReady(function(){  
        // ios在h5+环境中需要设置softinputMode:'adjustResize'  
        // 通过resize来监听键盘弹出/收起  
        // 但是ios的"第一次"获得焦点时  
        // 键盘高度似乎不准确  
        // 不知道是什么原因  
        // 个人觉得和上面监听focus注释描述的问题有关  
        $.os.ios&&plus.webview.currentWebview().setStyle({  
            softinputMode:'adjustResize'  
        });  
    });  
})(mui,document,window);  

demo代码见附件

谁推荐个苹果手机上好用的录屏软件,我去录个gif上来

> 本帖已集成到: hx产品文档

下载HBuilderX，点菜单帮助-markdown语法说明，会打开一个md文件，里面详细演示了HBuilderX对markdown的强化。
推荐在那里实际体验
总体来说，编写md文件，HBuilderX最快最高效。

以下补充一个笔记技巧：

HBuilderX搭配markdown用于云同步笔记的技巧

1. 云同步工具
   首先推荐一个云同步工具，微软的onedrive。https://skydrive.live.com/
   在dropbox被墙后，onedrive成为最佳选择，免费、稳定、安全、多平台。
   win10平台自带onedrive客户端，其他平台可在上述网址下载安装。（一定要安装客户端，web版也需要翻墙）
   配置onedrive账户后，在本机我的电脑上会出现一个onedrive文件夹，在里面新建一个“note”的文件夹（名字可自定），然后把HBuilderX写的md都存到这个文件夹中。
   每次在HBuilderX中保存md文件后，onedrive会自动同步这个文件到云端。
   使用其他电脑或手持设备后，也会自动看到这个文档。
   onedrive手机端不支持直接查看markdown，可另行安装手机App，iOS上推荐使用mweb，安卓上推荐使用锤子便签。

2. svn、git同步
   本机装好node后，利用watch监听文件变化，发现文件修改可自动提交到svn或git。
   团队共享的待办事项同步可以用这种方式处理。

在DCloud内部，个人文档大多采用方式1，公司协作文档均采用方式2。并行使用。

这套方案适用于pc端编写，手机端查看的场景。这个场景下，HBuilderX+markdown拥有远胜于evernote、OneNote等笔记软件的体验。启动更快捷、编写更高效、阅读更美观。
但如果经常在手机端编写并同步的话，还是云笔记本软件更合适。

总看电视和刷短视频，会让人变傻。
打开HBuilderX，在键盘上敲出凝结思绪的markdown，会让你变聪明。

这次遇到了这样的需求：考试成绩的总分为40分，计算的时候分为5个段，30-40权重为20，20-29权重为15，10-19权重为10，1-9权重为5，依次递减， 0分为0.
分析：每个段在计算的时候递减5。临界值的判断。每次计算的区间为10.
第一步：用Math.floor的方法，当成绩在31-40之间的时候Math.floor的计算结果为0，在21-30之间的时候Math.floor的计算结果为1，在11-20之间的时候Math.floor的计算结果为2，在1-10之间的计算结果为3。方法如下

Math.floor((40 - score) / 10)

第二步：总权重20，每个段减5

20 - (Math.floor((40 - score) /10) * 5);

这样好像“完美”的解决了问题，但还有些临界值遗漏，我们继续。
第三步：当score为30时候，权重应该为20，但根据上面的方法，我们计算的结果为15，因此当遇到score为30、20、10的时候我们需要将权重增加5。方法如下：

20 - （Math.floor((40-score)/10)*5）+ 5;

可也以写成

25 - （Math.floor((40 - score) / 10) * 5);

第三步：解决了临界值，需要根据不同的条件来选择不同的计算方法，当（40 - score）/ 10 为整数时用25 - （Math.floor((40 - score) / 10) 5);来计算，否则用 20 - (Math.floor((40 - score) /10) 5); 来计算。方法如下：
根据正则来判断是否为正整数

/^[0-9]*[1-9][0-9]*$/.test(( 40 -score ) / 10 ) ? 25 - Math.floor((40 - score) / 10 )* 5  :  20 - Math.floor((40 - score) / 10 ) * 5

第四步：好像已经可以满足需求了，但是我们把成绩为0的情况遗漏了，最后一步

score == 0 ？0 ：(/^[0-9]*[1-9][0-9]*$/.test(( 40 -score ) / 10 ) ? 25 - Math.floor((40 - score) / 10 )* 5  :  20 - Math.floor((40 - score) / 10 ) * 5)；

这样就用三元表达式一行代码解决了我们的需求。

var leval = score == 0 ？0 ：(/^[0-9]*[1-9][0-9]*$/.test(( 40 -score ) / 10 ) ? 25 - Math.floor((40 - score) / 10 )* 5  :  20 - Math.floor((40 - score) / 10 ) * 5)；

考试成绩的总分为40分，成绩为30-40权重为20，成绩为20-29权重为15，成绩为10-19权重为10，成绩为1-9权重为5，依次递减， 0分为0.

大神提供了一种更为简单的写法，这种写法比较适合在分段比较少的情况下使用：

score>0?score>9?score>19?score>29?20:15:10:5:0;  
也可以写成  
score>0?(score>9?(score>19?(score>29?20:15):10):5):0;

不足之处请指正！

之前在做微信授权登录的时候，遇到了用户取消:-2的问题，从网上查了一下，也没有找到什么解决方案，最后自己还是把它解决了，和大家分享一下，弄了半天，原来是自己申请错了，我给申请成了网站应用了，使用的网站的appid和appsecret，在打包后安装了就报用户取消-2，还有就是在打包的使用使用自有证书，不要使用公有证书，公有证书是在真机测试的时候才有时候会用

问题场景

wap2app 应用在开发过程中，如果问题比较复杂，通常需要开发者将应用发布成测试流应用，以便工程师跟进调试。
关于流应用：http://ask.dcloud.net.cn/article/406
这里单独将流应用的发布摘出来，方便开发者查看流应用的发布。

发布测试版

• 选中应用
• 菜单 -> 发行 -> 发行流应用 -> 提交测试

发布成功后，会生成相应的二维码。开发 wap2app 应用的开发者，将此二维码补充在问题帖子中，方便工程师跟进。

发布正式版

发布正式版之前，需要先发布测试版。并且，正式版流应用需要进行认证，详细的按照IDE的指引操作即可。

wap2app适配的时候，常碰到的一个场景就是登录，wap站登录成功后，比较差的体验主要有两个：
1、back依然可以看到登录页，效果很差
2、首页如果有登录入口，返回首页，首页依然显示未登录的状态

处理方法是利用页面的onShow方法，打开页面时的同时将不需要的页面关掉。比如登录后进入个人中心，关闭登录页。代码如下：

Page('usercenter', { //用户中心页面扩展  
    /**  
     * 用户中心页面显示时触发  
     */  
    onShow: function() {  
        //获取登录页的webview  
        var loginWebview = plus.webview.getWebviewById("login");  
        if(loginWebview){  
            loginWebview.close("none");//关闭登录页  
        }  

        //如果要关闭好几个页面  
        var webviewsId = ['login','register','pay','other'];  
        for (var i = 0; i < webviewsId.length; i++) {  
            var webview = plus.webview.getWebviewById(webviewsId[i]);  
            if(webview){  
                webview.close("none");//关闭页面  
            }  
        }  

        //如果要刷新首页的状态  
        plus.webview.getLaunchWebview().reload();  
    }  
});

此情形同样适用于支付、注册等流程。比如网页支付可能需要好几步，支付完后back，不应再看到支付流程，这时候就可以在支付
成功页面用onShow方法，来关掉支付流程的页面。

本人mui小白一枚，最近在学习mui的ajax方法，感觉不管是ios还是安卓应用开发跨域的数据调用回写都是重中之重。所以这是必然要好好学习的。
本实例使用了新浪的趣图api接口。
根据“列表到详情最佳实践”仿写。不同的是传递了url地址并使用mui.ajax()采集图片。
这是本人第一次发帖：）请勿喷！

关于scroll大量数据的列表滚动，安卓上达到上300条后，明显滚动很不流畅
官方能否参考 此框架http://ionic-china.com/doc/V1/javascript/collectionRepeat.html
F12看调试， 实际有1000多条数据，但是每次滚动只会渲染当前可见的8条数据，这样节省了很多渲染压力 在安卓上很明显。。
希望官方能否改进`