HarmonyOS Next开辟学习手册——同层渲染绘制Video和Button组件 ...

同层渲染是ArkWeb组件为应用提供原生组件和Web元素渲染在同一层级的本领。支持的组件范围请参考 NodeRenderType 说明。

• 使用前请在module.json5中添加网络权限，添加方法请参考 在配置文件中声明权限 。
  

1. "requestPermissions":[
2.     {
3.       "name" : "ohos.permission.INTERNET"
4.     }
5.   ]

复制代码

约束限制

使用同层渲染的功能时会有如下限制。

• 不支持W3C规格尺度标签定义为同层标签。
  
• 不支持同时配置Object标签和Embed标签作为同层渲染标签。
  
• 一个页面内同层标签的个数发起不凌驾五个，凌驾这个范围性能体验大概得不到保障。
  
• 同层标签最大高度不凌驾8192px，最大纹理巨细为8192px。
  
• Web组件嵌套Web只支持一层嵌套，不支持多层嵌套。如果多层嵌套，会表现 “该插件不受支持”。
  
• 同层渲染区域支持的触屏事故包括：滑动、点击、缩放、长按，不支持拖拽。
  
• 同层渲染区域不支持鼠标、键盘、触摸板事故
  
• 开启同层渲染后，Web组件打开的所有Web页面将不支持同一渲染模式 RenderMode 。
  

绘制XComponent+AVPlayer和Button组件

使能同层渲染模式

开辟者可通过 enableNativeEmbedMode() 控制同层渲染开关。Html文件中须要显式使用embed标签，而且embed标签内type必须以“native/”开头。同层标签对应的元素区域的背景为透明。

• 应用侧代码组件使用示例。
  

1. // HAP's src/main/ets/pages/Index.ets
2. // 创建NodeController
3. import { webview } from '@kit.ArkWeb';
4. import { UIContext, NodeController, BuilderNode, NodeRenderType, FrameNode } from "@kit.ArkUI";
5. import { AVPlayerDemo } from './PlayerDemo';
7. @Observed
8. declare class Params {
9.   textOne : string
10.   textTwo : string
11.   width : number
12.   height : number
13. }
15. declare class nodeControllerParams {
16.   surfaceId : string
17.   type : string
18.   renderType : NodeRenderType
19.   embedId : string
20.   width : number
21.   height : number
22. }
24. // 用于控制和反馈对应的NodeContainer上的节点的行为，需要与NodeContainer一起使用。
25. class MyNodeController extends NodeController {
26.   private rootNode: BuilderNode<[Params]> | undefined | null;
27.   private embedId_ : string = "";
28.   private surfaceId_ : string = "";
29.   private renderType_ :NodeRenderType = NodeRenderType.RENDER_TYPE_DISPLAY;
30.   private width_ : number = 0;
31.   private height_ : number = 0;
32.   private type_ : string = "";
33.   private isDestroy_ : boolean = false;
35.   setRenderOption(params : nodeControllerParams) {
36.     this.surfaceId_ = params.surfaceId;
37.     this.renderType_ = params.renderType;
38.     this.embedId_ = params.embedId;
39.     this.width_ = params.width;
40.     this.height_ = params.height;
41.     this.type_ = params.type;
42.   }
43.   // 必须要重写的方法，用于构建节点数、返回节点数挂载在对应NodeContainer中。
44.   // 在对应NodeContainer创建的时候调用、或者通过rebuild方法调用刷新。
45.   makeNode(uiContext: UIContext): FrameNode | null{
46.     if (this.isDestroy_) { // rootNode为null
47.       return null;
48.     }
49.     if (!this.rootNode) { // rootNode 为undefined时
50.       this.rootNode = new BuilderNode(uiContext, { surfaceId: this.surfaceId_, type: this.renderType_});
51.       if (this.type_ === 'native/video') {
52.         this.rootNode.build(wrapBuilder(VideoBuilder), {textOne: "myButton", width : this.width_, height : this.height_});
53.       } else {
54.         // other
55.       }
56.     }
57.     // 返回FrameNode节点。
58.     return this.rootNode.getFrameNode();
59.   }
61.   setBuilderNode(rootNode: BuilderNode<Params[]> | null): void{
62.     this.rootNode = rootNode;
63.   }
65.   getBuilderNode(): BuilderNode<[Params]> | undefined | null{
66.     return this.rootNode;
67.   }
69.   updateNode(arg: Object): void {
70.     this.rootNode?.update(arg);
71.   }
72.   getEmbedId() : string {
73.     return this.embedId_;
74.   }
76.   setDestroy(isDestroy : boolean) : void {
77.     this.isDestroy_ = isDestroy;
78.     if (this.isDestroy_) {
79.       this.rootNode = null;
80.     }
81.   }
83.   postEvent(event: TouchEvent | undefined) : boolean {
84.     return this.rootNode?.postTouchEvent(event) as boolean
85.   }
86. }
88. @Component
89. struct VideoComponent {
90.   @ObjectLink params: Params
91.   @State bkColor: Color = Color.Red
92.   mXComponentController: XComponentController = new XComponentController();
93.   @State player_changed: boolean = false;
94.   player?: AVPlayerDemo;
96.   build() {
97.     Column() {
98.       Button(this.params.textOne)
100.       XComponent({ id: 'video_player_id', type: XComponentType.SURFACE, controller: this.mXComponentController})
101.         .border({width: 1, color: Color.Red})
102.         .onLoad(() => {
103.           this.player = new AVPlayerDemo();
104.           this.player.setSurfaceID(this.mXComponentController.getXComponentSurfaceId());
105.           this.player_changed = !this.player_changed;
106.           this.player.avPlayerLiveDemo()
107.         })
108.         .width(300)
109.         .height(200)
110.     }
111.     //自定义组件中的最外层容器组件宽高应该为同层标签的宽高
112.     .width(this.params.width)
113.     .height(this.params.height)
114.   }
115. }
116. // @Builder中为动态组件的具体组件内容。
117. @Builder
118. function VideoBuilder(params: Params) {
119.   VideoComponent({ params: params })
120.     .backgroundColor(Color.Gray)
121. }
123. @Entry
124. @Component
125. struct WebIndex {
126.   browserTabController: WebviewController = new webview.WebviewController()
127.   private nodeControllerMap: Map<string, MyNodeController> = new Map();
128.   @State componentIdArr: Array<string> = [];
130.   aboutToAppear() {
131.     // 配置web开启调试模式。
132.     webview.WebviewController.setWebDebuggingAccess(true);
133.   }
135.   build(){
136.     Row() {
137.       Column() {
138.         Stack() {
139.           ForEach(this.componentIdArr, (componentId: string) => {
140.             NodeContainer(this.nodeControllerMap.get(componentId))
141.           }, (embedId: string) => embedId)
142.           // Web组件加载本地test.html页面。
143.           Web({ src: $rawfile("test.html"), controller: this.browserTabController })
144.               // 配置同层渲染开关开启。
145.             .enableNativeEmbedMode(true)
146.               // 获取embed标签的生命周期变化数据。
147.             .onNativeEmbedLifecycleChange((embed) => {
148.               console.log("NativeEmbed surfaceId" + embed.surfaceId);
149.               // 1. 如果使用embed.info.id作为映射nodeController的key，请在h5页面显式指定id
150.               const componentId = embed.info?.id?.toString() as string
151.               if (embed.status == NativeEmbedStatus.CREATE) {
152.                 console.log("NativeEmbed create" + JSON.stringify(embed.info))
153.                 // 创建节点控制器，设置参数并rebuild。
154.                 let nodeController = new MyNodeController()
155.                 // 1. embed.info.width和embed.info.height单位是px格式，需要转换成ets侧的默认单位vp
156.                 nodeController.setRenderOption({surfaceId : embed.surfaceId as string, type : embed.info?.type as string,
157.                   renderType : NodeRenderType.RENDER_TYPE_TEXTURE, embedId : embed.embedId as string,
158.                   width : px2vp(embed.info?.width), height : px2vp(embed.info?.height)})
159.                 nodeController.setDestroy(false);
160.                 // 根据web传入的embed的id属性作为key，将nodeController存入map。
161.                 this.nodeControllerMap.set(componentId, nodeController)
162.                 // 将web传入的embed的id属性存入@State状态数组变量中，用于动态创建nodeContainer节点容器，需要将push动作放在set之后。
163.                 this.componentIdArr.push(componentId)
164.               } else if (embed.status == NativeEmbedStatus.UPDATE) {
165.                 let nodeController = this.nodeControllerMap.get(componentId)
166.                 nodeController?.updateNode({textOne: 'update', width: px2vp(embed.info?.width), height: px2vp(embed.info?.height)} as ESObject)
167.               } else {
168.                 let nodeController = this.nodeControllerMap.get(componentId);
169.                 nodeController?.setDestroy(true)
170.                 this.nodeControllerMap.clear();
171.                 this.componentIdArr.length = 0;
172.               }
173.             })// 获取同层渲染组件触摸事件信息。
174.             .onNativeEmbedGestureEvent((touch) => {
175.               console.log("NativeEmbed onNativeEmbedGestureEvent" + JSON.stringify(touch.touchEvent));
176.               this.componentIdArr.forEach((componentId: string) => {
177.                 let nodeController = this.nodeControllerMap.get(componentId)
178.                 // 将获取到的同层区域的事件发送到该区域embedId对应的nodeController上
179.                 if (nodeController?.getEmbedId() === touch.embedId) {
180.                   let ret = nodeController?.postEvent(touch.touchEvent)
181.                   if (ret) {
182.                     console.log("onNativeEmbedGestureEvent success " + componentId)
183.                   } else {
184.                     console.log("onNativeEmbedGestureEvent fail " + componentId)
185.                   }
186.                   if (touch.result) {
187.                     // 通知Web组件手势事件消费结果
188.                     touch.result.setGestureEventResult(ret);
189.                   }
190.                 }
191.               })
192.             })
193.         }
194.       }
195.     }
196.   }
197. }

复制代码

• 应用侧代码，视频播放示例。
  

1. // HAP's src/main/ets/pages/PlayerDemo.ets
2. import { media } from '@kit.MediaKit';
3. import { BusinessError } from '@ohos.base';
5. export class AVPlayerDemo {
6.   private count: number = 0;
7.   private surfaceID: string = ''; // surfaceID用于播放画面显示，具体的值需要通过Xcomponent接口获取，相关文档链接见上面Xcomponent创建方法。
8.   private isSeek: boolean = true; // 用于区分模式是否支持seek操作。
10.   setSurfaceID(surface_id: string){
11.     console.log('setSurfaceID : ' + surface_id);
12.     this.surfaceID = surface_id;
13.   }
14.   // 注册avplayer回调函数。
15.   setAVPlayerCallback(avPlayer: media.AVPlayer) {
16.     // seek操作结果回调函数。
17.     avPlayer.on('seekDone', (seekDoneTime: number) => {
18.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
19.     })
20.     // error回调监听函数，当avplayer在操作过程中出现错误时，调用reset接口触发重置流程。
21.     avPlayer.on('error', (err: BusinessError) => {
22.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
23.       avPlayer.reset();
24.     })
25.     // 状态机变化回调函数。
26.     avPlayer.on('stateChange', async (state: string, reason: media.StateChangeReason) => {
27.       switch (state) {
28.         case 'idle': // 成功调用reset接口后触发该状态机上报。
29.           console.info('AVPlayer state idle called.');
30.           avPlayer.release(); // 调用release接口销毁实例对象。
31.           break;
32.         case 'initialized': // avplayer 设置播放源后触发该状态上报。
33.           console.info('AVPlayer state initialized called.');
34.           avPlayer.surfaceId = this.surfaceID; // 设置显示画面，当播放的资源为纯音频时无需设置。
35.           avPlayer.prepare();
36.           break;
37.         case 'prepared': // prepared调用成功后上报该状态机。
38.           console.info('AVPlayer state prepared called.');
39.           avPlayer.play(); // 调用播放接口开始播放。
40.           break;
41.         case 'playing': // play成功调用后触发该状态机上报。
42.           console.info('AVPlayer state prepared called.');
43.           if(this.count !== 0) {
44.             if (this.isSeek) {
45.               console.info('AVPlayer start to seek.');
46.               avPlayer.seek(avPlayer.duration); // seek到视频末尾。
47.             } else {
48.               // 当播放模式不支持seek操作时继续播放到结尾。
49.               console.info('AVPlayer wait to play end.');
50.             }
51.           } else {
52.             avPlayer.pause(); // 调用暂停接口暂停播放。
53.           }
54.           this.count++;
55.           break;
56.         case 'paused': // pause成功调用后触发该状态机上报。
57.           console.info('AVPlayer state paused called.');
58.           avPlayer.play(); // 再次播放接口开始播放。
59.           break;
60.         case 'completed': //播放接口后触发该状态机上报。
61.           console.info('AVPlayer state paused called.');
62.           avPlayer.stop(); // 调用播放接口接口。
63.           break;
64.         case 'stopped': // stop接口后触发该状态机上报。
65.           console.info('AVPlayer state stopped called.');
66.           avPlayer.reset(); // 调用reset接口初始化avplayer状态。
67.           break;
68.         case 'released': //播放接口后触发该状态机上报。
69.           console.info('AVPlayer state released called.');
70.           break;
71.         default:
72.           break;
73.       }
74.     })
75.   }
77.   // 通过url设置网络地址来实现播放直播码流。
78.   async avPlayerLiveDemo(){
79.     // 创建avPlayer实例对象
80.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
81.     // 创建状态机变化回调函数。
82.     this.setAVPlayerCallback(avPlayer);
83.     this.isSeek = false; // 不支持seek操作。
84.     // 使用时需要自行替换视频链接
85.     avPlayer.url = 'https://xxx.xxx/demo.mp4';
86.   }
87. }

