<body>
<!-- Calls into the javascript interface for the activity -->
<!-- 从HTML文件中调用activity中的函数 -->
<!-- 也就是从HTML到android程序 留意window.demo.clickOnAndroid()这句话 -->
<a onClick="window.demo.clickOnAndroid()">Click</a>
</body>
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo")
final class DemoJavaScriptInterface {
DemoJavaScriptInterface() {
}
/**
* This is not called on the UI thread. Post a runnable to invoke
*
* loadUrl on the UI thread.
*
*/
public void clickOnAndroid() { // 注意这里的名称。它为clickOnAndroid(),注意，注意，严重注意
mHandler.post(new Runnable() {
public void run() {
Toast.makeText....
}
})
}
}
先看一下Web中，我们给h1标签添加一个onclick事件，让它在被点击之后，修改当前的url。Web中的HTML代码：
<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]
// Do any additional setup after loading the view, typically from a nib.
// 适配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:@"http://localhost"]
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.
}
//app.js
App({
onLaunch: function () {
let App = this
// 设置api地址
App.setApiRoot()
},
globalData: {
userInfo: null
},
api_root: '', // api地址
appid:'',
/**
* 显示失败提示框
*/
showError(msg, callback) {
wx.showModal({
title: '友情提示',
content: msg,
showCancel: false,
success(res) {
callback && callback()
}
})
},
/**
* 设置api地址
*/
setApiRoot() {
let App = this
// App.api_root = config.config.host
let extConfig = wx.getExtConfigSync? wx.getExtConfigSync(): {}
console.log(extConfig)
App.appid = extConfig.attr.appid
App.api_root = extConfig.attr.host
},
/**
* get请求
*/
_get(url, data, success, fail, complete, check_login) {
let App = this
wx.showNavigationBarLoading()
// 构造请求参数
data = Object.assign({
token: wx.getStorageSync('token'),
appid:App.appid
}, data)
// if (typeof check_login === 'undefined')
// check_login = true
console.log(App.api_root)
// 构造get请求
let request = () => {
data.token = wx.getStorageSync('token')
wx.request({
url: App.api_root + url,
header: {
'content-type': 'application/json'
},
data,
success(res) {
if (res.statusCode !== 200 || typeof res.data !== 'object') {
console.log(res)
App.showError('网络请求出错')
return false
}
if (res.data.code === -1) {
// 登录态失效, 重新登录
wx.hideNavigationBarLoading()
App.doLogin(() => {
App._get(url, data, success, fail)
})
} else if (res.data.code === 0) {
App.showError(res.data.msg)
return false
} else {
success && success(res.data)
}
},
fail(res) {
// console.log(res)
App.showError(res.errMsg, () => {
fail && fail(res)
})
},
complete(res) {
wx.hideNavigationBarLoading()
complete && complete(res)
},
})
}
// 判断是否需要验证登录
check_login ? App.doLogin(request) : request()
},
/**
* post提交
*/
_post_form(url, data, success, fail, complete) {
wx.showNavigationBarLoading()
let App = this
// 构造请求参数
data = Object.assign({
token: wx.getStorageSync('token'),
appid:App.appid
}, data)
data.token = wx.getStorageSync('token')
wx.request({
url: App.api_root + url,
header: {
'content-type': 'application/x-www-form-urlencoded',
},
method: 'POST',
data,
success(res) {
if (res.statusCode !== 200 || typeof res.data !== 'object') {
App.showError('网络请求出错')
return false
}
if (res.data.code === -1) {
// 登录态失效, 重新登录
App.doLogin(() => {
App._post_form(url, data, success, fail)
})
return false
} else if (res.data.code === 0) {
App.showError(res.data.msg, () => {
fail && fail(res)
})
return false
}
success && success(res.data)
},
fail(res) {
// console.log(res)
App.showError(res.errMsg, () => {
fail && fail(res)
})
},
complete(res) {
wx.hideLoading()
wx.hideNavigationBarLoading()
complete && complete(res)
}
})
},
/**
* 验证登录
*/
checkIsLogin() {
return wx.getStorageSync('token') != ''
},
/**
* 授权登录
*/
doLogin(callback) {
let App = this
// if (e.detail.errMsg !== 'getUserInfo:ok') {
// return false
// }
wx.showLoading({
title: "加载数据中...",
mask: true
})
// 执行微信登录
wx.login({
success(res) {
// 发送用户信息
App._post_form('login', {
code: res.code,
}, result => {
// 记录token user_id
wx.setStorageSync('token', result.data.token,)
// 执行回调函数
callback && callback()
}, false, () => {
wx.hideLoading()
})
}
})
}
})
