不积跬步无以至千里007

11.20工作笔记

flex布局

任何元素都可以开弹性盒 行内元素也可以 display：inline-flex

开flex后，子元素的float，clear，vertical-align就失效了

父元素开了flex就是容器，子元素就自动成了容器成员，称为项目

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex-direction 排列方向

决定项目的排列方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 换行

默认是不换行的，wrap决定怎么换行

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

justify-content 横向对齐

定义了项目在主轴上的对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 纵向对齐

定义项目在交叉轴上如何对齐

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 多轴如何对齐

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

flex 1 分配剩余空间

flex设置为1的意思 就是分配剩余空间的意思

flex-grow 是定义项目的放大比例，默认为0，不放大

// 该数字为 flex-grow 值，而flex-shrink 的值取 1，flex-basis 取 0%：
 
.item {
    flex: 1;
}
// 等价于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

for in循环

for…in 正式写法为for（i in obj）{}.obj表示一个对象，i则表示对象中的属性和方法。for…in…循环遍历对象内的属性和方法，不存在下标之类的说法，是无序循环。for循环相当于是一个有序循环。
for…in循环可应用于对象的复制，不过其有一个缺点，就是会从原型属性里继承prototype（）属性。

var array = [1, 2, 3, 4, 5];
Array.prototype.age = 13;
var result = [];

for (var i in array) {
  result.push(array[i]);
}
console.log(result.join(""));//1234513

//如何避免从原型属性里继承prototype（）属性，这里使用 hasOwnProperty(name)该函数指示一个对象自身（不包括原型链）是否具有制定名称的属性。如果有返回true，如果没有返回false

let arr = [1,2,3,4,5]
Array.prototype.name = 12
let res = []
for(let i in arr){
    if(arr.hasOwnProperty(i)){
        res.push(arr[i])
    }
}
console.log(res.join(""));//12345

qs.stringify

在axios发送post请求的时候，需要引入qs，

qs.stringify()是将对象转化成url的形式，用&符号进行拼接

qs.parse()是将url解析成对象的形式

JSON.stringify( )是把对象转化成正常类型的JSON

let datas = {
                payWay: payWay,
                totalPrice: that.pay,
                userId: userId,
                openId: openId,
                storeId: '',
                discountPrice: '',
                memberId: that.memberId,
                merchantId: merchantId,
                uuid: uuid,
                equipmentId: equipmentId,
                remarks: that.remark, //留言参数
                md5Str: md5Str,
                timestramp: timestramp,
                goodsOrderId: '',
                hbFqNum: hbFqNum
            };
axios
    .post('/order/app/web_js_perfect_member_pay',Qs.stringify(datas))
    .then(function(response) 
          

AlipayJSBridge.call

唤起支付宝的接口 我个人没有玩不转 亲测无效

//JSAPI是支付宝客户端通过bridge机制，允许前端H5页面通过特定的JS方法，可以直接调用对应的支付、拍照、分享、弹出浮层之类的Native功能。

//但需要注意的是由于bridge的机制问题，iOS端暂时无法在iframe内正常调用所有的JSAPI，请避免在iframe内使用

// 由于机制问题，JSAPI注入是异步过程，时序无法保证。
// 如果使用原生AlipayJSBridge接口，需要先监听AlipayJSBridgeReady事件后再调用原生JSAPI接口。

function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function () {
  AlipayJSBridge.call('toast', {
    content: 'hello'
  });
});

WeixinJSBridge.invoke

在微信浏览器里面打开H5网页中执行JS调起支付

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

uniapp的支付接口

亲测有效

详情 https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment

uni.requestPayment({ //没有订单数据就无法成功支付
				    provider: 'alipay',
				    orderInfo: 'orderInfo', //微信、支付宝订单数据 
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});

uniapp的tabbar怎么配置

pages.json文件

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

SDK什么意思

太长不看版：

SDK 全套东西，接口，文档，开发工具等

API 别人写的函数你调用传参

SDK：软体开发工具包，一个完整的SDK应该包括以下内容：（1）接口文件和库文件（2）帮助文档（3）开发示例（4）实用工具

API：别人已经写好的的函数，你只需要根据他提供好的接口，调用他的方法，传入他规定的参数，然后这个函数就会帮你实现某些功能。

=============== SDK ===============

SDK是一系列程序接口，文档，开发工具的集合，是的，集合，sdk即单单不是一个开发工具，也不是一个程序。一个完整的SDK应该包括以下内容：（1）接口文件和库文件（2）帮助文档（3）开发示例（4）实用工具。

SDK即“软体开发工具包”，一般是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。通俗点是指由第三方服务商提供的实现软件产品某项功能的工具包。

通常SDK是由专业性质的公司提供专业服务的集合，比如提供安卓开发工具、或者基于硬件开发的服务等。也有针对某项软件功能的SDK，如推送技术、图像识别技术、移动支付技术、语音识别分析技术等，在互联网开放的大趋势下，一些功能性的SDK已经被当作一个产品来运营。

开发者不需要再对产品的每个功能进行开发，选择合适稳定的SDK服务并花费很少的经历就可以在产品中集成某项功能。


接口文件和库文件就是API，将底层的代码进行封装保护，提供给用户一个调用底层代码的接口；  
帮助文档解释接口文件和库文件功能，以及介绍相关的开发工具，操作示例等等；
开发示例就是做出来的一个DEMO展示，也要包括源代码；
实用工具是用来协助用户进行二次开发的工具，比如二次开发向导、API 搜索工具、软件打包工具等。
 
