问题场景

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条数据，这样节省了很多渲染压力 在安卓上很明显。。
希望官方能否改进`

aa

定义：
jQuery创始人是美国john Resig，是优秀的javascript框架；
jQuery是一个轻量级、快速简洁的JavaScript库。

jQuery对象
jQuery产生的对象时jQuery独有的，只能自己调用

书写规则
支持链式操作；
在变量前加“$”符号，（var $variable = jQuery对象）；此规定不是强制要求

二、寻找元素
选择器
基本选择器、层级选择器、属性选择器与css类似
基本筛选器

$('li:first') //第一个元素  
$('li:last') //最后一个元素  

$("tr:even")  //索引为偶数的元素，从0开始  
$("tr:odd")    //索引为奇数的元素，从0开始  

$("tr:eq(1)")  //给定索引值的元素  
$("tr:gt(0)")   //大于给定索引值的元素  
$("tr:lt(2)")   //小于给定索引值的元素  

$(":focus")     //当前获取焦点的元素  
$(":animated")  //正在执行动画效果的元素

内容选择器

$("div:contains('nick')")  //包含nick文本的元素  
$("td:empty")  //不包含子元素或者文本的空元素  
$("div:has(p)") //含有选择器所匹配的元素  
$("td:parent")  //含有子元素或者文本的元素

表单选择器

$(":input")  //匹配所有input，textarea，select，button元素  
$(":text")   //所有的单行文本框  
$(":password")  //所有的密码框  
$(":radio")   //所有单选按钮  
$(":checkbox")  //所有复选框  
$(":submit")   //所有提交按钮  
$(":reset")   //所有重置按钮  
$(":button")  //所有button按钮  
$(":file")   //所有文件域  

$("input:checked")    //所有选中的元素  
$("select option:selected")   //select中所有选中的option元素

筛选器
过滤

$("p").eq(0) //当前操作中第N个jQuery对象，类似索引  
$("li").first() //第一个元素  
$("li").last() //最后一个元素  
$(this).hasClass("test") //元素是否包含某个特定的类，返回布尔值  
$("li").has("ul")  //包含特定后代的元素

查找

$("div").children() //div中的每个子元素，第一层  
$("li").find("span") //div中包含的所有span元素，子子孙孙  

$("p").next( ) //紧邻p元素后的一个同辈元素  
$("p").nextAll( ) //p元素之后的所有同辈元素  
$("#test").nestUntil("#test2")  //id为“#test”元素之后到id为“#test2”之间所有的同辈元素，掐头去尾  

$("p").prev( ) //紧邻p元素前的一个同辈元素  
$//p元素之前所有的同辈元素  
//id为“#test”元素到id为“#test2”之间的所有同辈元素，掐头去尾   

$("p").parent( )   //每个p元素的父元素  
$("p").parents( )  //每个p元素的所有祖先元素，body,html  
$("#test").parentsUntil("#test2") //id为“#test”元素到id为“#test2”之间所有的父级元素，掐头去尾  

$("div").siblings() //所有的同辈元素，不包括自己

三、属性操作
基本属性操作

$("img").attr("src"); //返回文档中所有图像的src属性值  
$("img").attr("src","test.jpg) //设置所有图像的src属性  
$("img").removeArrt("src") //将文档中图像的src属性删除  

  $("input[type='checkbox']").prop("checked",true); //选中复选框  
    $("input[type='checkbox']").prop("checked",false);  
    $("img").removeProp("src"); //删除img的src属性

css类

$("p").addClass("selected"); //为p元素加上‘selected’类  
$("p").removeClass("selected"); //从p元素中删除‘selected’类  
$("p").toggleClass("selected");//如果存在就删除，否则就添加

HTML代码/文本/值

$('p').html();  //返回p元素的html内容  
    $('p').html("helo <b> nick </b>!"); //设置p元素的html内容  
    $('p').text(); //返回p元素的文本内容  
    $('p').text("nick"); //设置p元素的文本内容  
    $('input').val(); //设置文本框中的值  
    $('input').val("nick"); //设置文本框中的内容

四、css操作
样式

 $("p").css("color"); //访问查看p元素的color属性  
 $("p").css("color","red"); //设置p元素的color属性为red  
$("p").css({"color":"red","background":"yellow"}); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）

位置

$('p').offset(); //元素在当前视口的相对偏移，Object{top：122，left:260}  
$('p').offset().top   
$('p').offset().left  
$('p').position() //元素相对父元素的偏移，对可见元素的有效，Object{top：117，left：250}  

$(window).scrollTop(); //获取滚轮滑的高度  
$(window).scrollLeft();  //获取滚轮滑的宽度  
$(window).scrollTop('100'); //设置滚轮滑的高度为100

尺寸

 $("p").height();//获取p元素的高度  
     $("p").width(); //获取p元素的宽度  

     $("p:first").innerHeight();//获取第一个匹配元素内部区域高度（包括补白，不包括边框）  
     $("p:first").innerWidth(); //获取第一个匹配元素内部区域宽度（包括补白、不包括边框）  

     $("p:first").outerHeight() //匹配元素外部高度（默认包括补白和边框）  
     $("p:first").outerWidth() //匹配元素外部宽度（默认包括补白和边框）  
     $("p:first").outerHeight(true) //为true时包括边距

五、文档处理
内部插入

$("p").append("<b>nick</b>"); //每个p元素内后面追加内容  
    $("p").appendTo("div"); //p元素追加到div内后  
    $("p").prepend("<b>Hello</b>");//每个p元素内前面追加内容  
    $("p").prependTo("div");//p元素追加到div前  

    var insertHtml='<div>我是插入的元素。</div>'  
    $('#divId').find('p').eq(1).after(insertHtml);//找到divid中的第二哥p标签，在后面插入元素***重要

外部插入

    $("P").after("<b>nick</b>");//每个p元素同级之后插入内容  
    $("p").before("<b>nick</b>");//在每个p元素同级之前插入内容  
    $("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面  
    $("p").insertBefore("$test"); //所有p元素插入到id为test的元素的前面

替换

   $("p").replaceWith("<b>Paragraph</b>");//将所有匹配的元素替换成指定的HTML或DOM元素   
    $("<b>Paragraph</b>").replaceAll("p");//用匹配的元素替换掉所有selector匹配到的元素

删除

 $("p").empty();//删除匹配的元素集合中所有的子节点，不包括本身  
    $("p").remove();//删除所有匹配的元素，包括本身  
    $("p").detach();//删除所有匹配的元素（和remove()不同的是：所有绑定的事件、附加的数据会保留下来）  
  $(".form-horizontal").find(".form-group").eq(4).remove(); 删除指定位置的元素***重要

复制

    $("p").clone(); //克隆元素并选中克隆的副本  
    $("p").clone(true);//布尔值指事件处理函数是否会被复制

六、事件
页面载入

 $(document).ready(function() {  
            //do something...  
    });  
//简写  
    (function($){  
           //do something  
    });

页面处理

    //bind为每个匹配元素绑定事件处理函数，绑定多个用{}。  
    $("p").bind("click",function(){  
             alert($(this).text());  
    });  
    $(menuF).bind({  
           "mouseover":function () {  
             $(menuS).parent().removeClass("hide");  
           },  
           "mouseout": function () {  
            $(meunS).parent().addClass("hide");  
           }  
    });  

    $("p").one("click",function(){  
           //one 绑定一个一次性的事件处理函数  
    })  
    $("p").unbind("click") //解绑一个事件

页面委派

    //与bind不同的是当时间发生时才去临时绑定  
    $("p").delegate("click",function () {  
            //do something...  
    });  
    $("p").undelegate();//p元素删除由delegate()方法添加的所有事件  
    $("p").undelegate("click"); //从p元素删除由delegate()方法添加的所有click事件

事件

    $("p").click() //单击事件  
    $("p").dblclick();//双击事件  
    $("input[type=text]").focus() //元素获得焦点时，触发focus事件  
    $("input[type==text]").blur() //元素失去焦点时，触发blur事件  
    $("button").mousedown() //当按下鼠标时触发事件  
    $("button").mouseup() //元素上放松鼠标按钮时触发事件  
    $("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件  
    $("p").mouseover() //当鼠标指针位于元素上方时触发事件  
    $("p").mouseout() //当鼠标指针从元素上移开时触发事件  
    $(window).keydown() //当键盘或按钮被按下时触发事件  
    $(window).keypress() //当键盘或按钮按下时触发事件，每输入一个字符都触发一次  
    $("input").keyup() //当按钮被松开时触发事件  
    $("input").scroll() //当用户滚动时触发事件  
    $(window).resize() //当调整浏览器窗口的大小时触发事件  
    $("input[type='text']").change()  //当元素的值发生改变时触发事件  
    $("input").select() //当inpput元素被选择时触发事件  
    $("form").submit() //当提交表单时触发事件  
    $(window).unload() //当用户离开页面时

(event object)对象
所有的事件函数都可以传入event参数方便处理事件

    $("p").click(function(event){  
           alert(event.type); //"click"  
    });  
    //（event object）属性方法：  
    event.pageX //事件发生时，鼠标距离网页左上角的水平距离  
    event.pageY //事件发生时，鼠标距离网页左上角的垂直距离  
    event.type  //事件的类型  
    event.which //按下了哪一个键  
    event.data  //在事件对象上绑定数据，然后传入事件处理函数  
    event.target //事件针对的网页元素  
    event.preventDefault() //阻止事件的默认行为（比如点击链接，会自动打开新页面）  
    event.stopPropagation()//停止事件向上层元素冒泡

七、效果
基本

    $("p").show() //显示隐藏的匹配元素  
    $("p").show("slow"); //参数表示速度，（“slow”，“normal”，“fast”）,也可为900毫秒  
    $("p").hide() //隐藏显示的元素  
    $("p").toggle(); //切换 显示/隐藏

滑动

    $("p").slideDown("900"); //用900毫秒时间将段落滑下  
    $("p").slideUp("900");  //用900毫秒时间将段落滑上  
    $("p").sliderToggle("900");//用900毫秒时间将段落淡入。淡出  
    $("p").fadeTo("slow",0.6); //用900毫秒时间将段落的透明度调整到0.6

淡入淡出

    $("p").fadeIn("900");  //用900毫秒时间将段落淡入  
    $("p").fadeOut("900"); //用900毫秒时间将段落淡出  
    $("p").fadeToggle("900"); //用900毫秒时间将段落淡入，淡出  
    $("p").fadeTo("slow",0.6) //用900毫秒时间将段落的透明度调整到0.6

八、对象访问

    $.trim() //去除字符串两端的空格  
    $.each() //遍历一个数组或对象，for循环  
    $.inArray() //返回一个值在数组中的索引位置，不存在返回-1  
    $.grep() //返回数组中符合某种标准的元素  
    $.extend() //将多个对象，合并到第一个对象***  
    $.makeArray() //将对象转化为数组  
    $.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）  
    $.isArray() //判断某个参数是否为数组  
    $.isEmptyObject() //判断某个对象是否为空（不含有任何属性）  
    $.isFunction() //判断某个参数是否为函数  
    $.isPlainObject() //判断某个参数是否为用“{}”或“new Object”建立的对象  
    $.support() //判断浏览器是否支持某个特性

九、插件拓展机制

    //方式一  
    jQuery.fn.extend({  
           check: function () {  
             return this.each(function () {  
                this.checked = true;  
             });  
           },  
           uncheck: function () {  
              return this.each(function () {  
                this.checked = false;  
              });  
           }  
    })  
    $("input[type=checkbox]").check();  
    $("input[type=radio]").uncheck();

    //方式二  
    jQuery.extend({  
            min: function(a,b){  
                return a < b ? a : b;  
            },  
            max: function(a,b){  
                    return a > b ? a : b;  
            }  
    });  
    jQuery.min(2,3);//2  
    jQuery.max(4,5) //5

官方文档上只有单webview选项卡切换+下拉刷新的demo，而且多个选项卡会很臃肿，多个菜单共用一个选项卡即可，用mui.fire传送点击参数到子页面。

es6常用语法
let, const, class , extends , super , arrow functions , template string , destructuring , default , rest arguments

1. let ， const
这两个的用途与var类似，都是用来声明变量的，但又有不同。首先看下面的例子：

var name = 'xiaolv';  
while (true) {  
    var name = 'honghong';  
    console.log(name); //honghong  
   break;  
}  
console.log(name); //honghong

使用var 两次输出的都是honghong，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为javaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

let name =  'xiaolv';  
while (true) {  
    var name = 'honghong';  
    console.log(name); //honghong  
   break;  
}  
console.log(name); //honghong

另外一个var带来的不合理场景就是用来计数的循环变量泄漏为全局变量，看下面的例子：

var a = [ ];  
for (var i = 0; i < 10; i  ) {  
    a[i] = function () {  
         console.log(i);  
   }  
}  
a[6]();//10

上面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

var a = [ ];  
for (let i = 0; i < 10; i  ) {  
    a[i] = function () {  
         console.log(i);  
   }  
}  
a[6]();//10

再来看一个更常见的例子，了解下如果不用ES6，而使用闭包解决这个问题。

var clickBoxs = document.querySelectorAll('.clickBox');  
for (var i = 0; i < clickBoxs.length; i  ) {  
      clickBox[i].onclick = function(){  
         console.log(i);  
    }  
}

这种会导致我们无论点击哪个clickBox，输出的都是5.下面我们来看，如何使用闭包搞定它。

function iteratorFactory(i) {  
    var onclick = function(e){  
          console.log(i)  
    }  
   return onclick;  
}  
var clickBoxs = document.querySelectorAll('.clickBox');  
for (var i = 0; i < clickBoxs.length;i  ) {  
     clickBoxs[i].onclick = interatorFactory(i);  
}

const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。

 const PI = Math.PI;  
PI = 23;//Uncaught TypeError: Assignment to constant variable.

当我们尝试去改变用const声明的常量时，浏览器就会报错。
const有一个很好的应用场景，就是当我们引用第三方库时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug：

 const moent = require('moment');

2. class , extends , super
这三个特性涉及了ES5中最令人头疼的几个部分：原型、构造函数、继承...你还在为他们复杂难懂的语法而烦恼吗？你还在为指针到底指向哪里而纠结万分吗？
有了ES6我们不再烦恼！
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

 class Animal {  
     constructor () {  
        this.type = 'animal';  
     }  
     says(say) {  
         console.log(this.type + 'say' + say);  
     }  
}  

let animal = new Animal ();  
animal.says('hello'); //animal says hello  

class Cat extends Animal {  
      constructor () {  
           super();  
          this.type = 'cat';  
     }  
}  

let cat = new Cat();  
cat.says('hello'); // cat says hello

上面代码首先用class定义了一个‘类’，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor 内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是创造父类的实例对象this（所以必须先调用spuer方法），然后再用子类的构造函数修改this。

P.S 如果你写react的话，就会发现以上三个东西在最新版React出现的很多。创建的每个component都是一个继承React.Component的类。

3.arrow function
ES6是最常用一个新特性了，用它来写function比原来的写法要简洁清晰很多：

function (i) { return i + 1 ;}   //ES5  
(i) => i + 1; //ES6

如果方程比较复杂，则需要用{}把代码包起来：

function (x,y) {  
     x++;  
     y--;  
     return x + y;  
}  
(x,y) => {x++; y--;  return x+y;}

除了看上去更简洁以外，arrow function 还有一项超级无敌的功能！
长期以来，javaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。例如：

calss Animal {  
       constructor () {  
          this.type = 'animal';  
      }  
      says(say) {  
           setTimeout(function(){  
                 console.log(this.type + 'says' + say)  
           },1000)  
     }  
}  
var animal = new Animal();  
animal.says('hi')  //undefined say hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：
1.第一种是将this传给self，再用self来指代this

function (x,y) {  
     x++;  
     y--;  
     return x + y;  
}  
(x,y) => {x++; y--;  return x+y;}  

2. 第二种方法是用bind（this），即

function (x,y) {  
     x++;  
     y--;  
     return x + y;  
}  
(x,y) => {x++; y--;  return x+y;}

但现在我们有了箭头函数，就不需要这么麻烦了：

class Animal {  
   constructor() {  
     this.type = 'animal';  
   }  
   says(say) {  
      setTimeout(  () => {  
           console.log(this.type + 'says' + say)  
      },1000)  
   }  
}  
var animal = new Animal();  
animal.says('hi');  //animal says hi

当我们使用箭头函数的时候，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部的绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

template string
这个也是非常有用，当我们要插入大段的html内容的到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具等，比如mustache等。
先看下面一段代码：

$("#result").append(`  
       There are <b>${basket.count}</b> items in your basket,  
       <em>${basket.onSale}</em>  
       are on sale!  
