微信小程序中判断用户是否已关注公众号的两种实现
背景： 最近的一个小程序项目中有这么一个需求：进入我的主页后, 如果用户没有关注过我们的公众号, 则展示一个引导关注公众号组件, 点击后跳转到一篇公众号文章, 指引用户进行关注，用户完成关注隐藏该组件。 方式一(前后端参与)： 由于对微信的UnionID机制一知半解（知道用户在同一个开放平台下……
分类 前端 articles
Vue.js中 watch 的高级用法
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName; } } }) 上面的代码的效果是，当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 handler方法和immediate属性 这里 watch 的一个特点是，最初绑定的时候是不会执行的，……
Vue3 Composition API: 对比ref和reactive
Vue2 回顾 首先回顾一下在Vue2中我们是如何创建一个响应式数据 (reactive data)的： Vue3新特性 ref的使用 而在Vue3中，我们可以用Composition API: ref 来改写上述代码： ref 的作用就是将一个原始数据类型（primitive data type）转换成一个带有响应式类型 的数据类型，原始数据类型共……
微信小程序全局变量监听
需求：在任意一个页面上实时监听全局变量发生的改变。 第一步 新建 utils 文件夹，并在文件夹中新建 onEvent.js 文件。 var events = {}; function on(name, self, callback) { var tuple = [self, callback]; var callbacks = events[name]; if (Array.isArray(callbacks)) { callbacks.push(tuple); } else { events[name] = [tuple]; } } function remove(name, self) { var callbacks = events[name]; if (Array.isArray(callbacks)) { events[name] = callbacks.filter((tuple) => { return tuple[0] != self; }) } } function emit(name, data) { var callbacks = events[name]; if (Array.isArray(callbacks)) { callbacks.map((tuple) => { var self = tuple[0]; var callback = tuple[1]; callback.call(self, data); }) } } exports.on = on; exports.remove = remove; exports.emit = emit; 第二步 在……
JavaScript 中如何判断变量是否为数字
简介 JavaScript 是一种动态类型语言，这意味着解释器在运行时确定变量的类型。实际上，这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据。如果没有文档和一致性，我们在使用代码时并不总是知道变量的类型。 当我们期望一个变量是数字时，对字符串或数组进行操作可能会在代码中导致奇怪的结果。在本……
Vue3开发踩坑
期待了很久的vue3，一发布就上手体验了一把，这里记录几个自己碰到的网上不常见的小坑~ 自定义全局参数 定义： // main.js const app = createApp(App) app.config.globalProperties.$test = 'test' 除了setup()需要先获得实例，其他地方可以直接通过$test使用： <tempalte> <div>{{ $test }}</div> </tempalte> <script> import { getCurrentInstance } from 'vue' export default { setup() { const test = getCurrentInstance()?.appContext.config.globalProperties.$test console.log('test===') console.log(test) }, } </script> Vite通过alias别名引用 在w……
史上最全面、最详细的Cookie总结
1. Cookie 产生的背景 我们都知道，HTTP 协议是无状态的，服务器无法知道两个请求是否来自同一个浏览器，也不知道用户上一次做了什么，每次请求都是完全相互独立，这严重阻碍了交互式 Web 应用程序的实现。例如： 购物车：在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由……
浏览器输入URL后都发生了什么？？
DNS 域名解析 在网络世界，你肯定记得住网站的名称，但是很难记住网站的 IP 地址，因而也需要一个地址簿，就是 DNS 服务器。DNS 服务器是高可用、高并发和分布式的，它是树状结构，如图： 根 DNS 服务器 ：返回顶级域 DNS 服务器的 IP 地址 顶级域 DNS 服务器：返回权威 DNS 服务器的 IP 地址 权威 DNS 服务器 ：返回相应主机的 IP 地址……
微信小程序自定义顶部状态栏
因为工作需要，要在微信小程序中自定义顶部导航栏，通过这篇文章来记录一下自己所得~ 第一步: 需要在json文件中配置"navigation" : "custom"，完成自定义导航栏，只保留胶囊按钮，效果如下图： 做完以上步骤，基本上就可以自定义导航栏……
微信小程序picker组件遇到的问题以及解决办法
一、picker基本概念 先来看一下官方文档中picker的基本概念： 从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。 重要属性 range： 选取范围，数据类型为Array / Object Array，mode为 普通选择器 时，……