Code Monkey home page Code Monkey logo

autojs6-typescript-template's Introduction

Autojs6 TypeScript Template

基于 VsCode 开发 TypeScript 工程化的 Autojs6 模板。

工程结构

  • build

      这个目录是构建支持,一般情况下不需要修改以及增加。
    
  • lib

      这个目录是编写一些公共特征的库,可以划分模块,如 m1 / m2 然后再 tsconfig.json 文件中添加 paths 内容即可。
    
      paths:{
          "@lanaqi/m1": [
              './lib/m1/index.ts'
          ]
      }
    
      其中 index.ts 内容示例如下:
    
      import A from "./dir/a";
    
      export {
          A
      };
    
  • src

      这个目录是源码目录,其中 main.ts 是入口文件。
      其中 ./src/assets/ 是资源目录。
    
      多项目结构:
      ./src/${projectName}/main.ts 以及 ./src/${projectName}/assets/
      另外需要覆盖环境变量:PROJECT_NAME , 如 -env.PROJECT_NAME=a 这样。
      需要注意的是,多项目时 tsup.config.ts 不需要传递 packageName 参数。
    
      export default defineConfig((overrideOptions: TsupOptions) => TsupConfigBuilder.withNewConfig(overrideOptions));
    
      更多参考:./build/ 中实现的源码。
    
  • dist

      这个目录是构建输出,编译后生成的源码以及资源在这个目录下,这个目录下以项目名方式分类,如下:
      dist/a
      dist/b
    
  • .gitignore

      通用 git 忽略配置文件,可自行修改。
    
  • package.json

      项目描述文件,可自行修改(一般情况下只需要修改 name & version 即可,多项目下需要注意传递项目名)。
    
  • tsconfig.json

      TypeScript 配置文件,一般情况下按需修改。
    
  • tsup.config.ts

      Tsup 配置文件,一般情况下单项目不需要修改。
    

使用步骤

  1. 复制工程目录所有到你的项目中。
  2. 打开 VsCode 开启服务。
  3. 使用 Autojs6 连接 VsCode 监听。
  4. 运行项目中 scripts 即可。
  5. 使用资源文件时,需先部署,否则无法读取(可以修改 DEPLOY_ACTION 为 both 值)。

编码方式

应遵守以下代码编写方式。

导入模块方式

// 不要这样
var circle = require('circle.js');
console.log("半径为 4 的圆的面积是 %d", circle.area(4));

// 应该这样(这个 circle.js 应遵守 es5+ 标准)
import circle from './circle';
console.log("半径为 4 的圆的面积是 %d", circle.area(4));

导入静态资源

建议把这一类放置 src/static 目录下。

// 支持后缀:jpg / jpeg / ico / gif / svg / svgz / webp / png / bmp
import png from './my.png';

// 同时也支持对 .md / .txt / .text 文件读取为文本字符串
import txt from './test.txt';

编写 UI 方式

// 在原始 js 中使用 ui 时,必须先在 main.js 的顶部 "ui"; 声明。
// 在这里不必声明,会自动注入,当使用 ui. 时注入。

// 不要这样
ui.layout(
    <vertical>
        <button text="第一个按钮"/>
        <button text="第二个按钮"/>
    </vertical>
);

// 静态模板(如果可以还是使用静态模板比较好)
// 建议放到 html 目录下(该目录受监控变动处理)
import mainHtml from './html/main.html';
import png from './my.png';
ui.layout(mainHtml);
// 动态修改属性
const myImg = ui.findView('id');
myImg.attr('src', `data:image/png;base64,${png}`);

// 动态模板
// 应该这样,更多参考:https://github.com/zspecza/common-tags
import { html } from 'common-tags';
import png from './my.png';

ui.layout(html`
    <vertical>
        <button text="第一个按钮"/>
        <button text="第二个按钮"/>
        <img src="data:image/png;base64,${png}" />
    </vertical>
`);

不推荐编码

// 尽量不要用 require 函数(某些情况下也需要该方式,如导入第三方库)
require('./test.txt');

autojs6-typescript-template's People

Contributors

lanmingle avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.