马小宝

小程序:获取用户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

<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真是个神奇的属性呢~

当写下下面的代码的时候

<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，先上代码

<!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

1.获取登录凭证（code）

首先：

1.获取 canvas 实例

CSS 选择器

三角形 triangle

什么是npm

当写下下面的代码的时候

水平居中

1. text-align: center ;

2. margin: 0 auto;

3. position 定位

4. transform 属性