图片 2

微信小程序联盟:官方文档+精品教程+demo集合(12月更新……)

小程序日历

WebView是android常见的一个组件,随着混合开发的发展,越来越多的公司使用原生和h5共同开发。所以使用WebView的频率越来越高了,所以想做次总结

1:官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461
2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599
3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html
4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载
5:微信小程序公测接入指南:http://www.wxapp-union.com/portal.php?mod=view&aid=259
6:微信小程序支付文档:https://pay.weixin.qq.com/wiki/d … pi.php?chapter=3_1#
7:新手入门宝典:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1989
8:免费视频:http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=37&filter=typeid&typeid=7
9:实战宝典:http://www.wxapp-union.com/special/solution.html
10:从注册到上线系列:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4375
11:精品合集:
       微信小程序特殊效果合集第一期
       微信小程序特殊效果合集第二期
       微信小程序优秀教程及文章合集第一期

特别说明:
1:不了解微信小程序的同学,请先搜索一下微信小程序究竟是什么,有哪些特性;
2:有htmlcssjs基础者可以直接进入实践,边实践边学习,尤其是有react与vue基础的;
3:微信小程序不需要特别申请(认证或账号)即可开始使用工具开发;
4:微信小程序是需要后台的,不限定任何语言,提供小程序接口要求的json格式即可;
5:初次开发者,推荐阅读新手跳坑系列,有几个坑,先了解一下,遇到时便可以查阅了;
6:如有作者不希望自己的作品被放置在这里,请联系我删除;
7:如果遇到问题,推荐多使用搜索,对帖子及文章进行搜索;

微信小程序大事记编年史:旨在让大家独立去思考变化的意义:(日期非精确,仅为大致日期)

12月21日:微信小程序开放新增功能:分享,自定义模板消息,客服消息,扫一扫;
12月30日:微信开放带参数二维码,允许已上线的小程序制作进入任意页面的二维码;
1月9日:微信开放微信小程序;
1月22日:微信增加社交分类,允许提交社交类小程序,但是必须具备社交相关的资质证书;
1月25日:微信开始允许直播类小程序上线,上线的有腾讯now直播,企鹅电竞等;
2月1日:微信开放微信搜索,在微信搜索结果内将可以直接展示小程序,并且位置是第一位;但是仍需全名搜搜方可显示;
2月10日,微信开放部分关键词的模糊搜索显示,包括表情、美食、音乐、电影、读书、日记、计算、股票、日历、电商、酒店、出行、汽车、旅行、快递等领域;
2月19日:微信开发者社区从封闭状态,改为开放状态,任何人均可浏览;
2月23日:摩拜单车宣布原二维码也可以适用于小程序,使用微信扫一扫扫描摩拜单车二维码将直接打开小程序;
3月2日:微信公开课征集小程序案例
3月5日:马化腾回记者问中提出:小程序是面向未来的产品:马化腾:微信为什么力推小程序?微信公众号会推付费内容吗? …
3月27日:微信官方宣传支持个人注册:微信小程序-快讯:小程序面向个人开发者开放-
4月14日:微信开放长按识别小程序二维码功能;

预览图片API可以打开小程序码(小程序互跳)

5月8日:开放群ID接口,可获取群ID和群名称
5月10日:开放“附近小程序”
5月12日:上线“小程序数据助手”,支持实时查询小程序数据
5月19日:新增页面内转发功能;支持接入微信运动步数数据等
5月27日:小程序码生成数量无限制;用户画像支持分析小程序数据
6月1日:公众号群发文章通过文字或图片链接打开小程序功能
6月3日:小程序新增推广功能,支持自定义关键词

12月29日小程序资讯集合

12月29日小程序Demo集合

12月15日小程序资讯集合

12月15日小程序Demo集合

12月1日小程序资讯集合

12月1日小程序Demo集合

思路分析

要实现一个日历,就需要先知道几个值:

  • 当月有多少天

  • 当月第一天星期几

根据常识我们得知,每月最多31天,最少28天,日历一排7个格子,则会有5排,但若是该月第一天为星期六,则会产生六排格子才对。

小程序没有DOM操作概念,故不能动态的往当月第一天的插入多少个空格子,只能通过在前面加入空格子的循环来控制,具体参考 wxml 文件。

