apidoc安装使用说明

一、apidoc简单介绍
apidoc根据你源码中的api注解(apidoc自己的注解)，创建说明文档，创建出的说明文档为html格式，能够发布出去，apidoc是基于nodejs，代码开源，官网地址，github地址，目前最新提交是2017年5月，貌似已经停止维护，不过整个代码逻辑很简单，适合定制，apidoc基本支持所有语言的文档生成，C#、Java、JavaScript、PHP、Python，具体可参加官方说明
二、apidoc安装
1.首先查看是否有nodejs环境，node -v ,查看node版本，如果不能执行，需要安装nodejs，nodejs下载地址https://nodejs.org/en/download/，可以根据具体环境选择版本，win可以下载压缩包，解压后，把解压文件夹的根目录配置到path里即可，linux一般都会自带nodejs,如果没有可yum install nodejs -y ,不同的linux版本使用不同的在线安装命令，这里列出CentOS，如果不能在线安装，那就只能自己下了，这里不在赘述
2.安装完nodejs环境后，会自带npm,npm为nodejs包管理工具，安装apidoc :npm install apidoc -g, 安装完成后，使用apidoc -h,查看是否安装成功
三、apidoc使用
1.添加apidoc.json
在项目中创建apidoc.json,位置建议在项目根目录，也可自选，自选位置的话，需要在运行apidoc命令时带上位置参数
apidoc.json内容示例
{ “name”: “example”, “version”: “0.1.0”, “description”: “apiDoc basic example”, “title”: “Custom apiDoc browser title”, “url” : “https://api.github.com/v1”}
各参数含义
参数说明name项目名称version项目版本description项目描述title浏览器标题urlapi路径前缀，会自动拼接到@api 路径前，可以设置为空串sampleUrl如果设置，将显示用于测试api方法（发送请求）的表单。有关详细信息，请参阅@apiSampleRequest。headerapi文档的头 title左侧导航栏中显示的文本 filename内容文件，为md(markdown)格式，可以写前言等项目边角信息footer与header相同，只不过一个在头，一个在尾，不再赘述 title filename order用于排序的，没有详细研究
带header示例
{ “name”: “onsite接口说明文档”, “version”: “1.0.0”, “description”: “”, “title”: “onsite接口说明文档”, “url”:””, “header”: { “title”: “My own header title”, “filename”: “api-template/header.md” }, “footer”: { “title”: “My own footer title”, “filename”: “api-template/footer.md” }}

      2.添加api注解

api注解是apidoc自己定义的一套，用于生成文档的注解，注解太多就不一一介绍了，大家可以参考官说明http://apidocjs.com/#param-api，这里仅说明基础使用.
apidoc是按注释块解析注解的，在java中一个注释块形如(以下为两个注解块)：
/** * @api {get} /user/{id} 获取用户信息 //* * @api {put} /user/{id} 修改用户信息 / apidoc仅解析含有@api或者@apiDefine的注释块，@apiDefine一个注释块中仅能有一个，@apiDefine可以定义一些通用的内容，比如通用的请求参数，返回值，错误列表等；@api 就不用多说了，用来定义一个api,需要注意的是，@apiGroup和@apiName是必须的，@apiGroup定义的是左侧导航，@apiName 会拼接到访问路径中，大家试下就会明白 @apiGroup是不支持中文的，需要和@apiDefine配合使用，例如： /* * @apiDefine User 用户模块 * //* * @api {get} /user/{id} 获取用户信息 * @apiGroup User * @apiName Get-user * / 以下为官网一个较为完整的例子 apidoc.json { “name”: “example-inherit”, “version”: “0.1.0”, “description”: “apiDoc inherit example”} example.js /* * @apiDefine UserNotFoundError * * @apiError UserNotFound The id of the User was not found. * * @apiErrorExample Error-Response: * HTTP/1.1 404 Not Found * { * “error”: “UserNotFound” * } / /* * @api {get} /user/:id Request User information * @apiName GetUser * @apiGroup User * * @apiParam {Number} id Users unique ID. * * @apiSuccess {String} firstname Firstname of the User. * @apiSuccess {String} lastname Lastname of the User. * * @apiSuccessExample Success-Response: * HTTP/1.1 200 OK * { * “firstname”: “John”, * “lastname”: “Doe” * } * * @apiUse UserNotFoundError / /* * @api {put} /user/ Modify User information * @apiName PutUser * @apiGroup User * * @apiParam {Number} id Users unique ID. * @apiParam {String} [firstname] Firstname of the User. * @apiParam {String} [lastname] Lastname of the User. * * @apiSuccessExample Success-Response: * HTTP/1.1 200 OK * * @apiUse UserNotFoundError / 生成文档地址：http://apidocjs.com/example_inherit/#api-User 从例子可以看出，apidoc不在乎你把注释写在哪里，不过还是推荐写在接口所在位置 3.执行apidoc命令以上两步完成后，就可以执行apidoc命令生成文档了，打开命令行，切换到项目根目录，执行apidoc -f “正则” -i 输入路径 -o 文档输出路径，大家可以根据自己情况选取参数，执行apidoc -h 可列出各种参数用法以及默认值参数说明-h，–help显示帮助信息-f，–file-filters正则表达式过滤应该解析的文件（可以使用多个-f）。默认值：.cs .dart .erl .go .java .js .php .py .rb .ts。示例（仅解析.js和.ts文件）：apidoc -f “..js$” -f “..ts$” -e, –exclude-filters正则排除不需要解析的文件，可是使用多个-i, –input项目源码根目录，默认值：./-o, –output生成文档输出位置，默认值：./doc-t, –template生成文档使用的模版位置，默认值：%apidoc%\template\, %apidoc%为apidoc安装根目录-c, –config配置文件(apidoc.json)的所在位置，默认值：./ 四、注意事项 1.没有参数说明时，apidoc会扫描当前目录以及所有子目录下.cs .dart .erl .go.java .js .php .py .rb .ts结尾的文件，生成api文档到当前目录下doc文件夹中; 2.apidoc -f后的正则表达式，标准格式”..java”,eg:apidoc -f “.*.java” ,必须使用双引号，并且单斜杠\,其他写法都会导致“No files found”;
3.@apiDefine定义的内容貌似只能作为name参数使用，这个局限太大，api中很多路径前半段都是相同的，想抽象出来一个都不行，以后如果修改，比较麻烦，不知道大家有没有什么高招可以解决
4.要写注解怎么能没有自动补全呢，java和php自动补全：Java Eclipse ,PHP Eclipse，官方文档说的很清楚了
————————————————
版权声明：本文为CSDN博主「椰汁菠萝」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/suo082407128/article/details/81355093

Vue教程01(基础入门)

因为最近需要使用到Vue，所以打算将Vue的学习资料详细整理一份，感兴趣的小伙伴可以一起来哦。

一、Vue基础介绍

1.什么是Vue.js

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

2.为什么要学习流行框架

企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
企业中，使用框架，能够提高开发的效率；
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

3.Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
为什么有了MVC还要有MVVM

MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V和VM，其中VM是MVVM的思想核心：因为VM连接着M和V。
前端页面中使用MVVM的思想，主要是为了让我们开发MVVM提供了数据的双向绑定，双向绑定是由VM提供的

二、Vue基本使用

此次代码工具是Visual Studio Code,小伙伴可自行下载安装。

1.第一个案例

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- 3. Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
      msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>

</html>

注意代码中的注释！

访问页面

2.常用指令

指令	描述
{{}}	插值表达式
v-cloak	解决插值表达式闪烁的问题
v-text	和插值一样也是使用vue中的变量，但是默认没有闪缩问题，但是会覆盖原本的内容，插值不会
v-html	显示HTML的内容
v-bind	Vue提供的属性绑定机制，缩写是 ‘:’
v-on	Vue提供的事件绑定机制，缩写是:’@’

2.1 插值表达式

在HTML页面中我们需要获取Vue中的数据，这时我们可以通过插值表达式来获取，如下

  <div id="app">
  	<!-- 插值表达式获取vue中的msg信息 -->
    <p>{{ msg }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app', 
      data: {
        msg: '欢迎学习Vue' 
      }
    })
</script>

注意：插值表达式有闪缩的问题
我们以站点的方式启动，Ctrl+shift+p ：在输入中搜索如下

访问地址：http://localhost/xxx.html

加载完成就会变好！这就是插值闪烁的问题

2.2 v-cloak

v-cloak指令可以解决上面插值闪烁的问题，如下：其实利用的就是当插值没有被加载出来的是通过 style属性将内容给隐藏了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
       display: none; 
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>++++++++ {{ msg }} ----------</p>
  </div>
  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
      }
    })
  </script>
</body>

</html>

2.3 v-text

和插值差不多，也可以从vue对象中获取信息，v-text默认是没有闪烁问题的，但是会覆盖掉原有的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>----{{msg}}=====</p>
        <p v-text="msg"></p>
        <p v-text="msg">*******</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        })
    </script>
</body>
</html>

2.4 v-html

默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示，如果我们要显示标签的语义，那么需要使用v-html指令如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>----{{msg}}=====</p>
        <p v-text="msg"></p>
        <p v-text="msg">*******</p>
        <p v-html="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<h3>hello vue</h3>"
            }
        })
    </script>
</body>
</html>

2.5 v-bind

v-bind是 Vue中，提供的用于绑定属性的指令,可简写为”:”,属性中的内容其实写的是js表达式，可以做类似的处理，见代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="提交1" title="提交按钮"><br>
        <input type="button" value="提交2" v-bind:title="title">
        <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
        <input type="button" value="提交2" :title="title">
        <!-- v-bind 中，可以写合法的JS表达式-->
       <input type="button" value="提交2" :title="title + ' bbb'">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                title:"title123"
            }
        })
    </script>
</body>
</html>

2.6 v-on

Vue 中提供了 v-on: 事件绑定机制,具体使用如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" v-on:click="show">
        <!--还可以缩写为 @-->
        <input type="button" value="点击" @click="show">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<h3>hello vue</h3>"
            },
            methods:{
                show:function(){
                    alert('hello')
                }
            }
        })
    </script>
</body>
</html>

在哪npm install log4js

我们也可以在代码中,用console.log()打印一些控制台日志。修改routes/index.js…二、配置log4js与express框架集成 1、安装 npm install log4js

1.安装位置： npm install moduleName ，则是将模块下载到当前命令行所在目录。 npm install moduleName -g ，模块将被下载安装到全局目录中，即Node的安装目录下的node_modules下 2.调用方式：在代码中，本地安装可以直接通过require()的方式

把代理设置为空 npm config set proxy null 设置代理 npm install -g express-generator 安装express

游戏策划的软件与工具

本文修改自前公司的一份交接文档，分享了工作中一些常用的软件。

Axure

界面示意图/流程图制作软件

大前提：Windows系统、无法直连外网
- Mac系统的话，sketch、principle之类的选择太多了
- 如果可以直连外网，还有墨刀之类的在线编辑工具可选
可以自定义控件库
一般软件里自带的控件都是基本的web控件或app控件，而游戏里常用的界面元素要远多于这些基础控件，因此提前制作一套适合自己游戏的自定义控件可以在之后的工作中节省不少时间，还能保持统一性。
自定义控件
可以创建交互效果、并且便于分享
理论上可以制作各种复杂的交互效果、高保真原型，但是从时间投入考虑性价比不高，因此一般我只会创建「点击 – 跳转页面」这一种事件，来简单模拟整个系统的操作流程
Axure生成的原型都是HTML网页，系统自带的IE就能打开
作为流程图软件时
- 如果是界面关系流程图，可以关联已创建的界面，生成HTML网页后，点击流程图可以直接跳到对应的界面，便于讲解流程时的细节展开。
- 如果是一般操作逻辑流程图，axure并没有明显的优点，但也没太大的缺点，中规中矩

SublimeText

万能编辑器，所有的配置文件都推荐用这个软件编辑（xls之类二进制文件除外）

鼠标中键可以直接多行选择，非常实用！
中键可以直接多行选择
针对整个目录的全局搜索/替换，速度极快。
SublimeText的强大远不止于此，这只是编辑配置文件时最实用的两点。

XMLSpy

专业的XML编辑软件。

用这个软件主要就为了一点：
在网格模式下，可以直接把Excel里计算好的成百上千行数据粘贴过去，大大提升效率

可以直接粘贴Excel数据

当然这个软件也有很大的缺点：运行慢、占内存。所以要配合SublimeText来使用，XMLSpy主要是用来粘贴大量数据时用的，轻量的编辑还是采用SublimeText更高效。
不要再用用UltraEdit、Notepad++ 甚至记事本来编辑XML了！

MindManger

脑图软件

我见过用Excel、Word、Visio来画脑图的（确切的说不是脑图，只是想法收集整理的文档）
然而，还是用专门的脑图软件好一些

Q-Dir

资源管理器窗口布局软件

配置一个系统要涉及好多个目录：设定表、客户端配置、服务端配置、美术资源等等……
这个软件可以在一个窗口中分多栏、同时打开多个目录（最多分四栏）
窗口分栏布局
还可以保存分栏的布局模式和对应打开的目录，以便之后编辑。
我给那些配置复杂的系统，各保存设置了一套布局摆在桌面上，再也不用改一个系统打开4个资源管理器窗口、一层一层找目录了。

Bulk Rename Utility

批量重命名文件的软件

能用软件解决的事情，我都不想人工操作；
就算不会用正则表达式，光是基础的替换、加前后缀都足以节省很多无意义的手工劳动。
批量重命名

PNGOUT

png图片无损压缩

PS直接存保存的png图片经常比容量较大，用工具压缩一下可以节省很多容量。
这类图片压缩工具有很多，PNGOUT未必是最出色的一个，但胜在操作简单。
我一般会在每个大版本前夜，把所有图标都扔进去压一遍。

png图片压缩

Everything

文件搜索

那么多文档素材，就算目录结构再清晰也难免有找不到某个文件的时候，
而Windows系统自身的搜索实在太慢，用这个软件试一下吧，搜索速度极速提升。

KKCapture

视频录制软件

之前研究其他游戏（页游）的引导流程时，用这个录了几十个游戏的视频，
不过后来做手游后感觉最好是能用Mac的QuickTime直接录屏——60fps高清无码。

BeyondCompare

文件对比软件

我们一定会遇到需要比对一个文件的不同版本、检查配置错误的时候。
这个软件，绝对比SVN、CVS自带比对功能好用。
还有一个连Git都没有的最大优点——可以对比Excel文件，绝对神器！
可以对比Excel文件

Sothink SWF Decompiler

SWF反编译软件

以前做页游项目时，总觉得我们美术做的动画素材容量太大，因此用这个软件去破解了其他游戏的素材，寻找动画制作、压缩方面的技巧，还算有点帮助。
不过现在flash都快被淘汰了，以后可能用不到了。

FontCreatorSetup

字体编辑软件

美术选用了一个字体专门用于等级、数值等，因此只需要用到英文字母、数字和少量标-点。
由于这是一个中文字体，ttf文件有10MB多。
这个软件可以编辑字体文件的字库，删除不需要的文字，达到压缩字体文件的目的。
最终处理过后的字体文件从10MB压到了几十KB。

字体编辑

格式工厂

视频音频格式转换软件

宣传视频的原始输出太大，需要转个格式压缩一下……
Cocos引擎下音频都需要转成MP3格式……
一个团队里总要有人做这些事情。

虽然格式工厂的转换速度不快、有时还会出错，只是胜在使用起来简单粗暴，如需更专业一些转码工具可用MediaCoder、AudioCoder这类。

GoldWave

音频编辑软件

网上扒来的背景音乐音量不一致，用这个调整一下音量
- 这个要特殊申明一下，我们游戏正式上线之前音乐音效都会外包。只是测试体验期间需要先有素材来代替，同时还能充当外包需求的「效果图」
再加一下渐入渐出，让音乐的出现不会很突兀
这种级别的音频编辑并不需要什么专业的音乐素养，都是简单的软件操作，以淡入淡出为例：
- 选择一段音频 – 点淡入按钮 – 选个预设的淡入模式 – 确定

音频编辑

Chrome

浏览器

主要目的是为了文章题图的矩阵布局，增加一个图标凑数用。
例行黑百度，我也不算小白用户了，安装软件时都会自己检查各种不起眼的勾选项，但Chrome首页居然一度被篡改成了百度系的hao123，真是防不胜防。FuckBaidu！
页游的一些资源加载问题可以通过在F12的调试窗口里初步检查，判断问题属于程序还是运维部门。
当然我也确实见过一些新人依然是用IE的，还是要介绍一下世界上存在Chrome这么个浏览器。

其他

Adobe大家族、Office大家族

Adobe系列，当你想点美术系天赋时，自然会用到其中一些。
不过说实话，对于策划来说，那些基本的功能，尤其是简单的批量操作，美图秀秀确实会比PS的脚本更方便。
不考虑逼格问题的话，还是可以考虑装一个美图秀秀（我装了，没截在图里而已）。
Office系列就不介绍了，只可能不熟练，不可能不知道。
只提醒一点：多研究一下Excel的函数公式，能用公式填表就不要手填

最后

有些新人总是会认为：这个不是应该美术做？那个不是应该程序做？
我的观点是：作为什么都不会的策划，只有什么都会才能活下去。

作者：UXplayer
链接：https://www.jianshu.com/p/ceddde705933
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

HTML5新增内容精华总结

001: HTML5和HTML4究竟有哪些不同？

#声明方面

HTML5 文件类型声明（<!DOCTYPE>）变成下面的形式：

<!DOCTYPE html>

#标准方面

HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准，而是形成了自己的一套标准。

#标签方面

新增语义标签，其中包括

废除一些网页美化方面的标签，使样式与结构分离更加彻底, 包括

通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持。

#属性方面

增加了一些表单属性, 主要是其中的input属性的增强

<!– 此类型要求输入格式正确的email地址 –><input type=email >

<!– 要求输入格式正确的URL地址 –><input type=url >

<!– 要求输入格式数字，默认会有上下两个按钮 –><input type=number >

<!– 时间系列，但目前只有 Opera和Chrome支持 –><input type=date ><input type=time >

<!– 默认占位文字 –><input type=text placeholder=”your message” >

<!– 默认聚焦属性 –><input type=text autofacus=”true” >

其他标签新增了一些属性,

<!– meta标签增加charset属性 –>

<!– script标签增加async属性 –>

使部分属性名默认具有boolean属性

<!– 只写属性名默认为true –><input type=”checkbox” checked/>

<!– 属性名=”属性名”也为true –><input type=”checkbox” checked=”checked”/>

#存储方面

新增WebStorage, 包括localStorage和sessionStorage
引入了IndexedDB和Web SQL，允许在浏览器端创建数据库表并存储数据, 两者的区别在于IndexedDB更像是一个NoSQL数据库，而WebSQL更像是关系型数据库。W3C已经不再支持WebSQL。
引入了应用程序缓存器(application cache)，可对web进行缓存，在没有网络的情况下使用，通过创建cache manifest文件,创建应用缓存，为PWA(Progressive Web App)提供了底层的技术支持。

总结

对于HTML5与HTML4的区别，这些基本的概念是要有印象的，也许现在还比较粗略，但后面会一步步追问细节，慢慢深入，达到知其然也其所以然的效果。

002: meta标签属性有哪些？

简介: 常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

#charset属性

<!– 定义网页文档的字符集 –><meta charset=”utf-8″ />

#name + content属性

<!– 网页作者 –><meta name=”author” content=”开源技术团队”/>

<!– 网页地址 –><meta name=”website” content=”url”/>

<!– 网页版权信息 –><meta name=”copyright” content=”2018-2019 demo.com“/>

<!– 网页关键字, 用于SEO –><meta name=”keywords” content=”meta,html”/>

<!– 网页描述 –><meta name=”description” content=”网页描述”/>

<!– 搜索引擎索引方式，一般为all，不用深究 –><meta name=”robots” content=”all” />

<!– 移动端常用视口设置 –><meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/>

<!–

viewport参数详解：

width：宽度（数值 / device-width）（默认为980 像素）

height：高度（数值 / device-height）

initial-scale：初始的缩放比例（范围从>0 到10）

minimum-scale：允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable：用户是否可以手动缩 (no,yes)

–>

#http-equiv属性

<!– expires指定网页的过期时间。一旦网页过期，必须从服务器上下载。 –>

<!– 等待一定的时间刷新或跳转到其他url。下面1表示1秒 –>

<!– 禁止浏览器从本地缓存中读取网页，即浏览器一旦离开网页在无法连接网络的情况下就无法

访问到页面。 –>

<!– 也是设置cookie的一种方式，并且可以指定过期时间 –>

content=”name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/”/>

<!– 使用浏览器版本 –><meta http-equiv=”X-UA-Compatible”

content=”IE=edge,chrome=1″ />

<!– 针对WebApp全屏模式，隐藏状态栏/设置状态栏颜色，

content的值为default | black | black-translucent –>

content=”black-translucent” />

003: src和href的区别是什么？

#定义

href是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。

常见场景:

src是source的简写，目的是要把文件下载到html页面中去。

常见场景:

#作用结果

href 用于在当前文档和引用资源之间确立联系
src 用于替换当前内容

#浏览器解析方式

当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

004: script标签中defer和async的区别是什么？

默认情况下，脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候，文档解析就会被阻塞，在脚本下载和执行完成之后文档才能往下继续进行解析。

下面是async和defer两者区别：

当script中有defer属性时，脚本的加载过程和文档加载是异步发生的，等到文档解析完(DOMContentLoaded事件发生)脚本才开始执行。
当script有async属性时，脚本的加载过程和文档加载也是异步发生的。但脚本下载完成后会停止HTML解析，执行脚本，脚本解析完继续HTML解析。
当script同时有async和defer属性时，执行效果和async一致。

HBuilder X应用内展示的广告组件，可用于banner或信息流

开通广告步骤：

开通广告需在广告平台后台操作：
- App平台：https://uniad.dcloud.net.cn/
- 小程序平台：在各自的小程序管理后台操作。
申请广告位id 在各位后台申请广告位id
在页面合适位置编写代码，放置ad组件，配上广告位id（app是adpid，微信、头条、qq小程序是unit-id，百度小程序是apid）
App端打包后生效，打包时必须选择要集成的广告SDK（穿山甲、广点通、360联盟、快手）。

属性说明

属性名	类型	默认值	说明	平台差异
data	Object	可选	广告数据，通过 plus.ad.getAds (参考示例代码)，设置后adpid将无效	App
adpid	String		uni-AD App广告位id，在uni-AD官网申请广告位	App
unit-id	String		广告单元id，可在小程序管理后台的流量主模块新建	微信小程序、字节跳动小程序(最低版本1.19.0+)、QQ小程序
ad-intervals	number		广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新）	微信小程序(基础库2.3.1+)
appid	String		小程序应用 ID	百度小程序
apid	String		小程序广告位 ID	百度小程序
ad-left	Number		type为feeds时广告左边距（px），必须大于0	QQ小程序
ad-top	Number		type为feeds时广告上边距（px），必须大于0	QQ小程序
ad-width	Number		type为feeds时广告宽度（px），默认100%，最大值为屏幕宽度，最小值为265	QQ小程序
ad-height	Number		type为feeds时广告高度（px），最小85，最大160	QQ小程序
type	String	feed		QQ小程序、百度小程序、字节跳动小程序
@load	EventHandle		广告加载成功的回调
@error	EventHandle		广告加载失败的回调，event.detail = {errCode: }
@close	EventHandle		广告关闭的回调

type属性百度

广告类型：banner/feed，需和百青藤平台上的代码位类型相匹配。

type属性头条

广告的类型，默认 bannner，具体类型有：banner、video（视频）、large（大图）、lImg（左图右文）、rImg（右图左文），默认值为 banner

type属性 QQ

值	说明
banner	banner广告分 1 图和 3 图 1 文。3 图 1 文广告的背景色、文字颜色会根据祖先节点的背景色调整，分三种情况深色背景、浅色背景和白色背景
swip	翻页广告，1 图 1 文，会覆盖整个小程序，显示、隐藏逻辑需开发者自行控制
card	卡片广告，1 图，可关闭
feeds	自定义广告，可灵活控制广告上、左边距和宽高，以适应界面其他内容。可监听size事件获取实际宽高

App和微信小程序的ad组件没有type属性，可以用于banner，也可以用于信息流。

注意

无广告时没有高度，关闭广告时释放高度，宽度由父容器决定
App 平台，因广告组件内部获得广告数据计算后设置组件大小，会出现界面抖动问题，可以提前通过 plus.ad.getAds 获得广告数据，设置 data 后 adpid 将无效
微信小程序 <ad> 组件不支持触发 tap 等触摸相关事件
Android 平台 nvue的 <list> 组件中使用 <ad> 时，必须指定宽度属性<ad width="750rpx" />，因为 <list> 有自动的内存回收机制，不在屏幕范围的组件不被创建，组件内部无法获取大小
广点通概率出现重复广告，可根据需求请求广告数据，推荐单次大于1条(plus.ad.getAds) 来降低重复率
app-vue 页面使用 <ad> 不支持非 V3 编译，必须使用v3编译器。
<recycle-list> 暂不支持 <ad>
app-vue|QQ是客户端原生组件，层级最高无法被覆盖，app-nvue|微信|头条没有层级覆盖问题
app-vue 无法在 <swiper> 组件中使用<ad>
app-vue 不能在 <scroll-view> 组件中使用 <ad>，仅适用于页面级的滚动
HBuilderX2.8+版本Android平台更新穿山甲（今日头条）广告SDK后不再支持x86类型CPU，无法运行到x86类型cpu的模拟器。
<ad> 组件测试广告位是上图下文，uniAD后台申请的广告位默认左图右文
HBuilderX标准基座真机运行测试信息流广告位标识（adpid）为：1111111111

@error 错误码

App端聚合的穿山甲(iOS)：错误码
App端聚合的穿山甲(Android)：错误码
App端聚合的广点通(iOS)：错误码
App端聚合的广点通(Android)：错误码

示例：

<template>
  <view class="content">

    <!-- App平台 示例 1 -->
    <!-- adpid="1111111111" 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试，替换为自己申请获取的广告位标识 -->
    <view class="ad-view">
      <ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror"></ad>
    </view>

    <!-- App平台 示例 2 -->
    <!-- 需要时可自定义属性，监听到 error 回调后(e.target可以取到)，开发者可以针对性的处理，比如隐藏广告组件的父容器，以保证用户体验 -->
    <view class="ad-view" v-for="adItem in adList" :key="adItem.id">
      <ad :adpid="adItem.adpid" :data-xx="adItem.id"></ad>
    </view>

    <!-- App平台 示例 3 (手动请求广告数据 仅App平台支持) -->
    <view>
      <button @click="getAdData">Get ad data</button>
    </view>
    <view class="ad-view">
      <ad :data="adData"></ad>
    </view>

    <!-- 微信小程序 -->
    <view class="ad-view">
      <ad unit-id="" ad-intervals="100"></ad>
    </view>

    <!-- 百度小程序 -->
    <view class="ad-view">
      <ad appid="" apid="" type="feed"></ad>
    </view>

    <!-- 多平台兼容 -->
    <view class="ad-view">
      <ad adpid="1111111111" unit-id="" appid="" apid="" type="feed"></ad>
    </view>

  </view>
</template>

export default {
  data() {
    return {
      title: 'uni-app ad',
      adList: [],
      adData: {}
    }
  },
  onReady: function (e) {
    // 显示 4 个广告
    for (let i = 0; i < 4; i++) {
      this.adList.push({
        id: i,
        adpid: "1111111111"
      })
    }
  },
  methods: {
    getAdData: function (e) {
      // 仅APP平台支持
      plus.ad.getAds({
          adpid: '1111111111',  // 替换为自己申请获取的广告位标识，此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
          count: 1,   // 广告数量，默认 3
          width: 300  // 根据宽度获取合适的广告(单位px)
        },
        (res) => {
          this.adData = res.ads[0];
          console.log(this.adData);
        },
        (err) => {
          console.log(err);
        }
      )
    },
    onload(e) {
      console.log("onload");
    },
    onclose(e) {
      console.log("onclose: " + e.detail);
    },
    onerror(e) {
      console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
    }
  }
}

<style>
  .content {
    background-color: #DBDBDB;
    padding: 10px;
  }

  .ad-view {
    background-color: #FFFFFF;
    margin-bottom: 10px;
  }
</style>

layui的select实现省市区级联

本来是一个很简单的思路，就是change事件触发查询，但是我这个页面（之前已经存在的）是融合了vue+layui导致原来的vue的语法在这里边不受用，例如简单的@change因为用了layui是监听不到的，只能用layui的方式去实现，并且我也不知道怎么回事，在layui的change事件里边竟然不能用axios，我真的是特别无语了……总是提示这个undefined那个undefined

百度N圈，各种方法试遍，总算找到了可以实现的方式，不把它整理出来，感觉都对不起自己，以后我自己写的页面是坚决不会把vue和layui融合在一起了，感觉还是vue+element更适合！

1、页面的html

                       <div class="project-location">
                <div class="title">
                    <span>项目所在地:</span>
                </div>
                <div class="layui-form">
                    <div class="layui-input-inline">
                        <select ref="modules"
                                class="layui-form-select"
                                name="projectProvice"
                                lay-verify="required"
                                lay-filter="province"
                                lay-search>
                            <option value="">请选择省</option>
                            <option v-for="(type,index) in provinces" :value="type.dcode">{{type.distname}}</option>
                        </select>
                    </div>
                </div>
                <div class="cut-line">—</div>
                <div class="layui-form">
                    <div class="layui-input-inline">
                        <select ref="modules"
                                class="layui-form-select"
                                name="projectCity"
                                id="city"
                                lay-verify="required"
                                lay-filter="mycity"
                                lay-search>
                            <option value="0">请选择市</option>
                            <!--option v-for="(type,index) in cities" :value="type.dcode">{{type.distname}}</option> -->
                       </select>
                   </div>
                </div>
                <div class="cut-line">—</div>
                <div class="layui-form">
                   <div class="layui-input-inline">
                       <select ref="modules"
                               class="layui-form-select"
                               name="projectZone"
                               id="zone"
                               lay-filter="zone"
                               lay-verify="required"
                               lay-search>
                           <option value="0">请选择区</option>
                          <!--<option v-for="(type,index) in zones" :value="type.dcode">{{type.distname}}</option>-->
                       </select>
                   </div>
                </div>
            </div>

注意：这里省的option的赋值用的还是v-for，在页面mouted时查询出省级的数据，再layui render，市区的则是ajax查出数据之后再apend

2、在mouted()里边获取省级数据

this.axios.get("/qsmonitor/common/dist?pcode=")
               .then(res => {
                   this.provinces = res.data.data;
                   setTimeout(function() {
                       layui.form.render();
                   }, 10);
               });

3、选中省ajax获取市级数据

layui.form.on("select(province)", function (opt) {
               let pcode=opt.value;
               let $ = layui.jquery;
               layui.jquery.get("/qsmonitor/common/dist?pcode=" + pcode)
                   .then(res => {
                       //每次加载都要把之前选中的初始化
                       $("#city").empty();
                       $("#city").append(new Option("请选择市","0"));
                       $("#zone").empty();
                       $("#zone").append(new Option("请选择区","0"));
                       let tt = eval('(' + res + ')');
                       $.each(tt.data, function(key, val) {
                           $("#city").append(new Option(val.distname,val.dcode));
                       });
                       layui.form.render("select");
                   });
           });

4、选中市ajax获取区县数据

layui.form.on("select(mycity)", function (op) {
               let pd=op.value;
               let $ = layui.jquery;
               layui.jquery.get("/qsmonitor/common/dist?pcode=" + pd)
                   .then(res => {
                      $("#zone").empty();
                       $("#zone").append(new Option("请选择区","0"));
                      
                       let zz = eval('(' + res + ')');
                       $.each(zz.data, function(key, val) {
                           $("#zone").append(new Option(val.distname,val.pcode));
                       });
 
                       layui.form.render("select");
                   });
           });

在vue-cli项目中添加页面启动页

<template> <div id=”app”> // 启动页内容开始 <div class=”wrap” v-if=”show”> <div class=”pic1″> <img src=”@/assets/images/pic1.png” /> <img src=”@/assets/images/pic2.png” /> <img src=”@/assets/images/pic3.png” /> </div> </div> // 启动页内容结束 <keep-alive> <router-view v-if=”$route.meta.keepAlive” /> </keep-alive> <router-view v-if=”!$route.meta.keepAlive” /> </div> </template> <script> export default { name: ‘App’, data() { return { show: false } }, mounted() { // 判断页面是首次加载还是刷新 if (window.performance.navigation.type === 1) { console.log(‘页面被刷新’) } else { // 首次加载的话显示启动页内容，设置延时器再取消显示 console.log(‘首次加载’) this.show = true setTimeout(() => { this.show = false }, 4000) } } } </script> <style lang=”scss” scoped> #app { height: 100%; } // 启动页样式 .wrap { width: 100vw; height: 100vh; background: url(‘~@/assets/images/bg.png’) no-repeat center top #fff; background-size: cover; box-sizing: border-box; overflow: hidden; position: fixed; z-index: 2; } .wrap .pic1 { position: relative; width: 100%; top: 48px; } .pic1 img { opacity: 0; width: 21%; position: absolute; left: 48px; animation-name: fadeIn; /*动画名称*/ animation-duration: 1s; /*动画持续时间*/ animation-iteration-count: 1; /*动画次数*/ animation-delay: 0s; /*延迟时间*/ animation-fill-mode: forwards; } .pic1 img:nth-child(2) { left: 128px; top: 48px; animation-name: fadeIn; /*动画名称*/ animation-duration: 1s; /*动画持续时间*/ animation-iteration-count: 1; /*动画次数*/ animation-delay: 1s; /*延迟时间*/ animation-fill-mode: forwards; } .pic1 img:nth-child(3) { left: 208px; top: 48px; animation-name: fadeIn; /*动画名称*/ animation-duration: 1s; /*动画持续时间*/ animation-iteration-count: 1; /*动画次数*/ animation-delay: 2s; /*延迟时间*/ animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; /*初始状态透明度为0*/ } 50% { opacity: 0; /*中间状态透明度为0*/ } 100% { opacity: 1; /*结尾状态透明度为1*/ } } </style>

