uni-app对微信小程序云函数的适配

引言

熟悉uni-app的人应该都知道,uni-app并未对微信小程序云函数(本文统称云函数)进行相应的适配。但是,如果我们在某些业务场景的下需要使用云函数呢?我们知道,云函数可以复制到微信开发者工具,这样的话我们不得不每次编译一次就手动复制一次,不得不说麻烦至极。本文就问题做出以下解决方案。

本文环境

  1. Hbuilder X

Hbuilder X版本

  1. 微信开发者工具

微信开发者工具版本

创建云函数目录

首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions。然后先随便在里面放一些文件,这里以new_file.css为例。

修改manifest.json

在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下


"mp-weixin" : {

        /* 小程序特有相关 */

        "appid" : "wxd7de467f6e6cf741",

        "cloudfunctionRoot": "./functions/", // 这一行就是标记云函数目录的字段

        "setting" : {

            "urlCheck" : false

        },

        "usingComponents" : true

    }

编写vue.config.js

  1. 我们在项目根目录创建vue.config.js文件

  2. 写入以下内容(如路径不一样请做相应适配)


const path = require('path')

const CopyWebpackPlugin = require('copy-webpack-plugin')



module.exports = {

	configureWebpack: {

		plugins: [

			new CopyWebpackPlugin([{

				from: path.join(__dirname, 'cloudFunctions'),

				to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env

					.UNI_PLATFORM, 'cloudFunctions')

			}])

		]

	}

}
  1. 编译运行

发现提示如下内容

提示内容

说明未安装copy-webpack-plugin插件,我们手动安装一下。


npm install -save copy-webpack-plugin

TIPS: 截至2020.6.4, uni-app暂不支持copy-webpack-plugin 6.0版,请安装5.0版

📅 2021-05-16
scss/sass实现列表顺序加载动画

效果展示

列表顺序加载动画

本文会讲述如何使用scss/sass在微信小程序中实现列表顺序加载的动画。

所用的css特性

CSS animations

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术,使用CSS动画有三个主要优点:

  1. 能够非常容易地创建简单动画,你甚至不需要了解JavaScript就能创建动画。

  2. 动画运行效果良好,甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳(除非经过很好的设计)。

  3. 让浏览器控制动画序列,允许浏览器优化性能和效果,如降低位于隐藏选项卡中的动画更新频率。

css animations的属性和子属性见https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E9%85%8D%E7%BD%AE%E5%8A%A8%E7%94%BB

可主要分为两大部分,动画的实现形式和动画的属性规则。

以下仅列出本文所用的属性。

animation-timing-function

animation-timing-function 规定动画的速度曲线。

速度曲线

animation-delay

顾名思义,设置动画的持续时间,单位秒

animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

animation-fill-mode

使用keyframes定义动画序列

keyframes就是一个描述关键帧的属性,通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过CSS样式定义的,关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻,100%表示动画的最终时刻。因为这两个时间点十分重要,所以还有特殊的别名:from和to。这两个都是可选的,若from/0%或to/100%未指定,则浏览器使用计算值开始或结束动画。

示例


@keyframes list {

		0% {

			transform: scale(0);

		}



		100% {

			transform: scale(1);

		}

	}

如上代码所示,定义了一个@keyframe名字叫list,在动画开始时使用缩放0%,结束时缩放100%。那么它在整个动画的过程中,便会根据浏览器的性能展示一个从0%-100%渐变的动画。是不是根据有点意思?当然,你也可包含设置任何额外可选的关键帧,描述动画开始和结束之间的状态,比如45%。

animation.gif

至此我们已经实现了组件显示时逐渐放大的效果

所用的scss特性

以下为简介,详细内容请转至官方文档

嵌套规则 (Nested Rules)

scss/Sass允许将一个 CSS 样式嵌套进另一个样式中,内层样式仅适用于外层样式的选择器范围内。

引用父选择器:&

你可以 & 字符来明确地表示插入指定父选择器。

变量: $(Variables: $ )

以美元符开头,可当变量使用。

@mixin混入指令 (Mixin Directives)

混入(mixin)允许您定义可以在整个样式表中重复使用的样式,而避免了使用无语意的类(class),比如 .float-left。混入(mixin)还可以包含所有的CSS规则,以及任何其他在Sass文档中被允许使用的东西。

📅 2020-06-23
局域网DNS欺骗的艺术

百度定义

DNS欺骗就是攻击者冒充域名服务器的一种欺骗行为。

百度原理

如果可以冒充域名服务器,然后把查询的IP地址设为攻击者的IP地址,这样的话,用户上网就只能看到攻击者的主页,而不是用户想要取得的网站的主页了,这就是DNS欺骗的基本原理。DNS欺骗其实并不是真的“黑掉”了对方的网站,而是冒名顶替、招摇撞骗罢了。

为什么会有DNS欺骗?

其实DNS欺骗不能叫欺骗,为什么这么说,因为dns解析采取就近原则,意思是说谁能先帮我解析我就听谁的。给你解析一个假的ip就是欺骗。例如本来www.baidu.com 对应ip是202.16.25.78    ,你在本地架设一个dns服务器将www.baidu.com 解析为192.168.100.2 , 这不就等于骗了别人吗。【1】

如何防护DNS欺骗?

360安全卫士号称可以,防护DNS欺骗

2019-07-03T02:36:57.png

经实测:DNS防护并未防护成功,而局域网防护却可以找出攻击者IP,和伪装后的DNS服务器IP。但是却无法实际性的抵御DNS攻击。

2019-07-03T12:32:20.png

被攻击后如何恢复?

  1. 改host文件。

  2. 指定DNS服务器。

  3. 开代理

如何发起攻击?

申明:以下目的只有一个就是学习技术,如果有人利用本文技术进行非法操作带来的后果都是操作者自己承担,和本文以及本文作者没有任何关系。

本文环境

win10 + vmware + kali-linux-2019-02

其实新一代的win10预览版升级的WSL2已经兼容了很多linux网络设备相关操作了,比如Nmap之类的。但是因为WSL的网络连接方式只有NAT模式,这样就不利于我测试了,所以我使用的是vmware虚拟机运行KALI,网络模式如下

2019-07-03T06:21:37.png

1. 查看网络


ifconfig

2019-07-03T06:24:03.png

由上图可以看到,有两个网络连接,一个eth0有线连接,一个lo无线设备。因为我装了外置网卡,所以虚拟机下有无线连接。

确保你已经连上你想要攻击的目标网络。

2019-07-03T06:26:36.png

因为我使用的是有线连接,所以我接下来的操作都是在eth0上操作。

2. 修改DNS文件


vim /etc/ettercap/etter.dns

2019-07-03T06:28:59.png

熟悉host文件的小伙伴一看就明白,这一条条都是DNS解析记录嘛。

我们在文件最后追加


* A 192.168.0.131

这句话的意思就是,将所有的域名都解析到IP地址为192.168.0.131的主机上。而这个是我的kali的本机ip。

3. 发起DNS欺骗


ettercap -Tq -i eth0 -M arp:remote -P dns_spoof /// ///

参数就不解释啦--help就都知道啦,我只讲思路。

2019-07-03T06:34:45.png

如上图DNS欺骗就已经开始了。

4. 局域网断网攻击

因为上面我将所有的域名地址都解析到了,我的本机IP。而我本地却没有搭建任何web服务,这个时候如果用户访问网站都会出现如下图效果。

2019-07-03T06:37:21.png

由于浏览器DNS缓存的问题,此方式可能短期内对近期访问过的网站不起作用。

📅 2020-06-16

为什么需要?

微信小程序里面页面与自定义组件的区别较大,而页面的可复用程度太低了。要么就是跳转页面,要么就是copy代码。如果我们要增加代码的可复用性,就可以借用Vue组件的思想,将页面改写为自定义组件。

结构对比

两者的视图文件,样式文件没有什么区别。主要区别最大的就是js文件,我们首先来看一下两者的结构。

page.js


page({

  // 数据内容

  data:{},

  // 生命周期函数

  onLoad(){},

  // 一些自定义函数

  someMethods(){}

})

componet.js


componet({

  // 预设属性

  properties: {},

  // 数据内容

  data: {},

  //组件所在页面生命周期

  pageLifetimes: {},

  // 生命周期函数-挂载

  attached: function() {

    // 在组件实例进入页面节点树时执行

  },

  // 生命周期函数-卸载

  detached: function() {

    // 在组件实例被从页面节点树移除时执行

  },

  // 自定义函数写结构里面

  methods:{

    someMethods(){}

  }

})

我们可以看到,两者的基本相似,大同小异。所以改写起来就特别方便啦~

  1. 将page改为componet

  2. 适配生命周期函数,例如将页面onLoad()函数改写为组件的attached()函数

  3. 将自定义函数someMethods()写到Componet的methods里面

📅 2020-05-01

废话不说,进入正题,为了简便请调整项目属性为使用多字节字符集

tinyxml文件下载地址,(操作xml文件的)

http://sourceforge.net/projects/tinyxml/

一些函数功能


ValueStr     //返回元素名称

SetValue     //设置元素名称

Parent     //返回父节点对象



FirstChild    //返回第一个子节点

LastChild     //返回最后一个子节点

IterateChildren   //返回下一个子节点



InsertEndChild   //在最后一个子节点后插入子节点

InsertBeforeChild   //在指定的子节点前插入子节点

InsertAfterChild   //在指定的子节点后插入子节点

ReplaceChild    //替换指定的子节点

RemoveChild    //删除指定的子节点

Clear     //删除所有的子节点



PreviousSibling   //返回同级中前一个节点

NextSibling    //返回同级中后一个节点



NextSiblingElement   //返回同级中后一个元素

FirstChildElement   //返回第一个子元素节点

Attribute     //返回元素中的属性值

QueryValueAttribute //返回元素中的属性值

SetAttribute    //设置元素中的属性值

FirstAttribute   //返回元素中第一个属性对象

LastAttribute    //返回元素中最后一个属性对象

RemoveAttribute   //删除元素中指定的属性对象

tinyxml的添加

首先,将下载的文件解压复制到原项目目录,

然后,在解决方案中头文件添加现有项,添加进去。

接下来,在stdafx.h中包含两个头文件。

mfc中xml文件的使用

  • 第一步:建立对话框,添加CString变量(与编辑框关联起来).

  • 第二步,(信息录入)添加按钮处理消息(双击按钮即可),利用UpdataeData()更新数据,将数据录入xml文件。


TiXmlDocument *pDoc = new TiXmlDocument();//文件指针

	const char *FileName = "res\\Number.xml";//文件名

	if(!pDoc->LoadFile(FileName))

	{

		UpdateData(TRUE);

		TiXmlElement *RootElement = NULL;//根节点

		TiXmlElement *PersonElement = NULL;//子节点

 

		TiXmlDeclaration *pTd = new TiXmlDeclaration("1.0", "gb2312", "yes" );

		pDoc->LinkEndChild(pTd);

 

		RootElement = new TiXmlElement("账号数据");

		pDoc->LinkEndChild(RootElement);

         }

         else{

                RootElement = pDoc->RootElement();

              }

 

		PersonElement = new TiXmlElement("用户");

		RootElement->LinkEndChild(PersonElement);

 

		TiXmlElement *NameElement = new TiXmlElement("账号");

		PersonElement->LinkEndChild(NameElement);

		TiXmlText *Number = new TiXmlText([要存的数据]);//存的数据可为CString类型

		NameElement->LinkEndChild(Number);

 

		TiXmlElement *PassWordElement = new TiXmlElement("密码");

		PersonElement->LinkEndChild(PassWordElement);

		TiXmlText *PassWord = new TiXmlText([要存的数据]);//存的数据可为CString类型

		PassWordElement->LinkEndChild(PassWord);

                

                //你有几项就弄几段上面的代码,本例为两项数据

                pDoc->SaveFile(FileName);
  • 第三步,(信息显示)先添加list control 控件,选择report(报表)属性,同时添加变量m_ctllist1选择control类型(默认)。

然后在OnInitDialog(void)函数中添加如下代码

📅 2020-02-18
使用zsh让windows cmd变得性感又迷人

引言

首先看一张最终效果图

终端.PNG

大致思路

使用win10的linux子系统,安装zsh,默认切换zsh终端。(什么鬼,这和装虚拟机有什么不一样?放心,不一样的,慢慢看)

为什么要需要它?

  1. cmd太丑,cmder略慢,然后就是命令的不统一性。

  2. 一个好看的终端可以让程序员变得开心又愉快。

如下

截图.PNG

准备工作

  1. win10内部版本16215.0以上

  2. 打开win10开发人员模式

  3. 勾选控制面板>程序>启用windows功能>linux子系统

  4. 重启

  5. 打开应用商店>搜索linux, 选择你喜欢的linux发行版安装,我选的是ubuntu18.04,如果卸载了应用商店可以自行百度开启方式

– 至此:linux系统安装成功

在linux子系统中需要做的操作

在开始栏运行ubuntu

或者win+R,键入wsl运行。

安装zsh


sudo apt-get install zsh

设置默认shell


chsh -s /bin/zsh

安装oh-my-zsh


sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

(可选项)修改主题


nano ~/.zshrc

我的修改如下

2019-03-12T07:02:46.png

让bash每次打开自动执行zsh

重新打开终端窗口,我们目前的效果是这样的。

ssh1.PNG

然后就会发现,这丫的,这怎么跟我的win10保持文件共享呢?

让linux子系统默认打开win10用户根目录

  1. 首先找到C\\windows\\system32\\wsl.exe,复制到你的win10用户根目录。

  2. 再为根目录的bash.exe创建快捷方式发送到桌面。

  3. 运行

