提交 c28e3010 编写于 作者: W wanganxp

x

上级 05769472
......@@ -55,16 +55,16 @@ export function createApp() {
## 代码时序
开发者写的代码,在应用启动时,按如下时序加载:
1. main.js/uts 的 `export function createApp() {}` 外的代码、任何页面的script中`export default {}`外的代码
1. main.js/uts 的 `export function createApp() {}` 外的代码、任何页面/组件的script中`export default {}`外的代码
2. main.js/uts 的 `export function createApp() {}` 中的代码
3. app.vue/uvue中onLaunch的代码
4. 首页的onLoad
5. 首页的onReady
开发者需谨慎在main.js/uts、页面script中`export default {}`外、和onLaunch中编写代码:
1. 这些的代码都会影响启动速度
开发者需谨慎在main.js/uts、页面/组件script中`export default {}`外、和onLaunch中编写代码:
1. 这些的代码都会影响启动速度(定义type不会,type是使用时才加载)
2. 执行太早,很多功能和API无法使用,需trycatch。尤其是与界面相关的都无法使用,此时首页都还没有创建。
3. main.js/uts、页面script中`export default {}`外的代码,其创建的变量在应用存活时一直占据着内存
3. main.js/uts、页面script中`export default {}`外的代码,其创建的变量在应用存活时一直占据着内存,不会跟随页面关闭而回收
## 插件
......
## 跨端兼容
uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。
uni-app 已将常用的组件、API封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。
但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
- 大量写 if else,会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改,会让后续升级变的很麻烦。
- 为每个平台重写,明明主业务逻辑又一样
在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。
``uni-app`` 参考这个思路,为 ``uni-app`` 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。
......@@ -14,27 +15,28 @@ uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
**写法:**<span style="color:#859900;"> #ifdef</span><span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> %PLATFORM%</b> 开头,以 <span style="color:#859900;">#endif</span> 结尾。
* <span style="color:#859900;"> #ifdef</span>:if defined 仅在某平台存在
* <span style="color:#859900;"> #ifndef</span>:if not defined 除了某平台均存在
* <b style="color:#268BD2"> %PLATFORM%</b>:平台名称
**写法:**
`#ifdef``#ifndef``%PLATFORM%` 开头,以 `#endif` 结尾。
* `#ifdef`:if defined 仅在某平台存在
* `#ifndef`:if not defined 除了某平台均存在
* `%PLATFORM%`:平台名称
<table><thead><tr><th>条件编译写法</th><th>说明</th></tr></thead><tbody><tr><td><div class="code"><span class="token comment"><span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> APP-PLUS</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>仅出现在 App 平台下的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> H5</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>除了 H5 平台,其它平台均存在的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> H5</b></span><span style="color:#859900;"> || </span><b style="color:#268BD2">MP-WEIXIN</b><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)</td></tr></tbody></table>
<table><thead><tr><th>条件编译写法</th><th>说明</th></tr></thead><tbody><tr><td><div class="code"><span class="token comment"><span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> APP-PLUS</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>仅出现在 App 平台下的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> H5</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>除了 H5 平台,其它平台均存在的代码(注意if后面有个n)</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> H5</b></span><span style="color:#859900;"> || </span><b style="color:#268BD2">MP-WEIXIN</b><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)</td></tr></tbody></table>
<b style="color:#268BD2"> %PLATFORM%</b> **可取值如下:**
|值|生效条件|说明|
|值|生效条件|版本支持|
|:-|:-|:-|
|VUE3|[详情](https://ask.dcloud.net.cn/article/37834) (uni-app js引擎版)|HBuilderX 3.2.0+|
|VUE3|uni-app js引擎版用于区分vue2和3,[详情](https://ask.dcloud.net.cn/article/37834) |HBuilderX 3.2.0+|
|UNI-APP-X|用于区分是否是uni-app x项目 [详情](#UNI-APP-X)|HBuilderX 3.9.0+|
|APP|App||
|APP-PLUS|App(uni-app js引擎版)||
|APP-PLUS|uni-app js引擎版编译为App时||
|APP-PLUS-NVUE或APP-NVUE|App nvue 页面||
|APP-ANDROID|App Android 平台 仅限 uts文件||
|APP-IOS|App iOS 平台 仅限 uts文件||
|UNI-APP-X|uni-app x项目 [详情](#UNI-APP-X)|HBuilderX 3.9.0+|
|H5|H5(推荐使用 `WEB`)||
|WEB|H5|HBuilderX 3.6.3+|
|WEB|web|HBuilderX 3.6.3+|
|MP-WEIXIN|微信小程序||
|MP-ALIPAY|支付宝小程序||
|MP-BAIDU|百度小程序||
......@@ -51,17 +53,18 @@ uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-
**支持的文件**
* .vue
* .js
* .vue/.nvue/.uvue
* .js/.uts
* .css
* pages.json
* 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
**注意:**
* 条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 ``// 注释``、css 使用 ``/* 注释 */``、vue/nvue 模板里使用 ``<!-- 注释 -->``
* 条件编译是利用注释实现的,在不同语法里注释写法不一样,js/uts使用 ``// 注释``、css 使用 ``/* 注释 */``、vue/nvue/uvue 模板里使用 ``<!-- 注释 -->``
* 条件编译APP-PLUS包含APP-NVUE和APP-VUE,APP-PLUS-NVUE和APP-NVUE没什么区别,为了简写后面出了APP-NVUE ;
* 使用条件编译请保证`编译前``编译后`文件的语法正确性,即要保障无论条件编译是否生效都能通过语法校验。比如:json文件中不能有多余的逗号,js中不能重复导入;
* 对于未定义平台名称,可能是名称写错了,也可能是低版本HBuilderX还不认识这个平台。此时的条件编译,`#ifdef` 中的代码不会生效,而 `#ifndef` 中的代码会生效;
::: preview
......@@ -123,7 +126,7 @@ uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-
:::
* `VUE3` 需要在项目的 `manifest.json` 文件根节点配置 `"vueVersion" : "3"`
* 对于未定义平台名称的条件编译,`#ifdef` 中的代码不会生效,而 `#ifndef` 中的代码会生效;
<pre v-pre="" data-lang="javascript">
<code class="lang-javascript code"><span class="token comment">//<span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> %PLATFORM%</b></span>
......
......@@ -3,7 +3,7 @@
* [与js开发的差别](tutorial/codegap.md)
* [request联网教程](tutorial/request.md)
* [全局变量与状态管理](tutorial/store.md)
* 编译器
* [编译器]
* [概述](compiler/README.md)
* [条件编译](/tutorial/platform.md)
* 全局文件
......@@ -42,6 +42,7 @@
* [web-view](component/web-view.md)
* [animation-view](component/animation-view.md)
* API
* [概述](api.md)
* 基础
* [getApp](api/getApp.md)
* [getCurrentPages](api/getCurrentPages.md)
......
......@@ -4,7 +4,7 @@ uni-app x支持的API包括:
- uts的api [详见](/uts/buildin-object-api/global.md)
- uni.xxx的内置api。见左侧
- uniCloud.xxx的内置api。见左侧
由于uts可以直接调用Android和iOS的API,所以os和三方sdk的能力都可以在uts中调用。
一般原生能力建议封装为[uni_modules](/plugin/uni_modules.md)
\ No newline at end of file
- Dom的api [详见](dom/README.md)
- 原生API
* 由于uts可以直接调用Android和iOS的API,所以os和三方sdk的能力都可以在uts中调用。
* 一般原生能力建议封装为[uni_modules](/plugin/uni_modules.md)形式的[uts插件](/plugin/uts-plugin.md)
\ No newline at end of file
......@@ -8,6 +8,8 @@ uvue编译器是在Vite基础上进行扩展开发的。
它的大部分特性(如条件编译)和配置项(如环境变量)与`uni-app`的vue3编译器一致,[详见](https://uniapp.dcloud.net.cn/tutorial/compiler.html)
支持less、sass、scss等css预编译。
#### 编译缓存 @cache
`uni-app x`编译器引入了编译缓存机制,以优化开发体验。
......
......@@ -20,6 +20,8 @@
- @click //与tap等价
- @longpress
在多点触摸的屏幕上,touch事件返回数组,包含了每个touch点对应的x、y坐标。
### 冒泡事件系统
DOM事件主要有三个阶段:捕获阶段、目标阶段和冒泡阶段。
......
......@@ -18,21 +18,27 @@
### src路径支持说明
- 本地路径/static方式
由于uni-app编译时,只把/static目录下的静态资源copy到app中,所以src均需指向/static目录下。
其他目录的图片由于不会被打包进去,所以无法访问。本地路径的大小写不敏感。
- 本地绝对路径file:///方式
形如`file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/test-image/logo.png`
访问本应用内的资源时无需使用本方式,推荐使用/static方式。上述地址受包名、appid影响。
file:///方式一般用于download等公共目录。使用前需确保拥有相关权限。
- 支持网络路径
支持http、https。
image组件内部使用facebook的fresco库,自带缓存策略,也会自动清理缓存。
image组件内部使用facebook的[fresco](https://github.com/facebook/fresco)库(2.5.0),自带缓存策略,也会自动清理缓存。
<!-- UTSCOMJSON.image.compatibility -->
#### App平台
- App-Android平台image组件使用Fresco图片库实现:[com.facebook.fresco:fresco:2.5.0](https://github.com/facebook/fresco)
### tips
在error事件里监听报错,并重新设置image组件的src,可实现自定义错误图。[详见示例代码](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/image/image-path.uvue)
......
......@@ -26,7 +26,7 @@
* [Console](buildin-object-api/console.md)
* [全局](buildin-object-api/global.md)
* [关键词](keywords.md)
* [学习资料](learning.md)
<!-- * [学习资料](learning.md) -->
* uts插件
* [uts插件开发入门](/plugin/uts-plugin.md)
* [uts页面组件开发入门](/plugin/uts-component.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册