uts插件开发文档.md 3.9 KB
Newer Older
杜庆泉's avatar
杜庆泉 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
## 1 前置条件

+ 1 HX 3.5.6 之后版本

## 2 uts原生插件介绍

### 2.1 什么是uts原生插件

UTS= Uni Type Script.

UTS 插件是在uni原生插件的基础上,改用UTS作为插件开发语言。

进一步降低插件开发门槛,平台差异,执行效率的新型插件形式


![uts插件结构](./UTS结构示意图1.png)

### 2.2 uts原生插件与uni原生插件的区别

|-|传统原生插件|uts原生插件|
|-|-------|--------|
|开发语言|java/oc|uts|
|开发环境|Android studio/XCode|HBuilderX|
|打包方式|外挂aar 等产出物|编译时生成原生代码|

优点:

1  减少原生环境搭建环节,降低插件开发难度

2  进一步降低平台差异,一种语言开发两个平台插件

2  编译时生成原生代码,提高代码执行效率

## 3 UTS语法介绍



## 4 开发UTS插件

### 4.1  uni_modules

确保项目根目录存在uni_modules文件夹

![插件目录](./uni_modules.jpg)

`uni_modules`类似 NPM中的`node_modules`.是用来存放插件依赖的文件夹。

如果项目中已存在此目录,则跳过。如果不存在,在需要手动创建一个。



### 4.2 新建UTS插件

选中uni_modules文件夹 -->  右键新建插件

![新建插件1](./new_uts_plugin.jpg)

选择UTS原生插件

![新建插件2](./new_uts_plugin2.jpg)

插件目录结构

![新建插件3](./new_uts_plugin3.jpg)


### 4.3 清单文件package.json

package.json为插件的清单文件,里面说明了整个UTS插件的配置信息,下面是一个完整的示例
```
{
  "id": "uts-helloworld",
  "displayName": "uts-helloworld",
  "version": "1.0.0",
  "description": "uts-helloworld",
  "keywords": [
    "uts-helloworld"
],
  "repository": "",
  "engines": {
    "HBuilderX": "^3.1.0"
  },
  "dcloudext": {
    "type": "native-uts",
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "",
      "data": "",
      "permissions": ""
    },
    "npmurl": ""
  },
  "uni_modules": {
    "dependencies": [],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "u",
        "aliyun": "u"
      },
      "client": {
        "Vue": {
          "vue2": "u",
          "vue3": "u"
        },
        "App": {
          "app-vue": "u",
          "app-nvue": "u"
        },
        "H5-mobile": {
          "Safari": "u",
          "Android Browser": "u",
          "微信浏览器(Android)": "u",
          "QQ浏览器(Android)": "u"
        },
        "H5-pc": {
          "Chrome": "u",
          "IE": "u",
          "Edge": "u",
          "Firefox": "u",
          "Safari": "u"
        },
        "小程序": {
          "微信": "u",
          "阿里": "u",
          "百度": "u",
          "字节跳动": "u",
          "QQ": "u",
          "钉钉": "u",
          "快手": "u",
          "飞书": "u",
          "京东": "u"
        },
        "快应用": {
          "华为": "u",
          "联盟": "u"
        }
      }
    },
    "type": "uts",
    "uts": {
        "android": {
            "libs": [],
            "dependencies": []
        },
        "ios": {
            "libs": []
        }
    }
  }
}
```

## 5 使用插件

### 5.1 引用UTS插件

uts插件import有两种方式
import {a,b} from 'xxx'

```
import {
  callWithoutParam,
  callWithStringParam,
  callWithJSONParam
} from "../../../uni_modules/uts-helloworld";

```

import X from 'XXX'


### 5.2 用法

延迟操作
```
//执行延迟操作
var timer = setTimeout(function, 1000);
//取消延迟操作
clearTimeout(timer);
```
定时操作
```
//执行定时操作
var timer = setInterval(function, 1000);
//取消定时操作
clearInterval(timer);
```

## 6 测试

### 5.1 真机运行

直接运行

### 5.2 云端打包



### 5.3 示例项目

### 一个简单的示例
### 插件目录结构
### 插件使用方法

完整的示例项目地址: