前言

前端标准发展史

分享主要内容

1. 原始社会
2. 石器时代
3. 铁器时代
4. 工业时代
5. 前端拓展

1. 原始社会

1.1 图示

1.2 形象

1.3 主要特征

1. 响应时间较长，小操作都需要刷整个页面
2. 页面简陋

1.4 重要元素

1. 1990 年 Netscape 浏览器
2. 1991 年 WWW 诞生
3. 1994 W3C 成立

2. 石器时代

2.1 图示

2.2 形象图

2.3 主要特征

1. 页面还是需要整体刷新
2. 页面变漂亮了
3. HTML 为骨架，CSS 为外貌，Java 为交互。

2.4 重要元素

1. PHP/JSP/ASP.NET
2. CSS

3. 铁器时代

3.1 图示

3.2 形象

3.3 主要特征

1. 支持异步请求，不用刷整个页面(Ajax 1998 创建-2006 纳入W3C)
2. 前端不再是模板
3. HTML 为骨架，CSS 为外貌，Java和 JavaScript 为交互。

3.4 重要元素

1. 浏览器兼容
2. Ajax
3. jQuery

4. 工业时代

4.1 图示

4.2 形象图

4.3 主要特征

1. 页面变得越来越复杂
2. 对用户体验要求越来越高
3. 前端开发变立体
4. 模块化/工程化
5. 技术后端化(MVVM，nginx，lua)
6. 后端微服务 / 前端更多业务逻辑

4.4 重要元素

1. Angular/React/Vue
2. MVVM
3. 前端更多的原生能力
4. HTML5
5. CommonJS / AMD(requireJS) / CMD(SeaJS) / ES6

4.5 相对铁器时代变化

5. 前端拓展

5.1 浏览器近代史

5.1.1 全球浏览器

5.1.2 全球浏览器M

5.1.3 中国浏览器

5.1.4 中国浏览器M

5.2 前端知识体系

5.3 从前端走向全端

1. node
2. react native
3. 小程序
4. PWA
5. …

本文地址 http://94275.cn/2019/11/20/fe-2008-2017/ 作者为 Zhenguo

近日读《Spring MVC 学习指南》，对 Spring MVC 有了更深一些的了解。

主要包含以下几个方面：Spring MVC 框架、模式2和 MVC 模式、Spring MVC 介绍、基于注解的控制器、数据绑定和表单标签库、转换器和格式化、验证器、表达式语言、JSTL、国际化、上传文件、下载文件。

希望本图对你有所帮助。源图连接地址：https://www.processon.com/view/5c541629e4b048f108e44c20

本文地址 http://94275.cn/2019/02/07/Spring-MVC/ 作者为 Zhenguo

近日，读《Effective JavaScript-编写高质量 JavaScript 代码的68个有效方法》，感觉很实用很不错，特整理出书中的68个方法的思维导图。

脑图如下：

原版在 ProcessOn 上创作，需要原版思维脑图请访问：https://www.processon.com/view/link/5c5464fbe4b0fa03cead9989

ProcessOn 注册地址：https://www.processon.com/i/5467870be4b054d6db9d9ad8

本文地址 http://94275.cn/2019/02/01/Effective-JavaScript/ 作者为 Zhenguo

微信小程序目前仅支持分享给好友，暂不支持直接分享到朋友圈。针对分享到朋友圈这个问题，通常的做法是生成一张海报图片然后把图片分享到朋友圈。朋友圈到我们的小程序，通过长按图片识别图中小程序码实现。

1. 基本介绍

本代码库是微信小程序的一个每日分享案例。每天会中英文美句，推荐给大家，可以点击保存图片到本地，然后分享到朋友圈（小程序暂不支持直接分享到朋友圈）。主要用到的技术点就是 canvas 画图。

欢迎微信扫码体验，有任何问题可以提意见反馈。谢谢！

效果图如下：

如果对小程序不太了解的话，可以先看我的小程序入门介绍：http://ihongqiqu.com/2018/01/10/weixin-app/

2. 遇到的问题

本小程序开发中，逻辑并不复杂。相对难处理一点就是中英文换行的问题。针对中英文换行的问题，我实现了一下换行逻辑，代码如下：

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

/**
 * 文本转换为数组，数组里面分别是每行的文本内容，支持英文分行
 * 
 * ctx Context
 * txt 待换行的文本
 * width 需要显示文本的最大宽度
 * isEng 是否是英文
 */
txt2arr: function (ctx, txt, width, isEng) {
  var chr = txt.split(isEng ? " " : "");
  var temp = "";
  var row = [];

  for (var i = 0; i < chr.length; i++) {
    var cur = chr[i];
    var tempWidth = ctx.measureText(temp).width;
    var curWidth = ctx.measureText(cur).width;
    // 需要考虑英文换行问题
    if (tempWidth + curWidth < width) {
      temp += cur;
      temp += (isEng ? " " : "");
    } else {
      row.push(temp);
      temp = "";
      temp += cur;
      temp += (isEng ? " " : "");
    }
  }

  row.push(temp);
  return row;
}

上面方法是把字符串处理为字符串数组，数组每个值代表一行，这里是换行核心逻辑，但不是全部逻辑，全部逻辑见核心代码调用。

3. 核心代码

核心的 canvas 画图逻辑代码如下：

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