vue video全屏播放

需求：

1、视频为长方形，页面初始化打开为横屏全屏播放视频。

2、微信不支持自动播放，故自动播放需求删除。

方法：

1、vue-video-player插件

因需求较简单，仅要求播放本地一个视频，故未选择使用插件。

2、video

<div id="video_box" style="z-index: 999;" :class="{video_box_rotate: isIos}">
                <video
                    @click="videoPlay"
                    class="index_video"
                    poster="../assets/images/poster.jpg"
                    id="video_content"

　　　　　　　　　　　　style="object-fit:fill"  /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小

                    webkit-playsinline='true'
                    playsinline="true"
                    x5-playsinline="true"
                    x-webkit-airplay="true"
                    x5-video-player-type="h5"
                    x5-video-player-fullscreen="true" /*全屏播放*/
                    x5-video-ignore-metadata="true"
                    x5-video-orientation="landscape" /*播放器的方向，landscape横屏，portraint竖屏，默认值为竖屏*／
 　　　　　　　　　　　preload="preload"> <source src="../../static/video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > </video> </div>

具体属性解释可参考 https://blog.csdn.net/qq_16494241/article/details/62046891

同层H5播放器官网 https://x5.tencent.com/tbs/guide/video.html

注意：

x5-video-orientation="landscape" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*／

landscape属性ios不支持
为兼容ios横屏将视频旋转90度

mounted() {
        if (是否为ios) {
            this.videoFullScreen();
        }
    }

methods: {
　　　　// 视频宽高设置为手机宽高
        videoFullScreen() {
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            document.getElementById('video_content').style.height = width + 'px';
            document.getElementById('video_content').style.width = height + 'px';
        },
    }

／*视频旋转*/
.video_box_rotate{
　　
    transform rotate(90deg)
}