<a name=”t0″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>WebView的常见用法

日历模板引入

日历模板面板支持  style=”box-sizing: border-box; font-weight: 600;”>手势左右滑动

提供跳转至今天方法jumpToToday

提供 template 模板引入

  1. 引入wxmlwxss

// example.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
   <template is="calendar" data="{{...calendar}}" />
</view>

/* example.wxss */@import '../../template/calendar/index.wxss';
  1. 日历组件初始化

import initCalendar, { getSelectedDay, jumpToToday } from '../../template/calendar/index';const conf = {  onShow: function() {    initCalendar({      // disablePastDay: true, // 是否禁选过去日期
      // multi: true, // 是否开启多选,
      /**       * 选择日期后执行的事件       * @param { object } currentSelect 当前点击的日期       * @param { array } allSelectedDays 选择的所有日期(当mulit为true时,才有allSelectedDays参数)       */
      afterTapDay: (currentSelect, allSelectedDays) => {        console.log('当前点击的日期', currentSelect);
        allSelectedDays && console.log('选择的所有日期', allSelectedDays);        console.log('getSelectedDay方法', getSelectedDay());
      },      /**       * 日期点击事件(此事件会完全接管点击事件)       * @param { object } currentSelect 当前点击的日期       * @param { object } event 日期点击事件对象       */
      onTapDay(currentSelect, event) {        console.log(currentSelect);        console.log(event);
      },
    });
  },  /**   * 跳转至今天   */
  jump() {    jumpToToday();
  }
};Page(conf);

<a name=”t1″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>最简单的用法

日历选择器模板引入

日历模板面板支持  style=”box-sizing: border-box; font-weight: 600;”>手势左右滑动

提供跳转至今天方法jumpToToday

此 template 带有 input 输入框,不影响模板的使用,可配置隐藏;

日期选择 input 组件支持直接输入指定日期;

  1. 引入wxmlwxss

// example.wxml
<import src="../../template/datepicker/index.wxml"/>

<view class="datepicker-box">
    <template is="datepicker" data="{{...datepicker}}" />
</view>

/* example.wxss */@import '../../template/datepicker/index.wxss';
  1. 日期选择器初始化

import initDatepicker, { getSelectedDay, jumpToToday } from '../../template/datepicker/index';const conf = {  onShow: function() {    initDatepicker({      // disablePastDay: true, // 是否禁选过去日期
      // showInput: false, // 默认为 true
      // placeholder: '请选择日期', // input 输入框
      // type: 'normal', // [normal 普通单选模式(默认), timearea 时间段选择模式(待开发), multiSelect 多选模式(待完善)]
      /**       * 选择日期后执行的事件       * @param { object } currentSelect 当前点击的日期       */
      afterTapDay: (currentSelect) => {        console.log('当前点击的日期', currentSelect);        console.log('getSelectedDay方法', getSelectedDay());
      },      /**       * 日期点击事件(此事件会完全接管点击事件)       * @param { object } currentSelect 当前点击的日期       * @param {object} event 日期点击事件对象       */
      onTapDay(currentSelect, event) {        console.log(currentSelect);        console.log(event);
      },
    });
  },  /**   * 跳转至今天   */
  jump() {    jumpToToday();
  }
};Page(conf);

<a name=”t2″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>loadUrl

loadUrl(String url);

加载一个网页,其中注意的是

  1. 需要加入联网权限,

2.
还有网址必须完整即以

  1. assert中的html文件。前缀换成file:///android_asset/

  2. 加载sd卡中的html文件,前缀换成content://

style=”font-family:微软雅黑; word-wrap:break-word; margin:0px; padding:0px”> style=”font-size:14px; word-wrap:break-word; margin:0px; padding:0px”> style=”word-wrap:break-word; margin:0px; padding:0px; font-weight:700″>12月15日小程序资讯集合

日期选择器效果图

图片 1

图片 2

项目地址:

<a name=”t3″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>loadData

public void loadData(String data, String mimeType, String encoding)

加载代码块。其中对于data可以采用encode一下再加载,速度快点

  • 微信小程序左滑显示按钮demo
  • 微信小程序–左滑右滑的乐趣
  • 「文经课表小程序」当日课表界面实现方法
  • 小程序自定义轮播–类旋转木马
  • 关于微信小程序这件大事!
  • 极乐技术周报(第三十八期)
  • 小程序开发 –
    webview
  • 手把手教你实现微信小程序中的自定义组件
  • 小程序代码包压缩策略
    &
    方案
  • 小程序
    视图层分析
  • 经验分享:微信小程序seo第一是如何做到的
  • 微信小程序通过java后台传的ID值进入不同页面
  • 怎样用一天时间,开发上架一个天气小程序
  • 周留存=月留存=半年留存,「忆年」相册小程序如何黏住千万用户?

  • 深圳出现小程序无人便利店,铝遊家联袂EASYGO智造
  • 微信小程序与社交电商
  • 『教程』微信小程序canvas辑合(教程+Demo+跳坑)
  • 微信小程序的数据绑定与下拉刷新与template模块使用问题
  • 微信小程序wx.previewImage预览图片
  • 微信小程序实战(一)之仿美丽说
  • 小程序tabBar跳转页面并隐藏tabBar
  • 微信小程序中下拉刷新和数据绑定的一些小坑
  • 想要“截胡”吃货们,微信支付宝带着两波无人餐厅来了
  • 微信小程序实现各种特效实例
  • 低调|微信小程序功能升级
  • 我是如何从零开始写出一个微信小程序的
  • 微信小程序组件
    分页菜单带下划线焦点切换
  • 微信小程序爬坑日记
  • 微信小程序–跳转页面常用的两种方法
  • 支付宝小程序开放【自定义分享】功能
  • 实现微信小程序的wxml文件和wxss文件在phpstrom的支持
  • 微信小程序根据java后台传的type值链接不同的页面
  • 微信小程序–头部导航滑动
  • 小程序不是H5
  • 微信小程序分享到朋友圈之曲线救国
  • 微信小程序设置控件权重
  • 【小程序踩坑】
    扫普通二维码调起小程序bug:码地址传递错误,传为历史地址
  • 微信怎么诞生的?小程序“葵花码”的未来是啥?财富论坛马化腾亲口揭晓
  • 公交、地铁、磁悬浮,上海扫码全搞定
  • 微信向所有公众号开放原创声明和留言功能
  • 微信小程序开发问题汇总-开发中技术问题汇总
  • 微信小程序
    post 发送数据
    终极大法
  • 说说微信小程序开发的那些坑–setData
  • 微信小程序组件化
    快速实现可用模态窗
  • 开发
    | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!
  • .NET开发微信小程序-生成二维码
  • 微信小程序关于后台小数转换成整数并且显示在页面上
  • 微信小程序–缓存的二次开发封装
  • 浅谈小程序内嵌网页及内嵌网页跳转分享实现
  • 微信小程序实战-仿盒马鲜生
  • 3分钟实现小程序模版消息推送
    |
    基于Bmob后端云
  • 关于微信小程序webview的使用
  • 微信小程序获取用户手机号详解
  • 微信小程序简单收集formid无限次发送模板消息
  • 小程序是中国剩余6亿流量的钥匙,头部小程序的共性是什么?
  • 公众号可以【推送】小程序了?
  • 微信小程序实现给循环列表点击添加类(单项和多项)
  • 微信小程序 –
    dialog
  • 微信小程序–获取屏幕宽度及弹窗滚动与页面滚动冲突
  • JavaScript简单日历实现-小程序版
  • 微信小程序
    使用filter过滤器几种方式

<a name=”t4″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>loadDataWithBaseURL

public void loadDataWithBaseURL(String baseUrl, String data,String mimeType, String encoding, String historyUrl)

相对于loadData,其实就是一个相对路径和绝对路径的问题,loadData要求必须是绝对路径,而loadDataWithBaseURL则可以是相对路径。historyUrl可以为null。


style=”font-family:微软雅黑; word-wrap:break-word; margin:0px; padding:0px”> style=”font-size:14px; word-wrap:break-word; margin:0px; padding:0px”> style=”word-wrap:break-word; margin:0px; padding:0px; font-weight:700″>12月15日小程序Demo集合

<a name=”t5″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>WebSettings的常见配置

如果我们需要设置WebView的属性,是通过WebView.getSettings()获取取设置WebView的WebSettings对象,然后调用WebSettings中的方法来实现的配置一些属性,来帮我们实现一些常见的基本操作。比如字体大小,支持缩放等

//---------------------------------------------------
// 缩放
// 1 设置支持缩放,默认true
setSupportZoom(boolean support)

// 2 设置显示缩放的组件 默认true
setDisplayZoomControls(boolean enabled)  

// 3 设置是否使用缩放的内置组件  默认false
setBuiltInZoomControls(boolean enabled) 
//--------------------------------------------------

//--------------------------------------------------
// 1 设置media 手势播放media
setMediaPlaybackRequiresUserGesture(boolean require)
//--------------------------------------------------

//--------------------------------------------------
//宽度
// 1 设置概述模式浏览界面,当页面宽度超过WebView显示宽度时,缩小页面适应WebView。默认false 
setLoadWithOverviewMode(boolean overview)    

// 2 设置支持ViewPort的meta tag属性,如果页面有ViewPort meta tag 指定的宽度,则使用meta tag指定的值,否则默认使用宽屏的视图窗口 
setUseWideViewPort(boolean use)  
//--------------------------------------------------

//--------------------------------------------------
// 字体和大小
// 1 设置页面文字缩放百分比,默认100% 
setTextZoom(int textZoom)  

// 2 设置最小字体,默认8. 取值区间[1-72],超过范围,使用其上限值。 
setMinimumFontSize(int size)

//3 设置最小逻辑字体,默认8. 取值区间[1-72],超过范围,使用其上限值。 
setMinimumLogicalFontSize(int size)  

//4 设置默认字体大小,默认16,取值区间[1-72],超过范围,使用其上限值。 
setDefaultFontSize(int size)

//5 设置默认填充字体大小,默认16,取值区间[1-72],超过范围,使用其上限值
setDefaultFixedFontSize(int size)  

//6 设置默认字体大小 SMALLEST is 50% SMALLER is 75% NORMAL is 100% LARGER is 150% LARGEST is 200%
setTextSize(WebSettings.TextSize t)

//7 设置标准的字体族,默认”sans-serif”。
setStandardFontFamily(String font) 

//8 设置混合字体族。默认”monospace”
setFixedFontFamily(String font) 

//9 设置SansSerif字体族。默认”sans-serif”
setSansSerifFontFamily(String font)

//10 设置SerifFont字体族,默认”sans-serif” 
setSerifFontFamily(String font) 

//11 设置CursiveFont字体族,默认”cursive” 
setCursiveFontFamily(String font)  

//12 设置FantasyFont字体族,默认”fantasy” 
setFantasyFontFamily(String font)  

//13 设置页面的编码格式,默认UTF-8
setDefaultTextEncodingName(String encoding)
//--------------------------------------------------------

//--------------------------------------------------------
//加载图片
//1 设置是否加载图片资源 包括嵌入的本地图片资源和网络图片。 默认true 
setLoadsImagesAutomatically(boolean flag)  

//2 是否加载网络图片资源 默认true
setBlockNetworkImage(boolean flag) 

//3 设置是否加载网络资源。注意如果值从true切换为false后,WebView不会自动加载,除非调用WebView#reload()
setBlockNetworkLoads(boolean flag) 
//-------------------------------------------------------

//--------------------------------------------------------
//访问
//1 设置允许访问WebView内部文件,默认true 
setAllowFileAccess(boolean allow)  

//2 设置允许获取WebView的内容URL ,可以让WebView访问ContentPrivider存储的内容。 默认true
setAllowContentAccess(boolean allow) 

//3 设置加载不安全资源的WebView加载行为,MIXED_CONTENT_ALWAYS_ALLOW和MIXED_CONTENT_NEVER_ALLOW 
setMixedContentMode(int mode)  
//--------------------------------------------------------

//缓存
//1 是否保存表单数据,默认false 
//setSaveFormData(boolean save) 

//2 是否允许数据库存储
setDatabaseEnabled(boolean flag)

//3 设置存储定位数据库的位置,考虑到位置权限和持久化Cache缓存
setGeolocationDatabasePath(String databasePath) 

//4 是否允许Cache,默认false
setAppCacheEnabled(boolean flag)

//5 设置Cache API缓存路径。
setAppCachePath(String appCachePath)

//6 是否存储页面DOM结构,默认false
setDomStorageEnabled(boolean flag) 

