欧阳桫的技术博客

微信小程序【单个代码包的最大体积】不能超过2M，如果因为某些页面引用的静态资源文件较大较多的原因，导致单个代码包体积超过2M时，我们就需要进行页面的分包配置了；可以将小程序的众多页面分配到不同子包中，每个子包大小均不超过2M，所有子包的总体积加起来不能超过20M；等待一段时间之后，打包完成，生成的APK路径在unpackage/release/apk路径下。本教程不涉及原生App开发相关内容，我们为大家介绍云打包的App生成方式；如果公司中有专职的安卓/iOS开发程序员，我们可以选择执行本地打包；

秒间导入完成，此时工程下会多出一个uni_modules目录。的，因此无需导入+声明，页面模板可以直接部署它！

【代码】uni-app卖座电影多端开发纪实（四）：用户交互。

【代码】uni-app卖座电影多端开发纪实（三）：MVC。

中会生成这么一个玩意，就是页面声明了。NavBar导航齐活！Tabbar导航齐活！我们封装想要实现如下效果↓↓。先把这个搂一眼→_→。

easy-com就是easy component，就是要把传统的组件引入+声明子组件+部署，三步合而为一，使代码变得更简洁；无论是自己的组件，还是外来组件，只需要遵守easy-com的路径规范就能直接在模板中部署，无需引入+声明了；具体参见官网解释easy-com。

刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序；包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块；运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等；

可以修改dist目录重命名为有意义的名字，例如movie-manager。

