weixin_43299180的博客

同时，子应用需要单独维护一份 shared 实例，在独立运行时使用自身的 shared 实例，在嵌入主应用时使用主应用的 shared 实例，这样就可以保证在使用和表现上的一致性；因为在 qiankun 中，主应用是通过 fetch 来拉取子应用的模板，然后渲染在主应用的 dom 上的，所以还是运行在同一个域名上，也就是主应用的域名；微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题；

由于接入的有政府的项目，在这段时间需要把公司官网，小程序首页置灰；接到需求真的是一脸懵，不过百度之后恍然大悟，感叹 CSS3 是个好东西，也让我学会一个新熟悉 filter 滤镜；

最近又开始写小程序了，刚好遇到微信小程序和内嵌 H5 之间来回跳转，来回交互；这里记录一下微信小程序和 H5 之间交互的实现；（我的小程序是通过 un-app 框架来写的，内部代码基本都是 vue）

年底了，公司开始各种优惠券抽取活动，在 H5 页面实现一个点击抽奖活动，中奖是后端控制，根据接口返回最终抽中接口返回的奖项；

对它进行概要分析，以免引入性能问题。

在线服务在服务停止后，浏览器是无法正常访问到网页的，同时在线服务会把启动编译的代码放在内存里，也就是说当我们修改代码之后重新启动服务，这个时候并不会把修改同步打包到dist文件夹下面，因为它放在内存里面了；在实际的项目开发中，一个完整的系统不会将所有的功能都放在一个网页里，这是因为会导致网页的性能不佳；打包过后，app1.js和app2.js都会被打包进dist/main.js文件中，按照数组里面的前后顺序，webpack会将前面的文件先打包，并且放在main.js的上面；......

4、resolver的主体功能就是解析模块，它是基于enhanced-resolve这个包来实现的，所以在webpack中无论使用什么样的模块引用语句，最终都是使用enhanced-resolve这个包的API来实现模块解析的；3、每一个webpack打包都会创建一个compiler对象，它会走完整个生命周期的过程，webpack所有模块的解析都是compiler对象内置模块的解析器（resolvers）去工作的；/’来找到外部的文件；这也操作起来会比较麻烦；............

historyApiFallback在单页面应用中，使用history路由时，当页面找不到资源时会返回404，可以通过这个参数让所有的404响应都被替换为index.html；开发环境下，我们往往需要开启一个web服务，方便我们模拟一个用户从服务器访问我们的web服务的场景，用来观察我们的代码在客户端的表现；ESLint是用来扫描代码是否符合规范的工具，严格来说eslint和webpack是无关的，但是在工程化的开发环境中，它又是不可或缺的；可以实现页面的部分刷新；..................

在根目录下创建webpack.config.js文件，用来配置webpack的配置项；entry'./src/index.js',//入口文件路径output{filename'bundle.js',//打包后的文件名pathpath.resolve(__dirname,'./dist'),//打包后文件放置的位置cleantrue//每次打包前清空dist文件夹}}为了获取绝对路径，我们需要引入node.js的path模块；{rules。........................

对于习惯使用 Vue 框架的人来说，高阶组件（HOC）这个概念是相对比较陌生的；高阶组件在 React 框架中是比较常见的一个概念，但是 Vue 中也是可以使用到高阶组件的；高阶函数是为一个函数接受一个函数作为参数并返回一个新函数，使得新函数具有这个函数原先的功能又能够自定义的添加新的功能；高阶组件是一个将组件作为参数并返回一个新组件的函数‘；从这里来看，高阶组件其实是一个函数；因此高阶组件也具有高阶函数的一些特性；返回的新组件具有原组件的功能，同时也有了新自定义的功能；具体点高阶组件其实就是装饰者模式的应

vue 项目实现点击按钮打印指定容器里面的内容，并且需要根据内容自动分页；1、封装一个js文件2、全局引入，在 main.js 文件中3、使用4、打印设置注意：设置容器样式为 打印的是个空白；1、封装一个js文件2、页面引入并使用最后、分享一下修改 @page 配置的地址https://cloud.tencent.com/developer/section/1072314...

H5 页面嵌入 app 中，不得不面对 web 和 native 之间进行交互的问题，比如：传递参数、调用函数等；至于交互的桥梁目前 github 上有一些开源的，其中使用最广的是 jsBridge，然而，最近刚开源了一个新项目 dsbridge；本文就看看 dsbridge 是如何实现 web 和原生之间同步或异步的调用彼此的函数，以及传递参数的；官网：https://github.com/wendux2、创建一个新的 js 文件，引入 dsbridgecall前端主动触发与原生约定好的方法，进而