//7 基于WebView导航的类型使用缓存 LOAD_DEFAULT 默认加载方式 LOAD_CACHE_ELSE_NETWORK 按网络情况使用缓存 LOAD_NO_CACHE 不使用缓存 LOAD_CACHE_ONLY 只使用缓存 
setCacheMode(int mode) 

//--------------------------------------------------------

//--------------------------------------------------------
//js
//1 设置是否允许执行JS
setJavaScriptEnabled(boolean flag)  

//2 是否允许Js访问任何来源的内容。包括访问file scheme的URLs
setAllowUniversalAccessFromFileURLs(boolean flag)

//3 是否允许Js访问其他file scheme的URLs
setAllowFileAccessFromFileURLs(boolean flag)  

//4 是否允许JS自动打开窗口。默认false 
setJavaScriptCanOpenWindowsAutomatically(boolean flag)
//--------------------------------------------------------

// ------------------------------------------------------
// 其它
//1 设置WebView代理,默认使用默认值
setUserAgentString(String ua) 

//是否允许定位,默认true
setGeolocationEnabled(boolean flag)

//是否支持多窗口,如果设置为true 
setSupportMultipleWindows(boolean support)

  • 微信小程序Demo:妹子图小程序(前端)
  • 微信小程序Demo:健身房预约课程小程序
  • 微信小程序Demo:大宅小屋拼团
  • 微信小程序Demo:小契约(交友互动小程序)
  • 微信小程序Demo:查天气、签到小程序
  • 微信小程序Demo:仿网易蜗牛读书
  • 微信小程序Demo:家政预约
  • 微信小程序Demo:倒班日历
  • 微信小程序Demo:粤语小词典
  • 微信小程序Demo:仿盒马鲜生
  • 微信小程序Demo
    :
    出发吧一起
  • 微信小程序Demo:蝌蚪签到

<a name=”t6″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>JS和本地的互调

style=”font-size:14px; word-wrap:break-word; margin:0px; padding:0px”> style=”word-wrap:break-word; margin:0px; padding:0px; font-weight:700″>12月1日小程序资讯集合

<a name=”t7″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>JS调用Android

主要代码:

mWebView = (WebView) findViewById(R.id.webview);  

WebSettings webSettings = mWebView.getSettings();  
webSettings.setJavaScriptEnabled(true);  
mWebView.addJavascriptInterface(mJavaInterface, "rrtoyewx");

其中

public void addJavascriptInterface(Object obj, String interfaceName)

第一个参数obj对象中实现JS调用android的实现的方法,第二个参数interfaceName是向WebView注入一个interfaceName的对象,这个对象绑定的是obj对象,即js的中调用方法的对象。

举个例子

js调用android的sendMessage的方法,并传递一个String的参数。

js代码

<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>  
        <h1>你好</h1>  
        <input type="button" value="js调native" onclick="ok()">  
    </head>  
    <body>  
        <script type="text/javascript">  
        function ok() {  
            rrtoyewx.sendMessage("我调用了android的中代码");  
        }  
        </script>  
    </body>  
</html>  

android的代码

mWebView = (WebView) findViewById(R.id.webview);  

WebSettings webSettings = mWebView.getSettings();  
webSettings.setJavaScriptEnabled(true);  
mWebView.addJavascriptInterface(mJavaInterface, "rrtoyewx");

JavaInterface的代码

public class JavaInterface{
    @JavascriptInterface 
    public void sendMessage(String message){
        Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show(); 
    }
}

其中js调用java的代码会造成Android
WebView的Js对象注入漏洞,会造成一些安全性的问题,关于这个的解决方法就是也有别人分析出并解决了

Android
WebView的Js对象注入漏洞解决方案,其中对4.2以上采用@JavascriptInterface的注释,而对于4.2以下的系统

  1. 不使用addJavascriptInterface的方法。

2.
在WebChromeClient的方法中的回调方法中,去解析相应的参数,方法名,然后通过反射去相应本地方法。

  1. 如果存在返回值,则通过的load的方式,会调用的相应的方法。
  • 小程序上传图片到七牛
  • 微信小程序初体验
  • 连胜–小程序中滚动条的使用,wx.pageScrollTo和<scroll-view>的对比
  • 微信小程序公共组件的引用与控制
  • 小程序页面pv统计数过高,导致页面转化率低
    问题
  • 微信小程序支付及退款流程详解【上】
  • 微信小程序支付及退款流程详解【下】
  • 小程序中吸底按钮适配
    iPhone X
    方案
  • 微信小程序扫普通链接二维码打开小程序的具体配置流程
  • 小程序接入电子发票
    坐飞机扫一扫登机牌即可开发票
  • 事到如今,微信小程序到底是不是风口,心里该有点数了
  • 部分小程序无法获取UnionId原因
  • 微信小程序 –
    IOS
    仿饿了么”我的”,下拉橡皮筋效果
  • 微信小程序 –
    toptip效果
  • 等了20天,终于看到“小店小程序”的真面目
  • 微信支付商户平台:新增入驻申请手机签约、手机端经营数据功能
  • 微信小程序
    | 使用 canvas
    生成朋友圈分享图片并保存到手机相册
  • 微信小程序模板消息群发解决思路
  • 微信小程序自定义模态弹窗插件
  • 微信小程序的网络设置,及网络请求:wx.request(OBJECT)
  • 微信小程序过长文本折叠效果的探索
  • 趣店落水、阿里流泪、腾讯小跑,金融新时代来临前的悸动
  • 微信小程序开发问答《八十》实现
    sticky header 效果 &
    input标签中文字被遮盖
  • 黄秀杰–Node后端优雅使用Bmob
  • 小程序常见问题汇总
  • 关于微信小程序web-view组件内嵌h5的具体配置流程

<a name=”t8″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>Android 调用js的方法

loadUrl();

直接通过loadUrl()的方式去加载js的方法。

举个例子

Android 调用js的alert的方法

Js

<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>  
        <h1 id="h">Rrtoyewx</h1>  
        <input type="button" value="js调native" onclick="ok()">  
    </head>  
    <body>  
        <script type="text/javascript">  
            function showAlert(i)  
            {  
                ....
            }  
        </script>  
    </body>  
</html> 

Android 的代码

mWebView.loadUrl("javascript:showAlert(“java调用了js的方法”)");  

如果js的方法存在返回值,一种方式需要用js调用java的方式将返回值作为返回。而4.4之后,还有另一种方式,通过evaluateJavascript的方法去调用js的方法,并在valueCallBack的回调方法“onReceiveValue(String
value)”的方法回调。

public void evaluateJavascript("methodName",valueCallBack)

mWebView.evaluateJavascript("getGreetings()", new ValueCallback() {  
       @Override  
       public void onReceiveValue(String value) {  
           Log.d("Rrtoyewx", value);  
       }  
   }); 

注意,回调方法在主线程,第二,返回值只接受string的


style=”font-size:14px; word-wrap:break-word; margin:0px; padding:0px”> style=”word-wrap:break-word; margin:0px; padding:0px; font-weight:700″>12月1日小程序Demo集合

<a name=”t9″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>WebViewClient的回调方法

  • 微信小程序Demo:金融理财计算器
  • 微信小程序Demo:支付宝+微信二维码收款小程序
  • 上滑导航吸顶效果
  • 微信小程序Demo:电器租赁小程序
  • 微信小程序Demo:电影日历
  • 微信小程序Demo:汤总便利小程序
  • 微信小程序Demo:球鞋商城

<a name=”t10″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onPageStarted

public void onPageStarted(WebView view, String url, Bitmap favicon)   

当前页面开始加载时调用,我们可以在其中做一些准备的工作,比如加载processbar

<a name=”t11″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onPageFinished

public void onPageFinished(WebView view, String url)  

当前页面的加载完成时调用,我们可以在其中释放一个资源,和关闭一些东西

<a name=”t12″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>shouldOverrideUrlLoading

public boolean shouldOverrideUrlLoading(WebView view, String url)

函数会在加载其他的链接时回调,表示webview是否屏蔽的这个链接,默认返回false,如果返回true则表示不会加载这个url了。我们可以在其中屏蔽一些操作。

<a name=”t13″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onReceivedError

public void onReceivedError(WebView view, int errorCode,String description, String failingUrl)  

参数的说明:WebView view:当前的WebView实例,int
errorCode:错误码,String description:错误描述,String
failingUrl:当前出错的URL。一般加载本地的404界面的,即出现一个错误提示。

