图片根据容器的大小自适应
前言开发中，经常会遇到让图片自适应容器大小的场景，有时候图片尺寸和比列是不确定的。若只是简单的把图片的长和高设置为100%，可能会出现图片失真的情况。以下几种方法可实现图片根据容器的大小自适应。
第一种：通过max-width和max-height将图片的 max-width 和 max-height 设置成100%
1234.img-box__img1 { max-width: 100%; max-height: 100%;}
这个方法最为简单，但有一个缺点是，当图片尺寸较小或容器过大时，图片的长边和短边都无法填满容器，如下图所示：
第二种：通过背景图的方式图片以背景图的形式展示，利用 background-size 属性，将其设置为 contain，在保持图片宽高比的前提下缩放图片，保证把图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
12345.img-box__img2 { width: 100%; height: 100%; background: url('https://img11.360buyimg.com/ ...
微信小程序暗黑模式
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
增强 wxml 标签的表达能力
WXS 对性能的贡献就只有一点：与 WXML 是在同一个线程运行的，避免了跨线程通信的开销。
号称 『wxs 目前在 iOS 设备的效率，会比JS快 2~20倍。在 Android 则无差异
WXS模块每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
module 对象eg:
1234567891011121314// /page/tools.wxsvar foo = "'hello world' from tools.wxs";var bar = function (d) { return ...
Taro(三)
七、小程序运行时为了使 Taro 组件转换成小程序组件并运行在小程序环境下， Taro 主要做了两个方面的工作：编译以及运行时适配。编译过程会做很多工作，例如：将 JSX 转换成小程序 .wxml 模板，生成小程序的配置文件、页面及组件的代码等等。编译生成好的代码仍然不能直接运行在小程序环境里，那运行时又是如何与之协同工作的呢？…
7.1 注册程序、页面以及自定义组件在小程序中会区分程序、页面以及组件，通过调用对应的函数，并传入包含生命周期回调、事件处理函数等配置内容的 object 参数来进行注册：
123456Component({ data: {}, methods: { handleClick() {}, },});
而在 Taro 里，它们都是一个组件类：
1234class CustomComponent extends Component { state = { } handleClick () { }}...
...
Taro(二)
四、CLI 原理及不同端的运行机制4.1 taro-cli 包4.1.1 Taro 命令
taro-cli 包位于 Taro 工程的 Packages 目录下，通过 npm install -g @tarojs/cli 全局安装后，将会生成一个 Taro 命令。主要负责项目初始化、编译、构建等。直接在命令行输入 Taro ，会看到如下提示…
1234567891011121314151617➜ taro👽 Taro v0.0.63 Usage: taro <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: init [projectName] Init a project with default templete build Build a project with options update ...
京东小程序-爬坑路-二
京东小程序开发经验谈-二简介：
京麦小程序基于京东小程序，京东小程序又基于微信小程序。他们的关系（此处指功能）；微信小程序>京东小程序>京麦小程序。京麦小程序支持的，京东小程序肯定支持，但是反过来，京东小程序支持的，京麦就不一定支持了，这也是我做京麦时参考京东小程序文档踩过的坑，都是心酸泪，因为京麦没有使用文档都是参考京东小程序文档，分享的问题适用于京东小程序和京麦小程序。继经验一后续开发继续经验总结，现在做如下汇总。
picker组件-三级联动（使用禁忌）
1.picker三级联动时，它的父元素，包括它本身，都不可以使用jd:if=某变量来动态的控制它的显示和隐藏，因为这会导致切换二级时，三级不跟随联动，其原因是绑定的column-change事件不生效，组件在动态渲染时不支持绑定函数，这个结果被京麦组件的同事认证，且微信小程序有相同的问题，动态渲染的组件不支持绑定事件函数，这个我不是很能理解，但是事实就是切换不生效；
2.如果有需要就是要动态渲染，可以找别的方法来隐藏它，幸好，我的需要不需要去动态渲染；
picker及checkbox组件value值属性不可更改
1. ...
京东小程序-爬坑路-一
京东小程序开发经验谈-一简介：
京麦小程序基于京东小程序，京东小程序又基于微信小程序。他们的关系（此处指功能）；微信小程序>京东小程序>京麦小程序。京麦小程序支持的，京东小程序肯定支持，但是反过来，京东小程序支持的，京麦就不一定支持了，这也是我做京麦时参考京东小程序文档踩过的坑，都是心酸泪，因为京麦没有使用文档都是参考京东小程序文档，分享的问题适用于京东小程序和京麦小程序。下面我就我做的-拍卖管理（京麦小程序）遇到的问题，和大家分享一下，如有错误之处，望指正。
新开Webview与H5
1.使用时地址参数一定要转义，否则丢失参数；
2.小程序新开webview页面播放视频会有问题，部分手机不兼容，使用jd.openJMWebView方法，打开H5页面；
网络请求POST
1.网络请求post需要content-type设置成application/json；
2.需要后端做处理才能按照正常的post请求返回结果，否则会返回空；
Rich-text富文本转义
1.富文本目前没有文档支持，参考微信小程序试用，div\span\img标签试用没有问题，但是也有很多不支持。具体 ...
中台系统设计（二）关于字体
前言字体是界面设计中最基本的构成之一，是页面中重要的元素。对用户的阅读体验有着至关重要的作用。选择字体是一个具有创造性和情感的过程，因为不同的字体传达出不同的情感，展示不一样的品牌调性。在制定规范时科学的定义字体规范系统，不仅能够有效的表达出不同的设计风格，还能通过定义字体的字型、字阶、字重、字体颜色、字体行高间距，有效帮助设计师在设计界面时使用字体达到统一性和整体性，保证界面有良好的阅读体验。
字体属性以下分别是Sketch、ps、Figma的字符面板，从以下三款流行的设计软件就可以看出字体的一些属性：分别是：字形、字体、字型。
Font 译为：字型，是指字的粗细、宽度和样式，是一套具有同样风格和尺寸的字形。（如：Regular_16pt_SF-UI）
Typeface 译为：字体，是指一整套的字形，一个或多个字型的多尺寸的集合，例如「SF-UI」里有不同粗细（Regular、Blod、Light）和不同宽度（12pt、14pt、20pt）。
Glyph ：译为：字形，是指单个字的形体或是字体的骨骼。 同一字可以有不同的字形，而不影响其表达的意思，例如汉字中的「令」字，第三笔可 ...
Jest单元测试（中）
默认配置 Jest 的目标是在大部分 JavaScript 项目中实现开箱即用，因此本身有一些默认配置，即使我们不做任何配置也可以正确运行。如果想了解这些默认配置项具体是什么，可以通过下面的方式获取：
查看 node_modules/jest-config/build/Default.js 文件中的 defaultOptions 对象
通过以下js获取。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556const { defaults } = require('jest-config')//下面是用第二种方法获取到的 Jest 默认配置{ automock: false, bail: 0, cache: true, cacheDirectory: ' ...
css垂直居中的方式
对于前端来说，用CSS实现垂直居中是常见的工作，但自从flex出现后，因为做的差不多都是移动端的页面，大家基本上都用flex了。为了方便大家写PC端样式时可以少走弯路，我把之前工作中用到过的和别人总结的垂直居中方式一并总结在这里。
基本的DOM结构如下：
<!--hexoPostRenderEscape:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class=& ...
css行高line-height的一些理解
前言 在工作中遇到过设置行高不生效的问题，仔细研究后才知道自己对行高的理解远远不够，因此特地在这里总结一下。看一个比较简单的例子：
<!--hexoPostRenderEscape:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span ...
