发表Web3 分钟读完 (大约466个字)

LeanCloud 国际版迁移国内节点记录

从8月开始，咕言就出现了访问没数据的问题，一番排查下来无果。

直到我看到了控制台内的公告：「2022 年 8 月起，国际版共享域名不再向中国大陆提供服务」。

这才意识到，LeanCloud 的国际版直接停止了国内 IP 的请求，LeanCloud 我谢谢您。

解决的方案无非就是迁移回国内或者换一家国内的数据存储方案，或者自己写后端进行一番改造。

那么本着万物皆摸的原则！肯定是工作量越少越好，果断选择直接搬回国内！！！

阅读更多
发表Web2 分钟读完 (大约294个字)

H5 调起第三方地图软件（百度、腾讯、高德）

新的需求，项目为 H5 嵌入 App，需要让 H5 能直接调起第三方地图软件实现目标地点的导航。

食用方法很简单，直接跳转相应的 URL 即可，不过 H5 无法判断用户是否安装了相应的地图 App。

区分用户端环境

1
2
3
4
5
6
7
let ua = navigator.userAgent.toLowerCase()
if (ua.indexOf('like mac os x') > -1) {
    this.OS = 'IOS'
}
if (ua.indexOf('android') > -1) {
    this.OS = 'Android'
}
阅读更多
发表Web2 分钟读完 (大约225个字)

VSCode 使用代码片段快捷生成 Vue3 模板

习惯了 Webstorm 快捷的代码模板，而 VSCode 默认是没有 Vue3 代码模板的，无法愉快的食用 Vue3，那就扒贴自己创建一个模板！

创建模板：

  1. 界面右上角「文件」-> 「首选项」-> 「配置用户代码片段」-> 「新建全局代码片段文件」-> 键入vue3.json 回车。

  2. 进行一个copy，具体模板自由发挥。

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
{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	//  "prefix": "log",
	//  "body": [
	//    "console.log('$1');",
	//    "$2"
	//  ],
	//  "description": "Log output to console"
	// }
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup lang='ts'>",
			"$1",
			"</script>",
			"",
			"<style scoped lang='stylus'>",
			"</style>"
		],
		"description": "Log output to console"
	}
}
阅读更多
发表Web2 分钟读完 (大约296个字)

使用 Crypto.js 实现 AES 加密解密

新的需求，前后端通信需要将数据加密后再传输，敲定了使用 AES。

安装：

1
2
npm install crypto-js
npm install --save @types/crypto-js

参数：

1.AES加密算法，ECB & CBC。

2.32位秘钥key（通过给定秘钥取md5值获得），”123456”。

3.16位初始向量iv，秘钥key的md5值前16位。

4.加密数据，”123456789”。

阅读更多
发表Web1 分钟读完 (大约152个字)

微信小程序 IOS 端输入框提示存储密码的解决方法

由于 IOS 系统「自动填充密码」这个功能是默认开启的，在小程序的登录页面，当填写完 账号密码的 input 框光标离开后，选择不存储的话，有一定几率登录的 button 按钮会无反应。

解决方法：

  1. 在设备上把「自动填充密码」关闭，不过一般用户不会自行关闭。

  2. 在账号及密码中间添加一个类型为 password 的 input 框，并且让他不可见，不能使用 display:none;。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<form>
  <view>
    <input name="loginName" maxlength="11" placeholder="请输入账号" />
  </view>
  <view style="width: 1rpx;height: 1rpx;overflow: hidden;">
    <input type="password"></input>
  </view>
  <view>
    <input name="password" maxlength="16" type="password" placeholder="请输入密码" />
  </view>
  <button form-type="submit">登录</button>
</form>
发表Web1 分钟读完 (大约149个字)

uni-app 实现汉字按拼音首字母排序

索引列表页面需要利用首字母区分字段，后端没返回，那么前端来做。

首先找一个现有的轮子：https://github.com/xinglie/pinyin。

安装

1
npm i --save jian-pinyin

引用

1
2
import Pinyin from 'jian-pinyin'
const Pinyin = require('jian-pinyin')

使用实例

1
2
console.log(Pinyin.getSpell('疯狂星期四！'));
// feng,kuang,xing,[qi,ji],si,!

根据具体情况封装一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cityList() {
    let letters = "ABCDEFGHIJKLNMOPQRSTWXYZ".split('');
    letters.map(item => {
        this.city.push({
            title: item,
            item: []
        })
    })
},
sort(obj) {
    let letters = "ABCDEFGHIJKLNMOPQRSTUVWXYZ".split('');
    obj.map(item) => {
        let first = Pinyin.getSpell(item.Name).split(',').join('').toUpperCase()[0];
        let num = letters.indexOf(first);
        this.city[num].item.push(item);
    })
}
发表Web2 分钟读完 (大约372个字)

uni-app 使用 Canvas 实现随机验证码

简单小组件，利用 Canvas 生产图片，然后返回相应的验证码。

Template 部分

1
2
3
<view class="dt-verification">
  <canvas :style="{width: width, height: height}" canvas-id="myCanvas"></canvas>
</view>
阅读更多
发表Web3 分钟读完 (大约391个字)

又拍云 + PicGo 搭建图床

之前在废话胶囊插入图片都是再用 ImgURL 这个免费图床，但显然免费的图床载入速度不是很理想。

于是就着手考虑使用又拍云 + PicGo 的组合来存储和使用博客还有废话胶囊的图片。

并且各家的云存储都可以薅到免费的空间，譬如这次使用的又拍云。

在加入又拍云联盟后每个月可以免费使用 10GB 存储空间以及 15GB 流量，对于普通的个人博客，这个大小是肯定足够使用的，而代价就是要在页尾放上又拍云的跳转链接 Logo。

阅读更多
发表Web4 分钟读完 (大约669个字)

uni-app 踩坑心路历程

拧螺丝日常。

uni-app 引入 iconfont 编译失败

使用绝对路径：

1
2
3
4
@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('./static/iconfont/iconfont.ttf') format('truetype');
}

生成二维码

uQRCode 二维码生成插件 - DCloud 插件市场

在 template 中创建 <canvas/> 并设置 id，画布宽高

1
<canvas id="qrcode" canvas-id="qrcode" style="width: 354px;height: 354px;" />
阅读更多
关注我

链接

分类

归档

标签

Echarts1
Hexo3
Icarus2
JavaScript1
LeanCloud1
Mac2
PicGo1
Quasar1
TypeScript1
Vue31
WebStorm1
uni-app4
又拍云1
图床1
微信小程序1
攒机1
机箱1
阿里云1
×