视频监听播放结束、进入全屏、退出全屏事件

mounted() {this.videoEnd()},
methods: {
    videoEnd(){

　　　　　　let video = document.getElementById(‘video_content’);　　　　　　video.addEventListener(‘ended’, () => {　　　　　　　　alert(‘video end’)　　　　　　});


　　}; // 视频播放结束
}
// 全屏事件 x5videoenterfullscreen
// 退出全屏 x5videoexitfullscreen

监听手机横竖屏

window.addEventListener('orientationchange', function() {
                    // alert(window.orientation); // 这里可以根据orientation做相应的处理
                    if (window.orientation === -90) {
                        self.iphoneScreenShow = true;
                    } else {
                        self.iphoneScreenShow = false;
                    }
                }, false);


视频初始化黑屏
可以在视频上加个div浮层（可以一个假的视频第一帧），然后用timeupdate方法监听，视屏播放及有画面的时候再移除浮层。https://segmentfault.com/a/1190000009395289
视频进入全屏，退出全屏监听
https://segmentfault.com/a/1190000013232870
监听视频播放完成
https://blog.csdn.net/mondy592/article/details/81219167

参考资料 https://blog.csdn.net/xcy1193068639/article/details/80242111#commentsedit

安卓去掉控制按钮 参考http://www.xyhtml5.com/3252.html

