微信小程序项目实战算是完成了，耗时5天左右

作者: Chuwen
时间: 2021-01-17
分类: JavaScript
评论

*目录*

[TOC]

# 为什么学习微信小程序

> 其实我之前学习过小程序，只不过是看着开发文档做的，想要什么功能翻翻文档，网上搜一搜，路程比较艰辛。
最早应该可以追溯到 **2019年7月**，萌生了做一个**校园工具类小程序**——提供简单的空教室查询、课程表查询，当时确实是做出了样子，但是做了几天发现页面太难了就**放弃**了，当时自己 CSS 水平有限。
>
> 然后又在去年2020年4月份（因疫情在线学习），心血来潮又拾起了，重新再做，当时做的比较完善了，但是由于接口是自己通过自己服务器代理的方式去获取的，`Cookie` 要时不时的更新下。
> 当时是想过模拟登陆的，但是我们学校的教务系统你必须先登陆一个**数字校园**（有验证码），然后你在里面点击教务系统，经过跳转几次才能成功进入教务系统，反正很复杂，然后就放弃了。
>
> 当然也让一同学认识教务系统的老师帮我问了下能不能开放下一些接口，得到的回复是**企业微信**有一些功能。
因为当时自己和那个老师不熟悉，也就没多问。

本来我是打算学习 Vue.js，然后我某天远程帮助同学解决问题，看到她浏览器放着 学习微信小程序 的视频。
因为她是第一次学习，我是之前就学习过的，想着自己也去学习，学会了还可解决她所遇到的问题，加快学习效率。