在小程序还发过程中，经常会遇到对证件（身份证、驾驶证、营业执照）的扫描识别认证功能；这里我根据自己的经历借鉴总结一下相关的方法；第一步需要在微信小程序后台添加第三方插件，设置-第三方设置-插件管理，输入**ocr支持**搜索添加就可以了；OCR支持插件添加成功之后需要到开放社区购买识别次数，可以根据自己公司的业务需求量购买；（个人觉得有点贵）在 app.json 中声明引入插件，version 使用最新版本，provider 是OCR支持的 AppID；在使用OCR支持的页面 json 中引入组件页面

两个月没来公司上班，今日开工遇到一个及其有意思的问题：Jenkins 线上打包前端代码，在控制台日志中打包的时候报错：因为疫情期间大家都是居家办公，Jenkins 服务器配置和前端项目配置都没有改动，所以看到这种报错一时无从下手，但是可以看出这是 引入出了问题，具体啥问题下面梳理一下；1、翻译报错信息猛的一看不知道这个到底是啥意思；2、查找 babel 配置项目是 vue-cli3 搭建的，找到了 babel.config.js 文件：vue/cli-plugin-babel/preset 在

在开发小程序时，有些功能会需要统计用户点击次数、登录人数、访问时长等数据，用来分析用户的一些行为；这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程；1、注册友盟账号友盟官网：https://www.umeng.com/；按照指引注册友盟账号，如果是企业使用，建议使用企业邮箱；2、申请 AppKey登录之后产品-统计分析-小程序统计-进入控制台，这里需要绑定邮箱，绑定成功之后就可以创建自己的应用；点击 添加应用 来添加自己的小程序；按照指引填写小程序相关

在开发微信小程序的时候，我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况；微信小程序自带的 web-view 组件相当于 HTML页面中的 iframe ，方便我们在微信小程序中打开一个 H5 页面；官网描述：承载网页的容器；会自动铺满整个小程序页面，个人类型的小程序暂不支持使用；所以使用这个组件，必须是在企业号小程序里面；使用：1、配置业务域名在微信小程序后台，开发-开发管理-开发设置-业务域名 这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）；2、使用组件每个页面

文章目录一、uni-app1、简介2、开发工具3、新建 uni-app项目4、把项目运行到微信开发者工具二、实现tabBar效果1、创建tabBar页面2、配置tabBar三、配置网络请求1、依照官网提示安装、导入、使用2、实战四、uni-app 里面小程序分包1、创建分包目录2、在 pages.json 文件中配置3、创建分包页面五、公用方法封装六、搜索功能1、搜索组件2、搜索建议实现3、本地存储4、过滤器七、上拉加载、下拉刷新1、上拉加载2、下拉刷新八、配置 vuex1、创建文件2、初始化store3、

文章目录一、自定义组件1、创建组件2、引用组件3、组件和页面区别4、组件样式5、data、methods、properties6、小程序的 data 和 properties 区别7、数据监听器8、纯数据字段9、组件的生命周期10、组件所在页面生命周期11、插槽12、父子组件数据传递13、behaviors二、使用 npm 包1、Vant Weapp三、小程序 API 的 Promise 化1、为什么要 Pronise 化2、实现 Promise 化3、调用 Promise 化的 API四、全局数据共享1、

文章目录一、页面导航1、声明式导航2、编程式导航3、导航传参二、页面事件1、下拉刷新2、上拉触底三、生命周期四、WXS 脚本1、wxs使用2、wxs 与 js 区别3、内嵌wxs4、外联的 wxs总结一、页面导航页面导航指的是页面直接的互相跳转，浏览器中实现页面导航的方式：a 标签、location.href ；小程序实现页面导航的方式是：声明式导航、编程式导航；1、声明式导航页面上声明一个 <navigator> 导航组件，通过点击这个组件实现页面跳转；可参考：导航组件在使用&lt

文章目录一、wxml 模板语法1、数据绑定2、事件绑定3、事件传参与数据同步4、条件渲染 wx:if5、列表渲染 wx:for二、wxss1、rpx 尺寸单位2、样式导入3、全局、局部样式三、全局配置1、window2、tabBar四、页面配置五、网络数据请求总结一、wxml 模板语法1、数据绑定数据绑定的基本原则是：在页面的 js 文件中的 data 定义数据，在 wxml 中使用数据；动态绑定内容：<view>{{info}}</view>动态绑定属性：<ima

文章目录1、小程序和普通网页之间的区别2、注册小程序开发账号3、下载小程序开发者工具-微信开发者工具4、创建/导入小程序5、小程序目录结构6、小程序页面组成部分7、json 配置文件的作用8、认识小程序页面9、小程序的宿主环境10、项目成员管理11、小程序发布上线12、获取小程序码1、小程序和普通网页之间的区别运行环境：网页运行在浏览器环境，小程序运行在微信环境中；API：小程序无法调用 DOM、BOM 的API，但是可以调用微信环境中提供的各种 API：地理位置、扫码、支付等；开发模式：网页一般