欢迎大家指点，谢谢

转载于:https://www.cnblogs.com/1032473245jing/p/10222448.html

在vue中写一段自适应屏幕代码,并在移动端判断横竖屏

效果如下：
1.自适应

2.判断移动端横竖屏

只需在app.vue中写入如下代码

<template>
  <div id="app">
    // 注意! src的图片自己找一张gif图
    <div class="app-hint"
         v-if="isScreen"><img src="./assets/image/screen.gif"
           alt=""></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenWidth: document.body.clientWidth, // 网页可见区域宽
      screenHW: window.orientation, // 判断横竖屏
      isScreen: false // 横竖屏
    };
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          // 执行自适应代码
          that.bodyScale()
          // 打印screenWidth变化的值
          console.log(that.screenWidth);
          that.timer = false;
        }, 400);
      }
    },
    screenHW () {
      this.rotate()
    }
  },
  methods: {
    // 自适应代码
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      var scale = devicewidth / 1960; // 分母——设计稿的尺寸
      document.body.style.zoom = scale; //放大缩小相应倍数
    },
     // 判断横竖屏
    rotate () {
      if (this.screenHW == 180 || this.screenHW == 0) {
        console.log('竖屏')
        this.isScreen = true
      } else if (this.screenHW == 90 || this.screenHW == -90) {
        console.log('横屏')
        this.isScreen = false
      }
    }
  },
  created() {
    // 执行自适应代码
    this.bodyScale()
  },
  mounted () {
    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        // 把横竖屏的变化赋值
        that.screenHW = window.orientation
      })()
    }
  }
};
</script>