设为首页 加入收藏

TOP

导航页的开发--手机web app开发笔记(四)(一)
2019-09-04 00:58:53 】 浏览:147
Tags:导航 开发 --手机 web app 笔记

    好了,的所有的基础知识已经准备完毕了,现在开始制作引导页。这个引导页需要一个HTML文件,JS文件,一个CSS文件。在HBuilderX中根目录下添加“Guid.html”,在JS文件夹添加“myth.js”,在CSS文件夹下添加“myth.css”。

一、myth.js文件

   该文件是个插件,对常用的操作进行了封装,本章节主要把该文件的框架搭建出来,随着开发的深入,会不断的完善这个js文件,最后它会成为一个丰富的插件,一遍以后使用。

(一)基本框架

; //java script 弱语法的特点,如果前面刚好有个函数没有以";"结尾,那么可能会有语法错误
var myth = (function(selector) {
'use strict';
var _myth = function(selector) {
};
_myth.version = 'myth 1.0';
return _myth;
})(document);

 上述代码就是基本的插件代码,前面的分号,可以解决插件与其它js合并时,别的代码可能会产生的错误问题。

“(function(){})()”这个结构表示立即执行第一个小括号内的函数;第二个小括号中的“document”作为参数传递给第一个小括号内的函数。

'use strict';

这行代码表示严格模式,顾名思义,严格模式就是使得 java script 在更严格的条件下运行,有助于更规范的开发。如果在语法检测时发现语法问题,则整个代码块失效,并导致一个语法异常。如果在运行期出现了违反严格模式的代码,则抛出执行异常。

二、myth.css文件

@charset "utf-8";
html {
  color: #333;
  background:#fff;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
}

/* 统一内外边距*/
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea,
p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer,
header, menu, nav, section
{ margin: 0; padding: 0; }

三、index.html文件

首先在默认文档index.html中,填写代码实现:如果第一次启动将进入启动页“guid.html”,如果第二次启动直接进入程序主界面。其实这里的主界面就是“index.html”,的实现原理是这样的,webAPP启动时,启动页面不需要自动关闭,等待的主界面“index.html”逻辑顺序,数据执行完毕,如果第一次启动在“guid.html”关闭webAPP启动页面,如果不是第一次启动在“index.html”关闭webAPP启动页面。

第一步:“manifest.json”可视化界面关掉“自动关闭启动界面”,如图4-1所示。

 

图4-1  启动界面设置

第二步:myth.js代码补充。

 

; //java script 弱语法的特点,如果前面刚好有个函数没有以";"结尾,那么可能会有语法错误
var myth = (function(selector) {
'use strict';
var _myth = function(selector) {
//如果默认参数不设置,自动赋值document
if (!selector) {
selector = document;
}
//获取selector数据类型,代码后面序号1有详细用法解释
var selectorType = typeof(selector);
//根据selector数据类型,进行同操作,代码后面序号2有详细用法解释
switch (selectorType) {
case 'string'://如果是字符串类型,使用querySelectorAll获取selector对象,结果记录到reObj内
var doms = document.querySelectorAll(selector);//通过该方法查找HMTL中select对象,代码后面序号2有详细用法解释
//reObj是个数据对象目前设置两个属性dom这个是java script数据对象,length表示doms对象数量
var reObj = {
dom: doms,
length: doms.length
};
break;
case 'object'://如果是object类型,结果直接记录到reObj内
var reObj = {
dom: [selector],
length: 1
};
break;
default://除了上述两种类型外,返回null对象
return null;
}
reObj.__proto__ = mythExtends;
//__proto__:是一个对象拥有的内置属性,是JS内部使用寻找原型链的属性。可以理解为它是一个指针,
//用于指向创建它的函数对象的原型对象prototype(即构造函数的prototype),简单理解为“为reObj
//添加了一些扩展属性,myth(selector)选择对象后,可以进一步执行mythExtends中的方法。
return reObj; };
//myth(selector)对象的扩展方法 var mythExtends = { /* dom 元素遍历 */ each: function(callBack) { if (!callBack) { return; } for (var i = 0; i < this.length; i++) { this.dom[i].index = i; callBack(this.dom[i]);//返回每一个dom对象 } }, setWidth: function(swidth) {//设置myth(selector)对象宽度 this.dom[0].style.width =swidth; }, redWidth: function() {//获取myth(selector)对象宽度 return this.dom[0].offsetWidth; }, setHeight: function(sheight) {//设置myth(selector)对象高度 this.dom[0].style.height =sheight; }, redHeight: function() {//获取myth(selector)对象高度 return this.dom[0].offsetHeight; } } _myth.version = 'myth 1.0';//设置版本 _myth.plusRea
首页 上一页 1 2 3 4 5 下一页 尾页 1/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇【Android】Android Studio NDK .. 下一篇Flutter学习笔记(25)--ListView..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目