当前位置: 首页 > 工具软件 > we-script > 使用案例 >

小程序加载服务器js,we-script 让微信小程序支持加载远程js脚本

翟京
2023-12-01

we-script

背景:由于微信小程序限制,不支持动态执JavaScript,在小程序里无法使用类似 eva Function等功能。

让微信小程序支持加载远程 JavaScript 脚本,支持 ES5 语法

示例:

使用

npm install --save we-script

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

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

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

index.json

{

"usingComponents": {

"we-script": "we-script"

}

}

index.wxml

hello we-script

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

// 并行加载及无序执行

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

数组方式

hello we-script

we-script也支持嵌套,如:

hello we-script

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

hello 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

onLoad

类型:(e) => void

interface onLoadDetail {

context: {};

}

加载并执行成功后触发

onError

类型:(e) => void

interface onErrorDetail {

error: any;

}

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

 类似资料: