dongsir

dongsir 查看完整档案

杭州编辑西安交通大学  |  计算机科学与技术 编辑在职  |  PHP开发工程师 编辑 dongsir.cn 编辑
编辑

个人动态

dongsir 收藏了文章 · 8月25日

CSS实现水平垂直居中的1010种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了

image.png

要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下,我将本文整理成了一个github仓库,欢迎大家star

仅居中元素定宽高适用

  • absolute + 负margin
  • absolute + margin auto
  • absolute + calc

居中元素不定宽高

  • absolute + transform
  • lineheight
  • writing-mode
  • table
  • css-table
  • flex
  • grid

absolute + 负margin

为了实现上面的效果先来做些准备工作,假设HTML代码如下,总共两个元素,父元素和子元素

<div class="wp">
    <div class="box size">123123</div>
</div>

wp是父元素的类名,box是子元素的类名,因为有定宽和不定宽的区别,size用来表示指定宽度,下面是所有效果都要用到的公共代码,主要是设置颜色和宽高

注意:后面不在重复这段公共代码,只会给出相应提示

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

绝对定位的百分比是相对于父元素的宽高,通过这个特性可以让子元素的居中显示,但绝对定位是基于子元素的左上角,期望的效果是子元素的中心居中显示

为了修正这个问题,可以借助外边距的负值,负的外边距可以让元素向相反方向定位,通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了,css代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

这是我比较常用的方式,这种方式比较好理解,兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + margin auto

这种方式也要求居中元素的宽高必须固定,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

这种方式通过设置各个方向的距离都是0,此时再讲margin设为auto,就可以在各个方向上居中了

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

这种方法兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + calc

这种方式也要求居中元素的宽高必须固定,所以我们为box增加size类,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

感谢css3带来了计算属性,既然top的百分比是基于元素的左上角,那么在减去宽度的一半就好了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

这种方法兼容性依赖calc的兼容性,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + transform

还是绝对定位,但这个方法不需要子元素固定宽高,所以不再需要size类了,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

修复绝对定位的问题,还可以使用css3新增的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以讲translate设置为-50%,就可以做到居中了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这种方法兼容性依赖translate2d的兼容性

点击查看完整DEMO

lineheight

利用行内元素居中属性也可以做到水平垂直居中,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

把box设置为行内元素,通过text-align就可以做到水平居中,但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

这种方法需要在子元素中将文字显示重置为想要的效果

点击查看完整DEMO

writing-mode

很多同学一定和我一样不知道writing-mode属性,感谢@张鑫旭老师的反馈,简单来说writing-mode可以改变文字的显示方向,比如可以通过writing-mode让文字的显示变为垂直方向

<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
    writing-mode: vertical-lr;
}

显示效果如下:

水平方向
垂
直
方
向

更神奇的是所有水平方向上的css属性,都会变为垂直方向上的属性,比如text-align,通过writing-modetext-align就可以做到水平和垂直方向的居中了,只不过要稍微麻烦一点

<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

这种方法实现起来和理解起来都稍微有些复杂

点击查看完整DEMO

table

曾经table被用来做页面布局,现在没人这么做了,但table也能够实现水平垂直居中,但是会增加很多冗余代码

<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>

tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了

.wp {
    text-align: center;
}
.box {
    display: inline-block;
}

这种方法就是代码太冗余,而且也不是table的正确用法

点击查看完整DEMO

css-table

css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>

下面通过css属性,可以让div显示的和table一样

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理,但却没有那么多冗余代码,兼容性也还不错

点击查看完整DEMO

flex

flex作为现代的布局方案,颠覆了过去的经验,只需几行代码就可以优雅的做到水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况

点击查看完整DEMO

grid

感谢@一丝姐 反馈的这个方案,css新出的网格布局,由于兼容性不太好,一直没太关注,通过grid也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少,但兼容性不如flex,不推荐使用

点击查看完整DEMO

总结

下面对比下各个方式的优缺点,肯定又双叒叕该有同学说回字的写法了,简单总结下

  • PC端有兼容性要求,宽高固定,推荐absolute + 负margin
  • PC端有兼容要求,宽高不固定,推荐css-table
  • PC端无兼容性要求,推荐flex
  • 移动端推荐使用flex

小贴士:关于flex的兼容性决方案,请看这里《移动端flex布局实战

方法居中元素定宽高固定PC兼容性移动端兼容性
absolute + 负marginie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + margin autoie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + calcie9+, chrome19+, firefox4+安卓4.4+, iOS6+
absolute + transformie9+, chrome4+, firefox3.5+安卓3+, iOS6+
writing-modeie6+, chrome4+, firefox3.5+安卓2.3+, iOS5.1+
lineheightie6+, chrome4+, firefox2+安卓2.3+, iOS6+
tableie6+, chrome4+, firefox2+安卓2.3+, iOS6+
css-tableie8+, chrome4+, firefox2+安卓2.3+, iOS6+
flexie10+, chrome4+, firefox2+安卓2.3+, iOS6+
gridie10+, chrome57+, firefox52+安卓6+, iOS10.3+

最近发现很多同学都对css不够重视,这其实是不正确的,比如下面的这么简单的问题都有那么多同学不会,我也是很无语

<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
    color: red
}

.blue {
    color: blue
}

问两个div的颜色分别是什么,竟然只有40%的同学能够答对,这40%中还有很多同学不知道为什么,希望这些同学好好补习下CSS基础,下面给大家推荐几本CSS的书籍

喜欢看网络资料同学,可以看看MDN的这个CSS入门教程,强烈推荐,英语好的同学建议看英文版

原文网址:http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/

最后推荐下我的新书《React状态管理与同构实战》,深入解读前沿同构技术,感谢大家支持

京东:https://item.jd.com/12403508.html 
当当:http://product.dangdang.com/25308679.html

查看原文

dongsir 赞了文章 · 8月25日

CSS实现水平垂直居中的1010种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了

image.png

要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下,我将本文整理成了一个github仓库,欢迎大家star

仅居中元素定宽高适用

  • absolute + 负margin
  • absolute + margin auto
  • absolute + calc

居中元素不定宽高

  • absolute + transform
  • lineheight
  • writing-mode
  • table
  • css-table
  • flex
  • grid

absolute + 负margin

为了实现上面的效果先来做些准备工作,假设HTML代码如下,总共两个元素,父元素和子元素

<div class="wp">
    <div class="box size">123123</div>
</div>

wp是父元素的类名,box是子元素的类名,因为有定宽和不定宽的区别,size用来表示指定宽度,下面是所有效果都要用到的公共代码,主要是设置颜色和宽高

注意:后面不在重复这段公共代码,只会给出相应提示

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

绝对定位的百分比是相对于父元素的宽高,通过这个特性可以让子元素的居中显示,但绝对定位是基于子元素的左上角,期望的效果是子元素的中心居中显示

为了修正这个问题,可以借助外边距的负值,负的外边距可以让元素向相反方向定位,通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了,css代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

这是我比较常用的方式,这种方式比较好理解,兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + margin auto

这种方式也要求居中元素的宽高必须固定,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

这种方式通过设置各个方向的距离都是0,此时再讲margin设为auto,就可以在各个方向上居中了

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

这种方法兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + calc

这种方式也要求居中元素的宽高必须固定,所以我们为box增加size类,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

感谢css3带来了计算属性,既然top的百分比是基于元素的左上角,那么在减去宽度的一半就好了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

这种方法兼容性依赖calc的兼容性,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + transform

还是绝对定位,但这个方法不需要子元素固定宽高,所以不再需要size类了,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

修复绝对定位的问题,还可以使用css3新增的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以讲translate设置为-50%,就可以做到居中了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这种方法兼容性依赖translate2d的兼容性

点击查看完整DEMO

lineheight

利用行内元素居中属性也可以做到水平垂直居中,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

把box设置为行内元素,通过text-align就可以做到水平居中,但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

这种方法需要在子元素中将文字显示重置为想要的效果

点击查看完整DEMO

writing-mode

很多同学一定和我一样不知道writing-mode属性,感谢@张鑫旭老师的反馈,简单来说writing-mode可以改变文字的显示方向,比如可以通过writing-mode让文字的显示变为垂直方向

<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
    writing-mode: vertical-lr;
}

显示效果如下:

水平方向
垂
直
方
向

更神奇的是所有水平方向上的css属性,都会变为垂直方向上的属性,比如text-align,通过writing-modetext-align就可以做到水平和垂直方向的居中了,只不过要稍微麻烦一点

<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

这种方法实现起来和理解起来都稍微有些复杂

点击查看完整DEMO

table

曾经table被用来做页面布局,现在没人这么做了,但table也能够实现水平垂直居中,但是会增加很多冗余代码

<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>

tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了

.wp {
    text-align: center;
}
.box {
    display: inline-block;
}

这种方法就是代码太冗余,而且也不是table的正确用法

点击查看完整DEMO

css-table