`);

用反引号（`）来标识起始，用 ${ } 来引用变量，而且所有的空格和缩进都会被保留在输出之中。
React Router从第1.0.3版也开始使用ES6语法了，比如这个例子

 <Link to={`/taco/${taco.name}`}>{taco.name}</Link>

destructuring
ES6运行按照一定模式，从数组和对象中提取值，对变量进行赋值，这个被称为解构（Destructuring）.
如下：

 let cat = 'ken';  
let dog = 'lili';  
let zoo = {cat:cat,dog:dog}  
console.log(zoo); //Object {cat:"ken",dog:"lili"}

用ES6完全可以像下面这么写：

 let cat = 'ken';  
let dog = 'lili';  
let zoo = {cat,dog}  
console.log(zoo); //Object {cat:"ken",dog:"lili"}

反过来可以这么写：

let dog = {type: 'animal',many: 2};  
let {type , many} = dog;  
console.log(type, many)  // animal  2

default,rest
default意思就是默认值。看下面的例子，调用animal（） 方法时忘了传参数，传统的做法就是加上这一句 type = type || ‘cat’来指定默认值。

function animal (type) {  
   type = type || 'cat';  
   console.log(type);  
}  
animal();

如果用ES6我们直接这么写：

function animal (type = ‘cat’) {  
   console.log(type);  
}  
animal();