复制代码

• 前端页面示例。
  

1. <!--HAP's src/main/resources/rawfile/test.html-->
2. <!DOCTYPE html>
3. <html>
4. <head>
5.     <title>同层渲染测试html</title>
6.     <meta name="viewport">
7. </head>
8. <body>
9. <div>
10.     <div id="bodyId">
11.         <embed id="nativeVideo" type = "native/video" width="1000" height="1500" src="test" style = "background-color:red"/>
12.     </div>
13. </div>
14. </body>
15. </html>

复制代码

使能同层渲染模式并指定标署名和自定义范例

开辟者也可通过 registerNativeEmbedRule(tag: string, type: string) 指定tag标签和自定义范例。
当前tag仅支持"embed"和"object"，type范例则可任意指定，两个字符串参数均不区分巨细写，ArkWeb内核侧将会同一转成小写，其中tag字串使用全字符串匹配，type使用字符串前缀匹配。
若开辟者不使用该接口或该接口吸收的为非法字符串(如:空字符串)时，内核将使用默认设置即"embed" + "native/"前缀模式，若指定范例与w3c定义的object或embed尺度范例重合如registerNativeEmbedRule(“object”, “application/pdf”)，
ArkWeb将遵循w3c尺度举动，不会将其识别为同层标签。

• 应用侧代码使用registerNativeEmbedRule示例。
  

1. class MyNodeController extends NodeController {
2.   ...
3.   makeNode(uiContext: UIContext): FrameNode | null{
5.     if (this.type_ === 'test') {
6.       ...
7.     } else if (this.type_ === 'test/video') {
8.       ...
9.     } else {
10.       // other
11.     }
12.     ...
13.   }
14.   ...
15. }
16. ...
18.   build(){
19.       ...
20.         Stack() {
21.           ...
22.           Web({ src: $rawfile("test.html"), controller: this.browserTabController })
23.              // 配置同层渲染开关开启。
24.             .enableNativeEmbedMode(true)
25.              // 注册同层标签为"object"，类型为"test"前缀。
26.             .registerNativeEmbedRule("object", "test")
27.             ...
28.         }
29.       ...
30.   }

复制代码