看,好神奇

2019-03-12T07:14:16.png

可是,,,难道每次我运行命令都要回到桌面启动?而且就不能像ubuntu那样ctrl + alt + T打开?

为适应win10的一些配置

  1. 右键点击桌面快捷方式,选择快捷键,同时按ctrl + alt + T设置快捷键。

  2. 桌面右键>选择查看>取消勾选显示桌面图标

测试ctrl + alt + T,我可能是为数不多的秀win10桌面的程序员:) (好像还是没有linux的好看?)

📅 2019-12-19

一听说QQ机器人是不是感觉有点高大上?感觉离自己有点远?不过事实就是如果你想创建,或者说拥有一个QQ机器人确实一件非常容易的事情。

创建方法

1.腾讯QQ自带的QQ小冰

2.利用第三方框架在自己电脑或者windows云主机上挂一个机器人(mypcqq,酷Q等)

这个方法的好处就是可拓展性强,可二次开发,所以我在以后主要介绍这种方法

框架一(mypcQQ)

从功能上看这个框架功能略显强大(拥有撤回检测,气泡设置,卡片消息),但是缺点也很明显那就是不稳定,页面不太友好。

框架二(酷Q机器人)

因为mypcQQ我认为实在是太不稳定了,所以我在以后的QQ机器人二次开发中着重介绍酷Q机器人的二次开发。

酷Q机器人C++SDK解析

酷Q机器人工作原理

  1. 先是QQ服务器端发送数据给酷Q客户端,酷Q根据数据判断是否触发了事件,以及触发了哪类事件,不同类事件都有一个默认的type。

  2. 然后酷Q会根据这个type在JSON中查找所有具有该type的event项目,并将这些项目按照priority从小到大的顺序排列,然后按照顺序依次向你的DLL发送指令。

  3. 指令的内容就是每个event项目所规定的function值,以及该事件的type所决定的必要参数。在你的DLL内部,会先查找指令中指定的function,找到[函数名]正确的函数,然后按[参数列表]规定的顺序代入参数,执行你写的代码。

  4. [参数列表]只规定了参数的数目、顺序和类型,而参数变量名称酷Q是不管的,也就是说只要数目顺序类型正确,参数变量的名称你可以自己修改。比如fromQQ你可以把它改成TheQNumberItFrom,或者abc,都可以,只要你自己方便就行。

  5. 最后,如何命令酷Q执行你需要的动作呢?你需要调用头文件cqp.h中声明的函数。这些函数只进行了声明,其定义在酷Q加载后会在其它DLL中定义,所以VS可能会提示这些函数未定义,但不影响编译生成,请忽视这些提示。

SDK视图

SDK文件解析

appmain.h

插件APPID的定义,内容不多,在编译前,将这里面的CQAPPID也定义为你之前的文件名AppID。规则见 http://d.cqp.me/Pro/开发/基础信息。

cqp.h

cqp.h分为常量定义和函数声明两部分。常量定义部分看不懂也没关系,关键是后面的函数声明部分。函数用途按英语意思去用

每一条声明都具有如下格式:

CQAPI([返回值类型]) 函数名;

[函数名]描述了该函数的功能,如果你看不懂英文(你还是放弃吧),JSON中的auth部分的注释有每一个函数英文名的翻译。

CQ_get开头的函数用于向QQ服务器获取一些状态信息(比如获取某个群员的信息),其它函数用于向服务器发送操作指令(比如发送消息)。get类函数返回你想要获取的信息,其它函数返回操作结果。不同的返回值对应的操作结果,在cqp.h的常量定义部分有说明。

你必须按照[参数列表]的规定调用这些函数。

appmain.cpp

这个cpp是最重要的部分,我们平常编写的功能都是在这个cpp里面,根据对应的规则调用,官方SDK里面有详细的注释。

JSON文件

在修改之前,你要明确JSON的作用:这个文件是你的DLL和酷Q之间的交流协议,它规定了酷Q该如何使用你写的DLL。

  • json规则:http://d.cqp.me/Pro/开发

  • event部分:// 事件列表,同一事件类型可重复定义(发布前请删除无用事件)

  • id:这就是个索引,只要保证你所有事件的id不重复即可

  • type:规定酷Q应该在何时触发这个事件。每种事件对应的type值是固定的,只要你设置的type值正确,酷Q就会在正确的时机触发你的事件。事件的名称无关紧要。

  • name:这个就是显示给用户看的,和你的程序没有关系。

  • function:自由定义,但不能重复,而且有格式要求:

1、由英文字母、数字、下划线构成

2、第一个字符不能是数字

3、大小写敏感,大写和小写是不同的

4、不能和这些关键字重名:https://msdn.microsoft.com/zh-cn/library/2e6a4at9.aspx

如果你需要删除一个事件,需要把一对{}内的内容以及之后的逗号完全删除,否则会报错。请注意不要删除[],而且[]内的最后一对{}后不能跟逗号,其它的必须跟逗号。

如果你需要增加新的事件,建议复制粘贴再修改,以免疏忽。

参考链接:https://cqp.cc/t/27173

这篇主要让大家对酷Q有个基本的了解,下一篇做个小例子。

2019.12.6补充

不打算搞小例子了

📅 2019-12-06
一些优秀的软件及网站推荐

分享一些个人常用的效率软件

navicat界面预览

推荐理由:极具现代化又功能强大的数据库管理软件,远摔那些上古时代软件好几条街

frp——配置容易支持多方式(dns,ssh,http..)的内网穿透软件

frp功能一览

推荐理由:配置只需几秒即可上线,而且支持多种协议,常备测试的好软件。不过需要自己有服务器,不过如果你没有的话。。。。那你还写什么代码?!

Xshell——优雅方便的远程ssh连接软件

Xshell官方介绍

enter description here

推荐理由:Xshell自诩业界最强shh客户端,我觉得它一点也没有夸大,无论从美观还是功能性来看,它都能配上业界最强。

Xftp——同上,优雅的sftp连接软件

index-xftp-3.png

因为和xshell是一家,个人觉得也是个非常方便的软件。

360压缩——无广告的轻便的压缩软件

这个就不介绍了,除了给你右键加了很多菜单外(新版可以改成一个),应该是目前我用过的最舒服的压缩软件了。

typecho——轻量级的博客软件

2019-07-01T13:25:57.png

别看官网极其简陋,但是性能确是极强,再给它换套皮肤,也是可以很好看的,我的博客就是typecho搭建的。

新媒体管家——全网平台文章同步软件(chrome插件)

2019-07-02T10:11:39.png

看,一键全网发布,多爽

V2ray——隐藏身后的**软件(ws+tls+cdn)

这是个啥软件?我不知道。。。自行百度?

宝塔面板——小白都能轻松管理服务器的软件

2019-07-02T10:14:21.png

AppNode——免费优雅的多服务器管理软件

2019-07-02T10:15:14.png

2019-07-02T10:15:39.png

WeGesture——windows下的一款鼠标手势快捷键

2019-07-02T10:16:27.png

我一般用它来管理虚拟桌面,单显示器穷尽所能

小书匠——性感优雅的markdown编辑软件

小书匠

VScode——好看且实用的代码编辑器

2019-07-02T10:19:56.png

Hbuilderx——现在一般用来写微信小程序

2019-07-02T10:21:24.png

用得最爽的代码提示,有种想我所知的感觉

光影魔术手

一个可以一键排版各种证件照的工具

光影魔术手智能排版

ScreenToGif

录屏转gif

RaiDirver

挂载网盘变本地磁盘

附加一些常用网站

墨刀——原型图设计网站

稿定设计——海报设(piao)计(qie)软件

七牛云——国内优秀的内容存储平台

cloudFlare——保护并加速任何线上网站

justmysocks

3d66.com-破解软件集群

remove.bg——快速移除背景图片

📅 2019-11-14

平常我们有些写各种网站, 个人博客系统, 物流管理系统, 通信录管理系统, 校园二手网站. 我们都知道, 只需要租用一个服务器, 再配置一个备案好的域名, 就可以在浏览器上进行访问了.

不知大家, 不知大家有没有想过, 将你搭的网站对接微信公众号, 利用微信这个大用户软件, 来为你引流呢?


| 本文环境 | 版本 |

| — | — |

| 操作系统 | Ubuntu 16.04.03 |

| 运行方式 | VMware虚拟机 |

| 编程语言 | PHP |

| 项目局域网地址 | http://192.168.253.1/audit |


enter description here

Q: 你在搞笑吗? 不是直接在微信里面打开的吗?

A: 直接用微信打开是可以, 然后你在微信里面让用户再注册一个账号? 对于大部分不想麻烦的小伙伴来说, 他们会对此忘而却步. 其实微信是提供接口, 让你可以获取到微信的用户名,和用户头像的.

一般来说分为三种情况

  1. 使用通过的微信开放平台( 注意,不是微信公众平台)

需要开发者认证

  1. 使用认证过的订阅号.

需要微信认证

  1. 使用认证过的服务号

需要微信认证

额, 那其实不是没认证就没得玩?

好吧, 实际是的确如此, 不过. 如果你真的只是想玩玩. 你可以去这儿. https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

📅 2019-10-28

一说到搭建个人博客,大家一定是第一时间想到WordPress了吧?

其实使用WordPress非常的方便,实用性也非常高,如果不知如何搭建wordpress博客,

可以去隔壁Benny的学习日记(公众号)看教程。但是如果你只是想要一个简洁的博客文章页,那么你可以试着用一下gitblog

什么是markdown(md)文件

markdown是一种轻量级的标记语言,它允许人们使用易读易写的纯文本格式编写文档。唔,通俗点就跟HTML一样。约定一些特定的符号来决定它的显示形式。它相对于HTML的优势就是,简单,使作者将关注重点放在内容上。相信大家也经历过调CSS的绝望吧?

它的语法极其简单,语法内容:

我的简书

像我这篇文章就是md文件复制的。

了解gitblog 网址http://www.gitblog.cn

gitblog官网

github地址https://github.com/jockchou/gitblog

Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。 它摆脱了在线编辑器排版困难,无法实时预览的缺点,一切都交给Markdown来完成,一篇博客就是一个Markdown文件。 同时也支持评论,代码高亮,数学公式,页面PV统计等常用功能。 Gitblog提供了不同的主题样式,你可以根据自己的喜好配置,如果你想自己制作博客主题,也是非常容易的。 Gitblog还支持整站静态导出,你完全可以导出整站静态网页部署到Github Pages。

gitblog与WordPress的区别

  1. 数据库,gitblog只有文件,没有数据库。也就是说它不需数据库,这样做的优点是简洁,适合与那些网站内容修改频率不高博客。系统更轻量级,移植性高,还可以到全站导出为静态文件。然后把它们部署到类似于githubpage平台。

  2. 框架,gitblog是使用codeigniterhttp://codeigniter.org.cn

框架(一个小型的轻量级php框架)。WordPress是完全使用自己的设计思想,不依赖于主流框架,如果你了解框架的思想,如果你想好好学习,和修改开发博客源码,你可以选择使用前者。当然对自己足够自信,你可以去研究WordPress源码。

  1. 完善性,如果你只是想搭个稳定完善的个人博客,那么不建议你使用gitblog。如果你自己的diy,探索精神比较强,或者你是个简洁控,你可以试试gitblog。

如何配置安装gitblog

  1. 去github下载源码

  2. 安装Apache+php环境

  3. 解压到网站根目录

  4. 修改配置文件conf.yaml,文件说明[https://github.com/jockchou/gitblogdoc/blob/master/posts/gitblog/config.md]

(https://github.com/jockchou/gitblogdoc/blob/master/posts/gitblog/config.md)


url: / #域名地址

title: thinkmoon #站点名称

    subtitle: #副标题

    theme: quest #主题名

    enableCache: false #是否开启缓存

    highlight: true #是否开启代码高亮

    mathjax: false #数学公式支持

    katex: false #?

    youyan: #有言ID

    baiduAnalytics: #百度统计ID

    keywords: thinkmoon #网站关键字

    description: >

        thinkmoon #网站描述

    version: 2.2

    author:

        name: 醉月思 #作者

        email: [email protected] #邮箱

        github: thinkmoon #github地址

        weibo: your-weibo #微博地址

        avatar:

    blog:

        recentSize: 5

        pageSize: 6

        pageBarSize: 5

        allBlogsForPage: false

    text:

        title: 介绍

        intro: >

            本博客使用Gitblog搭建,

            wordpress博客请访问https://thinkmoonmagic.wordpress.com

    ```



   > 你可能需要修改的配置参数:

   

   ```yaml

    url: 修改成你的域名,http://yourdomain.com,注意最后没有杠。

    title: 修改成你的博客标题

    subtitle: 修改成你的副标题

    duoshuo: GitBlog采用多说评论框,你需要申请多说账号,并在这里填写你的多说ID

    baiduAnalytics: GitBlog采用百度统计,你需要申请百度统计账号,在这里填写你的统计Key

    author:修改为你个人的信息即可

    如果你不需要评论和统计功能,删除duoshuo和baiduAnalytics这两荐即可。其他信息,可根据浏览博客页面的效果进行修改调整。

    ```



5.访问,OK了





### 编写一篇博客



> 在gitblog里面,一篇文章就是markdown文件。所有的文章都在/blog目录下,你把你写好的md文件放到这个文件夹就可以了



博客文章的属性,包括作者,题目,标签,分类目录等,由md文件里面的注释决定。[注释规范](https://github.com/jockchou/gitblogdoc/blob/master/posts/gitblog/edit.md)



例如use_gitblog_setup_blog.md



![gitblog博客文章编](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1.PNG )





上传到blog文件夹之后,主页界面刷新效果



![gitblog效果展示](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/2.PNG)



文章页效果



![gitblog文章页效果展示](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/3.PNG)



> 这儿需注意,gitblog默认是开启网站缓存的,如果你的网站更新不够频繁,你可以不用改配置,在配置conf.yaml里面修改。





### 同步wp博客到gitblog



1.  首先从wordpress后台中导出xml数据

2.  重命名为wordpress.xml

3.  使用PHP 网站根目录/index.php wp2gb 命令同步



    例如: php /var/www/html/index.php wp2gb



    运行成功会提示finished!运行后的主页俯视图

![wordpress迁移到gitblog](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/4.PNG "4")



### 完成gitblog的搭建



好啦,大功告成啦,一个gitblog博客网站就已经搭建成功了[www.thinkmoon.cn](http://www.thinkmoon.cn)
📅 2019-10-28

如果你需要及时收到服务器的运行报告,如果你嫌装客户端端软件太麻烦。那么你可以试试这个,调用WEB API推送消息到你的微信;我想这可能会是一个不错的装逼姿势。

Server酱

「Server酱」,英文名「ServerChan」,是一款「程序员」和「服务器」之间的通信软件。说人话?就是从服务器推报警和日志到手机的工具。

Server酱工作原理图

工作原理图

大致解释一下步骤:

  1. 登录Server酱官网,使用==github #800000==账号登录

  2. 绑定一个微信(你的或者你想通知的人的)

  3. 获取到SendKey(它根据这个==Sendkey #800500==区分目标)

  4. 在你发起消息的服务器或者软件调用API发送GET请求

  5. 手机微信上收到消息

技术要求

  1. 需要有一个GitHub账号,没有可以注册一个。

  2. 需要有一个微信账号,没有可以注册一个。

  3. 需要关注一个公众号,没有可以关注一下。

  4. 需要会使用Get请求,任何语言。

操作流程

1.进入官网,使用GitHub账号登录。开始绑定微信。就是使用微信扫描之后(会叫你关注一个公众号),然后在这个界面点击<检查结果并确认绑定>

微信绑定

绑定成功之后是这样子的

绑定成功

2.获取SendKey(在发送消息页面)。

SCKEY

3.首先我们来测试一下能否发送成功

在这个在线发送工具下输入你想发送的数据。

在线发送工具

4.打开微信看看效果

消息预览

消息展示

注意这个界面不要随便分享,因为这个链接里面就有你的SCKEY,如果你不想突然收到别人莫名其妙的消息,那还是自己看就好了。

5.php调用WEB API发送消息(一定得是PHP?不,你用表单都可以,It‘s up to you.)

对了,其实这个消息内容是支持markdown的哦(很好的一个设计),如果不知道什么是markdown的话。。。去百度?

写成一个函数

function weixin_notify($SCKEY,$header,$content){

	file_get_contents('https://sc.ftqq.com/'.$SCKEY.'.send?text='.urlencode($header).'&desp='.urlencode($content));

}

然后你再需要发送服务器警告的地方调用函数即可

ServerChan 工作原理分析

如果你打算做一个类似的平台的话。你首先有两个东西是必不可缺的。1,一个服务器后端。2,一个通过微信认证了的服务号

  1. 首先你得关注公众号

  2. 你扫描之后绑定微信,其实是一个区分用户的过程,来记录你的userID。比如:百词斩官方公众号通过你发特定的字符串来区别。

  3. 它的服务端通过SCKEY与userID做一个映射,然后根据你的SCKEY来发给不同的人。

  4. 服务端开放一个接口,接收你的SCKEY、title、content。然后再调用微信官方接口发送客户消息。

  5. 用户收到消息

局限与完善

  • ==首先这里的SCKEY与userID只是简单的一对一的关系,但其实如果做成一对多更好。因为这样便可以群发通知 #801400==

  • ==她这儿的的分享链接里面包含了很多个人敏感的信息,而其实这在微信的标准里面是不安全的。 #801900==

📅 2019-10-28

想达到本文效果,需使用wepy框架。不了解wepy?转https://tencent.github.io/wepy/index.html

什么是async/await?

在最新的ES7(ES2017)中提出的前端异步特性:async、await。

async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。也就是我们平常所说的异步等待。不过需注意await只能在async函数中使用

为什么需要async/await?

在async/await之前,我们有三种方式写异步代码

1. 嵌套回调

其中思想就是,a函数执行完了得到的结果后在执行b。

形如


wx.getSetting({

      success(res) {

        console.log(res.authSetting['scope.userLocation']);

        if (!res.authSetting['scope.userLocation']) {

          wx.authorize({

            scope: 'scope.userLocation',

            fail(res) {

              Toast('无法获取位置,采用默认排序');

            }

          });

        } else {

          wx.getLocation({

            type: 'wgs84',

            success(res) {

              _this.setData({ location: res });

              console.log('您的位置信息:', res);

            },

            fail() {

              Toast('无法获取位置,采用默认排序');

            }

          });

        }

      }

    });

上面的代码你不用看,就会感觉。这啥东西?乱七八糟的。这就是嵌套回调。很不巧,原生微信小程序开发就是这样的。

2. 以Promise为主的链式回调

所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。形如


var p1 = new Promise((resolve, reject) => {

 setTimeout(resolve, 1000, 'done');

 })

p1.then(data=>{

 console.log(data); // done

})

如果你的函数够多的话,那么就会一直then()下去。

📅 2019-03-06

layout: post

title: 推荐一个(神器级)服务器软件

tags:

  • 服务器软件推荐

  • 宝塔linux面板

  • 服务器管理工具

categories:

  • 软件推荐

abbrlink: f4f7

date: 2017-12-15 18:41:56


简单好用的 Linux/Windows 面板

前言:首先要说的是,它在我看来就是一件神器!

何为神器? 那就是以后遇到必装 ,而且在没有遇到更神的神器之前,将会一直使用下去。

如果你是新手:使用它:你可以不再为配置ftp,apache,mysql,ssl,等操作而发愁了,因为,所有的操作,在此神器的帮助下,都可以在你的点点戳戳之间实现,不得不拍案叫绝!

如果你是大佬:使用它,你可以不用自己配环境,找配置文件,对着黑框框,一对一下午了(当然如果对黑框框有特殊情怀的除外)

它的名字叫——“宝塔”

它是什么

它是一个,服务器面板控制端软件

它能干什么

它可以让你把一些基本的服务器操作转移到网站上的可视化操作,例如站点管理,服务管理,子网站管理,端口管理,服务器监控等

我们该如何使用它

咳咳,这是我想说的重点,接下来我将使用它傻瓜式的搭建一个支持https,支持ftp的站点。

使用环境: 服务器提供商-腾讯云

服务器系统: Centos 6.6(64位纯净版)

操作客户端:win 10企业版(1709)

SSH连接软件:MobaXterm Personal Edition(也是一大神器)

日期时间:2017年12月15日

1.ssh连接服务器

连接服务器

2.安装宝塔软件


yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh

仅支持32位系统

安装成功后是这样的

宝塔Linux面板安装成功

在这儿它说

控制面板链接为:http://119.28.73.46:8888

用户: admin

📅 2019-02-16
(超详细)快速搭建一个简易微信小程序后台网站(上)

本文实践平台:腾讯云(qcloud.com)

首先我们来看看腾讯云官方的解决方案示意图

0.png

看懂了吗?看没看懂都没关系我们开始走一遍就好了。大致步骤如下:

  1. 购买腾讯云微信小程序解决方案

  2. 部署 mysql 实例到云数据库

  3. 部署网站到服务器,使网站外网可访问

  4. 将网站与数据库连接起来

  5. 配置 SSL 证书,使网站可 https 访问

  6. 构建负载均衡,使用户可以通过负载均衡的方式访问

  7. 制作服务器镜像,将可成功访问的服务器复制

  8. 新建 N(N>0)台服务器,将服务器重装为自定义镜像

  9. test

详细如下:

  • 购买腾讯云微信小程序解决方案
  1. 进入腾讯云官网(https://www.qcloud.com)

  1. 选择解决方案>微信小程序解决方案

就选择 3 元新购活动吧,我已经购买过了,就不再这儿演示怎么购买了。

  1. 购买成功之后腾讯云会下发资源。

succeed:此过程成功标志为资源下发成功,以及收到如下站内信。

  • 部署 mysql 实例到云数据库

  1. 根据上图所提供的地址,使用数据库连接工具(如 Navicat)连接数据库进行数据传输。_

  1. 数据传输_

succeed:此过程的成功标志为,在远程数据库中可查看到相应的表和数据

  • 部署网站到服务器,使网站外网可访问
  1. 首先我们对腾讯云下发的 demo 服务器进行重装系统(精神洁癖,不重装不舒服)_

注:不重装的话,网站的根目录在/data/release/php_weapp_demo > _ > * > ** > > **

我这儿装的是 centOS 6.5。版本不同可能会对应的软件安装方式不同。 2.*为服务器安装 apache_ #安装 apache

root@localhost ~]# yum -y install httpd

📅 2019-01-16