npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

weex-webview

v0.1.6

Published

适用于 web 和 weex 的 webview,提供更为强大的能力

Downloads

5

Readme

weex-webview

适用于 web 和 weex 的 webview,提供更为强大的能力

属性

src

需要加载的网页的 URL, 如果你设置了 src, 将会忽略 source

source

在 WebView 中载入一段静态的 html 代码, 优先采用 src

style

webview 样式

class

webview 类名

injectedSourceHead

会在加载前就往 head 标签插入代码,只有当是source的时候才会生效

injectedSourceBody

会在加载前就往 body 标签插入代码,只有当是source的时候才会生效

事件

appear

如果一个位于某个可滚动区域内的组件被绑定了 appear 事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发。
  • type : appear
  • target : 触发 Appear 事件的组件对象
  • timestamp : 事件被触发时的时间戳
  • direction : 触发事件时屏幕的滚动方向,updown

disappear

如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。
  • type : disappear
  • target : 触发 Disappear 事件的组件对象
  • timestamp : 事件被触发时的时间戳
  • direction : 触发事件时屏幕的滚动方向,updown

pagestart

pagestart 事件,会在 Web 页面开始加载时调用。

pagefinish

pagefinish 事件,会在 Web 页面完成加载时调用。

error

error 事件,会在 Web 页面加载失败时调用。

receivedtitle

receivedtitle 事件,会在 Web 页面的标题发生改变时调用(仅限 Android 平台)。

message

message 事件会在网页中有调用 `parent.postMessage` 方法的时候触发(在web中推荐使用`parent.postMessage`, 不然会有意想不到的效果),

方法

goBack

前往 WebView 历史记录的上一页。

goForward

前往 WebView 历史记录的下一页

reload

刷新当前 Web 页面

postMessage

发送消息到当前 <web>组件,可直接传对象,不需要转字符串,weex内部自动转了

injectJavascript

往网页中插入js代码,一般只有当传入 source 的时候才生效
不过,如果目标页面你可以控制,你可以往页面 插入如下一段代码,就可配合 src 使用,还能跨域(web)使用哦:
'use strict';window.addEventListener('message',function(a){try{var b=a.data;if('string'==typeof b)try{b=JSON.parse(a.data)}catch(f){}if(b.type)switch(b.type){case'_weex_webview_injectJavacript':{if(b.message){var c=document.createElement('script');c.innerHTML=b.message,document.body.appendChild(c)}break};case'_weex_webview_injectStyleSheet':{if(b.message){var d=document.createElement('style');d.innerHTML=b.message,document.body.appendChild(d)}break};default:}}catch(f){}});

由于 weex 现在还不支持 injectJavascript,这里算是不完美的 polyfill

Usage

  webviewEl.injectJavascript(`
    // some js code you want
    alert('ok');
  `);

injectStyleSheet

网页面中插入 css 样式,同 `injectJavascript` 用法一样

Usage

  webviewEl.injectStyleSheet(`
    h1 {
      font-size: 36px;
      color: red;
    }
  `);