文章目录一、微信公众号简介二、注册/登录微信公众号三、功能介绍1、编辑模式（个人开发者，无需服务器）2、开发模式四、实战开发1、配置服务器2、模块化五、获取 access_token1、access_token 是什么？2、获取 access_token 功能实现六、自动回复功能1、准备工作2、代码实现七、自定义菜单八、微信中的网页开发1、简单实现2、JS-SDK一、微信公众号简介1、微信公众号是什么？微信公众号平台是给个人、企业和组织提供业务服务与用户管理能力的全新服务平台；2、微信公众号分类

之前写了一篇文章：NPM 包发包流程，大致介绍了如何通过 npm 发布一个自己的包；这一篇介绍一下如何发布一个自己的 vue 组件库到 npm 上；文章目录一、背景二、准备工作三、组件准备四、发包五、使用六、webpack-simple 构建项目发包最后一、背景为什么要在 npm 上发布自己的 vue 组件库呢？我们都知道在项目开发过程中，经常会遇到相似功能或者可以复用的模块；如果是在同一个项目中我们可以封装一个公用的组件来进行复用；如果公司里面多个项目都有可以复用的模块呢？最简单的当然是直接复制

由于csdn平台审核机制你能携带平台名称，下面以视频平台代替；由于公司的项目跟视频平台代合作，公司的视频会上传到视频平台代云点播平台然后在从平台获取视频播放；这里是上传和播放的 vue 实现；只是简单的实现，具体的操作还需要根据自己的需求进行更改；1、注册账户：https://www.polyv.net/2、进入的后台管理 选择云点播功能3、进入api接口选项 并且会拿到你专属的 【userid】【writeToken】【secretkey】这里的 userid、writetoken、readt

文章目录一、在高德地图开放平台注册账号并登录、认证二、申请Key三、项目使用最后一、在高德地图开放平台注册账号并登录、认证1、网址：https://lbs.amap.com/api/jsapi-v2/summary/；2、认证：认证方式分为个人认证和企业认证，这个需要根据自己的需要按照流程填写认证信息；二、申请Key在 控制台 -> 应用管理 -> 我的应用 点击 创建新应用 填写相关申请信息：创建应用之后点击添加按钮：这里可以选择 “Web端(JS API)” 或者 “Web

文章目录一、在百度地图开放平台注册账号并登录二、认证一、在百度地图开放平台注册账号并登录网址：http://lbsyun.baidu.com/index.php?title=jspopularGL二、认证认证方式分为：个人认证、企业认证；这个需要根据自己的需要按照......

最近用 Blob 做文件下载的功能，涉及不同后缀的文件，但是每当设置转换的文件类型的时候就很头疼，因为这东西平时也不怎么常见，这里我参考 Blob 配置整理了一份，方便以后使用。拓展名文件类型MIME类型.aacAAC 音频audio/aac.abwAbiWord 文档application/x-abiword.arc存档文档(多个文件嵌入)application/x-freearc.aviAVI: 音频视频交错video/x-msvideo.

elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！1、点击按钮预览图片；2、可以预览多个图片；3、预览的图片上显示当前图片的相关信息；4、展示图片当前页码信息；效果图如下：实现：由于需要图片上展示当前图片的一些相关信息以及页码，所以使用插件是没法满足需求了。我拿了 elementUI 里面的 image-viewer 源码，直接在这个基础上进行修改，封装一个组件，问题就解决了。代码：<template>

这篇文章适合：观看视频、视频聊天过程中，点击按钮获取视频当前时间节点的图片（视频快照）。主要使用的是 canvas 转为 image。

文章目录1、宏任务和微任务1、宏任务和微任务基本数据类型引用数据类型js事件循环浏览器缓存栈和堆深拷贝和浅拷贝cookie和token区别数组去重cdn缓存margin合并重绘和回流promise和await区别extend和extends区别map和forEach区别浏览器最小字体是多少，如何实现10pxjwtwebpack优化原型链......

一、http 协议的实现超文本传输协议，用于从 www 服务器传输超文本到本地浏览器的传输协议。http 是基于 tcp 协议的一个应用层的协议，由请求和相应构成；是一个无状态的协议。工作过程：1、客户端和服务端建立连接，http开始工作；2、建立连接后客户端发送请求给服务器；3、服务器收到请求后，给予相应的响应信息；4、客户端接收服务器返回的数据并在浏览器上展示，然后客户端和服务器连接断开。在这个过程中客户端和服务器之间的连接和断开是怎么实现的呢？1、三次握手建立连接第一次：建立连