有梦想的风筝

web前端开发中遇到的问题整理记录——2019-05

小程序中，子页面传值给父页面的方法
小程序中，input高度设置
angular 当数据改变时，页面数据不改变的解决办法
小程序wx.base64ToArrayBuffer调用时，提示thirdScriptError “atob” failed;undefined Error: “atob” faile
微信小程序checkbox样式修改
循环获取object的属性名和属性值
JS中break continue和return的用法

正文

1. 小程序中，子页面传值给父页面的方法

A 使用全局数据存储
将要传递的数据，存储在App对象上（比如globalData属性）。
将要传递的数据，存储在小程序的本地数据缓存（Storage）中。

//=== 1. 存储到app对象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
wx.navigateBack();  //返回上一个页面

//=== 2.存储到数据缓存的方式 =========
wx.setStorage({
 key: "mydata",
 data: {a:1, b:2},
 success: function () {
   wx.navigateBack();   //返回上一个页面
 }
})

当返回到上一个页面的时候，可以通过读取这些全局存储区域，来获取到我们需要的数据。
缺点：由于是全局数据存储，所以当你存入了那些数据后，必须谨慎的去管理这些全局数据（何时被销毁）

B 从页面路由栈中直接获取和操作目标Page对象

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2}
})

传送门

2. 小程序中，input高度设置

input组件有个自带的min-height and height 一般我们设置input高度只覆盖了height，忽略了min-height。所以造成input高度无法改变。

因此设置一个min-height覆盖默认设置即可

3. angular 当数据改变时，页面数据不改变的解决办法

由于一些时候angularjs的watch不能监听到JS对 $s c o p e . d a t a 的更改，所以造成数据改变时，页面数据不改变的问题。解决办法也很简单使用$ scope.$apply();手动刷新即可

$scope.count = function(id){
            BillOfReturnServices.query('pro/materialRequire/editCount', id).then(function (info){
                if(info.hasSuccess){
                    if(info.data > 0 ){
                        /*$state.reload('editBillOfReturn'); 会刷新整个页面*/ 
                        $scope.$apply(); //手动刷新
                        $scope.queryById2(id);
                    }else{
                        $scope.page.query = true;
                    }
                    }
            })
            layer.closeAll();
        }

传送门

#####4.小程序wx.base64ToArrayBuffer调用时，提示thirdScriptError “atob” failed;undefined Error: “atob” failed
小程序在调用wx.base64ToArrayBuffer获取base64图片的时候，有时会出现报错thirdScriptError “atob” failed;undefined Error: “atob” failed的情况，通过查询资料得到解决办法如下：

res.data.base64 = res.data.base64.replace(/[\r\n]/g,"")  
//后台传过来的数据可能会有空格‘/n’ 所以去掉空格再调用base64方法即可

5.微信小程序checkbox样式修改

/*checkbox 选项框大小  */
checkbox .wx-checkbox-input{
    height:30rpx;
    width:30rpx;
    margin-top: -5rpx;
  }
/*checkbox选中后样式  */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #d60163;
    border:#d60163;
  }
/*checkbox选中后图标样式  */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    color: #
}

6. 循环获取object的属性名和属性值

1、for in
主要用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性

var obj = {"name":"tom","sex":"male"}；

Object.defineProperty(obj, "age", {value:"18", enumerable:false});//增加不可枚举的属性age

Object.prototype.protoPer1 = function(){console.log("name is tom");};//通过原型链增加属性，为一个函数

Object.prototype.protoPer2 = 2;////通过原型链增加属性，为一个整型值2

console.log("For In : ");

for(var a in obj) {
    console.log(a);
}
// 输出
name
sex
 protoPer1
protoPer1

for in 主要用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性，示例中的属性age为不可可枚举，所以没有输出

除了for in 还有
Object.keys方法，此方法返回一个数组，元素均为对象自有可枚举的属性。Object.getOwnProperty方法，此方法用于返回对象的自有属性，包括可枚举和不可枚举的属性

具体用法传送门

7. JS中break continue和return的用法

break和continue：退出循环或者switch语句，在其他地方使用会导致错误
break：

 for(var i=1;i<=10;i++)  { 

    if(i==6) {
      break; 
    } 
  document.write(i); 
} //输出结果：12345

当i=6的时候，直接退出for这个循环。这个循环将不再被执行！

continue：

 for(var i=1;i<=10;i++)  { 

    if(i==6) {
     continue; 
    } 
  document.write(i); 
} //输出结果：1234578910

return语句：

return语句就是用于指定函数返回的值。
return语句应用范围只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误！

首先在js中，我们常用return false来阻止提交表单或者继续执行下面的代码，通俗的来说就是阻止执行默认的行为

function () {
    console.log(1)
    return false
    console.log(2)
}// 输出1

return false 只在当前函数有效，不会影响其他外部函数的执行。
传送门
持续整理更新中…

原创博文搬运自本人简书