最后 rest 语法也很简单，直接看例子：

function animal (...types) {  
   console.log(types);  
}  
animal('cat','dog','fish'); //["cat","dog","fish"];

如果不用ES6的话，就得使用ES5的arguments。

import export
这两个对应的就是ES6的module功能。
我们之前写的JavaScript一直没有模块化的体系，无法将一个庞大的js工程拆分分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题：
1.一方面js代码变得很臃肿，难以维护

1. 另一方面我们常常得很注意每个script标签在html中的位置，因为他们通常有依赖关系，顺序错了可能就会出现bug

在ES6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS（服务器端）和AMD（浏览器端，如require.js）.

而现在我们有了es6的module功能，它实现非常简单，可以成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思路，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

上面的设计思想看不懂也没关系，咱先学会怎么用

传统的写法
首先我们回顾一下require.js的写法：index.js 和 content.js 。现在我们想要在 index.js 中使用 content.js 返回的结果，我们要怎么做呢？
首先定义：

//content.js  
define('content.js',function() {  
      return 'A cat';  
});

然后require：

//index.js  
require(['./content.js'],function(animal) {  
      console.log(animal); //A cat  
});

那Commonjs是怎么写的呢？

//index.js  
var animal = require('./content.js');  

//content.js  
module.exports = 'A cat';

ES6的写法

//index.js  
import animal from './content';  

//content.js  
export default  'A cat';

ES6 module的其他高级写法

export default 'A cat';  
export function say(){  
       return 'Hello!';  
}  
export const type = 'dog';

上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类）

//index.js  
import { say ,  type }  from './content';  
let says = say();  
console.log(`The ${type} says ${says}`)   //The dog says Hello

这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。
如果还希望输入content.js中输出的默认值（default），可以写在大括号外面。

//index.js  
import animal , { say , type}  from './content';  
let says = say();  
console.log(`The ${type} says ${says} to ${animal}`);  
//The dog says Hello to A cat

修改变量名
此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。

//index.js  
import animal , { say , type as animalType }  from './content';  
let says = say();  
console.log(`The ${animalType} says ${says} to ${animal}`);  
//The dog says Hello to A cat

模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有的输出值都加载在这个对象上面。

//index.js  
import animal , * as content  from './content';  
let says = content.say();  
console.log(`The ${content.type} says ${says} to ${animal}`);  
//The dog says Hello to A cat

通常星号 * 结合 as 一起使用比较合适。

终极秘籍
考虑下面的场景：上面的 content.js 一种输出了三个变量 （default ， say ，type），假如我们的实际项目当中只需要用到 type 这一个变量，其余两个我们暂时不需要，我们可以只输入一个变量：

