# doc.front
**Repository Path**: lbc19920615/doc.front
## Basic Information
- **Project Name**: doc.front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-06
- **Last Updated**: 2020-12-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 介绍
## 前端团队文档
### 预览文档须知
本文档推荐使用[docute](https://docute.js.org/#/home)预览 也可以运行在任一http服务器
npm install docute-cli -g
```
docute . --port 7970
```
## 工具
### babel编译工具
https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=M4AgvCDeB0sIwF8DcQ&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=true&lineWrap=true&presets=es2016%2Ces2017%2Cstage-2%2Cstage-3&prettier=false&targets=&version=6.26.0&envVersion=
更多推荐工具
## 测试
### selenium
https://www.jianshu.com/p/ff64afac8b3f
https://github.com/seleniumQuery/seleniumQuery/wiki/seleniumQuery-and-IE-Driver
https://www.cnblogs.com/fnng/p/5854875.html
## 服务
### snippet
#### log
console.log
```phpstorm
console.log($1$);
```
## 推荐
https://blog.csdn.net/gao_xu_520/article/category/6887279
http://nthmaster.com/
## 模板
### 移动端 2018年 最佳模板
#### 目标浏览器
* android默认浏览器 chrome >= 33 (android 5.0)
* uc浏览器 chrome = 57
* qq浏览器 chrome = 53
* 微信浏览器 chrome = 53
* safari浏览器 safari >= 9.0
#### 逐步实现pwa
[pwa简介](https://lavas.baidu.com/pwa/engage-retain-users/add-to-home-screen/introduction)
#### 使用dns-prefetch
[DNS预获取 dns-prefetch 提升页面载入速度](http://forthxu.com/blog/article/80.html)
#### 使用preload
```html
```
[关于Preload, 你应该知道些什么](https://www.jianshu.com/p/24ffa6d45087)
#### 停止使用jquery
jquery的方法浏览器大部分都有替代方案
dom4 可以解决一部分代码缺失问题
```html
```
#### 使用webcomponents
webcomponents 允许解析自定义标签 有利于seo
#### 参考模板
```html
title
```
manifest.json
```json
{
"short_name": "短名称",
"name": "这是一个完整名称",
"icon": [
{
"src": "icon.png",
"type": "image/png",
"sizes": "48x48"
}
],
"start_url": "index.html"
}
```
## 小程序
### 官方文档地址
[框架](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html)
[组件](https://mp.weixin.qq.com/debug/wxadoc/dev/component/)
[API](https://mp.weixin.qq.com/debug/wxadoc/dev/api/)
### 小程序天生的坑
1. 小程序不支持attribute选择器
2. background-image不支持本地图片
3. 小程序资源缓存问题
### 果师兄小程序
#### app 结构
- app.core 【核心】
- assets 【资源】
- config 【配置】
- pages 【页面】
- com-aux-button 【组件】
- page-a 【页面a】
- utils 【工具】
- vendor 【引用】
- wxs 【脚本】
#### 获取用户权限
回家吃烫饭
```javascript
/**
* 获取用户权限
*
* @param key
* @param options
* @returns {Promise}
*/
getPromission: function(key, options = {}) {
return new Promise(function (resolve, reject) {
wx.getSetting({
success: (res) => {
/*
* res.authSetting = {
* "scope.userInfo": true,
* "scope.userLocation": true
* }
*/
if (typeof res.authSetting[key] === "undefined" || res.authSetting[key] === null) {
// 微信第一次安装时不会管setting
reject({
code: 1
});
} else {
if (res.authSetting && res.authSetting[key] === true) {
resolve();
} else {
wx.authorize({
scope: key,
success(res) {
resolve();
},
fail(res) {
wx.showModal({
title: options.title,
content: options.content,
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: function (data) {
if (data) {
if (data.authSetting && data.authSetting[key] === true) {
resolve();
} else {
reject({
code: 0
});
}
} else {
console.warn("没有设置");
reject({
code: 2
});
}
},
fail: function () {
console.warn("打开设置失败");
reject({
code: 2
});
}
})
} else if (res.cancel) {
reject({
code: 3
});
}
}
})
}
})
}
}
}
})
});
}
/**
* 请求用户权限
* 如果用户拒绝 下一次请求时会先询问
* onFirstRequest 第一次请求
* onOpenSettingError 打开设置失败
* onUserRejectOpenSetting 用户拒绝打开用户设置
* onUserReject 用户拒绝
*
* @param key
* @param options
* @returns {Promise}
*/
requestPermission: function(key = "scope.userInfo", options) {
var self = this;
return new Promise(function(resolve, reject) {
self.getPromission(key, options).then(function () {
resolve();
}).catch(function (e) {
if (e.code === 1) {
if (options && options.onFirstRequest) {
options.onFirstRequest();
resolve();
}
}
else if (e.code === 2) {
if (options && options.onOpenSettingError) {
options.onOpenSettingError();
}
}
else if (e.code === 3) {
if (options && options.onUserRejectOpenSetting) {
options.onUserRejectOpenSetting();
}
}
else {
if (options && options.onUserReject) {
options.onUserReject();
}
}
// 高级错误
// reject(new aui.RejectRequestPermissionError());
});
})
}
```
example
```javascript
self.requestPermission("scope.userInfo", {
title: '将要打开设置界面',
content: '请允许使用用户信息'
}).then(function () {
// console.log("用户同意了");
}).catch(function(e) {
// console.log("用户不同意");
if (e instanceof aui.RejectRequestPermissionError) {
}
})
```
#### 请求用户信息授权
1. wx.login
2. app.requestUserInfo 请求用户用户信息授权
3. app.setWxUserInfoLocal 保存一些用户基本信息到本地
#### token刷新
1. app.getAccessTokenByRefreshToken 重新获取一次token
#### token失效登录
如果没有授权过用户信息就进入请求用户信息授权步骤
1. wx.login
2. wx.getUserInfo 获取新的code
3. app.getNewToken 获取新token
#### ajaxGet, ajaxPost
类似于fetch
请求一个http url
返回一个Promise
#### ajaxGetAPI, ajaxPostAPI
ajaxGet, ajaxPost 的简单封装
api转义源在app上的私有变量globalApis
#### 带auth的ajax请求
使用safeFetch
safeFetch 默认使用ajaxGetAPI 带用户信息验证
1. get
```javascript
safeFetch('api', {})
```
2. post
```javascript
safeFetch('api', submitData, {}, 'Post')
```
### javascript
加操作符解释
http://www.jb51.net/article/34475.htm
参考文档
https://www.zhihu.com/question/21484710
https://www.cnblogs.com/yugege/p/5277883.html
http://www.qiutianaimeili.com/html/page/2017/08/ap8d1w6oml.html
https://segmentfault.com/a/1190000011007975
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness
http://www.jb51.net/article/50748.htm