WebGIS开发教程lovebet体育官网,设置橘子浏览器的newtab页面

题材讲述

lovebet体育官网 1

橘子浏览器,也就是哈hao123浏览器,默认的newtab(新标签)页面和Edge一样,整合了音讯什么没用的,想艺术想把它去掉。

lovebet体育官网 2

作者:liuyl

思路

So,
F12翻看一下以此文件所在的职位,只要把相应的html文件的行注释掉就足以了嘛

先看一下,显示的公文路径,

lovebet体育官网 3

再找到相应的目录,但是发现只可以找到AppData/Roaming/hao123JuziBroswer这边,下边的路径就从未了。

lovebet体育官网 4

所以见到,最后的是newtab.html的文件,而且以此理应在文虎文件夹中,SO
AppData\Roaming\hao123JuziBrowser\User_Data\Default\newtab一定到了这些文件夹下,但是没有newtab.html,只有一个newtab.datnewtab.zip多少个文件。

查看newtab.zip文件

lovebet体育官网 5

至于作者:GIS从业者,重要在ArcGIS平台下做WebGIS开发,最终有作者的联系形式

解决

现今找到了,新标签页面就是其一newtab.zip文件,只是每一回启动哈hao123浏览器的时候就会被解压到临时目录,再呈现。So,需要把这一个文件解压出来,修改了后来再压缩了,替换就好了。

lovebet体育官网 6

然后修改,jz.newtab.js文件,注释掉多少个Ad的function,再有两个news的函数,重新打包替换就好了

版权所有:转载请保留作者名和原始链接

这是一个连串教程,内容有必然连续性,可活动
目录篇 查看所有科目

课程示例代码下载

或多或少前言


这会是一个略显复杂的 Hello World

做 Web
开发,一上来就要面对至少二种程序语言(或协议),HTML、JavaScript、CSS

相较之下,下边这段 C 语言版 Hello World 确实是对初学者太过自己了~~

#include <stdio.h>
void main()  
{  
     printf("Hello World\n");
}

很遗憾,本课程不会特地商讨 HTML、JavaScript、CSS
的主干语法,甚至不会过多探索 jQuery、Bootstrap、ES6、lodash
等的语法或用法,以及浏览器调试工具的选取方法。这多少个将被默认为读者已经控制的嵌入知识,否则这么些课程就不可以将内容聚焦于
WebGIS
开发了。因此,假诺在阅读本体系教程过程中,碰着这些未做验证而让你倍感疑惑的步调或代码,请先花时间查找资料补足相关知识,也可留言以赢得作者和另外读者的相助。

本篇我们将应用 HTML5
BOILERPLATE

Bootstrap
3
和 ArcGIS
API for JavaScript 做出一个 Hello World 页面,页面将部署在 nginx 中。

关于 nginx 和 ArcGIS API for JavaScript
的配备请阅读WebGIS开发教程的第二篇和第三篇,这一篇中大家将直接使用后面两篇中配备好的
nginx 和 API

下面是本文


行使 HTML5 BOILERPLATE 搭建起来页面

HTML5
BOILERPLATE

是一个 web
开发前端模版,模板的效能就是让大家以模板为底蕴先河进行付出,很多至关首要的却和要落实的效用无关的干活早已由模板做好了。甚至不太需要探索模板究竟帮我们做了怎么,直接利用就足以了

一旦想询问模板大概做了哪些,能够翻阅这篇著作 HTML5 Boilerplate –
让页面有个好的开端

一般性状态下,开发一个新页面时,我都会从此处起步,而不是手动新建一个新的
html 文件。

下载

点击链接直接下载 v4.1.0 版本
html5-boilerplate

部署

将精减包内的文件夹解压到 lesson\1_Start\ 目录中,lesson
目录是放示例页面和代码的目录,该目录和 nginx-1.13.8
同级,复制后将文件夹名称从h5bp-html5-boilerplate-3cd1967 更改为
4_HelloWorld

成就后目录结构应当是这般的

lovebet体育官网 7

目录结构

为 lesson 目录配置虚拟目录

修改 nginx 的配备文件 nginx-1.13.8\conf\nginx.conf ,添加名为 lesson
的虚拟目录

server 段中添加如下配置

location ^~/lesson/ {
    alias   ..\\lesson\\;
}

修改后重启 nginx

访问页面

访问
http://localhost/lesson/1\_Start/4\_HelloWorld/index.html

恭贺,我们看看了第一个欢迎页面

lovebet体育官网 8

HTML5 Boilerplate 欢迎页

修改 index.html

在境内应用这套模板时,还亟需做一点点修改

替换 jQuery 的 CDN
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

表明或删除 google 总结

<!--<script>-->
    <!--var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];-->
    <!--(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];-->
    <!--g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';-->
    <!--s.parentNode.insertBefore(g,s)}(document,'script'));-->
<!--</script>-->

刷新页面,即便页面没有变动,但调试工具中早就不会再唤醒不能获取
jquery.min.js 文件了

以上经过修改的 index.html 文件,可以在演示代码
lesson\1_Start\4_HelloWorld\index.html 路径下找到

引入 Bootstrap

Bootstrap
是最受欢迎的 HTML、CSS 和 JS 框架,用于支付响应式布局、移动设备优先的
WEB 项目 (引自 Bootstrap 官网)

使用 Bootstrap
至少可以保证我们的以身作则页面在未经美术设计的事态下,不至于太过难看。在其实项目中本身一般也会引入
Bootstrap
,在样式和响应式布局方面可以提供很好的基础和有利,官方提供的组件和插件也都很实用。此外,基于
Bootstrap 的第三方 jQuery 插件相当丰裕好用,例如
Treeview、Table等,可以省下重复造轮子的日子和活力。

