日常Js学习汇总(2)

最近搞项目改版，存在新老需求，这次就项目内遇到的一些问题和学习到的新知识做一个笔记。

主要是设置cookie和删除cookie的问题，一般设置cookie可以如下设置

1	document.cookie = `${"cookie名"}=${"cookie值"};expires=${"cookie生命时间"};domain=${"存储域名"};path=${"相对路径"}`;

或者用jquery.cookie这个库来设置(主要就是方便点，不用拼那么长字符串)，如下

1	$.cookie("cookie名","cookie值",{expires:'cookie生命时间',domain:'存储域名',path:'相对路径'});

实现上没什么难度，但是在项目中代码执行后偏偏没有在控制台中看到存入的cookie,很蛋疼。

最后发现问题出在domain上。项目里是区分环境的，不同的环境存入不同的域名，其实这也不是问题，问题是我设置的是测试环境的域名，但是我看代码效果的时候去的是docker。。。。。瞬间感觉自己的智商被清零了。。。。。。主要还是当初试着在控制台里输入了上述代码，控制台里确实也存入了和当前域名不一样的域名的cookie，被这个坑惨了，而且至今都不知道为什么在控制台写可以存不同域名的cookie但是代码里就存不进去。

mescroll插件问题

新需求中有个顶部下拉刷新，底部上拉加载的功能，这里使用了mescroll这个插件，demo示例如下

var mescroll = new MeScroll("mescroll", {
    down: {
        auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
        callback: downCallback //下拉刷新的回调
    },
    up: {
        auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
        isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
        callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        toTop:{ //配置回到顶部按钮
            src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
            //offset : 1000
        }
    }
});
function downCallback(){
    //联网加载数据
    getListDataFromNet(0, 1, function(data){
        //联网成功的回调,隐藏下拉刷新的状态
        mescroll.endSuccess();
        //设置列表数据
        setListData(data, false);
    }, function(){
        //联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
    });
}
function upCallback(page){
    //联网加载数据
    getListDataFromNet(page.num, page.size, function(curPageData){
        //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
        console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
        
        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
        //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
        
        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
        
        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
        //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
        
        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
        mescroll.endSuccess(curPageData.length);
        
        //设置列表数据
        setListData(curPageData, true);
    }, function(){
        //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        mescroll.endErr();
    });
}

示例代码中并没有什么问题，但是实际运用中由于要判断是否存在下一页的情况，这里就会使用到mescroll.endSuccess这个方法(接口数据中并没有返回total或是pageTotal);

其实没有total或者pagetotal也不是什么大问题，完全可以通过pageSize来判断是否存在下一页数据，坑就坑在它的加载中这段标签也不是插件内部自动控制的，这个标签也需要用mescroll.endSuccess这个方法来进行判断，否则当前页加载完之后下次再拖到底部时就不会触发上拉加载方法。

微信小程序的支付功能跳转

由于这次需求中将m站和小程序搞在一起，准备将m站嵌在小程序的web-view中，然而这里有个问题，那就是支付功能，小程序内部不允许调用微信接口的支付功能，只能使用调用小程序自己的支付接口，这意味着原本m站的支付功能将失效，而如果调用小程序的支付接口那就必须从内嵌的m站页面中将参数传给小程序，所以后来就想了一个办法，通过webview跳转时的url把支付所需参数传给小程序，从而调用小程序的支付功能。

具体实现是m站内部判断出当前环境是小程序还是h5页面，小程序则将支付所需参数通过调用小程序的跳转方法跳到一个空白的web-veiw上将url的参数带出，并在这个新的web-view上进行支付功能的实现，如果不是小程序就还是用原来的微信支付方式支付。小程序具体代码如下：

onLoad: function (options) {
   var that = this;
   //页面加载调取微信支付（原则上应该对options的携带的参数进行校验）
   that.requestPayment(options);
 },
//根据 obj 的参数请求wx 支付
 requestPayment: function (obj) {
   //获取options的订单Id
   var orderId = obj.orderId;
   //调起微信支付
   wx.requestPayment({
     //相关支付参数
     'timeStamp': obj.timestamp,
     'nonceStr': obj.nonceStr,
     'package': 'prepay_id=' + obj.prepay_id,
     'signType': obj.signType,
     'paySign': obj.paySign,
     //小程序微信支付成功的回调通知
     'success': function (res) {
       //定义小程序页面集合
       var pages = getCurrentPages();
       //当前页面 (wxpay page)
       var currPage = pages[pages.length - 1];  
       //上一个页面 （index page） 
       var prevPage = pages[pages.length - 2];  
       //通过page.setData方法使index的webview 重新加载url  有点类似于后台刷新页面
       //此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
         prevPage.setData({
           url: "https://xxxxxxxxxx.com/wx_isPayment.jhtml?orderId=" + orderId  + '&ispay=0',
           
         }),
         //小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
         //微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
         wx.navigateBack(); 
     },
     //小程序支付失败的回调通知
     'fail': function (res) {
       console.log("支付失败"),
         console.log(res)
         var pages=getCurrentPages();
         var currPage = pages[pages.length - 1];   
         var prevPage = pages[pages.length - 2];  
         console.log("准备修改数据")
         prevPage.setData({
           url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0' ,
         }),
           console.log("准备结束页面")
       wx.navigateBack(); 
     }
   })
 }

以上就是这次项目中所获取的经验。

edit by AmamiRyoin