找不到模块“@store/index”或其相应的类型声明。ts(2307)“config.headers”可能为“未定义”。ts(18048)“store.state”的类型为“未知”。ts(18046)${(.as).}const {类型“number”的参数不能赋给类型“string”的参数。ts(2345)不能将类型“number”分配给类型“null”。ts(2322)

axios的响应拦截器里发现返回码是401/403，一脚踹到登录页;方案一：加载完整路由表，加全局守卫判断meta，无权限时一脚踹到登录页;方案二：先挂载公共路由表，登录后再addRoute动态挂载权限路由表；由服务端返回菜单（或前端登录后从本地调取对应菜单）并动态渲染;隐藏无权限的按钮；v-if没权限就不显示；自定义指令v-auth判断到无权限就直接删除当前按钮；如果不是管理员就直接删除当前元素/组件。

【代码】Vue3电影中后台开发纪实（五）：组件封装。

项目源码：电影中台+后台 api/movieApi.js触发删除操作views/film/Playing.vue调用接口执行删除views/film/Playing.vue删除后反馈+刷新页面@删除前使用弹窗确认界面上准备好弹窗，并先行隐藏弹窗的关联数据使用一个ref控制弹窗的显隐使用一组弹窗模式控制弹窗的提示文字+确认回调完整的删除流程用户点击删除暂存要删除的影片ID设置好弹窗模式：内置提示文字 + 确认时的回调函数用户点击确认时调出先前暂存好的影片ID

{// 规定电影id为24个数字或小写字母 path : "/film/:id(\\d+)" , name : "detail" , meta : {});/* 获取影片详情 */ onMounted(async() => {/* 将detail中的数据同步到form中 表单中自动同步数据 */ Object . assign(form , detail , {

该样式是在main.scss中被全局引入的/* 定义过渡动画 */ /* 定义fade动画的入场和出场效果 */ . slide - fade - enter - active , . slide - fade - leave - active {} /* 定义fade动画的场外状态 */ . slide - fade - enter - from , . slide - fade - leave - to {

克隆到本地脚手架配置实例根目录/project.config.json{"package" : "cli-creator" , /* 脚手架名称 */ "cmdName" : "ocli" , /* 【用户家目录下】的全局配置文件 */ "rcFile" : {/* 配置文件名 */ "name" : ".oclirc" , /* 给全局配置文件注入的默认数据 */ "default" : {

;

Vant是一个轻量、可靠的移动端 Vue 组件库；专用于开发O手机H5页面；我们在使用它的同时，更要学习人家的组件封装和设计思想；Vant4官方文档。

* 动态路由 id为动态路由参数 组件实例中this.$route.params.id */ { < div class = " toggle " @click = " hideSynopsis =!-- 隐藏时使用↓图标 --> < i v-if = " hideSynopsis " class = " fa fa-angle-down " style = " font-size : 20px " >

【代码】Vue3仿卖座电影开发纪实（三）：MVC。

【代码】Vue3仿卖座电影开发纪实（二）：网络请求。

!-- . vue文件是单文件组件（SingleFileComponent / SFC ）组件是页面中的一小块 -- >

Vue自定义组件库

前端项目面试核心问题（持续更新）

前端技术面核心问题

JavaScript课堂练习

NodeJS原生后台开发教程

Express+MongoDB服务端开发教程

布局与样式一个TodoList长什么样子相信无需多言：上样式：src/TodoList.css.td-wrapper { width: 700px; margin: 0 auto;}.dp-wrapper { width: 100%; height: 40px; display: flex; margin-top: 10px;}.dp-wrapper input { flex: 4; height: 36px; l

可拖拽排序的菜单效果大家想必都很熟悉，本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理。先看一下完成效果：实现原理概述拖拽原理当鼠标在【可拖拽小方块】（以下简称砖头）身上按下时，开始监听鼠标移动事件鼠标事件移动到什么位置，砖头就跟到什么位置鼠标抬起时，取消鼠标移动事件的监听排序原理提前定义好9大坑位的位置（相对外层盒子的left和top）将9大砖头丢入一个数组，以便后期通过splice方法随意安插和更改砖头的位置当拖动某块砖头时，先将其从数组中移除（剩余的砖头在逻辑上重新排

本例结合ES6面向对象语法、设计模式、闭包，完成一个附近商家的自动推荐功能；案例需求如下：√ 封装一个地理位置类Location，属性x,y，√ 求距离方法：getDistance(anotherLocation)可以计算与另一个地理位置的直线距离√ 随意造两个地理位置实例，并求它们之间的距离√ 创建商家类Shop，继承自地理位置类，同时拥有类别属性type、单价属性price，和服务方法serve()，留白等待子类去做具体实现√ 实现饭馆类Restaurant、超市类Supermarket、

今天我们模拟小米智能家居应用场景，融合单例模式、组合模式、观察者模式做一个综合应用案例。具体场景如下：小米门铃为主人开门，触发开门事件；小米智能控制台监测到开门事件，自动启动小米空调和小米电视；思路分析小米控制台，在家庭单位内只有一个实例，我们使用单例模式；小米控制台通过startWork这一统一接口控制全部智能家居，对于有相同接口的不同实例进行统一调度，我们可以应用组合模式；小米控制台监听小米门铃的开门事件，观察者模式；定义【组合】和【组件】两个父类接口后续由小米控制台对【组合】做

#JQuery 自定义事件jQuery的事件自定义事件还是通过on绑定的，然后再通过trigger来触发这个事件###1. 绑定事件//给element绑定hello事件element.bind(&amp;quot;hello&amp;quot;,function(){ alert(&amp;quot;hello world!&amp;quot;);});###2. 执行事件//触发hello事件element.t

前端对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层。#前端三大基础技术##HTML超文本标记语言：超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文...

经过对前面知识点的巩固和加深，我们可以使用前面学习到的知识来制作实际开发中碰到的一些典型的布局，以此来达到综合应用知识的目的。1、特征布局：翻页（所需知识点：盒模型、内联元素）2、特征布局：导航条01（所需知识点：盒模型、行内元素布局）3、特征布局：导航条02（所需知识点：盒模型、浮动、定位、字体对齐）4、特征布局：图片列表（所需知识点：盒模型、浮动）5、特征布局：新闻列表（所需...

在上一篇博客中我们实现了电商页面的搭建和样式的调整，这里我们将使用jQuery实现页面中部的幻灯片效果，我们可以点击左右按钮来切换图片，如果没有点击左右按钮，图片自动向左切换。效果图：$(function () { /*定义上一张页码，下一张页码*/ var previous = 0; var current = 0; var direction = &amp;quot;le...

使用前面学习的知识：html,css,javascript,jquery实现电商页面，使用html搭建页面，css调节页面样式，Javascript，jquery实现动态效果，使学生具备一定的企业实战能力。效果图：&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&a

#1.手风琴在页面上呈现手风琴样式得风景图，默认只有一张图片可见，其他不可见，在点击某张图片得标题时显示该张图片，隐藏之前现实的图片。效果图:点击之前：点击之后：&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp

#事件委托事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。###一般绑定事件的写法$(function(){ $ali = $('#list li'); $ali.click(function(event) { $(this).c...

#事件冒泡###什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。###事件冒泡...

鼠标事件1.click和dblclick事件方法一般都有三种使用方式：我们就以click为例来介绍这些方式，接下来的方法不再冗余介绍，只是谈论最重要的知识点。第一种方式点击触发$(&amp;amp;quot;ele&amp;amp;quot;).click(function(){ alert('触发指定事件')})$(&amp;amp;quot;#test&amp;amp;quot;).click(function(){ $(