杂学不精-CSDN博客

原创微信小程序纯嵌入Vue页面，制作一个完整的小程序

效果图小程序加载链接微信嵌入链接代码相当简单1、index.wxml加载一个web-view组件，动态绑定地址<view class="container"> <web-view src="{{ webSrc }}"></web-view></view>2、js中动态修改加载的地址，这是为了后面分享什么用，其实也可以直接写上链接// index.jsPage({ d

2021-11-08 17:55:49 2661 1

原创周末愉快——程序猿的浪漫css画玫瑰礼盒

周末周末继续找轻松的话题，程序猿的小浪漫，css画玫瑰。先上效果图开花开箱体验地址：http://120.27.68.231:9999/html/giftrose.html盒子关键css说明1、盒子父级设置三条关键属性。transform-style: preserve-3d; // 使被转换的子元素保留其 3D 转换perspective: 400px; // 设置元素被查看位置的视图perspective-origin: 50% 0%; //

2021-10-31 00:08:06 384

原创让代码简洁而优雅——恰到好处地使用数组的各种方法

本以为今天的帖子会很简单，越写越觉得啃了块硬骨头。判断是否是数组没啥好说的推荐 Array.isArray，示例：Array.isArray([1, 2, 3, 4]); // --> true Array.isArray({ a: 1, b: 2}); // --> false Array.isArray(new Array); // --> true Array.isArray("Array"); // --> false注

2021-10-29 14:43:52 185

原创 vue3.x连官网都不亲的选项——Mixin

不足官网原文如下：来自官网截图简单来说不足有二：1、所有属性都会合并到组件里面，所以相同命名会冲突。2、写完就定下来了，不够灵活vue3 提供了 setup，来解决这些问题。个人见解，其实在vue2的时候就很少使用mixin来抽象逻辑，一般抽象逻辑都会使用一个封装的js对象。而mixin更多的是像封装一个“基类”那样，提供给组件继承，暂时而言个人还是觉得类似于“基类”这样的用法，使用mixin挺好。基础mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所

2021-10-28 00:13:33 737

原创当vue遇上Hybrid APP

Hybrid APP 优势网上查了一圈，没有找到符合我内心的描述，所以就算忽略吧，反正优点很多，这不是我们要说的重点，忽略几百字或者几十字总有的解决方案--jsbridgeHybrid网上很多，比较大型的方案还是推荐jsbridge，其最大优势在于方便于扩展，下面文章都是基于jsbridge来说的。推荐两个成熟的库iOS WebViewJavascriptBridgeAndroid JsBridge基本原理这也不是这篇帖子的重点，上张网上盗来的图，个人看来这个图有些地方有点过期了，

2021-10-27 00:51:22 268

原创 vue3.x组件间通信，实用小技巧都在这里

本想简单写写，没想到说清楚已经变成了一篇很长的帖子，欢迎当笔记搜藏起来。props / emits 父子组件通信props一般负责向子组件传递数据下面是一个简单的例子，父组件向子组件传递了一个title，子组件负责显示title。// child-component.vue<template> <h2>{{ title }}</h2></template><script> export default { n

2021-10-25 21:37:27 373

原创周末愉快——css画大熊猫

周末找了点轻松的话题，css画大熊猫。先上效果图欢迎竞猜大熊猫到底说了什么？？打招呼眼睛跟随鼠标移动再上源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0.

2021-10-24 23:10:32 313

原创 vue3.x新特性之setup函数，看完就会用了

最近有小伙伴跟我聊起setup函数，因为习惯了vue2.x的写法导致了，setup用起来觉得奇奇怪怪的，在一些api混编的情况下，代码变得更加混乱了，个人觉得在工程化思想比较强的团队中使用setup确实能更好的使用模块化开发，但是用得不好的话也确实降低了代码的可读性。本篇文章是从使用角度来聊聊setup的实际使用。setup 使用1、setup和以前的api（data，methods，computed等）并不冲突，也是可以相互访问的，值得注意的是setup里面不能用this，并且在setup执行的时

2021-10-24 02:10:06 1501

原创 js判断移动端浏览器类型，微信浏览器、支付宝小程序、微信小程序等

起因现在市场上各种跨平台开发方案百家争鸣各有千秋，个人认为最成熟的还是hybird方案，简单的说就是写H5各种嵌入，当然作为前端工程师最希望的也就是公司采用hybird方案当作技术路线。所谓的hybird方案很多时候单独指h5嵌入app页面，本专辑讲的却比这个要广泛很多，作者想写一个基础框架嵌入所有移动端app，包括app壳子、微信公众号、微信小程序、支付宝页面、支付宝小程序等，而且是一套代码可以同时嵌入各种app，这样最大程度上节约开发成本，当然我们的框架也会注意到开发质量，如前面文章提到的移动端

2021-10-23 00:00:47 1441

原创 vue3.x全局$toast、$message、$loading等js插件

有时候我们需要使用一些类似toast，messge、loading这些跟js交互很频繁的插件，vue3.x这类插件的定义跟vue2.x插件稍大，而且相对变得复杂了一点点。第一种、需要时创建，用完移除这种做法相对损耗性能，当一些显示隐藏频率不是特别高的插件可以如此封装。1、新建loading.vue文件<template> <div class="loading"> 加载中... </div></template><s

2021-10-21 22:31:11 1886

原创 vue3.x移动端页面基于vue-router的路由切换动画

移动端页面切换一般都具有动画，我们既然要做混合开发，做完之后还是不能看起来就像一个网页，所以我们基于vue-router扩展了一个页面切换push和pop的动画。这是一篇比较硬核的帖子，作者花了不少精力来写先上效果图路由切换动画.gif再贴核心代码router文件夹下，新建transition-extend.js文件，实现如下：/** * router扩展，页面切换动画 */// 负责SessionStorage存储路由历史。const SessionStorage_key

2021-10-21 22:19:30 1562

qq_25674791的博客