import {type}  from './content';

由于其他两个变量没有被使用，我们希望代码打包的时候也忽略他们，这样在大项目中可以显著减少文件的体积。
ES6帮我们实现了！
webpack、browserify、rollup.js目前都支持了此功能.他们把这个功能叫做Tree-shaking,就是打包前让整个文档树抖一抖，把那些未被依赖或使用的东西统统抖落下去...哈哈哈。。。
官方解释：

Normally if you  require a module,you import the whole thing. ES2015 lets you just import the bits you need,without ,mucking around wiht custom builds.it`s a revolution in how we use libraries in javaScript,and it`s happening right now.

1.css中的 > 是什么意思？
A > B 代表A元素的所有子B元素。若子类还包含子类则其不会被选中。
A B 代表选择所有的后代元素，A>B代表只选择一代。
具体可看《精通css》p21 2.3.1章节。
2. A+B表示HTML中紧随A的B元素。
3. css选择器有哪些？
标签选择器、类选择器、ID选择器、伪类选择器、后代继承选择器、群选择器、属性选择器
标签选择器：p a body div
类选择器： .text
ID选择器： #id
伪类选择器：a：hover { } a：link { }
通用选择器： *
后代继承选择器：html{font-size:16px},后代就会继承html的字体
群选择器： p,div,h1,h2{color:black}
属性选择器：acronym[title],a[rel="follow"]，当鼠标悬停在title属性的元素上时，显示相应的效果。
4. A~B 波浪线代表为A元素之后所有的B元素设置样式
定义和用法：1.A~B代表A之后出现的所有B元素。2.两种元素必须拥有相同的父元素，但B元素不必紧随A元素。
参考：https://www.cnblogs.com/liuting1314521/p/6185857.html
.a , .b {逗号指相同的css样式} ； .a .b {空格指后代元素}； .a>.b{大于号指子代元素}
5.css权重
style=“ ” 1000