有过java编程经历的都知道，要运行java需要在电脑上安装jdk。jdk就是java SDK ，其安装过程就是下载一个EXE（Windows下）的应用程序，点一下就OK了，看起来好像jdk就是一个应用程序。实际上这个在网上下载下来的应用程序只是jdk的一个安装向导，它帮你在电脑上安装了Java的运行环境，一堆Java工具和Java基础的类库，这些东西组合起来才是JDK的核心内容。
 通过上述的示例，相信你大概明白了sdk包含些什么东西了。
 
那么学c的同学又会问，为什么在windows下运行c语言，没见要下载什么'C  SDK'什么的啊？
因为C语言没有特定SDK，也不需要像Java一样在虚拟机上运行程序示例。但是C语言有丰富的API，同时C语言不需要像Java一样使用Java开发商提供的API，它可以直接调用系统本身的API。
      
实际开发中，可以轻松的获得多种多类的软件开发的工具（如keil uvision, eclipse,Visual C++等），这些工具集成了语言的开发环境、编译环境，还提供纠错功能。可以通过这些工具将SDK中的函数，框架类导入，使用别人写好的类，协助软件的开发。

 

=============== API ===============

（1）API的概念

API即“应用程序编程接口”，是一些预先定义的函数，目的是作为“介面”沟通两个不同的东西，提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

其实就是别人已经写好的可以实现特定功能的函数，而你只需要根据他提供好的接口，也就是调用他的方法，传入他规定的参数，然后这个函数就会帮你实现这些功能。



从接口interface来说，在计算机领域是指两个不同事物之间交互的地方，大可以到两个完整的不同系统，小可以到两段程序。所以这个I就这么理解。在这个基础上，人和程序交互的地方，叫做UI，user interface,所有人输入的包括鼠标键盘触摸屏声音输入都算。那么程序和程序交互的就叫做API，所有非人对非人交互都通过API进行交互，所谓交互，其实就是传递数据，触发功能。

（2）API应用案例

示例场景：假如你是一家小企业，公司网站上有一个表格是用来给客户注册预约的。你想要凭借这些预约细节信息，让客户能够自动在谷歌日程上创建活动。

API使用：这就意味着，你的网站服务器需要直接与谷歌服务器进行对话，在掌握既定细节信息的情况下，申请创建活动。之后，你的服务器就会接收到谷歌的响应并进行处理，然后将相关信息发送回浏览器，比如说向用户发送一个确认信息。

（3）API产品——现在也有公司将API包装成产品

案例：Weather Underground出售其天气数据API的访问权限给其他人。

（4）API的分类

API又分为（Windows、Linux、Unix等系统的）系统级API，及非操作系统级的自定义API。作为一种有效的代码封装模式，微软Windows的API开发模式已经为许多商业应用开发的公司所借鉴，并开发出某些商业应用系统的API函数予以发布，方便第三方进行功能扩展。如Google、苹果电脑公司，以及诺基亚等手机开发的API等等。

API又分为开放式API和私有API。顾名思义，开放式API即是向所有人公开的接口，允许任何人调用它并获取到它背后的数据，有时公司会将 API 作为其公共开放系统，也就是说，公司制定自己的系统接口标准，当需要执行系统整合、自定义和程序应用等操作时，公司所有成员都可以通过该接口标准调用源代码，该接口标准被称之为开放式API。私有API即接口未对外开放。

 

 

========== SDK 和 API 的关系 ==========

SDK相当于开发集成工具环境，API就是数据接口。在SDK环境下调用API数据。



实际上SDK包含了API的定义，API定义一种能力，一种接口的规范，而SDK可以包含这种能力、包含这种规范。但是SDK又不完完全全只包含API以及API的实现，它是一个软件工具包，它还有很多其他辅助性的功能。

SDK 包含了使用 API 的必需资料，所以人们也常把仅使用 API 来编写 Windows 应用程序的开发方式叫做“SDK编程”。

通俗语言解释

API

前端调用后端数据的一个通道，就是我们俗说的接口，通过这个通道，可以访问到后端的数据，但是又无需调用源代码。

SDK

工程师为辅助开发某类软件的相关文档、范例和工具的集合，使用SDK可以提高开发效率，更简单的接入某个功能。

举例说明：一个产品想实现某个功能，可以找到相关的SDK，工程师直接接入SDK，就不用再重新开发了。

 

========== 举个例子 ===========

在这里，一个简单的功能链条我将它分为三个组成部分：  

 1、客户端组装数据    

 2、客户端使用组装的数据来请求服务端（或者操作系统）的 api    

 3、服务端（或者操作系统）的 api 处理数据并返回处理结果

结合这个链条得出结论：  

 1、api为细粒度的功能接口  

 2、sdk包含第2、3步    

 3、sdk为api的集合

windows.location.href="/url"

当前页面打开URL页面 location.href="/url" 效果一样

javascript:void(0)

执行一个表达式但是不返回

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。


为什么要使用href=”javascript:void(0);”
href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，
而void(0)表示一个空的方法，也就是不执行js函数。

而void(0)表示一个空的方法，也就是不执行js函数。
为什么要使用href=”javascript:void(0);”
javascript:是伪协议，表示url的内容通过javascript执行。

void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作，

<a href="javascript：void(0)" οnclick="window.open()"> 点击链接后，页面不动，只打开链接

<a href="#" οnclick="javascript:return false;"> 作用一样，但不同浏览器会有差异。 

href=”#"的区别

<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部 

<a href="#">点击</a> 点击后会回到网面顶部

"＃"其实是包含了位置信息，例如默认的锚点是＃top 也就是网页的上端

而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首

而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)

 

使用javascript的方法

<a href="#" οnclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" οnclick="javascript:方法;return false;">文字</a>

 

补充 :<a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了。

        void():仅仅表示不返回，但是括号中的表达式还是要运行的。