关于前端:wescript-v10-让微信小程序支持加载远程js

30次阅读

共计 2114 个字符,预计需要花费 6 分钟才能阅读完成。

we-script

让微信小程序反对加载近程 JavaScript 脚本并执行组件,反对 ES5 语法

Github 地址:https://github.com/bplok20010/we-script

应用

小程序如何应用 npm 包,官网文档:https://developers.weixin.qq….

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-demo

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 环境相干,如环境自身不反对则不反对!

正文完
 0