## 部分预览图
![](https://cdn.nowtime.cc/2021/01/18/3623327407.png)

# 通过这次学习，收获了到了什么

通过这次完整的项目实例，确实收获到了很多，比如：

## 组件封装
> 仔细一学，发现并不是很难

## 子组件传递数据到父组件

## 一些优化技巧
比如**搜索防抖**：
当用户在输入框搜索，你需要实时监听 input change 事件，然后向接口查询数据。但是如果不做防抖，用户每输入一个字母就会搜索一次，显然就会造成服务器压力。
解决办法就是设置一个定时器，如果指定时间内用户没有再输入内容，就开始请求数据，如果在指定时间内还再输入，就清楚定时器...

## 了解了 ES5/6/7 语法
> 只能说自己火(tai)星(lan)了，那么好用的东西现在才知道

### Promise
根据 MDN 的解释，是为了避免 `回调地狱`，不过没看太懂，但是我会继续了解

参考链接：
- [MDN：使用 Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises "使用 Promise")
- [MDN：Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")

### async 和 await
> async functions 和 await 关键字是最近添加到 JavaScript 语言里面的。它们是 ECMAScript 2017 JavaScript版的一部分（参见 [ECMAScript Next support in Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla "ECMAScript Next support in Mozilla")）。

这个真的特别好用，与异步的方法配合使用，使之变为同步的，很像如 `PHP` 了

参考链接：
- [MDN：async和await:让异步编程更简单](https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5/Async_await "async和await:让异步编程更简单")

### 解构赋值
相见恨晚，对于如对象的赋值真的太方便了

解构对象：
```javascript
let obj = {
	name: 'chuwen',
	age: 20,
	sex: '男'
}

//一般我们会这么做
//这样做造成了很大的冗余
let name = obj.name,
	age = obj.age,
	sex = obj.sex

//但是用上 “解构赋值”
//写成这样就减少冗余，并且很清晰
let {name, age, sex} = obj

//运行结果和上述的老方法是一致的
console.log(name, age, sex)
```

解构数组、交换变量...
这里不做过多说明，详情请前往 [MDN：解构赋值](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise "解构赋值") 查看

# 学习了多久
视频总共 130 集，我从第 50 集开始看的
![视频总共 130 集，我从第 50 集开始看的](https://cdn.nowtime.cc/2021/01/17/2999357928.png)

大概学习了 6 天左右，因为自己有些基础，我就开倍速看了，当然不是完全跟着视频做的，会自己一直做下去，再返回看视频，看和视频讲的有什么不同，再去优化。
布局这样一块，思路是很清晰了，可能是之前自己学习 Android 的时候，布局写多了吧

![截图日期：2021-01-17 星期日](https://cdn.nowtime.cc/2021/01/17/628215217.png)

## “行百里者半九十”
很庆幸自己坚持下来了，没有半途而废。

## 不完整的 Git commit 记录

> 本来是打算公开的，但是我在 commit author 里，一不小心提交了**私密信息**，然后只能设置为私有仓库了

![不完整的 Git commit 记录](https://cdn.nowtime.cc/2021/01/17/1169551199.png)

微信小程序使用 this.setData 修改 Array 的子属性值

作者: Chuwen
时间: 2021-01-16
分类: JavaScript
评论

JavaScript 使用 protobuf —— 支持 web 端交互使用

作者: Chuwen
时间: 2020-08-08
分类: JavaScript
评论

>转载自：https://bobjin.com/blog/view/54737b708031d8931158129c5c44a843.html

# ProtoBuf 简介
Protocol Buffer的简称。Google旗下的一款平台无关，语言无关，可扩展的序列化结构数据格式，适合用于数据存储，作为不同应用、语言之间相互通信的数据交换格式,序列化后的数据为二进制数据（pb格式的数据），类比XML、JSON。

protobuf最先支持C++ C# Go JAVA Python PHP语言，最近发布的代码包又支持了JavaScript，今天就来谈下，js怎么使用protobuf。

官网地址 https://developers.google.com/protocol-buffers/

# 安装protobuf编译器
从github上下载编译器源码安装包，https://github.com/protocolbuffers/protobuf/releases

编译安装， 目前仅支持unix类型的系统。

# 定义一个.proto文件
address.proto文件
```
message Address
{
    required string province  = 1;
    required string city = 2;
    required string county = 3;
}
```

# 编译生成访问类文件

运行下面的命令
```
protoc --js_out=import_style=commonjs,binary:. address.proto
```
会当前目录生成

```address_pb.js```

其中的 `--js_out` 的语法如下：

```--js_out=[OPTIONS:]output_dir```
如上面的例子中的option为 import_style=commonjs,binary， "."为生成文件的目录，这里为当前目录

# 打包为web可用的js文件
> 前置条件：需要安装npm。npm一般在安装nodejs的时候就会自动安装。

安装库文件的引用库
`npm install -g require`

安装打包成前端使用的js文件
`npm install -g browserify`

安装protobuf的库文件
`npm install google-protobuf`

打包js文件export.js
```
var address = require('./address_pb');
module.exports = {
    DataProto: address
}
```

编译生成可用js文件
`browserify exports.js -o  address_main.js`

# API
普通类型字段（required/optional）

get{FIELD}() // return field value

set{FIELD}(value) // set field value to value

clear{FIELD}(value) // clear filed value

数组类型字段操作（repeated）

add{FIELD}(value) // add one value to field

clear{FIELD}List() // clear filed

get{FIELD}List() // return array of field values

setInterestList(array)// set array

序列化/反序列化

serializeBinary() // 序列化

deserializeBinary(bin) // 反序列化（静态方法）

调试

toObject() // 打印数据

# 使用
```
<html>  
    <head>  
        <script type="text/javascript" src="./js/person_main.js"></script> 
    </head>
    <body>
        protobuf
    </body>
        <script type="text/javascript">
            var address1 = new proto.Address();
            address1.setProvince("北京");
            address1.setCity("北京");
            address1.setCounty("海淀");
            console.log(address1.toObject());
        </script>
</html>
```

Ajax 跨域请求 Cookie 无法携带/保存的解决办法

作者: Chuwen
时间: 2020-03-17
分类: JavaScript
评论

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关

作者: Chuwen
时间: 2020-02-15
分类: JavaScript
评论

Darkmode.Js

🌓黑暗模式/夜间模式，只需要几秒钟就可以给你的网站添加这个功能
本站已经添加，你可以看到网站左下方有个小按钮，你点击 Ta 预览以下效果吧！

该库使用 CSS mix-blend-mode 来将暗模式带入您的任何网站。只需复制粘贴该片段，您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的，内置于 VanillaJS 中。默认情况下，它也使用 localstorage，因此您的上一次设置将被记住！

特点

窗口小部件自动显示
保存用户选择
如果操作系统偏好的主题为深色，则自动显示Darkmode（如果浏览器支持prefers-color-scheme）
可以以编程方式使用而无需小部件

WordPress 插件

如果您使用的是 Wordpress，则可能需要看看基于 Darkmode.js 的这些插件：

简单方法（使用JSDelivr CDN）

只需将此代码添加到您的 html 页面：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>new Darkmode().showWidget();</script>

高级调用参数：

- 阅读剩余部分 -

分类 JavaScript 下的文章

微信小程序项目实战算是完成了，耗时5天左右

微信小程序使用 this.setData 修改 Array 的子属性值

JavaScript 使用 protobuf —— 支持 web 端交互使用

Ajax 跨域请求 Cookie 无法携带/保存的解决办法

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关

Darkmode.Js

特点

WordPress 插件

简单方法（使用JSDelivr CDN）

高级调用参数：

最新文章

最近回复

分类

归档

其它

分类 JavaScript 下的文章

微信小程序项目实战算是完成了，耗时5天左右

微信小程序使用 this.setData 修改 Array 的子属性值

JavaScript 使用 protobuf —— 支持 web 端交互使用

Ajax 跨域请求 Cookie 无法携带/保存的解决办法

2 行代码搞定给你的网页加 黑暗模式(夜间模式)开关

Darkmode.Js

特点

WordPress 插件

简单方法（使用JSDelivr CDN）

高级调用参数：

最新文章

最近回复

分类

归档

其它

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关