其一课程所有示例页面都会引入
Bootstrap,且一般意况下,教程中不会估计解释使用 Bootstrap
的连带代码,请读者通过官方文档自行补充有关文化

创制新的 html 文件

复制粘贴上一小节修改后的 index.html 文件到同一目录中,重命名为
bootstrap.html

修改 bootstrap.html 文件

注释对 normalize.cssmain.css 样式文件的引用,添加对 bootstrap
样式文件的引用。之所以要诠释掉原来的两个,是因为 bootstrap.min.css
中已经席卷了这多少个文件中的样式,不需要再重新引用了

<!--<link rel="stylesheet" href="css/normalize.css">-->
<!--<link rel="stylesheet" href="css/main.css">-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

在 jQuery 引用的背后添加 bootstrap 的 js 文件引用

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

修改页面呈现的始末,替换
<p>Hello world! This is HTML5 Boilerplate.</p>

<div style="margin-top: 50px" class="container">
    <div class="jumbotron">
        <h1>Hello World</h1>
        <p>这是WebGIS开发教程的示例页面</p>
        <a class="btn btn-primary btn-lg" target="_blank" 
            href="https://www.jianshu.com/p/519dbc371575" role="button">前往 教程</a>
    </div>
</div>
访问页面

访问
http://localhost/lesson/1\_Start/4\_HelloWorld/bootstrap.html
查看修改后的页面

可以观看如下页面

lovebet体育官网 9

访问 bootstrap.html

如上经过修改的 bootstrap.html 文件,可以在演示代码
lesson\1_Start\4_HelloWorld\bootstrap.html 路径下找到

引入 ArcGIS API for JavaScript

复制粘贴上一小节修改后的 bootstrap.html 文件到均等目录中,重命名为
map.html

修改 map.html 文件

添加 main.css 文件的引用(这一个文件和下边的 init.js
文件都是在上一篇教程中安排的 API 文件)

<link rel="stylesheet" href="/arcgis_js_api/library/4.6/esri/css/main.css">

添加 init.js 文件的引用

<script src="/arcgis_js_api/library/4.6/init.js"></script>

修改页面 html ,将事先的

<div style="margin-top: 50px" class="container">
    ...
</div>

改为

<div style="margin-top: 50px" class="container">
    <div class="jumbotron">
        <div id="view-main" style="height:400px"></div>
    </div>
</div>

在结尾一个 script 标签后添加新的 script 标签。这段代码取自 ArcGIS
API for JavaScript
官方文档中最基础的以身作则,如需详细询问代码意义,请阅读官方文档 Intro to
MapView – Create a 2D
map

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
    ], function (Map, MapView) {
        var map = new Map({
            basemap: "streets",
        })
        var view = new MapView({
            container: "view-main",
            map: map,
            zoom: 3,
            center: [110, 40],
        })
    })
</script>

经过上述修改,最后我们的页面将是下边这一个样子(去掉了部分注释代码)

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>4_HelloWorld</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/arcgis_js_api/library/4.6/esri/css/main.css">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to
    improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div style="margin-top: 50px" class="container">
    <div class="jumbotron">
        <div id="view-main" style="height:400px"></div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/arcgis_js_api/library/4.6/init.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
    ], function (Map, MapView) {
        var map = new Map({
            basemap: "streets",
        })
        var view = new MapView({
            container: "view-main",
            map: map,
            zoom: 3,
            center: [110, 40],
        })
    })
</script>
</body>
</html>
访问页面

访问
http://localhost/lesson/1\_Start/4\_HelloWorld/map.html
查看修改后的页面

可以看到如下页面

lovebet体育官网 10

访问 map.html

如上经过改动的 map.html 文件,可以在示范代码
lesson\1_Start\4_HelloWorld\map.html 路径下找到

此处是终极


这篇教程讲述了一下从零起始,如何以 HTML5 BOILERPLATE 和 Bootstrap
为根基,编写一个地图页面。倘诺几年前,已经得以在 map.html
的根底上通过不停添加 html 和 js 代码来构建项目利用了,一个犬牙交错的
WebGIS
应用也然而就是在此基础大校代码分散到此外文件之中,并按某种逻辑或思想来协会那一个文件和代码

但放到现在,若仍如此就稍显脱离时代时尚了。从下一篇起首,大家将一步步品尝利用
Gulp 和 Webpack 匡助大家开展 WebGIS
开发。这一篇中涉及到的有所东西都不会被丢弃,但我们还需要学习应用更多的工具和技巧才能重复看到这一篇教程中最终看看的页面

可是,也许这一切都是值得的~

本学科是一个多级教程,可以到目录章查看所有课程

联络作者


  • 简书主页
    请优先关注自身的简书账号,并在简书对应作品下留言,有APP通知推送所以能即时看到,简书也是自家的稿子先发平台

  • Github主页
    教程和血脉相通代码在自家的Github里都可以找到

  • ArcGIS乐乎主页
    著作会被一并到ArcGIS微博中,ArcGIS今日头条是面向周边GISer的知识分享和问答平台,推荐我们平日去看望

  • 微信公众号 搜索 幻想GIS 或扫描二维码,随笔会因而公众号举办推送

    lovebet体育官网 11

    请扫码关注微信公众号 幻想GIS

  • QQMail
    liuyl89@qq.com

  • GMail
    liuyl.gisuni@gmail.com
    不太平静,指出邮件后在简书里留言告知自己一下


相关文章