drawShare: function (imgPath, sRes) {
  var ctx = wx.createContext()
  var screenWidth = wx.getSystemInfoSync().windowWidth
  var screenHeight = wx.getSystemInfoSync().screenHeight
  // 小程序码宽度
  var qrWidth = 80
  // 小程序码边距
  var qrMargin = screenHeight * 0.02
  // 小程序码路径
  var qrPath = '../../img/ic_wx_mini.jpg'

  // 画背景图
  // ctx.drawImage(this.data.background, 0, 0, screenWidth, screenHeight - 30)
  // ctx.save()

  // 画白色背景
  ctx.setFillStyle("#FFFFFF")
  ctx.fillRect(0, 0, screenWidth, screenHeight)
  ctx.save()

  // 画右上角几何图形
  ctx.setLineWidth(1)
  ctx.setStrokeStyle("#079dd8")
  ctx.setFillStyle("#079dd8")
  ctx.beginPath()
  ctx.moveTo(screenWidth * 100 / 640, 0)
  ctx.lineTo(screenWidth - screenWidth * 100 / 640, screenHeight * 140 / 1000)
  ctx.lineTo(screenWidth, screenHeight * 110 / 1000)
  ctx.lineTo(screenWidth, 0)
  ctx.fill()
  ctx.stroke()
  ctx.closePath()
  ctx.save()

  // 画日期
  var date = new Date()
  ctx.setFontSize(40)
  ctx.setFillStyle("#FF8700")
  ctx.fillText('' + date.getDate(), 15, 65)
  ctx.setFontSize(20)
  ctx.fillText('' + (date.getMonth() + 1) + '.' + date.getFullYear(), 70, 65)
  ctx.save()

  // 画每日一句-英文
  ctx.setFontSize(22)
  ctx.setFillStyle("#BBBBBB")
  console.log("shareRes : " + sRes);
  var arr = this.txt2arr(ctx, sRes.content, screenWidth * 0.9, true)
  // console.log(arr)
  for (var i = 0; i < arr.length; i++) {
    ctx.fillText('' + arr[i], 15, screenHeight * 145 / 1000 + (i + 1) * 24)
  }
  ctx.save()

  // 画每日一句-中文
  ctx.setFontSize(14)
  ctx.setFillStyle("#7D7D7D")
  // ctx.fillText(sRes.note, 15, screenHeight * 375 / 1000)
  var arrZH = this.txt2arr(ctx, sRes.note, screenWidth * 0.9, false)
  // console.log(arrCH)
  for (var k = 0; k < arrZH.length; k++) {
    ctx.fillText('' + arrZH[k], 15, screenHeight * 345 / 1000 + (k + 1) * 16)
  }
  ctx.save()

  // 画配图
  var picY = screenHeight * 0.4
  var picHeight = screenWidth * 580 / 938
  ctx.drawImage(this.data.background, 0, picY, screenWidth, picHeight)
  ctx.save()

  // 画渐变
  var grd = ctx.createLinearGradient(screenWidth / 2, picY - 2, screenWidth / 2, picY * 1.3);
  grd.addColorStop(0, 'rgba(255, 255, 255, 1)')
  grd.addColorStop(1, 'rgba(255, 255, 255, 0)')
  ctx.setFillStyle(grd)
  ctx.fillRect(0, picY - 2, screenWidth, picHeight / 3)
  ctx.save()

  // 画底部梯形
  var blueHeight = picY + picHeight;
  ctx.setLineWidth(5)
  ctx.setStrokeStyle("#079dd8")
  ctx.setFillStyle("#079dd8")
  ctx.beginPath()
  ctx.moveTo(0, blueHeight - screenWidth * 70 / 640)
  ctx.lineTo(screenWidth, blueHeight)
  ctx.lineTo(screenWidth, screenHeight)
  ctx.lineTo(0, screenHeight)
  ctx.lineTo(0, blueHeight - screenWidth * 70 / 640)
  ctx.fill()
  ctx.stroke()
  ctx.closePath()
  ctx.save()

  // 画小编的话
  ctx.setFontSize(12)
  ctx.setFillStyle("#FFFFFF")
  var arr2 = this.txt2arr(ctx, sRes.translation, screenWidth * 0.6)
  console.log(arr)
  var startHeight = blueHeight * 1.04
  for (var j = 0; j < arr2.length; j++) {
    ctx.fillText('' + arr2[j], 15, startHeight + j * 18)
  }
  ctx.save()

  // 画小程序码
  ctx.setLineWidth(1)
  ctx.beginPath()
  ctx.arc(screenWidth - qrWidth / 2 - qrMargin, screenHeight - qrWidth / 2 - qrMargin, qrWidth / 2, 0, 2 * Math.PI)
  ctx.setStrokeStyle("#ffff00")
  ctx.stroke()
  ctx.clip()
  ctx.drawImage(qrPath, screenWidth - qrWidth - qrMargin, screenHeight - qrWidth - qrMargin, qrWidth, qrWidth)
  ctx.save()

  wx.drawCanvas({
    canvasId: 'canvas',
    actions: ctx.getActions()
  })
}

有任何问题欢迎留言反馈。

本文地址 http://94275.cn/2018/11/19/wxminiapp-canvas/ 作者为 Zhenguo

1. 基本介绍

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

2. 安装

Webpack4 将命令行相关抽离到 webpack-cli 中，所以要使用 webpack 也要安装 webpack-cli。

1

npm install webpack webpack-cli webpack-dev-server -g

3. 核心概念

webpack 最核心的概念主要有以下四个：

1. entry （入口）
2. output（输出）
3. loader（加载器）
4. plugins（插件）

3.1 entry（入口）

entry 指定 weipack 应该使用哪个模块来作为构建内部依赖的开始。多页面应用也在这里配置。

webpack.config.js 的 entry 配置示例如下：

1
2
3
4
5
6
7
8

var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        index: './src/js/index.js',
        hello: './src/js/hello.js'
    }
};

3.2 output (输出)

output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

webpack.config.js 的 output 配置示例如下：

1
2
3
4
5
6
7
8
9
10
11
12

var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        index: './src/js/index.js',
        hello: './src/js/hello.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name]-[chunkhash].js'
    },
};

3.3 loader（加载器）

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

常用的 loader 有 style、css、url、html等。安装插件命令如下：

1

npm install --save-dev css-loader style-loader

webpack.config.js 的 loader 配置示例如下：

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {
                            attrs: ["img:src"]
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "[name]-[hash:5].min.[ext]",
                            limit: 10000, // size <= 20KB
                            publicPath: "static/",
                            outputPath: "static/"
                        }
                    }
                ]
            }
        ]
    }
};

3.4 plugins（插件）

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。

webpack.config.js 的 plugins 的配置示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {

    plugins: [
        new HtmlWebpackPlugin({
            // filename: "index.html",
            template: "./src/index.html",
            inject: "head",
            // chunks: ["src"], // entry中的app入口才会被打包
            minify: {
                // 压缩选项
                collapseWhitespace: true
            },
            title: 'webpack test title'
        })
    ]
};

4. 总结

webpack 主要解决了组件封装，规范测试打包上线流程，把很多需要手动处理和配置的工作工具化，给我们提供极大便利。wepack 并不复杂，熟悉核心的概念就能打造出符合我们要求的脚本。

5. 参考

webpack 官方文档地址：https://webpack.js.org/

webpack 中文文档地址：https://webpack.css88.com/

6. 代码

示例代码地址：https://github.com/jingle1267/webpack-hello.git

本文地址 http://94275.cn/2018/11/13/webpack4-intro/ 作者为 Zhenguo

本文主要内容

1. 小程序组件
2. 小程序接口
3. 小程序 vs H5
4. 小程序新特性
5. 放弃

1. 小程序组件

1.1 小程序组件脑图

1.2 小程序组件二维码

2. 小程序接口

2.1 小程序接口脑图

2.2 小程序接口二维码

2.3 登录态打通

3. 小程序 vs H5

3.1 标签对比

3.2 选图上传

3.3 开发框架对比

4. 小程序新特性

1. 支持自定义标题栏
2. 分包加载
3. 云开发

5. 放弃

5.1 遇到过的问题

5.2 微信的限制

1. 服务器域名和业务域名限制
2. 页面层级最大10
3. 服务通知 formId payId
4. 只可微信支付
5. 打开APP
6. …

5.3 大坑预警web-view

5.3.1 优点

不需重复开发，H5拿来就能用

5.3.2

1. 用户体验没有原生好
2. 限制较多，业务域名校验和数量限制
3. 原生和小程序交互能力薄弱
4. web-view层级高会覆盖其他组件

5.4 限制加强项目

1. 限制分享
2. getUserInfo
3. 打开设置

手机上看

iOS手机专享-慎扫

PPT链接地址：http://ppt.94275.cn/wxmini-in-out/index.html#/

本文地址 http://94275.cn/2018/09/20/wxmini-in-out/ 作者为 Zhenguo

话不说，直接看图：

图片来自ProcessOn，脑图链接：https://www.processon.com/view/5b4eaf41e4b0f8477d878109

本文地址 http://94275.cn/2018/08/27/weixin-mini-app-api/ 作者为 Zhenguo

话不多说，直接上脑图

图片来自ProcessOn，脑图链接：https://www.processon.com/view/5b4eaf41e4b0f8477d878109

本文地址 http://94275.cn/2018/08/21/wexin-mini-component/ 作者为 Zhenguo

https://www.processon.com/diagraming/5ad46af0e4b0518eacb413f8

本文地址 http://94275.cn/2018/04/17/git-flow/ 作者为 Zhenguo

http://on-img.com/chart_image/5a97cbcbe4b09a29d512e3dd.png

本文地址 http://94275.cn/2018/04/13/caocao/ 作者为 Zhenguo

微信小程序提供了页面模板支持，很大程度解决了页面布局复用的问题。

官方说明

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

小程序的模板并不难，下面整理了一些基本流程，方便快速上手小程序页面模板。

1. 定义模板布局

建议新建目录专门放置模板。本文在pages目录下创建了template目录。

在template目录下创建模板布局文件msg.wxml：

1
2
3
4
5
6
7
8
9
10
11

!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view class='msgBg'>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

上面代码中template表现的name是模板的id；

2. 定义模板样式

创建模板样式，建议和模板布局放到相同目录；

在template目录下的模板样式文件msg.wxss：

1
2
3
4

.msgBg {
  background: #099;
  padding: 0.5rem;
}

3. 引用模板

在需要应用模板的地方添加引用：

1
2

<!--引入模板-->
<import src="../template/msg.wxml" />

在需要使用模板的地方添加引用代码：

1
2

<!-- 使用模板 -->
<template is="msgItem" data="{{...itemOne}}" />

完成的业务引用代码如下（index.wxml）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!--引入模板-->
<import src="../template/msg.wxml" />

<view class="container">

  <!-- 使用模板 -->
  <template is="msgItem" data="{{...itemOne}}" />

  <!-- 使用模板for -->
  <block wx:for="{{items}}" wx:for-item="item">
    <template is="msgItem" data="{{...item}}" />
  </block>

</view>

is是模板id，data负责传值；data传值使用ES6展开运算符”…”，那么就不需要在模板里面添加item.XXX了。

4. 引用样式

模板样式也需要添加引用，在引用方的样式代码中添加引用代码如下：

1
2

/**引入模板的样式**/
@import "../template/msg.wxss";

完成的样式引用代码如下（index.wxss）：

1
2
3
4
5
6

/**引入模板的样式**/
@import "../template/msg.wxss";

.container {
  background: #ff0;
}

5. 赋值初始化

通过以上四个步骤，模板布局和样式都有了，剩下的就是如何复制和展示数据了。 代码如下（index.js）：

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

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    itemOne: {
      index: 999,
      msg: 'this is a template',
      time: '2018-01-08'
    },
    items: [{
      index: 0,
      msg: 'template1',
      time: '2016-09-15'
    },
    {
      index: 1,
      msg: 'emplate2',
      time: '2016-09-16'
    },
    {
      index: 2,
      msg: 'emplate3',
      time: '2016-09-17'
    },
    {
      index: 3,
      msg: 'emplate4',
      time: '2016-09-18'
    }
    ]
  }
  
})

官方介绍地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

本文地址 http://94275.cn/2018/04/09/wxminiapp-template/ 作者为 Zhenguo

微信小程序因其“小”和“轻”，以及微信爸爸的用户量，受到了大家的青睐。下面总结了，我在开发微信小程序的过程中，踩过的坑。希望能够帮助更多的人。

1. 服务器域名

微信小程序中所有网络通信域名，首先都需要在工信部备案，其次都需要在小程序后台添加合法域名。域名主要有四类：request域名、socket域名、upload域名、download域名；其次，在修改次数上也有限制。下面详细说。

2. 业务域名

这个问题主要针对使用web-view组件的情况。web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

web-view中需要加载的所有域名都需要在微信小程序后台配置。

正确的打开方式是：

1. 在微信开发者后台-设置-开发设置中添加/修改业务域名，下载校验文件。
2. 在需要访问的业务域名根目录添加第一步下载的校验文件。
3. 在第一步打开的窗口添加业务域名（必须有第2步，否则添加不成功）。

如果我们需要在web-view中显示的是一些单页面，这没有什么问题。但是，如果使用了复合页面，涉及到很多页面跳转，那就麻烦了。所有涉及跳转的域名都需要业务域名校验，对是所有的业务域名。如果跳转到三方域名，或者很多外链，添加业务域名校验文件就是很大的难题。

这可能也是微信故意这样设计，微信不推荐使用web-view做很重的业务，这个符合微信小程序的小而轻原则。

3. 次数限制

4. 数量限制

本文地址 http://94275.cn/2018/04/04/wx-mini-app-bug/ 作者为 Zhenguo

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

环境配置

申请账号

访问 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据提示完成注册账号。注册完成后，登陆 https://mp.weixin.qq.com ，在设置-开发设置中可以找到小程序 AppID。

安装开发工具

微信小程序开发工具下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818
开发工具详细介绍见：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=201818

Hello World

打开微信开发者工具，登录后点击右下角”+”按钮，进入如下界面：

选择项目目录，填写刚刚申请的 AppID 和x项目名称。并选中”建立普通快速启动模板”。点击创建，Hello World就创建出来了。

项目结构介绍

项目目录结构如图：

APP.JSON

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

例子：

1
2
3
4
5
6
7
8
9
10
11
12

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages 和 window 介绍：

1. pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段：小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

WXML

类似网页编程的HTML，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

从上面代码可以看出，代码风格很像HTML，同时也有自己的语法如wx:if和wx:else。更多语法请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ 。

WXSS

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

更多详细请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

JavaScript

和用户交互需要使用 JavaScript 来实现。我们常见的网络请求，事件处理等都有 JavaScript 来处理。关于 JavaScript 这里不做介绍了。

上线

预览

如果开发中需要预览和测试，微信需要添加相应的权限。添加预览入口：小程序管理后台 - 用户身份 – 成员管理。

添加不会推送告知被添加者。添加成功之后，使用被添加者的微信，扫描微信开发工具生成的预览二维码就可以看到开发的微信小程序了。

提交审核

开发完成，通过点击微信开发者工具右上角的上传，可以上传到小程序管理后台。在开发管理中可以找到提交的版本。这个时候的版本还是预览版本，通过扫描二维码，可以让添加权限的微信用户体验。

如果测试确认没问题可以上线，点击管理后台-开发管理中的提交审核。提交审核，第一个版本审核时间可能会有几天，之后审核时间会缩短大概一天左右。

发布

审核通过之后，管理员会收到微信推送。这个时候，我们的小程序还没有上线，我们可以再后天点击发布按钮来控制什么时间发布。

Samples

官方例子	我的例子
源码地址：https://github.com/jingle1267/demo	源码地址：https://github.com/jingle1267/HelloCodeDev

本文地址 http://94275.cn/2018/01/10/weixin-app/ 作者为 Zhenguo

http://on-img.com/chart_image/5a547978e4b01acda594932b.png

本文地址 http://94275.cn/2018/01/09/SiMaYi/ 作者为 Zhenguo

  这几年，国内一些对历史毫无了解的年轻人动辄喜欢拿毛主席说事，可看看仇视红色中国的美国人是怎么评价毛泽东的：

   是谁能把一个贫瘠的国家，在短短几年的时间里，迅速崛起于世界强国的行列？事实上我记得美国以前有一位总统乔治·华盛顿。他以贫弱的美国北方军，经过多年苦战打败了先进的南方殖民军。使得美国获得了统一与和平。但是，在东方的一个大国，中国，同样出现了一位优秀的领导者：毛泽东先生。正是他领导着他的人民，在贫困，饥饿，压力下却取得了远远超越乔治·华盛顿的伟大成就…1949年，中国在毛先生领导下建立了红色政权，同时也揭开了中国人觉醒的时代。

  1950年我们可爱的总统大人，他觉得北韩十分不听话，同时他更加厌恶新生的红色中国，为了灭绝赤祸，他决心先打掉北韩，从而占领亚洲大陆一端，再谋求最终消灭赤色中国。随即他调兵遣将， 以联合国安理会的名义，18国集团为核心，总计出兵51万3千 人。坦克2400辆。战机4000架。各型火炮5万门同时动用了原美国海军第1，2， 3，7四只舰队，排山倒海的杀向北韩。在他看来，这样现代化的庞大战斗集群，任何一个国家，哪怕是当时的苏联也不敢与之交手。然而，他似乎忘记了，那位毛先生伟大的军事战略胆量。毛在前苏联犹豫迟疑下，悍然单方面出兵抗击美国联军。于是一场惊人的战争就此爆发了。

  100万中国士兵，在没有远程炮火支援，没有空中火力掩护，没有地面装甲集群突击的情况下，依靠着最原始的卡宾枪（冲锋枪），手雷。打败了强大的美国联军。这也是人类历史上，首次开创了一个国家单独击败了世界力量的先例。但是，中国人也遭受了525000人的惨烈伤亡。但是对于一个几年前还被日本军队肆意侵略蹂躏的国家，在短短几年后，突然间打败了世界上当时最强军事同盟“北大西洋公约组织”的奇迹除了毛先生敢于创造， 任何人都不可能做到。 美国就这样丢下了113000名阵亡士兵，带着84000名伤员，以及换回来的45000名被俘人员迈着沉重的脚步，蹒跚的回到了自己的老家。

  前苏联的伟大人物赫鲁晓夫先生，上台后，他觉得中共的毛太不懂得什么叫尊重苏联，竟敢违背他的指令。因此，他发动了一 场更加荒谬的战役——中苏珍宝岛战役。苏军以远东集团军的1个坦克旅，3个摩托化步兵团，总计约20000人在没有事先警告的情况下对中国采取了军事行动。而中国当时最强的主战坦克T59 型也就是前苏联的T54A。战斗全重只有36吨。如果与前苏联最新的T62型坦克对比， 可以说对方无需开火，使用自身就可以将T59 撞翻。 毛先生在接到边防军告警电报后， 他做出了最快决定：打！就把他打疼！结果苏联人丢下了约1个团的装备以及成批尸体气恼的回家去了。 赫鲁晓夫接到失败的电报后，召开了紧急军事会议，先后撤职了隶属于苏联远东集团军1位元帅（坦克装甲诸兵种元帅），3名大将，四名上将，24名中将、少将。抓捕了远东红旗134师（主力师）营级以上全部军事主官。

  在毛先生对外战争历史中，还有一场值得提起，那就是中印边界之战：麦克马洪线。 印度为了夺取那块不毛之地，与中国军队公然交手。其实在印度背后有输了韩战无处撒气的华盛顿，有丢了珍宝岛满脸怒火的克里姆林宫。有祈求可以捞足好处的大英帝国等等。他们几乎出现了前所未有的合作！ 苏联低价贷款给印度尼赫鲁，装备了7个印度陆军师。华盛顿给了尼赫鲁大批战备物资。英国把自己的那些老式火炮都给了印度。一时间印度成了当时世界两大集团的宠儿。 但是，短短的30天时间，印度军队全军溃败。当时在第2师作战术指挥教导的洛克．弗菲希尔准将说：你见过非洲的斑马群奔跑吗？但是不如印度军队溃逃更加壮观。 8940名印度军人葬身山谷，1370名士兵被俘，1名准将被击毙，亚洲第一旅：“锡克”旅完了。英国全资资助“廓尔柯”营完了。而毛先生在他的官邸中南海，战前就曾说：不管你是印苏联军，还是美印联军，即便是再来一次八国联军我们中国也要与你们打！打出一个真理来。 毛先生的英明是前所未有的。中国拿回来了土地，消灭了印度联军，打败了美国与苏联的再一次的恐吓，这就是毛先生。

  毛先生一贯坚持自力更生，也是由于他的如此英明，中国建立了自己的核武器工业。制造远程洲际导弹。可是今天的中国人，是不是还都记得我们这位罕见的民族伟人呢？ ……看过之后让人肃然起敬！让我们一起动手，把这篇文章传播出去了，让我们的后代，永远记得这位伟人！ 喜欢的就转一下，至少我很愿意再看一遍。

  12月26日毛先生的生日，中国人的圣诞节！

本文地址 http://94275.cn/2017/12/26/Mr.-Mao/ 作者为 Zhenguo

LiveData 是一个数据持有者类，它持有一个值并允许观察该值。不同于普通的可观察者，LiveData 遵守应用程序组件的生命周期，以便 Observer 可以指定一个其应该遵守的 Lifecycle。

LiveData实现了对数据的监听，利用这点，我们可以更好的实现获取数据和数据展示解耦。本文着重讲解数据更新和更新UI逻辑分离，LiveData的LifeCycle特性暂不做介绍。

下文用一个简单的例子来介绍如何实现数据更新和UI展示解耦，实现逻辑分离。

UI展示逻辑代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

private MutableLiveData<String> username;

    private TextView tvUsername;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_live_data);

        tvUsername = findViewById(R.id.tv_username);

        username = new MutableLiveData<>();

        username.observe(this, new Observer<String>() {
            @Override
            public void onChanged(@Nullable String s) {
                tvUsername.setText(s);
            }
        });
    }

上面代码对应的布局文件代码如下：

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ihognqiqu.aac.livedata.LiveDataActivity">

    <TextView
        android:id="@+id/tv_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="40dp"
        android:text="Default User Name"
        android:textSize="20dp" />

    <Button
        android:id="@+id/tv_change_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:onClick="onClickMainThread"
        android:text="Change User Name main thread" />

    <Button
        android:id="@+id/tv_change_username_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:onClick="onClickThread"
        android:text="Change User Name background" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:padding="10dp"
        android:text="一个数据持有类，持有数据并且这个数据可以被观察被监听，和其他Observer不同的是，它和Lifecycle是绑定的。"
        android:textColor="@color/colorPrimary"
        android:textSize="17dp" />


</LinearLayout>

从上面代码可以发现，除了基本的初始化操作、设置监听，只剩下UI赋值逻辑。

主线程更新数据代码（点击id为tv_change_username的按钮执行下面的方法）：

1
2
3
4
5
6
7

/**
  * 主线程中更新数据
  * @param view
  */
 public void onClickMainThread(View view) {
     username.setValue("New User Name by main thread");
 }

子线程更新数据代码如下（点击id为tv_change_username_background的按钮执行下面这个方法）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
  * 子线程中更新数据
  * @param view
  */
 public void onClickThread(View view) {
     new Thread(new Runnable() {
         @Override
         public void run() {
             try {
                 Thread.sleep(2000);
             } catch (InterruptedException e) {
                 e.printStackTrace();
             }
             username.postValue("New User Name by background thread");
         }
     }).start();
 }

从上面同步和异步两个方法，可以发现这里只有对数据的更新逻辑，没有任何UI更新的逻辑。

例子很简单，通过使用LiveData，我们实现了业务逻辑和UI更新逻辑分离。通过使用LiveData可以使我们的架构设计更加合理，职责分工更加明确。从小的方面来看，实现了解耦代码分离，从大的方面说，这会改变应用架构设计。

参考地址：https://developer.android.com/topic/libraries/architecture/livedata.html
源码地址：https://github.com/jingle1267/AndroidArchitectureComponets

本文地址 http://94275.cn/2017/12/14/Android-LiveData/ 作者为 Zhenguo

LifeCycle 架构设计一大利器，旨在减少Activity和Fragment中代码，简化Activity和Fragment职责，实现功能代码分离，达到解耦的目的。

官方解释：

Lifecycle-aware components perform actions in response to a change in the lifecycle status of another component, such as activities and fragments. These components help you produce better-organized, and often lighter-weight code, that is easier to maintain.

译文：Lifecycle-aware 组件感知Activity和Fragment的周明周期，并能响应个生命周期状态。这个组件有助于产生更有序、更轻和更易维护的代码。

优点

LifeCycle作用主要是针对开发中遇到的一些痛点，它的优点也是基于现有的痛点，主要以下有点：

1. 减轻acitivity和fragment的负担，实现调用方代码更加更加简洁
2. 为封装组件提供更好的支持，达到组件独立，实现更好的内聚和更低的耦合
3. 复用变得更加简单
4. 实现组合优于继承的设计思想

没有LifeCycle的时候

没有LifeCycle组件的时候，我们实现一个定位功能通常会如下实现：

主程序代码如下：

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

/**
 * 定位功能一般实现方法
 */
public class LocationActivity extends AppCompatActivity {

    private LocationListener mLocationListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_location);
        mLocationListener = new LocationListener();
    }

    @Override
    protected void onStart() {
        super.onStart();
        if (mLocationListener != null) {
            mLocationListener.start();
        }
    }

    @Override
    protected void onStop() {
        super.onStop();
        if (mLocationListener != null) {
            mLocationListener.stop();
        }
    }
}

定位逻辑实现如下：

1
2
3
4
5
6
7
8
9
10
11

public class LocationListener {

    public void start() {
        Log.d("LifeCycleListener", "start");
    }

    public void stop() {
        Log.d("LifeCycleListener", "stop");
    }

}

从上面的代码，可以发现，实现一个定位，我们需要在activity和fragment处理打开定位和关闭定位。这只是一个定位，在现实开发中，我们会有统计等很多类似的功能，这样我们的activity和fragment代码会变得臃肿，且代码不易复用。

使用LifeCycle后

在我们使用LifeCycle之后，主程序如下：

1
2
3
4
5
6
7
8
9
10

public class LifeCycleActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_life_cycle);

        getLifecycle().addObserver(new LocationListener());
    }
}

定位逻辑如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/**
 * 跟生命周期相关的监听器
 * <p>
 * Created by zhenguo on 12/5/17.
 */
public class LocationListener implements LifecycleObserver {

    @OnLifecycleEvent(Lifecycle.Event.ON_START)
    public void start() {
        Log.d("LifeCycleListener", "start");
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_STOP)
    public void stop() {
        Log.d("LifeCycleListener", "stop");
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_ANY)
    void onAny(LifecycleOwner owner, Lifecycle.Event event) {
        Log.d("LifeCycleListener", "onAny:" + event.name());
    }

}

显而易见，现在调用程序只需一行代码，简化了调用方的代码，调用方不需要关心生命周期的处理逻辑，这部分逻辑转移到具体的业务实现方，实现高内聚和低耦合。

参考地址

官方地址：https://developer.android.com/topic/libraries/architecture/lifecycle.html
源码地址：https://github.com/jingle1267/AndroidArchitectureComponets

本文地址 http://94275.cn/2017/12/09/lifecycle/ 作者为 Zhenguo

最近开发了一个APP，虽然是一个小APP，但是麻雀虽小五脏俱全。以下简单介绍一下用到的开源组件。

功能类

1. ButterKnife
2. Lombok
3. android-utils
4. realm-java
5. AndroidRequest
6. RxAndroid

ButterKnife

自从用上Butter Knife，再也不用findViewById这种代码了。Android界JakeWharton大神出品，必属精品，强烈推荐使用。
Github地址：https://github.com/JakeWharton/butterknife
使用文档：http://jakewharton.github.io/butterknife/

Lombok

自从使用了Lombok，实体类告别了大段大段的set/get方法。简简单单的一行注解，告别成百上千行的实体类。
Github地址：https://github.com/rzwitserloot/lombok
视频演示地址：https://projectlombok.org/
接入文档：https://projectlombok.org/setup/android

android-utils

开发过程中，工具类必不可少。自从用了android-utils，大大方便了开发，节省了自己开发时间。
Github地址：https://github.com/jingle1267/android-utils

realm-java

Realm为移动设备而生！替代 SQLite 和 Core Data。为你省下数周的时间和数千行的代码，帮你创造出更棒的用户体验。

Github地址：https://github.com/realm/realm-java
使用文档：https://realm.io/cn/docs/java/latest/

AndroidRequest

基于retrofit和okhttp封装的网络库，用户不需要了解网络底层实现，通过简单的设置就能实现网络请求。

Github地址：https://github.com/jingle1267/AndroidRequest

RxAndroid

RxAndroid是RxJava的扩展, 可以优雅地处理异步请求。很好很强大！

GitHub 地址：https://github.com/ReactiveX/RxAndroid

UI交互类

1. TwinklingRefreshLayout
2. Glide
3. SwipeBackLayout
4. Matisse
5. CircleImageView
6. FlycoTabLayout
7. SHSegmentControl
8. flexbox-layout
9. Album
10. SuperCalendar
11. MaterialStepperView

TwinklingRefreshLayout

支持下拉刷新和上拉加载的RefreshLayout,自带越界回弹效果，支持RecyclerView,AbsListView,ScrollView,WebView。

Github地址：https://github.com/lcodecorex/TwinklingRefreshLayout

Glide

Google推荐的图片加载库，专注于流畅的滚动。

Github地址：https://github.com/bumptech/glide

SwipeBackLayout

类似微信的右滑关闭页面，本开源库支持右滑、左滑、上滑手势

Github地址：https://github.com/ikew0ng/SwipeBackLayout

Matisse

一个设计良好的本地图片／视频文件选择库，支持不同的图片加载方式。知乎出品，也是精品。

Github地址：https://github.com/zhihu/Matisse

CircleImageView

圆形图片，边框等，简单易用。

Github地址：https://github.com/hdodenhof/CircleImageView

FlycoTabLayout

Tab切换通用样式。

Github地址：https://github.com/H07000223/FlycoTabLayout

SHSegmentControl

仿iOS的Tag切换效果。

Github地址：https://github.com/7heaven/SHSegmentControl

flexbox-layout

谷歌官方流式布局，功能强大。

Github地址：https://github.com/google/flexbox-layout

Album

Album是一个MD风格的开源相册，支持国际化，支持国际化扩展；主要功能模块：选择图片与视频、拍照、录视频、画廊。

Github地址：https://github.com/yanzhenjie/Album

SuperCalendar

日历选择控件，代码简洁。自定义日历控件 支持左右无限滑动 周月切换 标记日期显示 自定义显示效果跳转到指定日期。

Github地址：https://github.com/MagicMashRoom/SuperCalendar

MaterialStepperView

带动画效果的步骤控件。

Github地址：https://github.com/fython/MaterialStepperView

本文地址 http://94275.cn/2017/11/29/Common-Android-Open-Source-Project/ 作者为 Zhenguo

RxJava是什么？

RxJava is a Java VM implementation of Reactive Extensions: a library for composing asynchronous and event-based programs by using observable sequences.

翻译:一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序的库。RxJava官方地址：https://github.com/ReactiveX/RxJava

RxJava解决了什么问题？

RxJava近两年来越来越流行，越来越收到广大开发者青睐，肯定它有哪些魔力。这魔力解决了开发者开发过程中的某些痛点，结合对RxJava的理解，你会发现，其实它解决的是异步的问题。

RxJava是如何解决异步处理的问题的呢？开发中异步的主要场景时，耗时操作需要放到单独线程中，异步任务执行成功之后，在主线程中执行更新UI等其它操作。

使用RxJava之后，通过简单设置，就可以实现执行线程的切换，开发者只需要关心具体的逻辑，不用太多关心那个线程的问题。

Hello World

下面举一个异步下载图片，主线程更新显示出来的例子（例子用Android实现）:

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

String url = "https://avatars2.githubusercontent.com/u/3887795?v=2&s=60";

// 1.将网络地址转换为Drawable
Function<String, Drawable> str2Drawable = new Function<String, Drawable>() {
    @Override
    public Drawable apply(@NonNull String s) throws Exception {
        Drawable drawable = null;
        try {
            drawable = Drawable.createFromStream(new URL(s).openStream(), "src");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return drawable;
    }
};

// 2.将drawable先是到imageview上
Consumer<Drawable> drawableConsumer = new Consumer<Drawable>() {
    @Override
    public void accept(Drawable drawable) throws Exception {
        ivWebPic.setImageDrawable(drawable);
    }
};

// 3.控制步骤1和步骤2执行线程
Observable.just(url)
        .map(str2Drawable)
        .subscribeOn(Schedulers.io())
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe(drawableConsumer);

以上代码，下载图片逻辑和展示逻辑完全分离，实现逻辑分离。这只是一个Hello World例子，RxJava很有很多炫酷的功能期待你去解锁。

本文地址 http://94275.cn/2017/10/16/RxJava-Hello-World/ 作者为 Zhenguo

要点：本文主要写使用 BottomNavigationView 和遇到的一些问题的解决办法

引言

作为谷歌 Material Design Components 新控件 BottomNavigationView， 提供应用底部导航栏的实现。没有这个控件之前，Android 底部导航栏一般通过 LinearLayout 包裹几个 Button 或使用 RadioGroup 和 RadioButton 来实现。使用 BottomNavigationView 这个控件，可以提供更好的用户体验和开发更容易。此文主要介绍在使用 BottomNavigationView 过程中遇到的几个问题。

如何使用

添加依赖

这个没有什么好说的

1

compile 'com.android.support:design:25.0.0'

添加布局

布局分两个部分，首先是总的布局：

1
2
3
4
5
6
7
8
9

<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/tab_home"
        app:itemTextColor="@color/tab_home"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

其次，配置导航项。在 res 的 menu 目录下创建上面代码中 app:menu=”@menu/bottom_menu” 要引用到的文件：

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

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_category"
        android:icon="@drawable/ic_category"
        android:title="@string/title_category" />

    <item
        android:id="@+id/navigation_activity"
        android:icon="@drawable/ic_activity"
        android:title="@string/title_activity" />

    <item
        android:id="@+id/navigation_cart"
        android:icon="@drawable/ic_cart"
        android:title="@string/title_cart" />

    <item
        android:id="@+id/navigation_mine"
        android:icon="@drawable/ic_mine"
        android:title="@string/title_mine" />

</menu>

事件处理

主要是点击事件的处理，代码如下：

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

navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.navigation_home:
                        return true;
                    case R.id.navigation_category:
                        setTitle(R.string.title_category);
                        return true;
                    case R.id.navigation_activity:
                        setTitle(R.string.title_activity);
                        return true;
                    case R.id.navigation_cart:
                        setTitle(R.string.title_cart);
                        return true;
                    case R.id.navigation_mine:
                        setTitle(R.string.title_mine);
                        return true;
                }
                return false;
            }
        });

通过以上的代码，我们的代码就能运行起来，效果图如下:：

没那么简单

很快你会发现，接入简单，但是真正符合我们的设计要求，我们还需要捣腾捣腾。

下面列举一下我遇到的问题：

1. 当导航项大于三个的时候，选中项变大，其它文字被隐藏

2. 当我们自定义默认和选中图之后，选中的效果图变色了

   问题来了，我们怎么解决呢？

   针对第一个问题，在网上查资料后，发现是 mShiftingMode 的问题，默认是开启的且谷歌没有开放修改接口。既然谷歌不给修改接口，那么我们就硬来，用反射来解决。实现代码如下：

1

BottomNavigationViewHelper.disableShiftMode(navigation);

BottomNavigationViewHelper 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

public class BottomNavigationViewHelper {

    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BottomNavigationViewHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BottomNavigationViewHelper", "Unable to change value of shift mode", e);
        }
    }

}

针对第二个问题，各种谷歌百度后，发现是控件默认着色器的问题。知道问题所在，解决起来就简单了。只需一行代码禁 tint 就好了

1

navigation.setItemIconTintList(null);

默认和选中文字的颜色，只需要添加颜色 selector 就可以了

1

app:itemTextColor="@color/tab_home"

另外，BottomNavigationView 支持的导航项数量是3-5个。

总结

谷歌 BottomNavigationView 效果是挺好的，使用很方便，特效也很不错，唯一不足就是接口不太友善。总的来说，这个控件使用容易且效果很赞，建议使用。

本文地址 http://94275.cn/2017/06/14/BottomNavigationView/ 作者为 Zhenguo