Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
19c08bf4
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3591
Star
108
Fork
919
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
119
列表
看板
标记
里程碑
合并请求
108
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
119
Issue
119
列表
看板
标记
里程碑
合并请求
108
合并请求
108
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
19c08bf4
编写于
3月 18, 2022
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'vuepress' of
https://github.com/dcloudio/unidocs-zh
into vuepress-dev
上级
d0ea2a29
43eb557b
变更
6
展开全部
隐藏空白更改
内联
并排
Showing
6 changed file
with
690 addition
and
570 deletion
+690
-570
docs/.vuepress/theme/components/SiderBarBottom.vue
docs/.vuepress/theme/components/SiderBarBottom.vue
+1
-1
docs/.vuepress/theme/config/siderbar/uni-app.js
docs/.vuepress/theme/config/siderbar/uni-app.js
+7
-7
docs/api/README.md
docs/api/README.md
+524
-465
docs/collocation/main.md
docs/collocation/main.md
+27
-5
docs/tutorial/migration-to-vue3.md
docs/tutorial/migration-to-vue3.md
+125
-86
docs/uniCloud/uni-id.md
docs/uniCloud/uni-id.md
+6
-6
未找到文件。
docs/.vuepress/theme/components/SiderBarBottom.vue
浏览文件 @
19c08bf4
...
...
@@ -40,7 +40,7 @@
<a
target=
"_blank"
style=
"text-decoration: underline"
href=
"https://qm.qq.com/cgi-bin/qm/qr?k=
r70TY1MkPklo86bS7CbXRG7PF97RiY6R
&jump_from=webapi"
href=
"https://qm.qq.com/cgi-bin/qm/qr?k=
wZSDHv6ymX7l-_0NcrYEmbpcIk-_WhSW
&jump_from=webapi"
>
点此加入
</a>
...
...
docs/.vuepress/theme/config/siderbar/uni-app.js
浏览文件 @
19c08bf4
...
...
@@ -57,11 +57,11 @@ export default {
"
state
"
:
1
,
"
prefix
"
:
"
群5
"
},
{
"
number
"
:
"
942061423
"
,
"
state
"
:
1
,
"
prefix
"
:
"
群7
"
},
{
"
number
"
:
"
697264024
"
,
"
state
"
:
1
,
"
prefix
"
:
"
群6
"
},
{
"
number
"
:
"
695442854
"
,
"
state
"
:
1
,
...
...
@@ -203,9 +203,9 @@ export default {
"
prefix
"
:
"
群26
"
},
{
"
number
"
:
"
697264024
"
,
"
number
"
:
"
942061423
"
,
"
state
"
:
0
,
"
prefix
"
:
"
群
6
"
"
prefix
"
:
"
群
7
"
}
]
}
\ No newline at end of file
docs/api/README.md
浏览文件 @
19c08bf4
此差异已折叠。
点击以展开。
docs/collocation/main.md
浏览文件 @
19c08bf4
`main.js`
是
uni-app的入口文件,主要作用是初始化
`vue`
实例、定义全局组件、使用需要的插件如
vuex。
`main.js`
是
uni-app 的入口文件,主要作用是初始化
`vue`
实例、定义全局组件、使用需要的插件如
vuex。
首先引入了
`Vue`
库和
`App.vue`
,创建了一个
`vue`
实例,并且挂载
`vue`
实例。
::: preview
> Vue2
```
js
import
Vue
from
'
vue
'
import
App
from
'
./App
'
import
pageHead
from
'
./components/page-head.vue
'
//全局引用
page-head
组件
import
pageHead
from
'
./components/page-head.vue
'
//全局引用
page-head
组件
Vue
.
config
.
productionTip
=
false
Vue
.
component
(
'
page-head
'
,
pageHead
)
//全局注册
page-head
组件,每个页面将可以直接使用该组件
Vue
.
component
(
'
page-head
'
,
pageHead
)
//全局注册
page-head
组件,每个页面将可以直接使用该组件
App
.
mpType
=
'
app
'
const
app
=
new
Vue
({
...
App
...
App
})
app
.
$mount
()
//挂载Vue实例
app
.
$mount
()
//挂载 Vue 实例
```
> Vue3
```
JS
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
```
:::
使用
`Vue.use`
引用插件,使用
`Vue.prototype`
添加全局变量,使用
`Vue.component`
注册全局组件。
可以引用
`vuex`
,因涉及多个文件,此处没有提供示例,详见
`hello uni-app`
示例工程。
...
...
docs/tutorial/migration-to-vue3.md
浏览文件 @
19c08bf4
...
...
@@ -6,6 +6,10 @@
-
创建应用实例
::: preview
> Vue2
```JS
// 之前 - Vue 2
import Vue from 'vue'
...
...
@@ -16,41 +20,46 @@
...App
})
app.$mount()
```
// 之后 - Vue 3
> Vue3
```JS
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
const app = createSSRApp(App)
return {
app
}
}
}
```
:::
-
全局属性,例如:全局网络请求
```
js
// 之前 - Vue 2
Vue
.
prototype
.
$http
=
()
=>
{};
```js
// 之前 - Vue 2
Vue.prototype.$http = () => {};
// 之后 - Vue 3
const
app
=
createApp
({});
app
.
config
.
globalProperties
.
$http
=
()
=>
{};
```
// 之后 - Vue 3
const app = createApp({});
app.config.globalProperties.$http = () => {};
```
-
插件使用,例如:使用 vuex 的 store
```
js
// 之前 - Vue 2
import
store
from
"
./store
"
;
Vue
.
prototype
.
$store
=
store
;
// 之后 - Vue 3
import
store
from
"
./store
"
;
const
app
=
createApp
(
App
);
app
.
use
(
store
);
```
```js
// 之前 - Vue 2
import store from "./store";
Vue.prototype.$store = store;
// 之后 - Vue 3
import store from "./store";
const app = createApp(App);
app.use(store);
```
-
项目根目录必需创建 index.html 文件,粘贴复制如下内容:
...
...
@@ -92,14 +101,17 @@
// 之前 - Vue 2, 依赖如使用 commonJS 方式导出
module.exports.X = X;
// 之后 - Vue 3,
可手动改为 ES6 导出
// 之后 - Vue 3,
只支持 ES6 模块
export default { X };
```
-
vuex 用法
::: preview
> Vue2
```
js
// 之前 - Vue 2
import
Vue
from
'
vue
'
import
Vuex
from
'
vuex
'
Vue
.
use
(
Vuex
)
...
...
@@ -107,8 +119,11 @@
state
:
{}
})
export
default
store
```
> Vue3
// 之后 - Vue 3
```
js
import
{
createStore
}
from
'
vuex
'
const
store
=
createStore
({
state
:
{}
...
...
@@ -116,6 +131,8 @@
export
default
store
```
:::
-
避免在同一元素上同时使用 v-if 与 v-for
> 而 Vue3 中,v-if 总是优先于 v-for 生效。以上写法将会在 Vue3 中与预期不符合,由于语法上存在歧义,建议避免在同一元素上同时使用两者([更多](https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88))。
...
...
@@ -199,6 +216,10 @@
Vue3 将不支持
`slot="xxx"`
的用法 ,请使用
`v-slot:xxx`
用法。
[
更多
](
https://v3.cn.vuejs.org/guide/component-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD
)
::: preview
> Vue2
```
html
<!-- Vue2 支持的用法 -->
<uni-nav-bar>
...
...
@@ -207,6 +228,8 @@
</view>
</uni-nav-bar>
```
> Vue3
```
html
<!-- Vue3 支持的用法 -->
...
...
@@ -219,16 +242,21 @@
</uni-nav-bar>
```
:::
-
从 Vue 3.0 开始,过滤器已删除,不再支持,建议用方法调用或计算属性替换它们。
[
更多
](
https://v3.cn.vuejs.org/guide/migration/filters.html#%E6%A6%82%E8%A7%88
)
-
在 Vue3 中,处理 API
`Promise 化`
调用结果的方式不同于 Vue2。
[
更多
](
https://uniapp.dcloud.io/api/#api-promise-化
)
-
Vue3 中,调用成功会进入 then 方法,调用失败会进入 catch 方法
-
Vue2 中,调用无论成功还是失败,都会进入 then 方法,返回数据的第一个参数是错误对象,第二个参数是返回数据
-
Vue 2 写法转 Vue 3 写法
::: preview
> Vue2
```js
// 在 main.js 中写入以下代码即可
//
Vue 2 转 Vue 3,
在 main.js 中写入以下代码即可
function isPromise(obj) {
return (
!!obj &&
...
...
@@ -255,10 +283,10 @@
});
```
-
Vue 3 写法转 Vue 2 写法
> Vue3
```js
// 在 main.js 中写入以下代码即可
//
Vue 3 转 Vue 2,
在 main.js 中写入以下代码即可
function isPromise(obj) {
return (
!!obj &&
...
...
@@ -284,72 +312,83 @@
},
});
```
:::
-
uni-app 生命周期钩子在 Vue3 组合式 API 中的使用方式如下:
-
在 Vue3 组合式 API 中,也需要遵循 uni-app 生命周期钩子规范, 如 onLaunch 等应用生命周期仅可在 App.vue 中监听,使用中请注意生命周期钩子的适用范围。
[
查看全部生命周期钩子
](
https://uniapp.dcloud.net.cn/collocation/frame/lifecycle
)
-
只能在
`<script setup>`
单文件语法糖或
`setup()`
方法中使用生命周期钩子,以 A 页面跳转 B 页面传递参数为例:
```js
// 从 A 页面跳转 B 页面时传递参数 ?id=1&name=uniapp,xxx 为跳转的页面路径
//uni.navigateTo({
// url: 'xxx?id=1&name=uniapp'
//})
// 方式一:在 B 页面 <script setup> 中
<script setup>
import {
onLoad,
onShow
} from "@dcloudio/uni-app";
// onLoad 接受 A 页面传递的参数
onLoad((option) => {
console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
});
onShow(() => {
console.log("B 页面 onShow");
});
</script>
```
```js
// 方式二:在 B 页面 setup() 中
<script>
import {
onLoad,
onShow,
} from "@dcloudio/uni-app";
export default {
setup() {
// onLoad 接受 A 页面传递的参数
onLoad((option) => {
console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
});
onShow(() => {
console.log("B 页面 onShow");
});
}
- 在 Vue3 组合式 API 中,也需要遵循 uni-app 生命周期钩子规范, 如 onLaunch 等应用生命周期仅可在 App.vue 中监听,使用中请注意生命周期钩子的适用范围。[查看全部生命周期钩子](https://uniapp.dcloud.net.cn/collocation/frame/lifecycle)
- 只能在 `<script setup>` 单文件语法糖或 `setup()` 方法中使用生命周期钩子,以 A 页面跳转 B 页面传递参数为例:
::: preview
> 方法一
```js
// 从 A 页面跳转 B 页面时传递参数 ?id=1&name=uniapp,xxx 为跳转的页面路径
//uni.navigateTo({
// url: 'xxx?id=1&name=uniapp'
//})
// 方法一:在 B 页面 <script setup> 中
<script setup>
import {
onLoad,
onShow
} from "@dcloudio/uni-app";
// onLoad 接受 A 页面传递的参数
onLoad((option) => {
console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
});
onShow(() => {
console.log("B 页面 onShow");
});
</script>
```
> 方法二
```js
// 方法二:在 B 页面 setup() 中
<script>
import {
onLoad,
onShow,
} from "@dcloudio/uni-app";
export default {
setup() {
// onLoad 接受 A 页面传递的参数
onLoad((option) => {
console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
});
onShow(() => {
console.log("B 页面 onShow");
});
}
</script>
```
}
</script>
```
:::
-
在 Vue3 中,this 对象下的
`$mp`
调整为
`$scope`
-
在 Vue3 中,如果 nvue 使用了 Vuex 的相关 API,需要在 main.js 的 createApp 的返回值中 return 一下 Vuex 示例:
```js
export function createApp() {
const
app
=
createSSRApp
(
App
)
app
.
use
(
store
)
return
{
app
,
Vuex
// 如果 nvue 使用 vuex 的各种map工具方法时,必须 return Vuex
}
const app = createSSRApp(App);
app.use(store);
return {
app,
Vuex,
// 如果 nvue 使用 vuex 的各种map工具方法时,必须 return Vuex
};
}
```
-
App,小程序端源码调试,需要在 vite.config.js 中主动开启 sourcemap
```js
...
...
@@ -369,7 +408,7 @@
});
```
-
在
vue3 的小程序平台中,监听原生的点击事件可以先使用tap。(在vue3中,移除了.native修饰符,所以编译器无法预知click是要触发原生事件,还是组件的自定义事件,故并未转换成小程序的tap
事件)
-
在
vue3 的小程序平台中,监听原生的点击事件可以先使用 tap。(在 vue3 中,移除了.native 修饰符,所以编译器无法预知 click 是要触发原生事件,还是组件的自定义事件,故并未转换成小程序的 tap
事件)
-
vue3 支持的手机版本最低到多少?
> vue3 支持的范围是:Android > 4.4, ios >= 10
\ No newline at end of file
> vue3 支持的范围是:Android > 4.4, ios >= 10
docs/uniCloud/uni-id.md
浏览文件 @
19c08bf4
...
...
@@ -842,11 +842,11 @@ exports.main = async function(event,context) {
| 字段 | 类型 | 必填| 说明 |
| --- | --- | --- | --- |
| token | String| 是 |生成的token |
| tokenExpired| Number| 是 |token过期时间对应的时间戳|
**说明**
-
uni-id 3.0.0起默认缓存角色权限到token内,此功能生效时
`needPermission`
参数不在需要。如需调用createToken接口请自行传入role、permission
| tokenExpired| Number| 是 |token过期时间对应的时间戳|
**说明**
-
uni-id 3.0.0起默认缓存角色权限到token内,此功能生效时
`needPermission`
参数不在需要。如需调用createToken接口请自行传入role、permission
### 修改密码 @update-password
...
...
@@ -2944,7 +2944,7 @@ exports.main = async function(event,context) {
用户授权或者取消授权用户登录某客户端。
需要注意的是客户端APPID信息是由端上传上来的,并非完全可信,尽量在入口处进行校验。例:
需要注意的是客户端APPID信息是由
客户
端上传上来的,并非完全可信,尽量在入口处进行校验。例:
```
js
exports
.
main
=
async
function
(
event
,
context
){
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录