V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nobo
V2EX  ›  程序员

we-script v1.0 让微信小程序支持加载远程 js

  •  
  •   nobo · 2020-09-29 13:26:14 +08:00 · 1137 次点击
    这是一个创建于 1514 天前的主题,其中的信息可能已经有所发展或是发生改变。

    we-script

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

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

    使用

    小程序如何使用 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-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 环境相关,如环境本身不支持则不支持!

    3 条回复    2020-09-30 08:50:11 +08:00
    puzzle9
        1
    puzzle9  
       2020-09-29 18:41:41 +08:00
    道理我都懂 可是这个可以干嘛用呢
    w88975
        2
    w88975  
       2020-09-30 02:03:46 +08:00 via iPhone
    同问 远程执行代码的场景有哪些呢,毕竟不是动态渲染,难道是远程加密函数?动态 api 升级?
    stevezhang
        3
    stevezhang  
       2020-09-30 08:50:11 +08:00
    无需审核即可发布 这还不 bug 么。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   966 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:54 · PVG 05:54 · LAX 13:54 · JFK 16:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.