<a name=”t14″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onReceivedSslError

public void onReceivedSslError(WebView view, SslErrorHandler handler,SslError error) 

HTTPS协议是通过SSL来通信的,所以当使用HTTPS通信的网址(以

WebView view:当前的WebView实例,SslErrorHandler
handler:SslErrorHandler.proceed()和SslErrorHandler.cancel(),SslErrorHandler.proceed()表示忽略错误继续加载,SslErrorHandler.cancel()表示取消加载。在onReceivedSslError的默认实现中是使用的SslErrorHandler.cancel()来取消加载。SslError
error:当前的的错误对象,SslError包含了当前SSL错误的基本所有信息。

注意

1 onReceivedSslError回调,不一定会回调onReceivedError的方法。

2 加载默认的onReceivedSslError的会出现的白屏。

3 可以忽略这个错误继续加载的

<a name=”t15″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>shouldInterceptRequest

public WebResourceResponse shouldInterceptRequest(WebView view,  
        String url) ;

当页面中许多的资源文件,每请求一个资源文件,都会回调这个方法,这个不主线程调用。所以我们可以在请求资源的时候,在这里屏蔽一些操作

<a name=”t16″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onLoadResource

public void onLoadResource(WebView view, String url

请求资源文件的时候调用,

<a name=”t17″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onScaleChanged

public void onScaleChanged(WebView view, float oldScale, float newScale)  

webView的发生缩放改变的时候调用

<a name=”t18″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>shouldOverrideKeyEvent

public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event)  

屏蔽一个按键的操作,返回false,则不屏蔽,交给webview处理,true反之

<a name=”t19″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onFormResubmission

onFormResubmission(WebView view, Message dontResend, Message resend)  

设置是否重发数据,post的请求的时候,默认不重新发送

<a name=”t20″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>doUpdateVisitedHistory

doUpdateVisitedHistory(WebView view, String url, boolean isReload) 

通知主机程序更新访问的链接

<a name=”t21″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onUnhandledInputEvent

onUnhandledInputEvent(WebView view, InputEvent event) 

让主程序处理WebView未处理的Input Event。

<a name=”t22″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onReceivedLoginRequest

onReceivedLoginRequest(WebView view, String realm, String account, String args)

自动登录请求的回调方法


<a name=”t23″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>WebChromeClient的事件

<a name=”t24″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onJsAlert

public boolean onJsAlert(WebView view, String url, String message,JsResult result)

网页调用alert的时候调用

<a name=”t25″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onJsConfirm(),返回值代表是否消费, JsResult 的cancle的方法和con

public boolean onJsConfirm(WebView view, String url, String message,JsResult result)

网页调用confirm的时候调用,返回值代表是否消费,

<a name=”t26″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onJsPrompt

public boolean onJsPrompt(WebView view, String url, String message,String defaultValue, JsPromptResult result) 

网页调用prompt的时候调用,返回值代表是否消费,

<a name=”t27″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onConsoleMessage

public boolean onConsoleMessage(ConsoleMessage consoleMessage)

打印console的消息的时候,常用来监视js代码的错误

<a name=”t28″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onProgressChanged

 public void onProgressChanged(WebView view, int newProgress)

加载页面的进度的改变的时候,

<a name=”t29″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onReceivedTitle

public void onReceivedTitle(WebView view, String title)

页面的title的发生变化时候的回调

<a name=”t30″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onReceivedIcon

public void onReceivedIcon(WebView view, Bitmap icon)

接受到新的icon的回调方法

<a name=”t31″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onReceivedTouchIconUrl

public void  onReceivedTouchIconUrl(WebView view, String url, boolean precomposed)

页面的按下图标的icon的url

<a name=”t32″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>getVisitedHistory

public void getVisitedHistory(ValueCallback callback)

获取访问页面的访问历史

<a name=”t33″ style=”box-sizing: border-box; background: transparent; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: 400; outline: 0px;”></a>onShowFileChooser

public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback,FileChooserParams fileChooserParams)

试图打开文件的浏览器的回调方法,其中fileChooserParams对象包含的许多的信息。比如打开文件的mimeType,mode等


from:http://blog.csdn.net/zhi184816/article/details/51832711

发表评论

电子邮件地址不会被公开。 必填项已用*标注