Merge branch 'docs/merge-docs'

ce3c6c4a · 辛宝Otto · 3787f359 · a2dd025b · ce3c6c4a · ce3c6c4a
13 changed file
--- a/docs/api/base64ToArrayBuffer.md
+++ b/docs/api/base64ToArrayBuffer.md
@@ -6,7 +6,7 @@

 |App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|快手小程序|京东小程序|
 |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
-|√|√|√|x|x|x|√|√|
+|√|√|√|x|x|√|√|√|

 **参数说明**

@@ -19,4 +19,4 @@
 ```javascript
 const base64 = 'test'
 const arrayBuffer = uni.base64ToArrayBuffer(base64)
-```
\ No newline at end of file
+```
--- a/docs/api/location/location-change.md
+++ b/docs/api/location/location-change.md
@@ -45,7 +45,7 @@ uni.onLocationChange(function (res) {
 ```
 ### uni.offLocationChange(FUNCTION CALLBACK)

-关闭监听实时位置变化，前后台都停止消息接收。
+移除实时地理位置变化事件的监听函数。

 **平台差异说明**


--- a/docs/api/media/image.md
+++ b/docs/api/media/image.md
@@ -78,6 +78,7 @@ uni.chooseImage({
 |参数名|类型|必填|说明|平台差异说明|
 |:-|:-|:-|:-|:-|
 |current|String/Number|详见下方说明|详见下方说明||
+|showmenu|Boolean|否|是否显示长按菜单，默认值为 true|微信小程序2.13.0|
 |urls|Array&lt;String&gt;|是|需要预览的图片链接列表||
 |indicator|String|否|图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。|App|
 |loop|Boolean|否|是否可循环预览，默认值为 false|App|

--- a/docs/component/editor.md
+++ b/docs/component/editor.md
@@ -60,6 +60,47 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
 | 块级样式 | `text-align` `direction` `margin` `margin-top` `margin-left` `margin-right` `margin-bottom` `padding` `padding-top` `padding-left` `padding-right` `padding-bottom` `line-height` `text-indent` |百度小程序仅支持`text-align、direction`|
 | 行内样式 | `font` `font-size` `font-style` `font-variant` `font-weight` `font-family` `letter-spacing` `text-decoration` `color` `background-color` |百度小程序仅支持`color、background-color`|

+## H5 使用最佳实践
+
+近期部分用户反馈访问 `unpkg` 失败，导致 `editor` 组件初始化异常。这里提供代码块，方便用户修改。
+
+### 方案一：自行托管 CDN 资源
+
+分别下载[quill.min.js](https://unpkg.com/quill@1.3.7/dist/quill.min.js)、[image-resize.min.js](https://unpkg.com/quill-image-resize-mp@3.0.1/image-resize.min.js)，放入 `static` 目录中。
+
+在 `index.html`(Vue 3)，或者 `public/index.html`(Vue2) 中在 `head` 之间添加 js
+
+```html
+<head>
+  <script src="/static/quill-1.3.7.min.js"></script>
+  <script src="/static/image-resize-3.0.1.min.js"></script>
+</head>
+```
+
+这样 `editor` 组件就可以正常使用了，代码逻辑中检测到有相关 `window.Quill` 变量，就不会从远程获取资源。
+
+### 方案二：从 npm 中处理资源
+
+方案一的解决思路是在 `window` 上进行挂载，同样，我们可以在项目入口 `main.js` 或者 `App.vue`中引用相关依赖即可。
+
+在项目中添加相关依赖：
+
+```bash
+npm i quill@1.3.7
+```
+
+在组件页面或者 `main.ts` 入口逻辑中，使用下面方案，注入依赖：
+
+```js
+// #ifdef H5
+import quill from "quill";
+window.Quill = quill;
+// #endif
+```
+
+相比方案一，方案二好处是依赖清晰，引用透明。如果你熟悉 `npm` 生态和构建流程，推荐方案二。
+
+
 ## 注意事项

 * 插入的 html 中事件绑定会被移除

--- a/docs/component/input.md
+++ b/docs/component/input.md
@@ -18,7 +18,7 @@ html规范中input不仅是输入框，还有radio、checkbox、时间、日期
 |disabled|Boolean|false|是否禁用||
 |maxlength|Number|140|最大输入长度，设置为 -1 的时候不限制最大长度||
 |cursor-spacing|Number|0|指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、QQ小程序、京东小程序|
-|focus|Boolean|false|获取焦点。|在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点|
+|focus|Boolean|false|获取焦点。|H5、App需要点击按钮获取焦点的，必须使用@touchend.prevent="onTap"阻止键盘收起默认事件才能获取焦点[关于软键盘弹出的逻辑说明](/component/input.html#关于软键盘弹出的逻辑说明)，小程序、nvue需使用组件的 focus()、blur() 方法控制焦点|
 |confirm-type|String|done|设置键盘右下角按钮的文字，仅在 type="text" 时生效。[有效值](#confirm-type)|微信小程序、App、H5、快手小程序、京东小程序|
 |confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|App(3.3.7+)、H5 (3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序|
 |cursor|Number||指定focus时的光标位置||

--- a/docs/component/picker.md
+++ b/docs/component/picker.md
--- a/docs/component/uniui/uni-easyinput.md
+++ b/docs/component/uniui/uni-easyinput.md
--- a/docs/component/uniui/uni-forms.md
+++ b/docs/component/uniui/uni-forms.md
-
 ::: tip 组件名：uni-forms
 > 代码块： `uForms`、`uni-forms-item`
 > 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
@@ -113,7 +112,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。


 ::: warning 注意
- uni-forms 1.4.0 版本后，binddata 方法不在推荐，请使用 uni-forms-item 上的 onFieldChange 方法代替
+- uni-forms 1.4.0 版本后，binddata 方法不再推荐，请使用 uni-forms-item 上的 onFieldChange 方法代替
 :::

 **完整示例**

--- a/docs/component/uniui/uni-list.md
+++ b/docs/component/uniui/uni-list.md
@@ -88,7 +88,7 @@ uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-l
 ```

 ### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
+- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件，`click` 事件也在此绑定
 - 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
 - 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`


--- a/docs/component/uniui/uni-transition.md
+++ b/docs/component/uniui/uni-transition.md
-
 ::: tip 组件名：uni-transition
 > 代码块： `uTransition`

@@ -134,12 +133,12 @@ export default {
 	},
 	methods: {
 		run() {
-			// 同时右平移到 100px,旋转 360 读
+			// 同时右平移到 100px,旋转 360 度
 			this.$refs.ani.step({
 				translateX: '100px',
 				rotate: '360'
 			})
-			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
+			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 度
 			this.$refs.ani.step({
 				translateX: '0px',
 				rotate: '0'
@@ -394,173 +393,173 @@ this.$refs.ani.step({
 ::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition
 > Template
 ``` html
-<template>
-	<view>
-		<uni-card is-full :is-shadow="false">
-			<text class="uni-h6">过渡动画，通常用于元素的过渡效果，例如淡隐淡出效果，遮罩层的效果、放大缩小的效果等</text>
-		</uni-card>
-		<uni-section title="示例" type="line">
-			<view class="example">
-				<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
-					:show="show"><text class="text">示例元素</text></uni-transition>
-			</view>
-		</uni-section>
-
-		<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
-			<view class="example-body">
-				<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
-				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
-				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
-				<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
-				<button class="transition-button" type="primary" @click="custom">自定义动画</button>
-			</view>
-		</uni-section>
-
-	</view>
-</template>
+<template>
+	<view>
+		<uni-card is-full :is-shadow="false">
+			<text class="uni-h6">过渡动画，通常用于元素的过渡效果，例如淡隐淡出效果，遮罩层的效果、放大缩小的效果等</text>
+		</uni-card>
+		<uni-section title="示例" type="line">
+			<view class="example">
+				<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+					:show="show"><text class="text">示例元素</text></uni-transition>
+			</view>
+		</uni-section>
+
+		<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
+			<view class="example-body">
+				<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
+				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
+				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
+				<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
+				<button class="transition-button" type="primary" @click="custom">自定义动画</button>
+			</view>
+		</uni-section>
+
+	</view>
+</template>
 ```
 > Script
-```html
-<script>
-	export default {
-		components: {},
-		data() {
-			return {
-				show: true,
-				modeClass: 'fade',
-				styles: {}
-			}
-		},
-		onLoad() {
-			// #ifdef APP-NVUE
-			this.styles = {
-				justifyContent: 'center',
-				alignItems: 'center',
-				width: '100px',
-				height: '100px',
-				borderRadius: '5px',
-				textAlign: 'center',
-				backgroundColor: '#4cd964',
-				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
-			}
-			// #endif
-		},
-		methods: {
-			handle(type) {
-				this.show = !this.show
-				this.modeClass = type
-			},
-			custom() {
-				// TODO 下面修改宽高在百度下还有些问题待修复
-				// this.$refs.ani.step({
-				// 	width: '200px'
-				// })
-				// this.$refs.ani.step({
-				// 	height: '150px'
-				// },{
-				// 	delay:100,
-				// 	duration:200
-				// })
-				this.$refs.ani.step({
-					width: '100px',
-					height: '100px',
-					rotate: '180'
-				}, {
-					delay: 200,
-					duration: 300
-				})
-				this.$refs.ani.step({
-					width: '100px',
-					height: '100px',
-					rotate: '0'
-				}, {
-					transformOrigin: '50% 50%'
-				})
-
-				this.$refs.ani.step({
-					translateX: '-100px'
-				}, {
-					timingFunction: 'ease-in',
-					duration: 100
-				})
-
-				this.$refs.ani.step({
-					translateX: '100px'
-				}, {
-					timingFunction: 'ease',
-					duration: 300
-				})
-
-				this.$refs.ani.step({
-					translateX: '50px',
-					scale: 1.5
-				}, {
-					timingFunction: 'linear',
-					duration: 100
-				})
-				this.$refs.ani.step({
-					translateX: '0px',
-					scale: 1
-				}, {
-					timingFunction: 'linear',
-					duration: 150
-				})
-
-				this.$refs.ani.run()
-			}
-		}
-	}
-</script>
+```html
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				show: true,
+				modeClass: 'fade',
+				styles: {}
+			}
+		},
+		onLoad() {
+			// #ifdef APP-NVUE
+			this.styles = {
+				justifyContent: 'center',
+				alignItems: 'center',
+				width: '100px',
+				height: '100px',
+				borderRadius: '5px',
+				textAlign: 'center',
+				backgroundColor: '#4cd964',
+				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
+			}
+			// #endif
+		},
+		methods: {
+			handle(type) {
+				this.show = !this.show
+				this.modeClass = type
+			},
+			custom() {
+				// TODO 下面修改宽高在百度下还有些问题待修复
+				// this.$refs.ani.step({
+				// 	width: '200px'
+				// })
+				// this.$refs.ani.step({
+				// 	height: '150px'
+				// },{
+				// 	delay:100,
+				// 	duration:200
+				// })
+				this.$refs.ani.step({
+					width: '100px',
+					height: '100px',
+					rotate: '180'
+				}, {
+					delay: 200,
+					duration: 300
+				})
+				this.$refs.ani.step({
+					width: '100px',
+					height: '100px',
+					rotate: '0'
+				}, {
+					transformOrigin: '50% 50%'
+				})
+
+				this.$refs.ani.step({
+					translateX: '-100px'
+				}, {
+					timingFunction: 'ease-in',
+					duration: 100
+				})
+
+				this.$refs.ani.step({
+					translateX: '100px'
+				}, {
+					timingFunction: 'ease',
+					duration: 300
+				})
+
+				this.$refs.ani.step({
+					translateX: '50px',
+					scale: 1.5
+				}, {
+					timingFunction: 'linear',
+					duration: 100
+				})
+				this.$refs.ani.step({
+					translateX: '0px',
+					scale: 1
+				}, {
+					timingFunction: 'linear',
+					duration: 150
+				})
+
+				this.$refs.ani.run()
+			}
+		}
+	}
+</script>

 ```
 > Style
-```html
-<style lang="scss">
-	.example {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		height: 150px;
-		background-color: #fff;
-	}
-
-	.example-body {
-		padding: 10px 20px;
-		padding-bottom: 0px;
-	}
-
-	.transition-button {
-		/* #ifndef APP-NVUE */
-		width: 100%;
-		/* #endif */
-		flex: 1;
-		margin-bottom: 10px;
-	}
-
-	/* #ifndef APP-NVUE */
-	.example ::v-deep .transition {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100px;
-		height: 100px;
-		border-radius: 5px;
-		text-align: center;
-		background-color: #4cd964;
-		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
-	}
-
-	/* #endif */
-
-	.text {
-		font-size: 14px;
-		color: #fff;
-	}
+```html
+<style lang="scss">
+	.example {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		height: 150px;
+		background-color: #fff;
+	}
+
+	.example-body {
+		padding: 10px 20px;
+		padding-bottom: 0px;
+	}
+
+	.transition-button {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		flex: 1;
+		margin-bottom: 10px;
+	}
+
+	/* #ifndef APP-NVUE */
+	.example ::v-deep .transition {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100px;
+		height: 100px;
+		border-radius: 5px;
+		text-align: center;
+		background-color: #4cd964;
+		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
+	}
+
+	/* #endif */
+
+	.text {
+		font-size: 14px;
+		color: #fff;
+	}
 </style>

 ```
 :::

-[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
--- a/docs/component/waterfall.md
+++ b/docs/component/waterfall.md
@@ -64,3 +64,38 @@ app端nvue专用组件。

 **注意**
 - waterfall是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
+- 如出现waterfall列表下边大面积空白区域（多列和单列时的整体高度相同，多列展示没有高度自适应），那么可以将waterfall放到父容器下边，给父容器高度设置为窗口高度，除瀑布流展示的列表外，其他的组件都放在<header>中即可。
+示例代码如下：
+```html
+<template>
+  <waterfall column-count="2" column-width="auto" :style="{ height: windowHeight + 'px' }">
+    <header>
+      <!--轮播-->
+      <swiper class="swiper_banner">
+        ......
+      </swiper>
+      <!--广告位-->
+      <view class="ads_List_box">
+        ......
+      </view>
+    </header>
+    <!--瀑布流展示的商品列表-->
+    <cell v-for="num in lists" >
+      <text>{{num}}</text>
+    </cell>
+  </waterfall>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        lists: ['A', 'B', 'C', 'D', 'E'],
+        windowHeight: uni.getSystemInfoSync().windowHeight
+      }
+    }
+  }
+</script>
+
+<style></style>
+```
+<img src="https://ask.dcloud.net.cn/uploads/answer/20231103/7eca97560500b11a95f2014fdaea1281.png" />
--- a/docs/tutorial/app-payment-stripe.md
+++ b/docs/tutorial/app-payment-stripe.md
-### 开通  
- [登录Stripe](https://dashboard.stripe.com/login)注册账号
-* 注册账号后可获取开发测试的API密钥（公钥、私钥），注意：需[激活账户](https://dashboard.stripe.com/account/onboarding)获取正式的API密钥
-* 设置[支付方式](https://dashboard.stripe.com/settings/payment_methods)
-
-更多信息详见[申请开通Stripe操作指南](https://uniapp.dcloud.io/app-payment-stripe-open)
-
-**注意**
- iOS系统仅支持iOS13.0及以上版本
-
-### 配置  
-在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“paypal支付”项并配置相关参数
-![](https://native-res.dcloud.net.cn/images/uniapp/payment/stripe_setup_manifest_info.png)
-
-**参数说明**  
- returnURL  
-格式为"your-app://stripe"(示例 io.dcloud.test://stripe)，'your-app'为应用的scheme，参考:[配置一个自定义页面内跳转协议 (URL Scheme)](https://ask.dcloud.net.cn/article/64)
-
-
-### 服务器生成订单
-在 App 端调用支付前，需在业务服务器生成[PaymentIntent](https://stripe.com/docs/api/payment_intents)，详情可参考Stripe官方文档：[Add an endpoint](https://stripe.com/docs/payments/accept-a-payment?platform=android&ui=payment-sheet#add-server-endpoint)
-
-激活账户前可通过POST请求Stripe官方沙盒服务器[https://stripe.com/docs/payments/accept-a-payment](https://stripe.com/docs/payments/accept-a-payment)，生成测试PaymentIntent，示例如下：
-
-```  js
-uni.request({
-    url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',//仅为示例
-    method: "POST", 
-    success:(res) => {
-        console.log("订单信息" + res.data);
-        var publishKey = res.data.publishableKey;
-        var paymentIntent = res.data.paymentIntent; 
-        var customer = res.data.customer;
+### 开通  
+- [登录Stripe](https://dashboard.stripe.com/login)注册账号
+* 注册账号后可获取开发测试的API密钥（公钥、私钥），注意：需[激活账户](https://dashboard.stripe.com/account/onboarding)获取正式的API密钥
+* 设置[支付方式](https://dashboard.stripe.com/settings/payment_methods)
+
+更多信息详见[申请开通Stripe操作指南](https://uniapp.dcloud.io/app-payment-stripe-open)
+
+**注意**
+- iOS系统仅支持iOS13.0及以上版本
+
+### 配置  
+在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“paypal支付”项并配置相关参数
+![](https://native-res.dcloud.net.cn/images/uniapp/payment/stripe_setup_manifest_info.png)
+
+**参数说明**  
+- returnURL  
+格式为"your-app://stripe"(示例 io.dcloud.test://stripe)，'your-app'为应用的scheme，参考:[配置一个自定义页面内跳转协议 (URL Scheme)](https://ask.dcloud.net.cn/article/64)
+
+
+### 服务器生成订单
+在 App 端调用支付前，需在业务服务器生成[PaymentIntent](https://stripe.com/docs/api/payment_intents)，详情可参考Stripe官方文档：[Add an endpoint](https://stripe.com/docs/payments/accept-a-payment?platform=android&ui=payment-sheet#add-server-endpoint)
+
+激活账户前可通过POST请求Stripe官方沙盒服务器[https://stripe.com/docs/payments/accept-a-payment](https://stripe.com/docs/payments/accept-a-payment)，生成测试PaymentIntent，示例如下：
+
+```  js
+uni.request({
+    url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',//仅为示例
+    method: "POST", 
+    success:(res) => {
+        console.log("订单信息" + res.data);
+        var publishKey = res.data.publishableKey;
+        var paymentIntent = res.data.paymentIntent; 
+        var customer = res.data.customer;
        var ephemeralKey = res.data.ephemeralKey;
-        var billingDetails = res.data.billingDetails,
-    }
-});
-```
-
-
-### 应用内发起支付
-
- uni-app项目  
-调用 [uni.requestPayment(OBJECT)](https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment) 发起支付，OBJECT参数中provider属性值固定为`stripe`、orderInfo属性值为订单对象
- 5+ App项目  
-调用 [plus.payment.request(channel, orderInfo, successCB, errorCB)](https://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.request) 发起支付, channel参数为stripe支付对象，orderInfo参数为订单对象
-
-
-#### 订单对象参数说明  
-Object对象类型
-
-| 属性 | 类型 | 必填 | 说明 |
-| :--- | :--- | :--- | :--- |
-| customer | String | 否 | Stripe的[Customer](https://stripe.com/docs/api/customers)对象，如为同一用户执行定期重复性收款，并跟踪多笔收款 |
-| ephemeralKey | String | 否 | Stripe的Customer Ephemeral Key，用于临时访问Customer |
-| isAllowDelay | String | 否 | 是否支持延迟支付,默认不支持(将 isAllowDelay 设置为 true 后可使用一些较慢的支付方式，例如 SEPA 借记和 Sofort 对于这些支付方式，只有当 PaymentSheet 完成后才能知道最终的付款状态是成功还是失败。如果您允许这样，则通知客户您已确认他们的订单，但收到付款后才能履行（例如，发货）订单。) |
-| merchantName | String | 是 | 商户名称 |
-| paymentIntent | String | 是 | Stripe的[PaymentIntent](https://stripe.com/docs/api/payment_intents)对象，对应服务器生成的支付订单 |
+        var billingDetails = res.data.billingDetails,
+    }
+});
+```
+
+
+### 应用内发起支付
+
+- uni-app项目  
+调用 [uni.requestPayment(OBJECT)](https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment) 发起支付，OBJECT参数中provider属性值固定为`stripe`、orderInfo属性值为订单对象
+- 5+ App项目  
+调用 [plus.payment.request(channel, orderInfo, successCB, errorCB)](https://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.request) 发起支付, channel参数为stripe支付对象，orderInfo参数为订单对象
+
+
+#### 订单对象参数说明  
+Object对象类型
+
+| 属性 | 类型 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- |
+| customer | String | 否 | Stripe的[Customer](https://stripe.com/docs/api/customers)对象，如为同一用户执行定期重复性收款，并跟踪多笔收款 |
+| ephemeralKey | String | 否 | Stripe的Customer Ephemeral Key，用于临时访问Customer |
+| isAllowDelay | String | 否 | 是否支持延迟支付,默认不支持(将 isAllowDelay 设置为 true 后可使用一些较慢的支付方式，例如 SEPA 借记和 Sofort 对于这些支付方式，只有当 PaymentSheet 完成后才能知道最终的付款状态是成功还是失败。如果您允许这样，则通知客户您已确认他们的订单，但收到付款后才能履行（例如，发货）订单。) |
+| merchantName | String | 是 | 商户名称 |
+| paymentIntent | String | 是 | 对应Stripe中[PaymentIntent](https://stripe.com/docs/api/payment_intents)对象的client_secret，对应服务器生成的支付订单 |
 | publishKey | String | 是 | 公钥，在Stripe注册账号后可获取 |
-| billingDetails | Object | 否 | 银行卡账单信息(包含姓名、手机号码、邮箱地址、账单地址等)|
-
-> 注意：customer与ephemeralKey必须成对出现，只传其一无效
-
-
-#### 示例代码  
- uni-app项目  
-``` js
-//订单对象
-var orderInfo = {
-    "customer": "Stripe的Customer",                    //Customer
-    "ephemeralKey": "Stripe的Customer Ephemeral Key",  //临时访问Customer的Key
-    "isAllowDelay": true,                              //是否支持延迟支付  默认false
-    "merchantName": "DCloud",                          //商户名
-    "paymentIntent": "Stripe的PaymentIntent",          //订单信息
+| billingDetails | Object | 否 | 银行卡账单信息(包含姓名、手机号码、邮箱地址、账单地址等)|
+
+> 注意：customer与ephemeralKey必须成对出现，只传其一无效
+
+
+#### 示例代码  
+- uni-app项目  
+``` js
+//订单对象
+var orderInfo = {
+    "customer": "Stripe的Customer",                    //Customer
+    "ephemeralKey": "Stripe的Customer Ephemeral Key",  //临时访问Customer的Key
+    "isAllowDelay": true,                              //是否支持延迟支付  默认false
+    "merchantName": "DCloud",                          //商户名
+    "paymentIntent": "Stripe的PaymentIntent",          //订单信息
    "publishKey": "Public Key",                        //公钥
    "billingDetails":{         //账单信息(可选)
        "name":"",
@@ -85,54 +85,54 @@ var orderInfo = {
            "postalCode":"",
            "state":""
        }
-    }                      
-};
-// 从Stripe测试服务器获取订单数据
-uni.request({
-    url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',
-    method: "POST",
-    success: (res) => {
-        orderInfo = {
-            "customer": res.data.customer,
-            "ephemeralKey": res.data.ephemeralKey,
-            "isAllowDelay": true,
-            "merchantName": "DCloud",
-            "paymentIntent": res.data.paymentIntent,
+    }                      
+};
+// 从Stripe测试服务器获取订单数据
+uni.request({
+    url: 'https://stripe-mobile-payment-sheet.glitch.me/checkout',
+    method: "POST",
+    success: (res) => {
+        orderInfo = {
+            "customer": res.data.customer,
+            "ephemeralKey": res.data.ephemeralKey,
+            "isAllowDelay": true,
+            "merchantName": "DCloud",
+            "paymentIntent": res.data.paymentIntent,
            "publishKey": res.data.publishableKey,
-            "billingDetails": res.data.billingDetails
-        };
-    }
-});
-//...
-//发起支付
-uni.getProvider({
-    service: 'payment',
-    success: function(res) {
-        if (~res.provider.indexOf('stripe')) {
-            uni.requestPayment({
-                "provider": "stripe",
-                "orderInfo": orderInfo,
-                success(res) {
-                    console.log("requestPayment Success: "+JSON.stringify(res));
-                },
-                fail(e) {
-                    console.log("requestPayment failed: "+JSON.stringify(e));
-                }
-            });
-        }
-    }
-});
-```  
-
- 5+ App项目  
-``` js
-//订单对象，从服务器获取
-var orderInfo = {
-    "customer": "Stripe的Customer",                    //Customer
-    "ephemeralKey": "Stripe的Customer Ephemeral Key",  //临时访问Customer的Key
-    "isAllowDelay": true,                              //是否支持延迟支付  默认false
-    "merchantName": "DCloud",                          //商户名
-    "paymentIntent": "Stripe的PaymentIntent",          //订单信息
+            "billingDetails": res.data.billingDetails
+        };
+    }
+});
+//...
+//发起支付
+uni.getProvider({
+    service: 'payment',
+    success: function(res) {
+        if (~res.provider.indexOf('stripe')) {
+            uni.requestPayment({
+                "provider": "stripe",
+                "orderInfo": orderInfo,
+                success(res) {
+                    console.log("requestPayment Success: "+JSON.stringify(res));
+                },
+                fail(e) {
+                    console.log("requestPayment failed: "+JSON.stringify(e));
+                }
+            });
+        }
+    }
+});
+```  
+
+- 5+ App项目  
+``` js
+//订单对象，从服务器获取
+var orderInfo = {
+    "customer": "Stripe的Customer",                    //Customer
+    "ephemeralKey": "Stripe的Customer Ephemeral Key",  //临时访问Customer的Key
+    "isAllowDelay": true,                              //是否支持延迟支付  默认false
+    "merchantName": "DCloud",                          //商户名
+    "paymentIntent": "Stripe的PaymentIntent",          //订单信息
    "publishKey": "Public Key",                        //公钥
    "billingDetails":{         //账单信息(可选)
        "name":"",
@@ -146,26 +146,26 @@ var orderInfo = {
            "postalCode":"",
            "state":""
        }
-    }
-};
-//获取支付渠道
-var stripeSev = null;
-plus.payment.getChannels(function(channels){
-    for (var i in channels) {
-        var channel = channels[i];
-        if (channel.id === 'stripe') {
-            stripeSev = channel;
-        }
-    }
-    //发起支付
-    plus.payment.request(stripeSev, orderInfo, function(result) {
-         var rawdata = JSON.parse(result.rawdata);
-         console.log("支付成功");
-    }, function(e) {
-         console.log("支付失败：" + JSON.stringify(e));
-    });
-  }, function(e){
-      console.log("获取支付渠道失败：" + JSON.stringify(e));
-});
-```
-
+    }
+};
+//获取支付渠道
+var stripeSev = null;
+plus.payment.getChannels(function(channels){
+    for (var i in channels) {
+        var channel = channels[i];
+        if (channel.id === 'stripe') {
+            stripeSev = channel;
+        }
+    }
+    //发起支付
+    plus.payment.request(stripeSev, orderInfo, function(result) {
+         var rawdata = JSON.parse(result.rawdata);
+         console.log("支付成功");
+    }, function(e) {
+         console.log("支付失败：" + JSON.stringify(e));
+    });
+  }, function(e){
+      console.log("获取支付渠道失败：" + JSON.stringify(e));
+});
+```
+
--- a/docs/tutorial/vue3-basics.md
+++ b/docs/tutorial/vue3-basics.md
@@ -1402,7 +1402,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。

 > v-model 会忽略所有表单元素的 `value`、`checked`、`selected` attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

-在下面的示例中，输入框通过`v-model`绑定了`message`，用户在输入框里输入内容时，这个内容会实施赋值给`message`。当然在代码里为`message`赋值也会实时同步到界面上input里。这就是双向绑定。
+在下面的示例中，输入框通过`v-model`绑定了`message`，用户在输入框里输入内容时，这个内容会实时赋值给`message`。当然在代码里为`message`赋值也会实时同步到界面上input里。这就是双向绑定。

 ```html
 	<template>