wrapper #content { } 200

content .datePosten {} 110

div#content {} 101

content {} 100

p .comment .dateposted {} 21
p .comment {} 11
div p {} 2
p {} 1
6.css3伪类选择器单冒号（:）与双冒号（::）的区别
单冒号用于伪类，双冒号用于伪元素
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用户区分伪类和伪元素。
但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如：first-line、：first-letter、:before、:after等。
css伪类和伪元素用于向某些选择器设置特殊效果。
伪类： ：link、：visited、：hover 、：active 、：first-child 、：lang 、：focus
伪元素： ：first-letter、:first-line、：before、：after
对于css2之前已有的伪元素，比如：before，单冒号和双冒号的写法::before作用是一样的。
如果只要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，‘
如果要兼容IE浏览器，用css2的单冒号写法比较安全。
7.css3新增属性选择器
E[foo^="bar"] 选择匹配E的元素，且该元素定义了foo属性，foo属性以“bar”开始。E选择符可以省略，表示可以匹配任意了类型的元素。
E[foo$="bar"]选择匹配E的元素，且该元素定义了foo属性，foo属性值以“bar”结束。E选择符可以省略，表示可匹配任意类型的元素。
E[foo*=“bar”]选择匹配E的元素，且该元素定义了foo属性，foo属性值包含“bar”。E选择符可以省略，表示可以匹配任意了类型的元素。
不足之处还请指正！谢谢！
相关参考：https://www.cnblogs.com/libingql/p/4375354.html

> 更新：DCloud已经推出新版uni-AD广告联盟，本文已过期。请查看新版系统：https://uniad.dcloud.net.cn/

很多开发者都有变现需求，变现也能够促使开发者有动力做更好的App。
但大多数开发者的app日活较低，面对广告主没有议价能力，申请广告SDK也容易被广告联盟拒绝。
DCloud整合了众多开发者的流量，面向广告主和广告联盟SDK厂商谈判，拿到了更好的价格，并开放给开发者。

如果你是个人开发者，努力做一个日活上千的App或小游戏，每月增加收入上千，何乐而不为？
如果你是企业的成本部门，多些创收机会也能减轻成本压力。
如果你是开发商的一名工程师，老板财大气粗不在意广告收入，为何不把广告佣金分出一半用于工程师团队的奖金呢？
如果你之前用过H5的网盟广告，那样式太丑、变现效率也太低，赶紧改用DCloud提供的原生广告吧。
你也不用担心广告的体验，DCloud同样重视广告的体验，我们的广告主也重视广告的体验，我们对接的都是国内知名的广告主（如京东、携程）和知名的广告联盟公司。

