webui之常用js操作（webui界面是什么）

更新：2022-11-15 22:40

本文目录一览：

web前端开发需要掌握的几个必备技术
在WEB中如何用JS打开APP
Web前端的学习顺序及内容是什么？
[WKWebView js方法的使用](#WKWebView js方法的使用)

web前端开发需要掌握的几个必备技术

接下来由小编简单的列举出几个前端开发中必须要学会的知识：

第一阶段：

HTML+CSS:

HTML进阶
CSS进阶
div+css布局
HTML+css整站开发 JavaScript基础：
Js基础教程
js内置对象常用方法
常见DOM树操作大全
ECMAscript、DOM、BOM
定时器和焦点图 JS基本特效：
常见特效，例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图 JS高级特征：
正则表达式
排序算法
递归算法
闭包
函数节流
作用域链
基于距离运动框架
面向对象基础 JQuery：基础使用
悬着器
DOM操作
特效和动画
方法链
拖拽、变形
JQueryUI组件基本使用

第二阶段：

HTML5和移动Web开发 HTML5：

HTML5新语义标签
HTML5表单
音频和视频
离线和本地存储
SVG、WebSocket、Canvas CSS3:
CSS3新选择器
伪元素
色彩表示法
边框、阴影
background系列属性改变
Transition、动画
景深和深透、3D效果制作
Velocity.js框架
元素进场、出场策略
炫酷CSS3网页制作 Bootstrap:
响应式概念
媒体查询
响应式网站制作
删格系统
删格系统原理
Bootstrap常用模板
LESS和SASS 移动Web开发：
跨终端WEB和主流设备简介
视口
流式布局
弹性盒子
rem
移动终端JavaScript事件
手机中常见JS效果制作
Zepto.js
手机聚划算页面
手机滚屏

第三阶段：

HTTP服务和AJAX编程 WEB服务器基础：

服务器基础知识
Apache服务器和其他WEB服务器介绍
Apache服务器搭建
HTTP介绍 PHP基础：
PHP基础语法
使用PHP处理简单的GET或者POST请求 AJAX上篇：
Ajax简介和异步的概念
Ajax框架的封装
XMLHttpRequest对象详细介绍方法
兼容性处理方法
Ajax中缓存问题
XML介绍和使用 AJAX下篇：
JSON和JSON解析
数据绑定和模板技术
JSONP、跨域技术
图片预读取和lazy-load技术
JQuery框架中的AjaxAPI
使用Ajax实现瀑布流案例

第四阶段：

面向对象进阶 面向对象终极篇：

从内存角度到理解JS面向对象
基本类型、复杂类型
原型链
ES6中的面向对象
属性读写权限
设置器、访问器 面向对象三大特征：
继承性
多态性
封装性
接口 设计模式：
面向对象编程思维
单例模式
工厂模式
策略模式
观察者模式
模板方法模式
代理模式
装饰者模式
适配器模式
面向切面编程

第五阶段：

封装一个属于自己的框架 框架封装基础：

事件流
冒泡、捕获
事件对象
事件框架
选择框架 框架封装中级：
运动原理
单物体运动框架
多物体运动框架
运动框架面向对象封装 框架封装高级和补充：
JQuery框架雏形
可扩展性
模块化
封装属于传智自己的框架

第六阶段：

模块化组件开发 面向组件编程：

面向组件编程的方式
面向组件编程的实现原理
面向组件编程实战
基于组件化思想开发网站应用程序 面向模块编程：
AMD设计规范
CMD设计规范
RequireJS，LoadJS
淘宝的SeaJS

第七阶段：

主流的流行框架 Web开发工作流：

GIT/SVN
Yeoman脚手架
NPM/Bower依赖管理工具
Grunt/Gulp/Webpack MVC/MVVM/MVW框架：
Angular.js
Backbone.js
Knockout/Ember 常用库：
React.js
Vue.js
Zepto.js

第八阶段：

HTML5原生移动应用开发 Cordova：

WebApp/NativeApp/HybirdApp简介
Cordova简介、与PhoneGap之间的关系
开发环境搭建
Cordova实战（创建项目，配置，编译，调试，部署发布） Ionic：
Ionic简介和同类对比
模板项目解析
常见组件及使用
结合Angular构建APP
常见效果（下拉刷新，上拉加载，侧滑导航，选项卡） ReactNative：
ReactNative简介
ReactNative环境配置
创建项目，配置，编译，调试，部署发布
原生模块和UI组件
原生常用API HTML5+：
HTML5+中国产业联盟
HTML5PlusRuntime环境
HBuilder开发工具
MUI框架
H5+开发和部署

第九阶段：

Node.js全栈开发 快速入门：

Node.js发展、生态圈
Io.js
Linux/Windows/OSX环境配置
REPL环境和控制台程序
异步编程，非阻塞I/O
模块概念，模块管理工具
开发流程，调试，测试 核心模块和对象：
全局对象global，process，console，util
事件驱动，事件发射器
加密解密，路径操作，序列化和反序列化
文件流操作
HTTP服务端与客户端 Web开发基础：
HTTP协议，请求响应处理过程
关系型数据库操作和数据访问
非关系型数据库操作和数据访问
原生的Node.js开发Web应用程序
Web开发工作流
Node.js开发Blog案例 快速开发框架：
Express简介+MVC简介
Express常用API
Express路由模块
Jade/Ejs模板引擎
使用Express重构Blog案例
Koa等其他常见MVC框架

在WEB中如何用JS打开APP

先看一下Web中，我们给h1标签添加一个onclick事件，让它在被点击之后，修改当前的url。 Web中的HTML代码：

<head>
<script>
function getInfo(name) {
    window.location = "/getInfo/"+name;
}
</script>
</head>
<body>
<h1 onclick="getInfo('why')">Name</h1>
</body>
</html>

iOS中，先拖拽WebView，访问localhost，然后通过WebView的委托事件监听url跳转操作，并且把跳转截取下来。也就是说，在onclick的时候，普通浏览器会跳转到那个url，但是在iOS的这个WebView里面，这个跳转会被拦截，用这种方式可以巧妙地实现JS调用iOS的原生代码：

//
// DWViewController.m
// DareWayApp
//
// Created by why on 14-6-3.
// Copyright (c) 2014年 DareWay. All rights reserved.
//
#import "DWViewController.h"
@interface DWViewController ()
@property (weak, nonatomic) IBOutlet UIWebView *myWebview; // 主页面
@end
@implementation DWViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // 适配iOS6的状态栏
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        _myWebview.frame = CGRectMake(0,20,self.view.frame.size.width,self.view.frame.size.height-20);
    }
    // 加载指定的URL
    NSURL *url = [NSURL URLWithString:@""];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [_myWebview setDelegate:self];
    [_myWebview loadRequest:request];
}
// 网页中的每一个请求都会被触发
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    // 每次跳转时候判断URL
    if([request.mainDocumentURL.relativePath isEqualToString:@"/getInfo/why"]) {
        NSLog(@"why");
        return NO;
    }
    return YES;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

Web前端的学习顺序及内容是什么？

第一阶段:

HTML CSS: HTML进阶、CSS进阶、div css布局、HTML css整站开发
JavaScript基础: Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图
JS基本特效: 常见特效，例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图
JS高级特征: 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础
JQuery: 基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用

第二阶段:

HTML5和移动Web开发

HTML5: HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas
CSS3: CSS3新选择器、伪元素、色彩表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作
Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS
移动Web开发: 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏

第三阶段:

HTTP服务和AJAX编程

WEB服务器基础: 服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍
PHP基础: PHP基础语法、使用PHP处理简单的GET或者POST请求
AJAX上篇: Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用
AJAX下篇: JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现瀑布流案例

第四阶段:

面向对象进阶

面向对象终极篇: 从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器
面向对象三大特征: 继承性、多态性、封装性、接口
设计模式: 面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程

第五阶段:

封装一个属于自己的框架

框架封装基础: 事件流、冒泡、捕获、事件对象、事件框架、选择框架
框架封装中级: 运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装
框架封装高级和补充: JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架

第六阶段:

模块化组件开发

面向组件编程: 面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序
面向模块编程: AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS

第七阶段:

主流的流行框架

Web开发工作流: GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack
MVC/MVVM/MVW框架: Angular.js、Backbone.js、Knockout/Ember
常用库: React.js、Vue.js、Zepto.js

第八阶段:

HTML5原生移动应用开发

Cordova: WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战（创建项目，配置，编译，调试，部署发布）
Ionic: Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果（下拉刷新，上拉加载，侧滑导航，选项卡）
React Native: React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API
HTML5+: HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署

第九阶段:

Node.js全栈开发

快速入门: Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试
核心模块和对象: 全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作、序列化和反序列化、文件流操作、HTTP服务端与客户端
祝你学有所成！如果大家对于学习前端有任何不懂的可以随时来问我，我给你提供一个非常不错的前端交流学习群：前面是一一四，中间是一八八，后面是四九三一。有问题就在里面问我，这样你可以少走很多弯路，做起来有效率，记得多跟有经验的人交流，别闭门造车。如果没有比较好的教程，也可以管我要。

WKWebView js方法的使用

一、h5 调用 OC，给OC传值

在WKWebview初始化的时候，先注册JS方法

// 这个类主要用来做native与JavaScript的交互管理
WKUserContentController * wkUController = [[WKUserContentController alloc] init];
// 注册一个name为jsToOcNoPrams的js方法，设置处理接收JS方法的代理
[wkUController addScriptMessageHandler:self name:@"jsToOcNoPrams"];
[wkUController addScriptMessageHandler:self name:@"jsToOcWithPrams"];
config.userContentController = wkUController;

拦截js方法，接收参数 注意：遵守WKScriptMessageHandler协议，代理是由WKUserContentControl设置

// 通过接收JS传出消息的name进行捕捉的回调方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"name:%@\n body:%@\n frameInfo:%@\n",message.name,message.body,message.frameInfo);
    // 用message.body获得JS传出的参数体
    NSDictionary * parameter = message.body;
    // JS调用OC
    if([message.name isEqualToString:@"jsToOcNoPrams"]){
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"js调用到了oc" message:@"不带参数" preferredStyle:UIAlertControllerStyleAlert];
        [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { }])];
        [self presentViewController:alertController animated:YES completion:nil];
    } else if([message.name isEqualToString:@"jsToOcWithPrams"]){
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"js调用到了oc" message:parameter[@"params"] preferredStyle:UIAlertControllerStyleAlert];
        [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { }])];
        [self presentViewController:alertController animated:YES completion:nil];
    }
}

在webview释放注销之前移除js方法

// 移除注册的js方法
[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"jsToOcNoPrams"];

二、OC调用H5，给H5传值

// OC调用JS changeColor()是JS方法名，completionHandler是异步回调block
NSString *jsString = [NSString stringWithFormat:@"changeColor('%@')", @"Js参数"];
[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
    NSLog(@"改变HTML的背景色");
}];
// 改变字体大小 调用原生JS方法
NSString *jsFont = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", arc4random()%99 + 100];
[_webView evaluateJavaScript:jsFont completionHandler:nil];

// 页面加载完成之后调用
- (void)webView:(WKWebView*)webView didFinishNavigation:(WKNavigation*)navigation {
    [SVProgressHUD dismiss];
    NSString* jsStr = [NSString stringWithFormat:@"payResult('%@')",@"true"];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError* _Nullable error) {
        NSLog(@"==%@----%@",result, error);
    }];
}