利用自身浮动

1
2
3
4
5
6
7
8
9
10
<h2>1、利用自身浮动</h2>
<p>
左右浮动两块div元素,脱离标准流,中间那块元素就会上去,跟他们一行,利用margin留出左右宽度
</p>
<div class="box1">
<div class="boxLeft">左边</div>
<div class="boxRight">右边</div>
<!-- 注意这个div一定要放最下面 -->
<div class="boxCenter">中间</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 1、利用自身浮动 */
.boxLeft {
min-height: 100px;
width: 200px;
background: #987;
float: left;
}
.boxRight {
min-height: 100px;
width: 300px;
background: #369;
float: right;
}
.boxCenter {
min-height: 100px;
margin-left: 220px;
margin-right: 320px;
background: #192;
}

利用绝对定位

1
2
3
4
5
6
7
8
9
<h2>2、利用绝对定位</h2>
<p>
左右绝对定位的两块div元素,脱离标准流,中间那块元素就会上去,跟他们一行,利用margin留出左右宽度
</p>
<div class="box2">
<div class="boxLeft2">左边</div>
<div class="boxRight2">右边</div>
<div class="boxCenter2">中间</div>
</div>
阅读全文 »

DOM 事件级别

DOMEVENT
DOM 0element.onclick = function(){}
DOM 2element.addEventListener(‘click’,function(){},false}
DOM 3element.addEventListener(‘keyup’,function(){},false}

因为 DOM 1 一般只有设计规范没有具体实现,所以一般跳过. 其中 IE 浏览器的 addEventListener 函数对就是 attachEvent 函数

EVENT 对象

函数功能
preventDefault阻止默认行为
stopPropagation停止事件传递
stopImmediatePropagation阻止其它绑定事件执行
currentTarget当前发生事件的元素
target触发事件的节点
阅读全文 »

margin 在 IOS 中失效

在页面中元素使用 margin 值,在某些 IOS 设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的解决方案,当前使用空 DIV 控制间距。

fixed 定位问题

整个页面的 fixed 定位,在 ios 下下拉会触发下拉事件,但是没有动画效果。Android 就能正常运行
flex 中使用 绝对定位,ios 出现严重错位,导致父级元素也会变成绝对定位,Android 能达到理想效果
总而言之 尽量不用 fixed

absolute 定位问题

阅读全文 »

请谈谈微信小程序主要目录和文件的作用?

  • project.config.json:项目配置文件,用的最多的就是配置是否开启 https 校验
  • App.js:设置一些全局的基础数据等
  • App.json:底部 tab,标题栏和路由等设置
  • App.wxss:公共样式,引入 iconfont 等
  • pages:里面包含一个个具体的页面
  • index.json:配置当前页面标题和引入组件
  • index.wxml:页面结构
  • index.wxss:页面样式表
  • index.js:页面的逻辑,请求和数据处理

请谈谈 wxml 与标准的 html 的异同?

  • 都是用来描述页面的结构
  • 都由标签,属性等构成
  • 标签名字不一样,且小程序标签更少,单一标签更多
  • 多了一些 wx:if 这样的属性以及{{}} 这样的表达式
  • WXML 仅能在微信小程序开发者工具中预览,而 HTML 可以在浏览器内预览
  • 组件封装不同,WXML 对组件进行了重新封装
  • 小程序运行在 JS Core 内,没有 DOM 树和 windiw 对象,小程序中无法使用 window 对象和 document 对象。

请谈谈 WXSS 和 CSS 的异同?

阅读全文 »

小程序是现代领先的创新项目之一,许多企业都希望可以加入这个轨道以达到商业成功。

小程序开发准备

要发布一个小程序,首先需要进行一些必要的开发准备。在决定使用哪种工具箱之前,请考虑小程序的实际需求,同时建立一个完整的开发计划,包括建模、UI 设计和代码编写。另外,确保你对小程序框架和相关 API 有足够的了解。

小程序注册与配置