开屏广告样例：

开屏广告是很常见的广告形式。

开屏广告不是整屏广告，屏幕底部仍然是app自己的信息，往上是广告区。
底部app信息支持在manifest配置个性化图片，不配的话默认是app的icon+名称。（具体见http://ask.dcloud.net.cn/article/94
manifest文档里的plus下面的splashscreen下面的ads节点）
开发者不必担心广告会影响用户对自己的第一印象。平台默认策略是用户第一次使用该app时不会展示广告，第二次启动app才会出现广告。
当然这有可能影响广告的收益，后续DCloud会提供配置用于平衡。
没有广告主投放开屏时，app仍然显示自己的splash。
开通开屏广告需要HBuilder9.0.2版及以上。

悬浮红包广告样例：

给你的用户红包，天天抽奖送福利

push广告样例：

• 更多广告陆续接通中，包括信息流广告、内嵌(非悬浮)红包互动广告。

可以下载广告演示示例app，真实体验广告接入后的效果。为体验方便，该示例App没有每周3条的推送限制。

开通步骤

开通广告平台需使用HBuilder最新的9.0版正式版或alpha版。

1. 使用HBuilder最新版云打包时，在界面上可以选择是否配置广告以及更多广告设置的链接，会打开开发者中心网站。
2. 或自行登录开发者中心，点击左侧广告联盟，选择开通。开通广告联盟必须实名认证，也需要填写自己的收款账户，这样广告佣金才能支付到你的账户中。
   开关均在云端，无需重新打包。
   但2018年以前打的包，一直未更新，则需要重新打。

广告业务的开通与关闭，在都是开发者中心操作，都需要DCloud人工审核，审核周期一般0-2个工作日。
但广告位参数、上架应用商店审核需要临时隐藏广告，这些调整无需审核，云端操作实时生效。

在开通广告联盟会员时，有一份电子协议，里面描述了关于广告佣金计算、提现等细节，请开发者认真阅读。

离线打包也已更新支持广告平台，详见文档中心-5+SDK-离线打包。

如果对广告还有什么想咨询的，或者想研究如何最大化收益方式的，欢迎联系我们的商务同学bd@dcloud.io。

FAQ

1、广告收益的高低与什么有关？

• 你的app日活越高，广告收益越高。注意老版不支持广告的日活没有用，需要督促手机用户升级到新版。
• 开通的广告表达方式越多，广告收益越高。push、悬浮红包、开屏都开通，肯定比只开通push赚的多。
• 你的app与广告主的匹配度越高，你的收益越高。
  比如大众点评最近在推广黑珍珠餐厅榜单，你如果恰好有一个菜谱应用，在其中展示大众点评的广告，就能赚取到较高收益。精准匹配的广告arpu可能做到平均水平的30倍。
• 你的app需要必要的权限：位置、通知栏、桌面快捷方式、本机app列表读取
  拥有较多的权限，才能拿到设备数据，进而精准的给用户推荐适合的广告主。
• DCloud广告联盟的收益，一般在cpm(千次展示)几元到十几元不等，与上面提到的开通方式、匹配度、权限有关。
  举个例子，假使一个日活1万的app只开通开屏广告，一般日活用户的日均app启动次数是3次，那么这个app每日启动大约3万次，也就是有3万次开屏曝光。按千次展示cpm4元计算，每天有120元佣金，一个月3600元。
  如果把悬浮红包、push都加上，月收入能接近万元。
  如果你是个人开发者，毋庸置疑要赚这笔钱。
  如果你是企业的一名工程师，有时会遇到老板不在意这笔钱的情况，那么如果老板真的不缺钱的话，为什么不给你多涨薪呢？^_^
  建议和老板谈谈，开通广告，分出一般广告佣金来做工程师团队的奖金，这样大家多赢。

2、广告收入的账期是多久
每月结算上个月的广告收益。具体见联盟注册时的授权协议。

3、广告的计费模式是什么样的，cpm、cpc、cpd、cpa、cps？
由于是广告平台，广告主投放什么样的模式都是有的，有按展示、按点击、按下载、按激活、按注册、按成交都有。广告主给DCloud提交广告、设定计费模式，DCloud根据用户画像分发广告，并优先推荐竞价高的广告主。
开发者切不可推测广告主是按点击付费，就刷点击，还是要匹配到真实需求里，给广告主创建价值，形成健康循环生态。

4、相当于其他广告平台，DCloud广告平台有什么优势？

• DCloud广告联盟的体验更好、比h5网盟广告收益更高。三方的广告SDK无法和5+App原生化融合。比如开屏、信息流等很多广告形式，只有DCloud才能完美和App内容融合，提供原生化广告。相比于飘banner、应用推荐下载的积分墙等体验不佳的广告，原生化广告的体验和变现收益好过数倍。
• 大型广告平台，如百度腾讯360等，都对App的用户量有要求，日活不过50万，很难申请通过。如果走H5网盟，对于c/s的App而言会进入作弊名单、对于wap2app的App而言，因为广告的体验不佳，不能原生化，开屏、push也都做不了，所以变现效率不如DCloud广告联盟。
• DCloud的流应用比下载原生App有更高的导流效率。广告主投放原生App时，因为下载安装的步骤长，很容易折损。DCloud的流应用技术帮助广告主大幅降低折损，秒开应用。广告主的收益更高，其愿意支付的广告佣金也越多。

5、我的App是有属性的，是否可只投放匹配该属性的广告者。
广告平台是根据广告主的意向分配广告的，在筛选数据时载体App的属性只是一个数据项，主要还是看这个设备的imei在广告平台本身的画像。
比如你的app是教育类app，但某个手机设备使用你的app时，广告平台可能发现这个设备是一个年轻女性用户，就可能匹配时尚电商的广告。
单一匹配教育类相关的广告主，很可能会轮空广告位，无法保障变现效果最大化。
app开发者可以放心把广告匹配对接交给广告平台，D-AD广告平台整合了众多广告资源，有数据画像检测和用户兴趣检测能力。

6、iOS平台提交App Store审核时，能否暂时屏蔽广告显示？
可以登录http://dev.dcloud.net.cn，广告联盟-->广告应用列表，可以对iOS平台是否显示广告进行开关配置。

7、广告误开原因汇总及解决办法：
都收录在了这篇文章 http://ask.dcloud.net.cn/article/13324
遇到appid管理失误又无法联系到appid的所有者进行变更时，请向service@dcloud.io求助。

/*
操作规范

• index 关键字 不一定等于 数组下标
• 共有属性[date - length]
• store(db.table).insert(date) // 插入
• store(db.table).update(row,val,where) // 修改
• store(db.table).select(where) // 查询
• store(db.table).select(where).groupby(row) // 分组
• store(db.table).select(where).orderby('row desc || asc') // 排序
• */

// 新增 .user 用于识别用户  
store('as.day').user(val).select() 

localStorage 存储数据会丢失 不明原因
所以APP环境采用plus.storage 存储

// 交流群：418967623  
// 修改操作调整  
store(db.table).update({  
row1:val1,  
row2:val2  
},where) 

store('as.day').insert({ a: 11,b: 22, c:{ q:'哈哈' } });  
        store('as.day').insert({ a: 11,b: 2, c:{ q:'哈哈' } });  

        store('as.day').update('a',11 + 11,'c.q is 哈哈')  

        store('as.day').delete('b is 2')  

        console.log(store('as.day').select().date,store('as.day').select().length)  
        console.log(store('as.day').select('b is 22').date)  
        console.log(store('as.day').select().groupby('b').date)  
        console.log(store('as.day').select().orderby('index desc').date)

    /**  
     * 判断是否手机亮屏  
     * @returns {boolean}  
     */  
    static isScreenOn() {  
        if (typeof (plus) !== 'undefined') {  
            var pm = plus.android.runtimeMainActivity()  
                .getSystemService(plus.android.android.content.Context.POWER_SERVICE);  
            return plus.android.invoke(pm, 'isScreenOn');  
        }  
        return true;  
    }  

    /**  
     * 判断手机屏幕是否锁定  
     * @returns {boolean}  
     */  
    static isScreenLocked() {  
        if (typeof (plus) !== 'undefined') {  
            var pm = plus.android.runtimeMainActivity()  
                .getSystemService(plus.android.android.content.Context.KEYGUARD_SERVICE);  
            return plus.android.invoke(pm, 'inKeyguardRestrictedInputMode');  
        }  
        return false;  
    }