css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>

下面通过css属性,可以让div显示的和table一样

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理,但却没有那么多冗余代码,兼容性也还不错

点击查看完整DEMO

flex

flex作为现代的布局方案,颠覆了过去的经验,只需几行代码就可以优雅的做到水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况

点击查看完整DEMO

grid

感谢@一丝姐 反馈的这个方案,css新出的网格布局,由于兼容性不太好,一直没太关注,通过grid也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少,但兼容性不如flex,不推荐使用

点击查看完整DEMO

总结

下面对比下各个方式的优缺点,肯定又双叒叕该有同学说回字的写法了,简单总结下

  • PC端有兼容性要求,宽高固定,推荐absolute + 负margin
  • PC端有兼容要求,宽高不固定,推荐css-table
  • PC端无兼容性要求,推荐flex
  • 移动端推荐使用flex

小贴士:关于flex的兼容性决方案,请看这里《移动端flex布局实战

方法居中元素定宽高固定PC兼容性移动端兼容性
absolute + 负marginie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + margin autoie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + calcie9+, chrome19+, firefox4+安卓4.4+, iOS6+
absolute + transformie9+, chrome4+, firefox3.5+安卓3+, iOS6+
writing-modeie6+, chrome4+, firefox3.5+安卓2.3+, iOS5.1+
lineheightie6+, chrome4+, firefox2+安卓2.3+, iOS6+
tableie6+, chrome4+, firefox2+安卓2.3+, iOS6+
css-tableie8+, chrome4+, firefox2+安卓2.3+, iOS6+
flexie10+, chrome4+, firefox2+安卓2.3+, iOS6+
gridie10+, chrome57+, firefox52+安卓6+, iOS10.3+

最近发现很多同学都对css不够重视,这其实是不正确的,比如下面的这么简单的问题都有那么多同学不会,我也是很无语

<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
    color: red
}

.blue {
    color: blue
}

问两个div的颜色分别是什么,竟然只有40%的同学能够答对,这40%中还有很多同学不知道为什么,希望这些同学好好补习下CSS基础,下面给大家推荐几本CSS的书籍

喜欢看网络资料同学,可以看看MDN的这个CSS入门教程,强烈推荐,英语好的同学建议看英文版

原文网址:http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/

最后推荐下我的新书《React状态管理与同构实战》,深入解读前沿同构技术,感谢大家支持

京东:https://item.jd.com/12403508.html 
当当:http://product.dangdang.com/25308679.html

查看原文

赞 592 收藏 451 评论 35

dongsir 赞了文章 · 7月30日

React Native 的宝支付组件 @uiw/react-native-alipay 使用

NPM Version

基于 React Native 的宝支付插件,支持 iOS/Android。适用于商家在 App 应用中集成支付宝支付功能,商家 APP 调用支付宝提供的 SDK,SDK 再调用支付宝 APP 内的支付模块。如果用户已安装支付宝APP,商家APP会跳转到支付宝中完成支付,支付完后跳回到商家 APP 内,最后展示支付结果。如果用户没有安装支付宝 APP,商家 APP 内会调起支付宝网页支付收银台,用户登录支付宝账户,支付完后展示支付结果。完整实例 Example | 完整的接口文档

注意事项

  1. Android:支持2.3及以上的系统版本运行。
  2. iOS:iOS 6.0以上(包含iOS 6.0)。
  3. 支持手机系统:iOS(苹果)、Android(安卓)。
  4. 调试请注意 支付宝接入应用必须 已审核通过 状态。
  5. 支付宝开放平台-管理中心,签约 APP支付APP支付宝登录 功能。
  6. 适用于 react-native >= 0.60+ 低版本未测试。
  7. AlipaySDK 15.7.7 已更新到最新的支付宝 SDK 版本。

安装依赖

yarn add @uiw/react-native-alipay
# react-native version >= 0.60+
$ cd ios && pod install

API

Alipay.alipay 支付

Alipay.alipay: (payInfo: string) => Promise<OrderResult>;
  • ⚠️ 注意支付成功返回结果是一个字符串,返回内容
  • ⚠️ 支付宝需要设置 Scheme 和 iOS添加原生代码,才能支持支付和回弹商家APP的功能
  • ⚠️ 支付宝 管理中心-支付宝开放平台 需要签约 APP支付
import Alipay from '@uiw/react-native-alipay';