在准备就绪后,即可开始小程序注册流程。这包括创建小程序开发者账号、填写小程序信息、上传小程序图标等步骤。然后,在“设置-开发设置”中完成服务器域名和合法域名的设置,同时确定小程序的访问权限和分享能力。

阅读全文 »

概述

Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来,就像在写同步操作的流程,而不必一层层地嵌套回调函数。

注意,本章只是 Promise 对象的简单介绍。为了避免与后续教程的重复,更完整的介绍请看《ES6 标准入门》《Promise 对象》一章。

首先,Promise 是一个对象,也是一个构造函数。

1
2
3
4
5
function f1(resolve, reject) {
// 异步代码...
}

var p1 = new Promise(f1);
阅读全文 »

原型链

事实上,js 里完全依靠”原型链”(prototype chain)模式来实现继承。
上面说完原型对象。下面要扒一扒 proto、prototype、constructor。

  • proto:事实上就是原型链指针!!
  • prototype:上面说到这个是指向原型对象的
  • constructor:每一个原型对象都包含一个指向构造函数的指针,就是 constructor

继承实现方式

为了实现继承,proto 会指向上一层的原型对象,而上一层的结构依然类似,那么就利用 proto 一直指向 Object 的原型对象上!Object.prototype.__proto__ = null;表示到达最顶端。如此形成了原型链继承。

阅读全文 »

Axios 自定义请求封装

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import axios from "axios";
import router from "@/router/index";
import { Notification } from "element-ui";

const http = axios.create({
baseURL: process.env.VUE_APP_API_URL, // 本地配置的代理,理论上可以不用baseURL
timeout: 15000 // 请求超时时间
});

// 添加请求拦截器
http.interceptors.request.use(
config => {
// !!! 这里开始触发 loading 效果 !!!
store.dispatch("SetLoading", true);
// 请求时添加token
// 设置 token header
getToken() && (config.headers["token"] = token);
// if (localStorage.token) config.headers.Authorization = `Bearer ${localStorage.token}`;
return config;
},
error => {
console.log(error);
return Promise.reject(error);
}
);

// 添加响应拦截器
http.interceptors.response.use(
response => {
// !!! 关闭 loading !!!
store.dispatch("SetLoading", false);
switch (response.data.code) {
case "0":
break;
//token过期 拦截在消息抵达之前做点什么--,
case "-5":
axios.defaults.headers.common["token"] = "";
var storage = window.localStorage;
storage.clear();
// 用户信息是否超时,重定向到登录页面
router.replace("/login");
Notification.error({
title: "请求错误",
message: "用户信息失效,请重新登陆"
});
return Promise.reject("用户信息失效,请重新登陆");
break;
//redis 超时
case "-3":
Notification.error({ title: "请求错误", message: "服务器连接超时" });
return Promise.reject("服务器连接超时");
default:
Notification.error({
title: "请求错误",
message: response.data.message
});
break;
}

return response.data;
},
error => {
// !!! 关闭 loading !!!
store.dispatch("SetLoading", false);
return Promise.reject(error);
}
);

export default http;

axios 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 添加请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
阅读全文 »

graph TB
A(父组件 beforeCreated) --> B(父组件 created) --> C(父组件 beforeMounted) --> D(子组件 beforeCreated) --> E(子组件 created) --> F(子组件 beforeMounted) --> G(子组件 mounted) --> H(父组件 mounted)

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。

组件的销毁操作是先父后子,销毁完成的顺序是先子后父。

加载渲染过程

父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount- >子 mounted->父 mounted

阅读全文 »

方案一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
}

// 方案一,需要对应路由配置如下:
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
// 很显然,需要在 path 中添加/:id 来对应 $router.push 中path携带的参数。
// 在子组件中可以使用来获取传递的参数值。
// $route.params.id

方案二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 父组件中:通过路由属性中的 name 来确定匹配的路由,通过 params 来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})

// 对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
//子组件中: 这样来获取参数
// $route.params.id

方案三:

阅读全文 »