we-script 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
we-script 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
we-script 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
we-script 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
we-script 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript TypeScript
操作系统 跨平台
软件类型 开源软件
开发厂商
地区 国产
提 交 者 随心_
适用人群 未知
收录时间 2020-09-21

软件简介

让微信小程序支持加载远程 JavaScript 脚本并执行组件,支持 ES5 语法。

使用

小程序如何使用 npm 包,官方文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

npm install --save we-script

step1 安装完成后,点击开发者工具中的菜单栏:工具 --> 构建 npm

step2 安装完成后,点击开发者工具中的菜单栏:工具 --> 项目详情 --> 本地设置 --> [勾选] 使用 npm 模块

在需要用的页面或组件的json文件添加声明,示例:

index.json

{
  "usingComponents": {
    "we-script": "we-script"
  }
}

index.wxml

<we-script src="url">
  <view>hello we-script<view>
</we-script>

:多个we-script会并行加载及无序执行,无法保证执行顺序。如:

// 并行加载及无序执行
<we-script src="url1" />
<we-script src="url2" />
<we-script src="url3" />

如需要确保执行顺序,应该使用数组,例如:

数组方式

<we-script src="{{[url1,url2,url3]}}">
  <view>hello we-script<view>
</we-script>

we-script也支持嵌套,如:

<we-script  src="url1">
  <we-script src="url2">
    <view>hello we-script<view>
  </we-script>
</we-script>

注意: 在嵌套的情况下we-script加载和执行也是并行且无序的,因为小程序生命周期触发机制(BUG?)导致,如果想在嵌套模式下保证顺序,需要自己手动控制,示例:

<we-script bind:onLoad="loadScript" src="url1">
  <we-script wx:if="url1_load_success" src="url2">
    <view>hello we-script<view>
  </we-script>
</we-script>

重要: 远程加载执行的代码所生成的函数,变量等数据存储在we-script默认的上下文中,可通过onLoad事件获取默认上下文,或通过onInit事件自定义上下文

示例:

we-script 属性

  • src

    类型:string | string[]

    要加载的远程脚本

  • text

    类型:string | string[]

    需要执行的 JavaScript 脚本字符串,text 优先级高于 src (互斥)

  • timeout

    类型:number
    默认值:60000 毫秒

    设置每个远程脚本加载超时时间

  • cache

    类型:boolean

    默认值:true

    是否启用加载缓存,缓存策略是以当前请求地址作为key,缓存周期为当前用户在使用期间的生命周期。

  • once

    类型:boolean

    默认值:true

    相同上下文及相同地址的脚本只执行一次。

we-script 事件

  • onInit

    类型:(e) => void

    interface OnInitDetail {
    	getContext: () => {};
    	setContext: (context: {}) => void;
    }
    

    初始事件,监听该事件可获取当前执行上下文或自定义执行上下文。

    示例:

    // index.js
    {
      onInit(e){
        // 自定义执行上下文
        e.detail.setContext({
          value: 100
        })
      }
    }
    // index.wxml
    <we-script src="url" bind:onInit="onInit" />
    
  • onLoad

    类型:(e) => void

    interface onLoadDetail {
    	context: {};
    }
    

    加载并执行成功后触发

  • onError

    类型:(e) => void

    interface onErrorDetail {
    	error: any;
    }
    

    加载失败或执行错误后触发

其他

  • 该组件使用eval5来解析JavaScript语法,支持 ES5

  • 上生产环境前别忘记给需要加载的地址配置合法域名

  • we-script 内置类型及方法:

NaN;
Infinity;
undefined;
null;
Object;
Array;
String;
Boolean;
Number;
Date;
RegExp;
Error;
URIError;
TypeError;
RangeError;
SyntaxError;
ReferenceError;
Math;
parseInt;
parseFloat;
isNaN;
isFinite;
decodeURI;
decodeURIComponent;
encodeURI;
encodeURIComponent;
escape;
unescape;
eval;
Function;
console;
setTimeout;
clearTimeout;
setInterval;
clearInterval;
wx;

内置类型和当前运行 JavaScript 环境相关,如环境本身不支持则不支持!

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表于开发技能专区
2020/09/28 09:30

we-script 1.0 发布,微信小程序支持加载远程js

we-script 让微信小程序支持加载远程 JavaScript 脚本,支持 ES5 语法 Github地址:https://github.com/bplok20010/we-script 最近更新内容 src 支持数组 新增 once ,相同上下文及相同地址的脚本只执行一次 新增 onInit 事件 使用 小程序如何使用 npm 包,官方文档:https://developers.weixin.qq.com/miniprogram/dev/...

2
12
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2016/06/22 09:39

"'><script>alert(1)</script>

"'>

0
0
发表了博客
2019/06/18 11:36

script

用于嵌入或引用可执行脚本。 属性 该元素包含全局属性 async 该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有src属性的脚本)。 如果浏览器不支持这个属性,该JS将变为顺序执行,阻碍浏览器解析HTML 异步脚本中document.write是无效的 defer 这个布尔属性被设定用来通知浏览器...

0
0
发表了博客
2013/11/06 10:11

<script>alter('1');</script>

0
0
发表了博客
2014/01/17 17:45

<script>alert(1)</script>

0
0
发表于大前端专区
2016/09/30 16:07

"</div><script>alert('haha')</script>

" </p><script>alert('haha')</script>"

0
0
发表了博客
2019/04/03 10:25

zabbix<script>alert("1")</script>

123

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
8 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部