• 与registerNativeEmbedRule相对应的前端页面代码，范例可使用"test"及以"test"为前缀的字串。
  

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>同层渲染测试html</title>
5.     <meta name="viewport">
6. </head>
7. <body>
8. <div>
9.     <div>
10.         <object id="nativeButton" type="test" width="800" height="800" data="test?params1=xxx?" style = "background-color:red"/>
11.           <param name="id" value="playerId" />
12.           <param name="data" value='{}' />
13.         </object>
14.     </div>
15.     <div>
16.         <object id="nativeVideo" type="test/video" width="500" height="500" data="test" style = "background-color:red"/><object>
17.     </div>
18. </div>
19. <div id="button" width="500" height="200">
20.     <p>bottom</p>
21. </div>
23. </body>
24. </html>

复制代码

绘制TextInput组件并将同层元素更新时上报的位置信息更新到组件侧

触发同层元素更新的举动包括滚动、缩放、元素发生改变导致的重排等。由于同层元素的位置基于Web组件坐标系，对于网页缩放这种并未真正改变元素的size的举动，只会有position的改变，宽高仍保持初始值。
须要位置信息的组件如TextInput、TextArea等需将同层元素更新上报来的位置信息实时更新到组件侧。

• 应用侧完整示例。
  

1. ...
2. class MyNodeController extends NodeController {
3.   ...
4.   makeNode(uiContext: UIContext): FrameNode | null{
6.     if (this.type_ === 'application/view') {
7.       this.rootNode.build(wrapBuilder(TextInputBuilder), {
8.         textOne: "myInput",
9.         width: this.width_,
10.         height: this.height_
11.       });
12.     } else {
13.       // other
14.     }
15.     ...
16.   }
17.   ...
18. }
22. @Component
23. struct TextInputComponent {
24.   @Prop params: Params
25.   @State bkColor: Color = Color.Red
26.   mXComponentController: XComponentController = new XComponentController();
28.   build() {
29.     Column() {
30.       TextInput({ text: `${this.params.textOne}` })
31.         .height(50)
32.         .width(200)
33.         .backgroundColor(Color.Green)
34.         .onTouch((event) => {
35.           console.log('input1 event ' + JSON.stringify(event));
36.         }).margin({ top: 30})
38.       TextInput({ text: `${this.params.textOne}` })
39.         .height(50)
40.         .width(200)
41.         .backgroundColor(Color.Green)
42.         .onTouch((event) => {
43.           console.log('input2 event ' + JSON.stringify(event));
44.         }).margin({ top: 30})
46.       TextInput({ text: `${this.params.textOne}` })
47.         .height(50)
48.         .width(200)
49.         .backgroundColor(Color.Green)
50.         .onTouch((event) => {
51.           console.log('input2 event ' + JSON.stringify(event));
52.         }).margin({ top: 30})
53.     }
54.     .width(this.params.width)
55.     .height(this.params.height)
56.   }
57. }
59. @Builder
60. function TextInputBuilder(params: Params) {
61.   TextInputComponent({ params: params })
62.     .height(params.height)
63.     .width(params.width)
64.     .backgroundColor(Color.Red)
65. }
67. @Entry
68. @Component
69. struct Page {
70.   browserTabController: WebviewController = new webview.WebviewController()
71.   private nodeControllerMap: Map<string, MyNodeController> = new Map();
72.   @State componentIdArr: Array<string> = [];
73.   @State edges: Edges = {};
75.   build() {
76.     Row() {
77.       Column() {
78.         Stack(){
79.           ForEach(this.componentIdArr, (componentId: string) => {
80.             NodeContainer(this.nodeControllerMap.get(componentId)).position(this.edges)
81.           }, (embedId: string) => embedId)
83.           Web({ src: $rawfile('test.html'), controller: this.browserTabController})
84.             .enableNativeEmbedMode(true)
85.             .registerNativeEmbedRule("object", "APPlication/view")
86.             .onNativeEmbedLifecycleChange((embed) => {
87.               const componentId = embed.info?.id?.toString() as string;
88.               if (embed.status == NativeEmbedStatus.CREATE) {
89.                 // 建议用edges的方式使用position，避免px和vp的转换出现浮点数运算带来额外的精度损失
90.                 this.edges = {left: `${embed.info?.position?.x as number}px`, top: `${embed.info?.position?.y as number}px`}
91.                 let nodeController = new MyNodeController()
92.                 nodeController.setRenderOption({surfaceId : embed.surfaceId as string,
93.                   type : embed.info?.type as string,
94.                   renderType : NodeRenderType.RENDER_TYPE_TEXTURE,
95.                   embedId : embed.embedId as string,
96.                   width : px2vp(embed.info?.width),
97.                   height :px2vp(embed.info?.height)})
98.                 nodeController.rebuild()
100.                 this.nodeControllerMap.set(componentId, nodeController)
101.                 this.componentIdArr.push(componentId)
102.               } else if (embed.status == NativeEmbedStatus.UPDATE) {
103.                 console.log("NativeEmbed update" + JSON.stringify(embed.info))
105.                 this.edges = {left: `${embed.info?.position?.x as number}px`, top: `${embed.info?.position?.y as number}px`}
106.                 let nodeController = this.nodeControllerMap.get(componentId)
108.                 nodeController?.updateNode({text: 'update',   width : px2vp(embed.info?.width),
109.                   height :px2vp(embed.info?.height)} as ESObject)
110.                 nodeController?.rebuild()
111.               } else {
112.                 let nodeController = this.nodeControllerMap.get(componentId)
113.                 nodeController?.setBuilderNode(null)
114.                 nodeController?.rebuild()
115.               }
116.             })
117.             .onNativeEmbedGestureEvent((touch) => {
118.               this.componentIdArr.forEach((componentId: string) => {
119.                 let nodeController = this.nodeControllerMap.get(componentId)
120.                 if (nodeController?.getEmbedId() === touch.embedId) {
121.                   let ret = nodeController?.postEvent(touch.touchEvent)
122.                   if (ret) {
123.                     console.log("onNativeEmbedGestureEvent success " + componentId)
124.                   } else {
125.                     console.log("onNativeEmbedGestureEvent fail " + componentId)
126.                   }
127.                 }
128.               })
129.             })
130.         }
131.       }
132.       .width('100%')
133.     }
134.     .height('100%')
135.   }
136. }

