• BLOG
  • ARCHIVE
  • GITHUB
  • ABOUT
  • RSS
  • 小程序:获取用户UnionID

    Oct 16, 2019

    公众平台: 服务号/订阅号/小程序
    开放平台: 移动应用/网站应用/公众帐号开发/第三方平台开发

    • OpenID = 用户微信号 & 公众平台 APPID (两个数据加密得到的字符串)
    • UnionID = 用户微信号 & 开放平台 APPID(两个数据加密得到的字符串)
    • 同一用户,对同一个微信开放平台帐号下的不同应用,UnionID 是相同的。

    1.获取登录凭证(code)

    1
    2
    3
    4
    5
    wx.login({
    success(res) {
    // res = {code}
    }
    });

    res.code: 用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 auth.code2Session,使用 code 换取 openid 和 session_key 等信息

    ...more
  • 小程序:canvas生成海报

    Sep 29, 2019
    首先:
    • canvas 里的的位置单位都是 px;
    • 创建 canvas 标签到 wxml,Canvas 画布一定要先设置大小;
    • canvas 文字不支持自定义字体;

    1.获取 canvas 实例

    用 wx.createCanvasContext 获取小程序实例,canvasId 是在 canvas 标签上定义的 canvas-id

    1
    ctx = wx.createCanvasContext(canvasId, this);
    ...more
  • 小程序:修改上一页面的data

    Sep 23, 2019

    为什么要修改上一页面的 data 呢?

    遇到一个问题:
    有一个页面 A, A 中有表单,其中有个字段要到 B 页面去填,填好后渲染在 A 页面,因为 B 里的字段由 A 里的状态控制是否保存到 store,所以暂时不放到 全局的 store 里,其实也可以为 B 里的字段创建个临时值,但我们可以在返回 A 页面时,手动修改上一页的 data.

    ...more
  • CSS 小结(一)

    May 7, 2018

    看了这个网站后 https://atomiks.github.io/30-seconds-of-css 做了个总结,把常用的记下了,很好的网站!

    CSS 选择器

    1
    2
    3
    li:not(:last-child) /* 除最后一个子元素外的其他元素 */
    li:last-child /* 最后一个子元素 */
    /* 第一个子元素 (last-child => first-child) */

    三角形 triangle

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="triangle"></div>
    <style>
    .triangle{
    width: 0;
    height: 0;
    border-top: 20px solid #ccc;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    }
    </style>
    ...more
  • 2017年终总结

    Feb 27, 2018

    2017又是忙碌的一年
    (本想过年时写,结果一堆小娃娃围着你,真的是没法写)

    ...more
  • 如何创建一个NPM包

    Dec 8, 2017

    经常使用 npm install 命令安装各种包,这次自己尝试自己写了一个发布在npm上(其实这是第二个了)

    什么是npm

    npm 是Node 的模块管理器,功能极其强大。 它是Node 获得成功的重要原因之一。 正因为有了npm,我们只要一行命令,就能安装别人写好的模块。

    NPM 官方网站
    先来 注册一个账号

    ...more
  • 神奇的 inline-block

    Aug 13, 2017
    1
    突然发现inline-block真是个神奇的属性呢~
    当写下下面的代码的时候
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
    .div1{
    width: 200px;
    height: 200px;
    display: inline-block;
    background-color: #F98E90;
    }
    .div2{
    width: 200px;
    height: 200px;
    display: inline-block;
    background-color: #B9D7EA;
    }
    </style>
    <div class="div1"></div>
    <div class="div2"></div>
    ...more
  • 如何实现水平居中 & 垂直居中

    Aug 13, 2017

    感觉现在的自己已经超级懒了~~~已经打好草稿了好几篇博客就是懒得总结发布。。。最近经常遇到水平居中和垂直居中的问题,所以就总结了下。

    水平居中

    1. text-align: center ;
    可使用场景 块级元素包含行内元素
     h,p等块级标签,让标签内文本居中
     div块级元素让内部的行内元素居中
    
    2. margin: 0 auto;
    块级元素内的块级元素居中
    
    3. position 定位
    position: fixed / absoluted; 
     left: 50%; 
     margin-left: -width/2;
     //块级元素内包含块级元素(宽度已知)
    
    4. transform 属性
    margin-left: 50%;//(父元素的百分之50)
     transform: translate(-50%,0); //(自身宽度的50%);
     //块级元素包含块级元素
    
    ...more
  • 来一个好看的console.log

    May 10, 2017

    每天都在 console.log(),在 debug 的时候确实很好用,无意间在爱奇艺 F12 了一下,发现原来 console 还可以有样式的~? 刚给域名续了两年(比收到刚买的包包还开心),接下来看看好看的 log 吧~

    —————————————————-先来一条分割线—————————————————————–

    1
    console.log(data);

    一般的我们是这样写的,data 一般是个变量或者是个其他什么值,写法简单,打印出来也很简单,他是这样子的

    那么加样式应该怎么写呢?

    ...more
  • js控制audio音频的播放与暂停

    May 4, 2017

    上周的时候,需要做一个音频列表,后边有播放和暂停控制,真正的 audio 标签其实是不显示的,所以就要用 js 控制 audio 标签。

    首先你要知道什么是 audio 标签关于 audio,先上代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    .playSpan {
    color: #9de3fe;
    }
    .stopSpan {
    color: #ff3366;
    }
    </style>
    </head>
    <body>
    <!-- 建一个audio标签 -->
    <audio
    id="audio"
    controls="controls"
    src="https://www.w3school.com.cn/i/horse.ogg"
    ></audio>
    <!-- span标签控制音频 -->
    <span class="playSpan" onclick="play()">播放</span>
    <script>
    function play() {
    var audio = document.getElementById("audio");
    var span = document.getElementsByTagName("span")[0];
    if (span.className == "playSpan") {
    audio.play();
    span.innerText = "暂停";
    span.className = "stopSpan";
    /* 监听音频播放完成 */
    audio.addEventListener(
    "ended",
    function() {
    span.innerText = "播放";
    span.className = "playSpan";
    },
    false
    );
    } else {
    audio.pause();
    span.innerText = "播放";
    span.className = "playSpan";
    }
    }
    </script>
    </body>
    </html>
    ...more
NEXT

© 2015 - 2019 MaXiaoBao, powered by Hexo and hexo-theme-apollo.
遇见更好的自己❤