鳕鱼天空

This is Mr Wang's Tech Blog.

微信小程序 页面监听全局变量的变化

27 November 2023 (0)

前言

在前段时间的开发过程中，遇到了一个需要监听是否有推送的需求，需要在不同的页面监听全局变量从而进行条件渲染，因此总结了一下便有了下篇文章.

介绍

当我们开发一个大型的微信小程序时，通常会涉及到多个页面或组件之间的数据传递和共享，而全局变量可以方便地实现这一需求。但是当全局变量的值发生变化时，我们需要及时地更新页面或组件的数据，以保证用户界面的实时性。这时候，我们就需要用到监听器的机制。

监听器是一种设计模式，用于在对象状态发生改变时，自动调用特定的函数。在微信小程序中，我们可以通过定义一个全局变量来存储所有的监听器函数，并在需要监听的页面或组件中注册监听器函数，以实现对全局变量的监听。当全局变量的值发生改变时，我们就可以通过遍历所有的监听器函数，并依次调用这些函数，及时更新页面或组件的数据。

示例

下面是一个在微信小程序中实现监听器机制的示例代码：

在 App.js 中定义全局变量和注册监听器方法

App({
  globalData: {
    currentUser: null, // 全局变量 currentUser
    listeners: [], // 存储监听器函数的数组
  },
  // 注册监听器函数的方法
  registerListener: function (listener) {
    this.globalData.listeners.push(listener);
  },
  // 触发监听器函数的方法
  triggerListeners: function () {
    var listeners = this.globalData.listeners;
    for (var i = 0; i < listeners.length; i++) {
      listeners[i]();
    }
  }
})

在需要监听的页面或组件中注册监听器函数

Page({
  onLoad: function () {
    // 注册监听器函数
    getApp().registerListener(this.onCurrentUserChange.bind(this));
  },
  onCurrentUserChange: function () {
    // 全局变量 currentUser 的值发生改变时，调用该函数
    this.setData({
      currentUser: getApp().globalData.currentUser
    })
  }
})

在全局变量发生改变时触发监听器函数

getApp().globalData.currentUser = {
  name: '小明',
  age: 20
};
getApp().triggerListeners();

 

.Net7 IDE智能提示汉化 (VS2022)

04 November 2023 (0)

本地化xml生成工具

工具以dotnet cli发布，使用dotnet tool进行安装

dotnet tool install -g islocalizer

.net7的汉化包已经有现成的了，可以直接进行安装

islocalizer install auto -m net7.0 -l zh-cn

工具会自动从github下载对应的包进行安装（可能需要访问加速）。 也可以通过-cc参数指定内容对照类型

  • OriginFirst: 原始内容在前
  • LocaleFirst: 本地化内容在前
  • None: 没有对照
islocalizer install auto -m net7.0 -l zh-cn -cc OriginFirst

自定义生成

如下示例生成.net6的原始内容在前的zh-cn本地化包，并使用 --------- 分隔原文和本地化内容，生成完成后的包路径会输出到控制台。

islocalizer build -m net7.0 -l zh-cn -cc OriginFirst -sl '---------'

可以通过 islocalizer build -h 查看更多的构建参数信息。

首次构建过程可能非常缓慢（需要爬取所有的页面），相关文件会被缓存（单zh-cn内容大小约3.5G）

硬币旋转翻面的view小程序实现

25 October 2023 (0) 
.coinview {
  width: 320px;
  height: 320px;
  margin-left: -160px;
  margin-top: -160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  /* animation: spin 2s linear infinite; */
}

.back, .middle,.front{
   background-size: contain;
  border-radius: 50%;
  width: 320px;
  height: 320px; 
}

.back {
  background-image: url("a.png");
}

.middle {
  background-image: url("b.png");
  position: absolute;
  top: 0;
}

.front {
  background-image: url("b.png");
  position: absolute;
  top: 0;
  transform: translateZ(10px);
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.coinview.s1 {
  animation: spin 0.25s linear infinite;
}

.coinview.to1{
  transform: rotateY(0deg);
}

.coinview.to2 {
  transform: rotateY(180deg);
}

view

<i-spin i-class="iconfont" size="large" fix wx:if="{{coining}}" custom>
  <view class="coinview {{coinTransForm?'s1':(coin180?'to1':'to2')}}" catch:tap="tapStopCoin">
    <view class="back"></view>
    <view class="middle" style="transform: translateZ(1px)"></view>
    <view class="middle" style="transform: translateZ(2px)"></view>
    <view class="middle" style="transform: translateZ(3px)"></view>
    <view class="middle" style="transform: translateZ(4px)"></view>
    <view class="middle" style="transform: translateZ(5px)"></view>
    <view class="middle" style="transform: translateZ(6px)"></view>
    <view class="middle" style="transform: translateZ(7px)"></view>
    <view class="middle" style="transform: translateZ(8px)"></view>
    <view class="middle" style="transform: translateZ(9px)"></view>
    <view class="front"></view>
  </view>
</i-spin>

 

css3定义字体名称font-family 正确字体英文名称写法（大全）

22 October 2023 (0)

css3定义字体在前端项目切图阶段常常用到，但是有时候却不知道调用某个字体对应的英文名是什么，如果稍稍写错就出不来效果，所以虽然很小的一件事，往往很多人搞错，下面就附带了css3定义字体名称font-family 正确字体英文名称写法（大全），希望对大家有用，也作为笔记，方便下次查找。

windows常见内置中文字体

字体中文名 字体英文名

宋体 SimSun（浏览器默认）

黑体 SimHei

微软雅黑 Microsoft Yahei

微软正黑体 Microsoft JhengHei

楷体 KaiTi

新宋体 NSimSun

仿宋 FangSong

OS X常见内置中文字体

字体中文名 字体英文名

苹方 PingFang SC

华文黑体 STHeiti

华文楷体 STKaiti

华文宋体 STSong

华文仿宋 STFangsong

华文中宋 STZhongsong

华文琥珀 STHupo

华文新魏 STXinwei

华文隶书 STLiti

华文行楷 STXingkai

冬青黑体简 Hiragino Sans GB

兰亭黑-简 Lantinghei SC

翩翩体-简 Hanzipen SC

手札体-简 Hannotate SC

宋体-简 Songti SC

娃娃体-简 Wawati SC

魏碑-简 Weibei SC

行楷-简 Xingkai SC

雅痞-简 Yapi SC

圆体-简 Yuanti SC

office安装后新增字体

字体中文名 字体英文名

幼圆 YouYuan

隶书 LiSu

华文细黑 STXihei

华文楷体 STKaiti

华文宋体 STSong

华文仿宋 STFangsong

华文中宋 STZhongsong

华文彩云 STCaiyun

华文琥珀 STHupo

华文新魏 STXinwei

华文隶书 STLiti

华文行楷 STXingkai

方正舒体 FZShuTi

方正姚体 FZYaoti

开源字体

字体中文名 字体英文名

思源黑体 Source Han Sans CN

思源宋体 Source Han Serif SC

文泉驿微米黑 WenQuanYi Micro Hei

版权字体（汉仪）

字体中文名 字体英文名

汉仪旗黑 HYQihei 40S

汉仪旗黑 HYQihei 50S

汉仪旗黑 HYQihei 60S

汉仪大宋简 HYDaSongJ

汉仪楷体 HYKaiti

汉仪家书简 HYJiaShuJ

汉仪PP体简 HYPPTiJ

汉仪乐喵体简 HYLeMiaoTi

汉仪小麦体 HYXiaoMaiTiJ

汉仪程行体 HYChengXingJ

汉仪黑荔枝 HYHeiLiZhiTiJ

汉仪雅酷黑W HYYaKuHeiW

汉仪大黑简 HYDaHeiJ

汉仪尚魏手书W HYShangWeiShouShuW

版权字体（方正）

字体中文名 字体英文名

方正粗雅宋简体 FZYaSongS-B-GB

方正报宋简体 FZBaoSong-Z04S

方正粗圆简体 FZCuYuan-M03S

方正大标宋简体 FZDaBiaoSong-B06S

方正大黑简体 FZDaHei-B02S

方正仿宋简体 FZFangSong-Z02S

方正黑体简体 FZHei-B01S

方正琥珀简体 FZHuPo-M04S

方正楷体简体 FZKai-Z03S

方正隶变简体 FZLiBian-S02S

方正隶书简体 FZLiShu-S01S

方正美黑简体 FZMeiHei-M07S

方正书宋简体 FZShuSong-Z01S

方正舒体简体 FZShuTi-S05S

方正水柱简体 FZShuiZhu-M08S

方正宋黑简体 FZSongHei-B07S

方正宋三简体 FZSong

方正魏碑简体 FZWeiBei-S03S

方正细等线简体 FZXiDengXian-Z06S

方正细黑一简体 FZXiHei I-Z08S

方正细圆简体 FZXiYuan-M01S

方正小标宋简体 FZXiaoBiaoSong-B05S

方正行楷简体 FZXingKai-S04S

方正姚体简体 FZYaoTi-M06S

方正中等线简体 FZZhongDengXian-Z07S

方正准圆简体 FZZhunYuan-M02S

方正综艺简体 FZZongYi-M05S

方正彩云简体 FZCaiYun-M09S

方正隶二简体 FZLiShu II-S06S

方正康体简体 FZKangTi-S07S

方正超粗黑简体 FZChaoCuHei-M10S

方正新报宋简体 FZNew BaoSong-Z12S

方正新舒体简体 FZNew ShuTi-S08S

方正黄草简体 FZHuangCao-S09S

方正少儿简体 FZShaoEr-M11S

方正稚艺简体 FZZhiYi-M12S

方正细珊瑚简体 FZXiShanHu-M13S

方正粗宋简体 FZCuSong-B09S

方正平和简体 FZPingHe-S11S

方正华隶简体 FZHuaLi-M14S

方正瘦金书简体 FZShouJinShu-S10S

方正细倩简体 FZXiQian-M15S

方正中倩简体 FZZhongQian-M16S

方正粗倩简体 FZCuQian-M17S

方正胖娃简体 FZPangWa-M18S

方正宋一简体 FZSongYi-Z13S

方正剪纸简体 FZJianZhi-M23S

方正流行体简体 FZLiuXingTi-M26S

方正祥隶简体 FZXiangLi-S17S

方正粗活意简体 FZCuHuoYi-M25S

方正胖头鱼简体 FZPangTouYu-M24S

方正卡通简体 FZKaTong-M19S

方正艺黑简体 FZYiHei-M20S

方正水黑简体 FZShuiHei-M21S

方正古隶简体 FZGuLi-S12S

方正幼线简体 FZYouXian-Z09S

方正启体简体 FZQiTi-S14S

方正小篆体 FZXiaoZhuanTi-S13T

方正硬笔楷书简体 FZYingBiKaiShu-S15S

方正毡笔黑简体 FZZhanBiHei-M22S

方正硬笔行书简体 FZYingBiXingShu-S16S

Winform实现无边框拖动的两种方式

13 September 2023 C# (0)

Winform作为桌面应用程序的一个代表，可以说是C#初学者快速入门最好的一种方式，然而随着我们的开发能力的提升，我们对UI界面的要求变得越来越高，于是我们开始不断优化、升级我们的UI界面。

Winform无边框设计是我们常用的一种方式，无边框设计意味着没有了应用程序的标题栏，也就无法直接拖动，今天主要介绍两种实现无边框拖动的方式。

第一种方式：代码实现

Point mPoint;

private void Panel_MouseDown(object sender, MouseEventArgs e)
{
mPoint = new Point(e.X, e.Y);
}

private void Panel_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
this.Location = new Point(this.Location.X + e.X - mPoint.X, this.Location.Y + e.Y - mPoint.Y);

}
}
            this.MouseDown += Form_MouseDown;
            this.MouseUp += Form_MouseUp;  
            this.MouseMove += Form_MouseMove;

这种方式使用的是自己写代码实现，将这段代码复制到界面代码中，然后选择窗体中的一个控件，比如Panel或者Label，将它们的MouseDown事件绑定代码中的MouseDown事件，MouseMove事件绑定代码中的MouseMove事件，即可。

第二种方式：Windows API

[DllImport("user32.dll")]
public static extern bool ReleaseCapture();
[DllImport("user32.dll")]
public static extern bool SendMessage(IntPtr hwnd, int wMsg, int wParam, int lParam);
public const int WM_SYSCOMMAND = 0x0112;
public const int SC_MOVE = 0xF010;
public const int HTCAPTION = 0x0002;

private void TopPanel_MouseDown(object sender, MouseEventArgs e)
{
ReleaseCapture();
SendMessage(this.Handle, WM_SYSCOMMAND, SC_MOVE + HTCAPTION, 0);
}

这种方式使用的是Windows底层的API函数，同样将这段代码复制到界面代码中，然后选择窗体中的一个控件，比如Panel或者Label，将它们的MouseDown事件绑定代码中的MouseDown事件，即可。