复制代码

• 前述应用侧相对应的前端示例。
  

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>同层渲染测试html</title>
5.     <meta charset="UTF-8">
6.     <style>
7.     html {
8.         background-color: blue;
9.     }
10.     </style>
11. </head>
12. <body>
14. <div id="bodyId" style="width:800px; height:1000px; margin-top:1000px;">
15.     <object id="cameraTest" type="application/view" width="100%" height="100%" ></object>
16. </div>
17. <div style="height:1000px;">
18. </div>
20. </body>
21. </html>

复制代码

鸿蒙全栈开辟全新学习指南

有许多小搭档不知道学习哪些鸿蒙开辟技术？不知道须要重点掌握哪些鸿蒙应用开辟知识点？而且学习时频繁踩坑，最终浪费大量时间。以是要有一份实用的鸿蒙（HarmonyOS NEXT）学习门路与学习文档用来跟着学习黑白常有须要的。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开辟技术的学习门路，包含了鸿蒙开辟必掌握的焦点知识要点，内容有（ArkTS、ArkUI开辟组件、Stage模型、多端部署、分布式应用开辟、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开辟、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。
本门路共分为四个阶段：

第一阶段：鸿蒙初中级开辟必备技能

第二阶段：鸿蒙南北双向高工技能根本：gitee.com/MNxiaona/733GH

第三阶段：应用开辟中高级就业技术

第四阶段：全网首发-工业级南向装备开辟就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开辟学习手册》（共计892页）

怎样快速入门？

1.根本概念
2.构建第一个ArkTS应用
3.……

开辟根本知识:gitee.com/MNxiaona/733GH

1.应用根本知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开辟

1.Ability开辟
2.UI开辟
3.公共事故与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.装备管理
12.装备使用信息统计
13.DFX
14.国际化开辟
15.折叠屏系列
16.……

鸿蒙开辟面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开辟教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  
• 关注小编，同时可以等待后续文章ing