// 设置 支付宝 URL Schemes,要表述他是宇宙唯一性,可以使用 `bundle Identifier`
// scheme = `alipay` + `APPID`,`APPID` 为支付宝分配给开发者的应用ID
Alipay.setAlipayScheme(scheme);
// ⚠️ 目前不可用,设置支付宝沙箱环境,仅 Android 支持
// Alipay.setAlipaySandbox(isSandbox);

async function aliPay() {
  // 支付宝端支付
  // payInfo 是后台拼接好的支付参数
  // return_url=
  const payInfo = 'alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2021001172656340&biz_content=%7B%22out_trade_no%22%3A%221111112222222%22%2C%22total_amount%22%3A%220.01%22%2C%22subject%22%3A%221234%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&sign=oUQmGtkv8mrhJ0YwHl9%2FfxMcoLACWuSFKiMTC4Id8nc%2FZVvDQ6MLQq5hhtEN03Qn1%2BAtzTAaofE8nNixdroxOek2l5YtOAcYcXVYlJIyogN%2B22erN2NpDTWJ7tQTKgYFDJLRiG0DZJaxfADhUUF6UR9kdA8omoXKLDlP17ZPUs5Jr4aKv5HJtH5C53ui7PbmyWYg934L4UDC2F%2F9pPQlRwwDeE1SAaV3HW9Dt83kK52o8%2FlChXdotbFdAvH0d4qYGhpEYU5sepj9xiOMyL9aC4pMXW9INYLLGbvtqtlRchZTAfH5yji6nqqQm9KKMmcVrWdBDLyjFVNpejq1UjbJBw%3D%3D&sign_type=RSA2&timestamp=2020-07-09+12%3A16%3A16&version=1.0';
  const resule = await Alipay.alipay(payInfo);
  console.log('alipay:resule-->>>', resule);
}

订单详情 payInfo 编码前的数据

alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content={ "out_trade_no":"123123123123123", "total_amount":"0.01", "subject":"1234", "product_code":"QUICK_MSECURITY_PAY" }&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http://ane.boshu.ltd/owner/pay/api/ownerPay/callback&return_url=uiwjspay://&sign=re/+2SICQggOUjfxl7MtP/qzir2e+LdH4m+02gDcw0fkByO5MqXW/9bmXw+c4RMqo835OAjMZs7s966ZuDx2PB+hO0tJ/bzdHLLqYlBeCcETkrfwRx+AFZNgzsCn75eRCA7GONH35BpfSeGkQUZ+vNXftqd6hWaa7m/MhQYrjQcV98IVJM+UR67Gj68c+LM586cnk0+rbj8zoos6tCvN8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95fDbzpbmstQOuPgGHkASkd/beH0F8eqTVv8gW1ZTo5v/d/E2wSDGV1DciaEnCroTw==&sign_type=RSA2&timestamp=2020-07-09 09:50:41&version=1.0

订单详情 payInfo 编码的数据

alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content=%7B+%22out_trade_no%22%3A%22123123123123123%22%2C+%22total_amount%22%3A%220.01%22%2C+%22subject%22%3A%221234%22%2C+%22product_code%22%3A%22QUICK_MSECURITY_PAY%22+%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&return_url=uiwjspay%3A%2F%2F&sign=re%2F%2B2SICQggOUjfxl7MtP%2Fqzir2e%2BLdH4m%2B02gDcw0fkByO5MqXW%2F9bmXw%2Bc4RMqo835OAjMZs7s966ZuDx2PB%2BhO0tJ%2FbzdHLLqYlBeCcETkrfwRx%2BAFZNgzsCn75eRCA7GONH35BpfSeGkQUZ%2BvNXftqd6hWaa7m%2FMhQYrjQcV98IVJM%2BUR67Gj68c%2BLM586cnk0%2Brbj8zoos6tCvN8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95fDbzpbmstQOuPgGHkASkd%2FbeH0F8eqTVv8gW1ZTo5v%2Fd%2FE2wSDGV1DciaEnCroTw%3D%3D&sign_type=RSA2&timestamp=2020-07-09+09%3A50%3A41&version=1.0
  • ⚠️ 后台 SDK 根据所有数据生成 sign,建议通过 API 拿到这个数据,拼接数据会报错。
  • ⚠️ out_trade_no 订单 id 和 sign 签名 是唯一的,每次不一样,需要后台生成。

支付返回结果,支付宝返回结果参数说明

{ 
  "result": "{\"alipay_trade_app_pay_response\":{\"code\":\"10000\",\"msg\":\"Success\",\"app_id\":\"2021001172656340\",\"auth_app_id\":\"2021001172656340\",\"charset\":\"UTF-8\",\"timestamp\":\"2020-07-08 21:30:14\",\"out_trade_no\":\"123123213123214\",\"total_amount\":\"0.01\",\"trade_no\":\"2020070822001414841426413774\",\"seller_id\":\"2088421915791034\"},\"sign\":\"LY7wCsNLp+QnDqCq6VelY/RvyK7ZGY8wsXoKvS+Or7JjONLDUx5P6lDgqRKkpkng7br3y6GZzfGKaZ88Tf4eMnBMKyqU+huR2Um47xUxP383njvHlxuQZsSTLQZRswy4wmb/fPkFfvyH6Or6+oj0eboePOTu63bNr+h03w0QnP4znuHpfRuoVgWpsYh/6B1DL+4xfWRKJ21zm1SV9Feo9RWqnyTaGZyFVi6IKge0dUCYs9hXju95fOUVUOx5YflOFtSEnZafY9Ls4FCRQE1ANkjaKiKIE0+c4c4sEVEf/9Dwh88N+aSQOoLT+AV4RpjMoA8hF2k+vv2OKNeqr6SYGQ==\",\"sign_type\":\"RSA2\"}",
  "resultStatus": "9000",
  "memo": ""
}

Alipay.authInfo 登录授权

Alipay.authInfo: (authInfoStr: string) => Promise<AuthResult>;
  • ⚠️ 注意授权成功返回结果是一个字符串,返回内容
  • ⚠️ 支付宝需要设置 Scheme 和 iOS添加原生代码,才能支持验证回弹商家APP的功能
  • ⚠️ 支付宝 管理中心-支付宝开放平台 需要签约 APP支付宝登录
import Alipay from '@uiw/react-native-alipay';

// 设置 支付宝 URL Schemes,要表述他是宇宙唯一性,可以使用 `bundle Identifier`
// scheme = `alipay` + `APPID`,`APPID` 为支付宝分配给开发者的应用ID
Alipay.setAlipayScheme(scheme);

async function authInfo() {
  // 支付宝端授权验证
  // authInfoStr 是后台拼接好的验证参数
  const authInfoStr = 'app_name=mc&auth_type=AUTHACCOUNT&apiname=com.alipay.account.auth&biz_type=openservice&product_id=APP_FAST_LOGIN&scope=kuaijie&pid=2088421915791034&target_id=15946456110003465&app_id=2021001172656340&sign_type=RSA2&sign=keluG28qbbLwAcSDI4VmCNOGHJoF3xgpVeqXu1nCBCYo%2FlYYGe00fTfV9L4G73Sk7%2B4IwK%2BZV8IL%2F04cVtk6SR74lKAR3rYOoUdQ09ZrZFuQoUkO0vekajhp75IDQIg6PedCyY0SjFTqrHlH%2FImscBwitxrlSc9YbN7uW0gY34K8t7v8NhDoqzKJeoIz43UxF5U1DpUA1ISBVxwO7du1t6rYltsRhReayPS3hnvmwYSKQZUEgBvJ%2BT2XdyCaz%2FdGV907lYagPp1Oxkoaj%2FvW5NjNsRnid7vH944CoFj9XtBK%2FNTk2tBPTHFxYRQTEG1PkgkBohGpAWOFGGOuapH0ag%3D%3D';
  const resule = await Alipay.authInfo(authInfoStr);
  // resule => success=true&auth_code=9c11732de44f4f1790b63978b6fbOX53&result_code=200&alipay_open_id=20881001757376426161095132517425&user_id=2088003646494707
  console.log('authInfo:resule-->>>', resule);
}

授权返回结果,支付宝返回结果参数说明

{
  "resultStatus": "9000",
  "memo": "处理成功",
  "result": "success=true&result_code=200&app_id=202100117265&auth_code=8b6e5581b85WX84&scope=kuaijie&alipay_open_id=20881029919664670&user_id=20880025&target_id=15946456110003465"
}

Alipay.getVersion 获取 SDK 版本

Alipay.getVersion: () => Promise<string>;
import Alipay from '@uiw/react-native-alipay';

async function getVersion() {
  const version = await Alipay.getVersion();
  console.log('version:', version);
}

支付宝返回应用 iOS 设置

  • ⚠️ Android 端不需要做任何设置。
  • ⚠️ 如果用户从 支付宝App 跳转到 商家APP,是通过系统功能切换,而不是通过 支付宝APP 功能键返回 商家APP,回调函数是不起作用的,可通过 AppState.addEventListener 监听事件请求后台 API,来优化这一用户体验。
  1. 在代码中设置支付宝 URL Schemes,下面实例 uiwjspay 是定义的 scheme,你也可以定义为 alipay + appidappid 为支付宝分配给开发者的应用ID,用来表述 scheme 唯一性。
Alipay.setAlipayScheme('uiwjspay');
  1. 在请求支付的 payInfo 中必须包含 return_url=uiwjspay://return_url 的值为定义的 scheme => uiwjspay://,才会返回支付宝订单支付状态结果
// payInfo 是后台拼接好的支付参数,这个参数必须包含 `return_url=uiwjspay://`
Alipay.alipay(payInfo, (res)=>console.log(res))
  1. 用的 URL Schemes 列为白名单,在 ios/<应用名称>/Info.plist 中添加
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>alipay</string>
</array>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string></string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>uiwjspay</string>
    </array>
  </dict>
</array>
  1. 修改 ios/<应用名称>/AppDelegate.m 添加下列代码:
#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

命令测试

  • iOS: xcrun simctl openurl booted uiwjspay://
  • Android:adb shell am start -W -a android.intent.action.VIEW -d "uiwjspay://test/router" com.uiwjspay

错误处理

[NetworkInfo] Signal strength query returned error: Error Domain=NSPOSIXErrorDomain Code=13 "Permission denied", descriptor: <CTServiceDescriptor 0x283317100, domain=1, instance=1>

Product -> Scheme -> Edit Scheme -> Run -> Arguments -> Environment Variables 添加 OS_ACTIVITY_MODEdisable

其它

当前工程基于 @brodybits/create-react-native-module 初始化。

npx create-react-native-module --package-identifier com.uiwjs --object-class-name RNAlipay --generate-example Alipay --example-react-native-version 0.63.0 --module-name @uiw/react-native-alipay --github-account uiwjs --author-name "Kenny Wong" --author-email "wowohoo@qq.com"

开发

cd example   # 进入实例 example 工程,根目录不需要安装,会引发错误
yarn install # 安装依赖

cd ios     # 进入 example/ios 目录安装依赖
pod instll # 安装依赖

相关连接

查看原文

赞 4 收藏 3 评论 0

dongsir 关注了专栏 · 7月8日

小弟调调

http://wangchujiang.com

关注 575

dongsir 关注了用户 · 4月13日

小弟调调 @ichu

关注 1364

dongsir 关注了专栏 · 3月27日

advanced-php

advanced php,托大了,托大了

关注 1438

dongsir 回答了问题 · 3月26日

如何判断两个数组是否完全相等?

这里封装了一个函数库 jutils

    /**
     * 判断两个数组是否相等
     *
     * @since 0.1.0
     * @category Array
     * @param {Array} 要比较的数组
     * @param {other} 另一个要比较的数组
     * @returns {boolean}
     * @example
     *
     * arrayEqual([0, 1],[1, 2])
     * // => false
     */

carbon.png


希望可以帮助到你,不过还是推荐 loadsh

关注 6 回答 8

dongsir 赞了文章 · 3月26日

老旧话题:PHP读取超大文件

作为一名常年深耕curd的PHPer,关注内存那是不可能的,反正apache或者fpm都帮我们做了,况且运行一次就销毁,根本就不存在什么内存问题。

然而偏偏就有些个不开眼的人把这些个东西当面试题,比如总有刁民用“php读取一个10G的超大文件”当面试题来问你。当然了,作为一个和我一样的普普通通的蠢货,你听到这个问题的第一瞬间是懵逼,第二瞬间是卧槽,第三瞬间是保持结巴状态。

“面试造火箭,入职拧螺丝”。然而,刚进来就拧螺丝的人如果能够对“PHP读取一个10G的超大文件”有所见解的话,“造火箭”也是迟早的事儿。当前为了能够来这里“拧螺丝”,还是得先搞定“读取10G文件”这个问题。

要想读取10G的文件,首先,你得有个10G的文件

... ...

其实,相对来说也是比较简单的事情,我们随便找一个nginx的日志文件,哪怕只有10KB,假设文件名是test.log,然后呢执行" cat test.log >> test.log ",听我说少年,30秒左右你就该按下ctrl + C了,比如我这里,你们感受一下:

202MB,作为实验演示,够意思了。难不成真要造10G的文件?

首先,我们尝试用php的file函数来作一把死,你们感受一下:

<?php
$begin = microtime( true );
file( './test.log' );
$end = microtime( true );
echo "cost : ".( $end - $begin ).PHP_EOL;

保存为test.php,然后命令行下执行一把,结果如下图所示:

这句英文的大概意思就是“PHP最大只给每个进程分配了128MB内存,然而你特么张口要202MB?”所以,我们修改一下php配置文件... ...

千万不要手软,把这个参数改成1024MB,然后再次执行上面的php脚本:

然后,我们再试试最爱的file_get_contents()函数,结果如下图:

文件已经一次性全部被载入到内存中并将文件的每一行保存到了一个php数组中,我的机器是10G内存+256G固态硬盘,一次性载入这个202MB的文件file函数用了0.67秒钟、file_get_contents函数用了0.25秒钟(看起来file_get_content要比file靠谱的多),不过,敲重点的我们调整了配置文件才可以读取202MB的文件,如果摆在我们面前的是一个100G的文件呢?或者说,系统提供的php配置最多之给20MB内存而你又无法修改呢?

我们重点是如何在内存有限的机器上读取体积几百倍于内存的文件。下面,我们把memory_limit调整成16M,开启困难模式。

202MB的文件,允许被分配的内存为16MB,所以,总体思路其实也很简单,就是一点儿一点儿地读,只要每次读取的内容小于16MB,那就一定不会有问题,首先我们感受一下一个字符一个字符读,出场嘉宾是fgetc函数:

<?php
$begin = microtime( true );
$fp = fopen( './test.log' );
while( false !== ( $ch = fgetc( $fp ) ) ){
  // ⚠️⚠️⚠️ 作为测试代码是否正确,你可以打开注释 ⚠️⚠️⚠️
  // 但是,打开注释后屏显字符会严重拖慢程序速度!也就是说程序运行速度可能远远超出屏幕显示速度
  //echo $char.PHP_EOL;
}
fclose( $fp );
$end = microtime( true );
echo "cost : ".( $end - $begin ).PHP_EOL;

运行结果如下图:

虽然只有给了16M内存,但我们还是成功将202M文件全部读出来了,只不过这个运行速度是差了那么点儿意思,不大行。不能一个字母一个字母地读,这次我们一行一行地读:

<?php
$begin = microtime( true );
$fp = fopen( './test.log', 'r' );
while( false !== ( $buffer = fgets( $fp, 4096 ) ) ){
  //echo $buffer.PHP_EOL;
}
if( !feof( $fp ) ){
  throw new Exception('... ...');
}
fclose( $fp );
$end = microtime( true );
echo "cost : ".( $end - $begin ).' sec'.PHP_EOL;

运行结果如下图:

一行一行果然比一个一个字符要快很多,转念一想吧,系统分配给我们的内存上限是16MB,那我们索性一次读取一定量容量数据看看,会不会更快:

<?php
$begin = microtime( true );
$fp = fopen( './test.log', 'r' );
while( !feof( $fp ) ){
  // 如果你要使用echo,那么,你会很惨烈...
  fread( $fp, 10240 );
}
fclose( $fp );
$end = microtime( true );
echo "cost : ".( $end - $begin ).' sec'.PHP_EOL;
exit;

保存代码,运行一把,屌了屌了!!!在内存有限的情况下,我们还把时间缩短到了0.1秒!

然后我们考虑将问题升级一下,依然是上述这个202M的文件,这次我们要求读取倒数后5行的内容,这个问题看起来屌了些许,用原来的fread啥的虽然奏效但总感觉比较愚蠢。所以,现在又得引入全新的函数来解决这个问题:ftell和fseek。其中,ftell用于告知当前文件读取指针所在位置,fseek可以手动设定文件读取指针的位置。我建议大家去手册上重点观摩一下fseek函数:点击这里

<?php
$fp = fopen( './test1.log', 'r' );
$line = 5;
$pos = -2;
$ch = '';
$content = '';
while( $line > 0 ){
  while( $ch != "\n" ){
    fseek( $fp, $pos, SEEK_END );
    $ch = fgetc( $fp );
    $pos--;
  }
  $ch = '';
  $content .= fgets( $fp );
  $line--;
}
echo $content;
exit;

其中test1.log文件的内容如下:

aa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
dddddddddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffffffffff
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
dddddddddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffffffffff
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
dddddddddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffffffffff
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
dddddddddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffffffffff
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
dddddddddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffffffffff
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
dddddddddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
ffffffffffffffffffffffffffffffff
1111111111
2222222222

保存文件并运行,结果如下图所示:

查看原文

赞 88 收藏 55 评论 5

dongsir 回答了问题 · 2019-11-13

如何用js判断浏览器是否支持svg图形

var supportSVG = function () {
    return !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect
}

关注 3 回答 2

dongsir 发布了文章 · 2019-11-02

Apache2.4+PHP5.6环境搭建

Windows下Apache+PHP+MySQL搭建web服务器的方法

环境准备:

  • Windows Server 2012
  • mysql-5.7
  • httpd-2.4
  • php-5.6 (记得官网下载时看好版本x64 VC11)

Apache(httpd)

apache 官网下载网址

下载之后新建一个wamp目录然后解压进去

然后开始修改默认配置,进入 Apache24 目录,找到 conf\httpd.conf 用编辑器打开

找到 Define SRVROOT 将后面引号中的值 修改为你存放 Apache24 的 绝对路径(我这里是F盘)

#示例
Define SRVROOT "F:/wamp/Apache24"

按需打开 apache mod_rewrite 模块

LoadModule rewrite_module modules/mod_rewrite.so

将 AllowOverride None 修改为 AllowOverride All

#查找<Directory "${SRVROOT}/htdocs">
AllowOverride None
#修改为
AllowOverride All

继续安装Apache服务,打开cmd窗口(参照官网文档

找到 bin\httpd.exe 文件的绝对路径然后 后面跟上 

httpd.exe -k install -n Apache2.4

安装成功,在Apache24目录下找到 ApacheMonitor.exe 双击运行(F:\wamp\Apache24\bin\ApacheMonitor.exe

桌面右下角出现 图标,双击打开窗口界面, 

点击 Start 开始运行

也可以在 cmd 中操作 apache 相关命令这里参照 官方文档

#停止服务
httpd.exe -k shutdown
#or
httpd.exe -k stop
#开始服务
httpd.exe -k start
#重启服务
httpd.exe -k restart

PHP

PHP官网下载,这里用的是 PHP 5.6 (5.6.37)

在wamp目录下新建一个文件夹命名为 php 然后将下载好的压缩包解压进去,将里面的 php5apache2_4.dll 加载到 apache 中,编辑器打开 apache 的 httpd.conf 增加这么一句话

LoadModule php5_module "F:/wamp/php/php5apache2_4.dll"

继续 查找 <IfModule dir_module> 增加

<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

继续添加下面这句话,让 Apache 识别 php 文件的后缀,从而对这些后缀的应用进行解析

    AddType application/x-httpd-php .php
    AddType application/x-httpd-php .php3

保存文件。

然后开始配置php,进入php的目录,把php.ini-development复制一个副本,然后将副本重命名为:php.ini,用编辑器打开

查找On windows,将 下面的extension_dir = "ext"前面的;注释去掉,然后添入ext的绝对路径

继续往下查找 Dynamic Extensions 依次为 php 的对应扩展,去掉注释就是开启。

打开一些常用的扩展

#将前面的;去掉
extension=php_curl.dll
extension=php_gd2.dll
extension=php_mbstring.dll
extension=php_mysql.dll
extension=php_mysqli.dll
extension=php_pdo_mysql.dll

修改一些php默认设置

expose_php = Off
date.timezone = Asia/Shanghai

保存,重启 apache 查看 phpinfo

这时候你发现 php.ini 的路径并没有被加载进来 官方文档 php安装常见问题

继续修改环境变量,记得将 apache 和 PHP 的 bin 路径都加入到环境变量 Path

MySQL

Mysql 官网下载地址 (Mysql5.7版本

打开之后是这样注意选好版本,演示这里用的是5.7版本,如下图:

点击链接进入如下页面:

选择 Windows 64bit

开始下载 (附百度云下载地址:mysql-5.7.23-winx64.zip) 密码:4w8q

下载好之后将压缩包 mysql-5.7.23-winx64.zip 解压出来 重命名 mysql

然后添加环境变量将 mysql 下的 bin 目录的绝对路径追加到环境变量 Path 中,

进入 cmd 操作 先生成 data 目录然后安装 MySQL 服务

初始化数据库

mysqld --initialize-insecure --user=mysql

安装 MySQL 服务

mysqld -install

启动 MySQL

net start mysql

#登录mysql
mysql -uroot -p

停止mysql

net stop mysql


安装好之后没有 my.ini 文件,如果需要修改一些参数,新建一个 my.ini 文件配置好之后放到 C:\Windows 目录下然后重启 mysql 即可

查看原文

赞 1 收藏 0 评论 0

认证与成就

  • 获得 10 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • jutils

    JavaScript常用函数库

注册于 2016-03-29
个人主页被 369 人浏览