微信小程序webview设置方法

这期视频我来说一下这个 vivo tv 设置教程，我们点进来它会显示这个主键过低啊，需要切换叉五内核，咱们点一下这个返回键里面，点设置里面拉一下自动全屏播放，打开它， 然后 vivo 实线这里选这个叉五，然后我们再点一下这个 tps 调试界面，点一下，然后它会出现这个东西的。来，我们点一下返回，然后点一下安装线上内核，它刚才会出现一个下载什么东西大家都别管它，直接点这个安装线上内核， 然后如果你点呃，有一些车型点重启，重启不到啊，直接点返回就行了。点返回，返回，返回，退出去 是一定一代更比一代强。呃，确实在这样，这样就 ok 了哈，这关键。

大家好，这里是小白战绩，本期为大家分享 webview 的 相关内容。我们先来看演示效果，这里我准备了一些可点击的图标，点击它们可以打开不同的页面，比如这个可以打开我公众号的文章页面，这上面会优先展示当前加载的网页地址，下面则是解析后的域名地址，中间区域是对应的网页内容。 截至目前已经发布过四十四集了，往后也会继续更新，希望大家可以一键三连支持一下。右上角是一个扩展菜单，点击会弹出一个可操作的列表，这里的头部展示了当前网页的来源，至于这第一排，你懂的哈。 当然你是完全可以在这里放一些有用的功能按钮的。下面是我提出来的几个比较有代表性的功能演示，点击刷新可以重新载入当前的网页，这个可以复制当前打开的网页链接地址， 这个则可以使用外部应用来打开当前网页，这就是通过系统浏览器打开的一个效果。另外这个 web view 还支持一键截图功能，这就是截取的当前网页的图片，不过很遗憾好像不支持截长图。另外，甚至于你还可以获取当前网页的元代码。 最后一个是调用网页中的代码，不过这并不是我们的本地页面，现在点击还不会有任何反应。然后我们来打开一个二级页面，与此同时，底部划出来了一个控制菜单，可以点击左右前进或后退网页，当加载完毕后，导航文字会变成网页的标题， 并且还支持自定义系统级的快捷菜单。这里我只是简单获取了一下当前选中的文本， 点击下方的左箭头可以回退网页，顺便我们来看一下不同的网页加载效果， 或者你也可以在网页中播放一些常规的视频，比如像小红书中这里的宣传视频，它也支持应用级的全屏播放，视频播放是有声音的哈，只是我这里没有录进来，其他我们就不一一去看了哈。剩下的我们来看一下这个搜索引擎页面， 可以看到功能上基本没有什么问题，加载速度上也是挺快的， 后面的都差不多，我就不挨个去点开看了哈。最后我们来看一个比较实际的应用场景，现在基本上都是混合式的开发模式，这种模式也还是挺常见的。这两个功能菜单相信大家并不会陌生吧，点击可以打开当前应用的用户协议，很多 app 中都会有这个 以及另一个隐私政策等页面，这些内容可能会时不时的进行修正，这种用网页来做就再合适不过了。这些就是 ypu 的 功能演示了，剩下的就是和网页的交互了， 我这里提前准备了一个本地页面，主要是用来演示 flutter 和网页的通信交互，里面大概是长这样的，然后我们打开控制台，这种交互需要观察执行反馈，可以看到这里输出了很多我们看不懂的网址，这 些是 ypu 在 开发模式下打印的调试信息，我们先把它给清掉哈，然后再重新进入网页，可以看到这些网址信息简直多得离谱， 我们自己的调试内容肯定会被这些日制给淹没掉，所以这里我给大家分享一个很有用的插件，按这个快捷键打开设置页面，在插件中心安装一个这个插件， ctrl， 它可以对控制台的打印内容进行过滤，然后在这些日制中找到你想着中查看的日制信息。比如我自己的日制是以这个箭头开始的，那就选中它， 然后右键点击这个 grab， 此时会打开一个新的标签页，这里面就只会输出我们过滤后的日制信息了。现在我们重新进一下网页可以看到，这样就没有那些无关紧要的日制信息了。 ok， 这是一个体外化哈。现在我们来看页面中的这几个日制输出监控，这个是错误调试日制，这个是警告调试日制， 这个是信息类调试日制，这个是 debac 调试日制，这是普通级别的日制。这几个就是日制相关的 api。 接着我们来看弹窗相关的 api， 在 javascript 中有三种类型的弹窗，第一种是 alert 警告弹窗，这主要用于向用户展示一些重要的信息。 第二种是确认选择弹窗，这种模式主要是让用户选择是否执行某个操作。可以看到在控制台打印了收到的弹窗请求，这里的文字是通过 javascript 去设置的，点击确认会将选择结果回传过去，然后网页端就可以得到选择的结果了， 而取消则会返回一个 false。 最后一个是输入类弹窗，它主要用于获取用户在某个操作下的输入内容，点击确认会把结果回传给网页端， 而点击取消则只能得到一个闹置。最后是一个非常重要的模块，应用于网页端的数据交互，它贯彻着一个应用的完整性，你可以在网页中操作应用中的某些功能，同时你也可以通过应用去改变或者影响网页中的显示。比如这里，我们可以从网页中去调用 flutter 中的某个函数，这个 tos 就是 从 flutter 中给出的反馈， 就像是在无差别的使用本地应用一般。同时 flutter 也可以调用网页中的函数，比如我这里准备了一个区域，用来显示 flutter 传过来的数据，这个操作我放在了右上角的折叠菜单中，我们可以来点击看一下，可以看到 flutter 传给网页的内容就显示在了这个框里， 并且每次点击传的参数值都不一样。这只是一个简单的交互式理哈，并没有做多复杂的效果，道理都是相通的。上面这些技术内容咱们粗略了解一下就可以了。 ok， 那 么以上就是 web view 的 相关功能演示了，在正式编辑代码之前，我们需要先来了解一些 web view 的 相关知识。为了照顾到一些没怎么接触过这方面知识的朋友们，这里我准备了一个进阶文档，我将会按照这个流程尽可能详细的向大家分享本期的知识点。 视频创作不易，还请一键三连支持一下，希望你看完能有所获。首先， web view 是 一个内嵌在移动应用或桌面程序中的浏览器宿建， 可以让应用程序在不离开应用本身的情况下显示网页内容。介于一些特殊性的存在，很少有应用是完全式的本地开发，基本上都是混合式的开发模式， 基础的业务功能保持原生，开发一些动态化的功能，比如显示一篇发布的附文本文章，又或者是应用内的用户协议、隐私政策等页面，它们可能会时不时的发生变缸。如果这些也要用原生去开发的话，那有可能你只是简单的改动几个文字，也需要发布一个版本，这完全是没必要的，因此配备一个 web 是 很有必要的。 其次就是相关的技术方案。在 flutter 中比较成熟的、受欢迎的主要有以下两种技术方案，第一个是 webu flutter， 这是官方团队维护的一个 webu 组件，下载量接近一百七十万。另一个是 flutter in the webu， 这是第三方团队维护的一个开源组件，下载量在七十万左右，它们都能实现内嵌 webu 的 功能， 核心功能都差不多，主要在一些细节化的东西上有一点区别。那接下来我们就来看该如何技术选型。如果你只是想简单地挂在一个网页到应用中，个人建议选择 webflix 软件，官方团队维护，不论是从性能还是流畅度上来说都无可挑剔，可以无脑选。 但是如果你还想整点花火，丰富一点功能的话，建议选择后者，他提供的功能比官方团队维护的多了很多，并且提供了很多的便利性。下面是关于这两种技术方案的一个功能，对比基础的 vip 功能，它俩是都支持的。 关于这是可可的双向通信，前者需要手动封装其中复杂的逻辑，而后者则原生支持完善的通信机制， 对于请求拦截，前者不支持自定义请求头，后者支持请求拦截与修改，并且前者不支持 h 文件上传，后者只需要配置权限即可兼容。另外，前者无法处理资质证书，后者支持自定义的证书。 前者在多开 ypu 的 时候可能会出现闪退的情况，后者具备一些优化策略，前者无法加载本地资源，后者内置了一个本地服务器，支持更为复杂的网页资源访问， 你可以通过这个表格更直观地感受到它们在功能上的区别。接着我们来看它们的使用方式。如果你使用 web user 的 话，第一不需要先添加它的依赖库，在使用之前最好是对比一下它的版本要求。我这里已经提前在项目中配置好了这两个组建的依赖库， 你们添加了依赖之后，记得下载依赖哈。对了，任何需要访问网络的组建都需要配置网络哈，这个我就略过了，你们记得查看是否配置过， 时间缘故这个我就不细说了。 weboflutter 主要分为两个部分，一个控制器和一个矢图组建，像这样就可以创建一个控制器，你需要在这里面去配置它的详细参数， 然后使用 v p v g 去渲染网页，它仅需要存入这个 controller 即可。接着就是加载网页了，它支持以下四种加载方式，第一个是加载本地静态文件，这个 k 必须要在 ppx 文件中配置。其次是加载静态网页内容，然后是本地设备中的文件，这是一个绝对路径哈。最后就是最常用的加载一个远程网页。 接着我们来看 fatterinprise， 它同样需要先配置一下依赖库哈，在使用方面会和上面的略有区别，它也有一个控制器，但是它不需要我们手动去出示化它，我们只需要在 iubricated 中去完成复制即可。它的试图组建是 inprise， 它的所有配置项都在这个组件内部，这方面和上面会有很大区别， 这就是组建创建完的回调函数，它会回成一个 controller 管，我们可以在这里保存它的引用，后续就可以用它在其他地方去控制 web view 了。这就是这两个组建最基础的使用方式。介于时间原因，这里主要通过对比的方式让大家去了解这两种组建， 但在编码中主要还是以后者为主哈，那这里我们就先把它最基础的功能给刨起来。为了便于扩展与管理，我们可以在配置目录下创建一个微柄目录，然后在它里面创建一个专门用于展示网页的页面。由于会涉及到生命周期以及一些资源的回收，所以这里我们用状态化组建 state for widget 去做。 然后我们先来创建一个 ui 脚手架，这里我们可以用导航栏来展示标题，然后在八戒中去放置我们的 web view。 组建 可以看到它这里面有很多的配置项，大大小小都有好几十个了。先不管这些，后面我们再来看，我们先把网页显示出来再说。先简单加载一个远端的网页地址吧， 这里你可以随便找一个可以访问的网页地址，我这里用的是必应搜索的网址。 ok， 先就这样，然后在你的路由管理中配置一下这个页面，由于每个人的路由管理方式不一样，你需要按照你项目的方式去配置哈，如果你对我这种方式感兴趣的话，欢迎观看这一期的视频。 对了， web view 属于远程功能，需要向底层框架注册一个插件，所以在运行前一定要记得断开链接，重新安装一下应用哈，不过我这里已经跑过了，只需要重启一下就可以了。那这边的代码就先这样，然后来到这个 home page 面，这个页面很简单， 主要就是用网格组建，简单的构造了一个左侧的页面，这里面就没啥好说的了，上面刚才看到的是用于构建导航的一些数据像，配置了一些标题、图标以及一个网址链接等信息，然后需要在这个可点击组建中绑定一个跳转事件， 这里是前面统一路由的跳转方式哈，这个参数是页面的类名。 ok， 那 我们来测试一下。 呃，这怎么加载失败了呢？不好意思啊，我想可能是刚填写的那个网址写错了， 还是直接把之前这里写的的复制过去吧。那我们再来看， 可以看到现在就能加载出来了，对吧？并且二级跳转也是没有问题的，功能一切正常，不过现在这里的地址还是写死了，对吧？那我们就来做一个简单的动态跳转，当点击这些带不同链接地址的图标像的时候，就跳转到对应的网页中去。按照之前路由的配置方式，需要在位置这里去混入一个路由的巧接对象， 这里需要填入一个当前页面所接收的参数的类型，这里可以先设置一个字母类型的参数，请注意甄别各自路由的处理方式哈。然后在这里通过微指令获取传入的参数， 这样就能获取到传入的参数了。可以看到这里返回的数据类型就是上面设定的类型，如果没有的话可以给一个默认值，当然你依然可以使用 modore 去获取哈。然后把这里的固定地址换成传入进来的地址， ok， 像这样就可以了，我们来加再试一下吧， 这显示出来怎么是空白的呢？我想想哈。对了，之前的路由跳转貌似没有携带参数过去，可以看到这里是无参的跳转方式，需要把它换成另一个带参数的跳转方式， 像这样把链接地址传过去就可以了。那我们再来看一下， ok， 这回就可以了。这个网页纯粹是因为加载太慢了， 其他的加载都没有问题，这就是 webu 最基础的使用方式，怎么样啊？简单吧，如果你只是想简单显示一个网页的话，这样就可以正常工作了。那我们继续来看后面的内容，这里我列出了几个常见的功能点，我将会按照这个顺序带大家一个个去实现它。像是最基础的加载网页功能 我们就已经实现了。下面就是加载进度条的显示功能，这个功能也是非常的常见，它可以帮我们了解当前加载了多少。既然是加载进度，那就肯定需要知道当前已经加载了多少，对吧？这个组件中有一个名为 on progress 式的回调函数，它会把当前加载的进度值回传给我们。第一个是对应的 controller 控制器，它的好多回调函数，第一个参数基本上都是这个 controller， 第二个就是加载的进度，它是一个从零到一百的整数值哈， 这里我们可以先把这打印出来，看一下是怎么变化的，然后咱们把控制台给清空一下，这里可以先把这个标签也切到我们的过滤结果来哈， 可以看到控制台就打印出了对应的进度变化。由于这里的纸是一个整数，所以在做进度显示的时候需要注意是否需要转换。好，那有了这个纸，我们要做进度条就很简单了。这里的进度条有两种放置方式，一种是放在顶部的导航栏底部去显示，另一种是叠在 web view 的 顶部去显示，前面的那种效果不太好， 且不利于二次封装。所以这里我主要用第二种布局方式去构建，我们需要像这样用一个自带组建把 webu 给包裹起来，记住 webu 一定要放在最上面，也就是仕图的最底层。然后这里我们用 linear progress indicator 去构建一个进度条，这里的 value 就是 进度条的加载量函数，需要注意的是 它的值是一个零到一的小数，表示加载的百分比。比如我们先填一个零点我看一下，然后给进度条设置一个颜色， 最后可以把进度条的背景颜色设置为透明，重新加载看一下效果，可以看到顶部就有一个进度条了，对吧？ 这个高度咱们是可以自定义设置的，你可以是情况设置到一个理想的高度，那现在进度条有了，剩下的就是让它动起来，聪明的你一定知道，我们只需要改动这个 value 就 可以让进度条走起来，对吧？至于如何更新这个值，有两种常见的做法，一是页面级别的更新，这也是你在网上能看到的百分之九十的做法， 那我们就先用这种方法来试一下吧。我们需要创建一个变量来保存这里的 progress 进度值，这里记得用 double 类型哈， 然后在这里去给它复制并刷新页面。注意这里不能直接复制，我们需要用传递来的值除以一百才可以，这样才能得到一个小数的百分比，然后把这个值给应用到下面的 value 中去，这样就可以实现一个动态的进度条了。我们来加载看一下效果， 可以看到现在就是一个动态的进度条了，但是现在有一个问题，网页已经加载完毕了，但是这个进度条却还显示着，这显然是不行的，所以我们得想一个办法，在加载完成后把它给隐藏起来。其实这也很简单，我们只需要在每次更新进度值后，拿这个值去和一做个比较就可以了， 只有在达到百分之一百之前需要展示它，否则不去渲染这个组件就可以了。对了，这里应该是小于一哈，那我们来重新进入看一下， 可以看到现在加载完后就不会再显示它了。这就是我说的第一种方法，应该也是大家能看到的最常见的做法了，确实也可以达到我们的要求，但是像这种大面积的刷新却仅仅只是为了更新某一个东西，我个人认为有点不值当。现在我们来看另外一种控制方式，这个变量就不要了哈，然后我们在顶部来控出一块区域， 然后我们来创建一个 vlogfire 的 实力对象，它的范型类型设置成 double 就 可以了， 出示值直接设置为零，然后复制一下它，这里我们就不去刷新当前页面了，去改变这个对象的值就可以了，那上面的就不要了。接着我们把下面的代码换一种写法，用 vitellis notebook 组建，把它包装一下，这里就放刚创建的 progress notifier 后面，这里是一个构建组建的回调函数，第一个参数可以忽略，第二个参数就是改变后的进度值，第三个是可以传入的缓存子组建，然后把我们之前的进度条组建放进来，这样也可以达到之前动态进度条的效果。 ok， 我 们来看一下吧， 这就是 flutter 中的局部刷新方式，但是它现在又没有消失了，对吧？为了让它消失的不那么生硬，我们可以采用一个过度动画的效果去隐藏它，可以在这外面去设置一个具有动画过度效果的组建 animetodo pdf， 可以 实现渐变式的隐藏效果。 这里可以设置动画持续的时长，一般给个两百毫秒就可以了，然后把原本的内容放这就可以了，其他的保持不变。 最后把这里的透明度改一下就可以了，只需要根据进度的端点值设置一个透明值即可。比如当进度为零时，把透明度设置为一， 否则就看当前进度是否等于一，等于一表示以加载为安，设置为零即可，否则还是设置为一就行了。这里的逻辑能理解到吧，具体的过渡效果由这个组件去处理，我们只需要设置不同的透明值就好。 ok， 那 我们来看一下效果有没有感觉很丝滑，现在加载完就会自动隐藏了，对吧？如果你觉得过度太快，可以把设置的动画时间改长一些， 除非你有大量的数据需要去更新，否则我不推荐一上来就直接搞页面，记得刷新。这种方式是我比较推荐的一种更新方式。 ok， 最后我们把这里归整一下吧。 对了， value not for 对 象外，使用完成后需要对其进行销毁啊，我们需要重写一下 display 方法，然后在这里面对它进行销毁。 ok， 那 进度条的加载效果我们就搞定了。下面我们来看动态标题的构建， 现在我们的导航栏还什么都没显示，对吧？我们需要在这里的 app 二中去设置一个标题，这里本可以直接在这里去构建组建的，但是为了保持主体结构的简洁性，我们可以把比较复杂的小部件抽取成一个独立的方法，然后我们去创建这样一个方法。 由于我们需要在导航栏中同时显示标题和网址来源，所以这里用 colin 列布局去构建，这样可以同时放置这两个内容。我们先用 text 随便设置一个文字，先把布局给弄出来，下面这个到时候用来展示网站的来源。不过现在这样还缺少一个层次效果， 所以我们需要分别给上下的文字设置一个字体样式，上面的主标题设置一下大小就行， 下面的字体就不用那么大了，然后给它设置一个浅一些的颜色，这样作为副标题才不会那么扎眼。如果你不知道用什么颜色的话，可以借鉴我这里的操作哦，直接用编辑器的识色器去选就好了，现在既能看到也不会那么鲜艳了，对吧？但是作为副标题的话，现在的它还是有点高， 关于这一点，我们可以通过 head 去改变自己的高度，至于这个值是多少，没有一个准，值得需要一点点去调哈，我感觉这样就差不多了，接着我们就可以把它给做成动态的了。这个我们还是用这种更新方式， 但是这里我们需要同时去更新两个内容，所以是无法直接写某个类型的，因此我们可以在上面去定义一个类来存放这部分数据。第一个是网站的标题，第二个是网站的域名，最后一个则是加载的网站 r o 地址，然后给它添加一个构造器。 这里我们需要通过解析地址拿到域名地址，所以可以直接在构造体中去出示化。 这里需要先判断链接地址是否为空。这个工具方法想必已经很常见了哈，几乎每次用到我都会点进来给大家看一下。这里的解析就很简单了，这里为了排除静态 h t m l 以及一些其他的，最好是加一个协议路径的前置判断， 然后直接用 o r 去解析就可以了。这里面就可以拿到这个链接的主机名地址了，否则我们直接使用上一次的结果就可以了。然后我们再加两个辅助方法，一个是用于复制实利的方法，它和构造接收一样的参数就可以了， ok， 像这样就可以了。然后还有一个用于判断对象是否为空的辅助方法，这里只要当 type 和 r 同时为空就可以返回出， 然后就可以把它给运用起来了。把下面换成这个类型，后面抽象一个空对象即可。然后这里我们也用 value-listable builder 去套一下， 然后把之前的内容放进来，接着下面的内容就可以从这个对象中去取值了。不过在这之前我们需要先判断一下这个变量是否有值，如果没有值的话就不用渲染了， 下面也是一样的操作， ok， 这样就可以了。剩下的就是想办法去更新这个对象中的值了。 我们先在初示化的时候去设置一下，因为前面已经初示化过了，所以后续我们都采用复制的方式去更改值哈。但是在这之前我们需要先判断一下之前的对象是否是空的，这个操作能防止在发生重馈时不会有突然闪现的现象， 这里只需要首次去设置一下就可以了。然后把网页地址当做标题给设置到标题上去， 可以看到导航栏这里就展示了一个网址了。 接着我们就只需要去重下一个叫做 intellivox 的 回调函数， 这里的第二个参数就是网页的标题，然后就可以在这里面去改变 not fair 中的 value 了。 但是这里仅当变化的标题不为空时，才需要去更新标题的内容哈，此时设置进去的就是真正的标题了， ok， 暂时先这样我们来看一下效果，因为公众号页面标题默认就是这个，所以没有变化。我们来打开一个二级页面， 可以看到加载完后标题就改变，但是现在这部分还只能改变标题网址来源还无法实时显示，所以我们还需要去设置另一个回调函数。 windows start 会在页面开始加载的时候通知我们，这里会传入当前加载的网页地址， 然后在这里面再去改变导航栏显示的网页来源即可。我们需要先拿到原始的请求地址，可以先打印出来观察一下， 这里可以顺带把 debug 调试标识加一下， 然后就可以在这后面去更新了。不过这里我们只需要去改变地址和标题，会直接沿用之前的设置。 ok， 像这样就可以了。对了，为了方便调试，这里也给加一个打印信息吧， 咱们可以把改变前和当前的标题都打印一下。 ok， 来吧来看一下效果，能看到标题下面就把当前的域名地址显示出来了，这里也有打印变更的日制信息。接着再打开一个二级页面看一下， 需要等它加载完，可以看到导航栏的标题就更新了，我们再看一下其他网站，加载还是挺快的，整体看起来应该是没什么问题的。 ok， 那 这部分我们就搞定了。接着我们来看历史记录的前进后退功能，不知道前面的演示大家注意看没有，我在打开的二级页面下面放了一个底部菜单栏，现在我们就来做这个功能， 这里我们利用 stefo 自带的 bottom navigation bar 来做，然后去构建一个自定义的组建布局，默认情况下它是不用出现的，只有当家在二级页面后才会动态地显示出来，而且我还加了一个从底部滑出来的过渡效果。为了控制它出现的时机，我们依然使用这种方式来控制它。 这个是用来控制底部菜单栏是否出现的，前面的值就直接用布尔值来表示，出示化为 face 就 可以了。下面这个我们用来控制是否可以前进后退。但是这里既要知道何时可以前进，何时可以后退，就需要同时记录两个值，所以我们可以去定义一个 record 类来记录它。 record 是 通过 type 出来创建的， go back 表示是否可以回退， forward 表示是否可以前进。然后这里我们就可以用这个类型去设置了。这里需要设置一个默认值，直接把两个都设置为 false 即可， 然后去把它们应用起来。这里还是用 value lesson 的 不 builder 而组建作为跟容器哈。先把 bottom by altfire 丢进去。 第二个参数是是否显示的不尔值。 这里为了用最简变的方式去实现一个具有过渡效果的组建，我们可以用 animator container 来构建。 这里的过渡时长依旧设置为两百毫秒。然后就是给它动态地设置一个高度，当需要显示的时候设置为需要的高度。为了保持统一，这里的值可以和原本底部菜单来一样高。 这个变量是 flutter 包装自带的，你们直接用就行了。然后咱们先给它设置一个背景颜色，看一下效果， 接着去给这个对象赋一下值。我们只需要在点击二级页面后去检测一下是否可以前进后退即可。很简单，只需要在这个函数中去更新就可以了。是否可以前进后退可以通过 control 而去检测，但是需要注意这个方法它是一步的哈， 所以这里可以用 a v 去等待它执行完成，用 a v 就 必须把外层函数变成 a sync 了。然后是是否可以前进， 这样我们就拿到了这两个可以用来判断的值。接着我们需要先把底部菜单给显示出来， 这里的逻辑其实就很简单了，只需要根据当前是否可以返回去决定是否显示它。接着就可以去设置前进后退的功能按钮了。 后面我想了想，其实下面的 botanet 有 点多余了，它是完全可以直接用上面的 history notify 去控制的。那你知道如何把这个去掉，还能保持同样的效果吗？ ok， 我 们先来看看运行的效果。 首先一级页面是不会展示的，接着我们点开一个二级页面，可以看到底部就划出了一个红色的菜单栏了， 现在是加载一开始就会显示它，如果你想也可以把它改成，加载完成后再去显示它。接着我们继续来构建里面的控制按钮，本来我们是可以直接在这里去写的， 但是这个组建还有一个写法，这里可以多传入一个 child， 这个 child 的 内容会传递给 builder 函数的 child 相当于是起一个缓存作用。这里我们还是用一个 value-listable builder 来布局，这里就用 history not fire 了。 由于底部菜单栏咱们只显示两个操作按钮，所以直接用 raw 来构建就行，主轴方向咱们居中摆放就可以了。 然后内部我们需要放两个可点击的组建，你可以用你自己的或者 sdk 自带的 bug 来做，当然也可以用我之前分享的万能点击组建来做。这里多加一个 flag 是 为了增大可点击的距哈， 然后在这里放一个 icon 图标就可以了。第一个是回退按钮，回退按钮我们可以用左箭头来表示， 然后给它绑定一个点击事件，只需要在点击后去掉用 controller 的 回退即可。对了，这里我们还缺少一个 controller 的 应用，需要在这里去创建一个关于 controller 的 变量， 然后需要在 mvp create 中去完成抽象，就是之前这里写了这样，现在我们来添加这个回调函数， 然后把它复制给我们刚创建的 controller 变量，然后我们就可以使用这个对象了。这里去调用 controller 中的勾 back 回退方法，但是并不是所有时候都可以点击，所以这里还需要设置一下是否起用 dc 不 为出的时候表示禁用点击，所以这里需要当无法回退的时候才需要禁用它，因此这里我们需要取返哈。 接着我们把这个复制一份出来，不过为了美观一些，我们可以先在中间添加一个空白间隔，距离可以随意设置，然后把之前复制的粘贴到下面来，这里改成 forward 是 否可以前进，然后把图标换成箭头， 最后把这里的方法换成前进的方法，然后回到这里来，这里的子组键就可以直接用参数中的 child 就 可以了。 ok， 我 们来看看效果， 可以看到点击二级页面后就会出现底部菜单了，请注意此时的右箭头是智慧的， ok， 我 们来点一下回退看看，可以看到页面就回退回去了，并且也自动切换了按钮的智慧状态。此时的右箭头被点亮，现在我们点击前进试试看按钮的智慧状态，就可以很好地告诉我们当前是否可以操作前进后退。 ok， 这就是历史记录控制按钮的效果了， 那这个功能点咱们就搞定了哈。相比之下，后面的这个功能就简单多了，无非就是你想怎么去触发而已。我这里提供一个很常见的做法，你们可以选择性的参考参考， 我们可以在导航栏的右侧放一个刷新按钮，不过这里我依旧是不推荐直接在主体结构中去写，所以这里我们同样可以把它提出来，做一个单独的方法去实现。 然后我们去创建这样一个方法，只有当主体结构保持足够的简洁时，才能提高代码的可读性。此方式仅作为一种参考，这只是一种编程习惯哈。然后在这里面去添加需要放置的按钮组建，我这里就简单添加一个可点击的图标哈。算了，还是直接复制上面的吧。 d c 波属性就暂时先设置一个固定值，然后在这里去调用 re 函数，接着把下面的图标换成一个刷新图标，最后我们可以在它的右侧添加一点空白。 这个方法暂时先这样， ok， 我 们来看一下，能看到现在还是处于一个禁用状态，这个就需要把这里的禁用给去掉了， 然后我们来点一下，可以看到刷新功能的接入还是挺简单的，但其实还没加载出来之前是不用给刷新这个操作的，所以这里我们可以把禁用给做成动态控制的。 这里的按钮我们用 value listener 去包装一下，这里我们就直接附用之前进度条的 notify 来通知它， 然后再把之前的按钮给放进来，当没加载完之前， disable 一 直保持禁用就可以了，所以只要这里的 progress 小 语音就一直禁用它。 ok， 我 们再来看一下效果， 可以看到没有加载完之前就是置回的，只有加载完后才能触发刷新操作， 这样就可以防止一些无意义的刷新操作。但是很多时候我们可能不止需要这么一个刷新功能，也许还需要添加其他的一些辅助性功能。所以我们可以把这个按钮换成一个扩展入口，然后再点击的时候去打开一个底部操作菜单，当然这只是一种建议哈，如果你有更好的想法，也可以按照你的思路去编辑。 这个页面是在前面分享过的列表选择组件之上扩展的一个子功能，这里面定义了几个属性参数，下面是定义的几个操作按钮里面的回调函数，待会我们会逐一的去实现它。 下面是核心的布局代码，由于这并不是我们本机的重点，所以就不讲怎么实现的了，你如果对这部分代码感兴趣的话，可以去我公众号中查看哈。这里我们只关心这几个功能按钮该如何去实现。之前这里定义了几个属性参数，需要把它们给传进来，这里的值直接从对应的 notify 中取就可以了， 接着还需要存一个最重要的 context 参数，然后指定一下当前是否是静态代码块。为了防止一些无意义的重复判断，我们可以把这几个变量从方法中传进来。传进来的这几个值之前我们都是用过的号， 这里只要不是静态文件以及二二，就表示传进来的是一个静态代码块。然后我们需要把这两个参数传到方法中去，但是现在这里还缺少这两个参数值，那我们就来创建这么两个变量是否是一个。二二， 我们可以通过正则表达式去匹配。我这里是封装的一个静态方法，这里面就是内部的方法实现，这只是一个简单的规则匹配哈，并不是严格意义上的地址规则。另一个应用类文件就直接判断前缀就可以了，基本上都是从 s s 文件中来的， 这样就可以了。然后下面这里我们可以多加一个条件判断，只有当打开了页面是外部地址时，采取更新标题，然后这里的方法就可以把它们给传进去了。 ok， 我 们来重新加载看一下效果，这就是这个菜单页面了。不过这里的图标我们需要先得改一下，把它换成三个小圆点的拓展样式，这样看着就好多了， 是不是看着就像那么回事了。这几个功能按钮我们待会再来实现哈，我们继续来看这个刷新功能，现在可以把它给挪到这里来了，就是这个 call back， 但是我们还得需要一个 v v controller 应用才能去控制它， 然后在构造中去给它完成复制，最后在这边把这个 controller 给它传过去， 像这样就可以了。现在咱们就可以用这个 controller 去搞事情了，这里用它去调用刷新操作就可以了， 最终效果都是一样的。那这个功能我们就过了哈，虽然这个是搞定了，但是与此相关的还有一些小功能，还是一起把它们也过了吧，比如后面的这些，我们也来简单实现一下吧。首先是复制网址的功能，这个功能我们会用到剪切版这个 api， 然后直接把网页地址设置到剪切板中去就可以了，这样就可以了。但是这个过程是一个一步操作，如果你在执行完后想弹出一个提示信息的话，可以使用 await 等待它执行完成，然后可以用类似 tos 的 方式给一个提示就可以了。 ok， 我 们来看一下效果， 这里显示复制成功了，我们把它粘贴出来看一下，然后再换一个其他的网页，再来复制看一下， 同样也是没问题的。接着我们来用外部应用去打开这个网页，自己写的话会有点复杂，所以这个功能我们可以用一个三方组建来完成，我们需要在依赖文件中去引入一个额外的组建，就是这个组建，它可以用来跳转到其他应用。关于这个你可以到仓库中去搜搜看看，就是搜索结果的第一条哈，然后你就点进去大概的了解了解， 这玩意用起来也不是很复杂，可以添加自定义的 skype 配置， ios 以及 android 都支持哈，无非就是配置的地方不同而已。 ok， 也没啥好介绍的，感兴趣的话自己研究去吧，最后别忘了下载依赖哈， 现在就可以把它接入进来了，直接调用 roger 这个静态方法就可以了。这里就把我们当前的网页地址给传进去， 另外这后面还需要告诉他以什么模式去打开这个地址，我们这里指定外部应用就可以了。同样这个操作也是一步的，我们需要去等待他执行完成， 然后对他的执行结果做一个判断，如果确实不支持的话，可以给出一个友好的提示。 那么我们来看一下效果。耶，我点了怎么没反应了。这种情况我们可以检查检查日制， 一般出现这种错误就表示我们需要重新安装一下应用，不过我之前已经重新安装过了。经排查我这里是因为缓存造成的哈，重新启动应用后就可以了，但是中间的过程被我给剪掉了。那我们继续来看最终的跳转效果， 可以看到重启之后就可以正常跳转了。后面这个截图的话，我们调用它提供的一个 a p i 就 能实现。 可以看到这里面提供了大量的 a p i 给我们使用。 takes print 就是 用来截取适口取图片的，同样它依然是一步的需要使用的 wake 去等待它完成。 这里的 image 就是 截取的图片内容了，简化一点处理，这里我就用 dialog 简单展示一下。在一波函数中使用上下文 context 的 话，最好是判断一下当前是否处于挂载状态，不然运行过程中可能会抛出异常哈。 这里放一个可滚动组建，是为了让图片具备上下滚动能力，然后用 image 的 memory 构造就可以展示内存中的图片数据了。另外如果你想保存截取的图片的话，就得自己去处理文件存储了哈。这里可以给滚动组建设置一个回弹效果， 如果没有设置这个效果的话，看着就会很不明显，这就是截取出来的图片，死死地固定在这里。设置了回弹效果之后，我们再来看， 现在就能很明显地看出这张截取的图片了，对吧？接着我们来看获取当前网页的源码功能，这个也很简单， 不过目前我还没想到有什么实际用途，或许可以用作调试这个方法就能获取当前网页的原码。这些 api 基本都是一步的，所以需要按照一步的方式去处理，我还是简单用对话框去看一下就行了哈。 redelux 是 上一期分享的对话框中的内容，这里就可以直接用起来了，内容就是这里获取的 html， 但是为了使其具有代码格式，可以给它设置一点标识， 这是 macdown 的 语法。之前在设计对话框的时候是支持 markdown 格式解析的，但同时还需要再设置一下内容的格式才行， 最后还需要把取消按钮给去掉。另外可以顺带给对话框再设置一个标题，这样看着会协调一点。 ok， 我 们来测试一下效果吧，这就是获取到的网页原码了，只不过这个是压缩过的，看着会有点别扭。 ok， 这个功能就到这里吧。至于这最后一个功能，它就是我们下一个功能点的内容了，也是整个 web 中最重要的一部分应用和网页的通信模块。这一块我们需要用到一个本地网页来演示， 我之前这里就放了一个本地网页，就是这个，不过它现在还加载不进来，因为之前的加载方式并没有兼容这种模式， 之前的这种只能加载网络地址，无法加载静态网页代码。关于这点我们需要在这里做一下处理，这里需要加一个判断，这样就能保证这种方式只会去加载网络资源了。然后用另一个 initial data 的 属性来负责加载静态网页代码， 这里面就可以放静态代码块了。接着我们把 s s 资源加载也加进来吧， initial file 就是 用来加载本地资源的， 像这样就可以同时兼容这三种资源的加载情况了。我们再来试一下，能看到现在就可以加载出来了。 至于这里加载的内容，我是写在这边代码里的，这就是本地网页的代码，很简单的一个页面，如果你不是很懂前端页面的编辑的话，我也一并贴在了公众号上，需要的话可以前去复制，只是要特别注意这几种加载方式哈。接着我们把控制台给清空一下，标签页切换到我们这边来， 然后我们来处理展示的这些交互功能点。首先我们来配置一下 ypu 的 基础设置项，虽然它很多地方都有默认化的配置，但我们还是可以去更改这些设置项哈。 可以看到这里面有很多可以设置的项，其中的 javascript 表示是否启动脚本功能，虽然它默认就是开启的，但是你可以选择是否关闭它。接着有一个很有趣的设置项，它可以设置是否启动滚动回弹效果，默认是关闭的，但是很遗憾这个设置项它可以设置是一个吧，也可以给它设置上， 另外可以把背景给设置为透明，这个设置项是兼容所有平台的哈。接着可以设置一下缓存模式，我这里设置的是缓存优先，或者你也可以完全关闭缓存基础的，我们就暂时先设置这些。但是还有一个用户代理协议，我们需要设置一下， 否则有些网页会拒绝被加载进来。不过这个我们就不在这里去设置了，最好的方式就是我们把它单独提一个方法出来，这样可以更好的动态化处理， 然后我们用这种方式去设置用户代理，同时也可以防止在其他地方乱设置。最后去返回这个 settings， 至于这里要写什么内容，网上随便搜一下一大堆，我们这里需要根据不同的平台去设置不同的请求头， 不过这个我们放在后面的功能点中，再去设置它吧。接着我们来重写网页的日制打印逻辑，现在点击还看不到任何反应，我们只需要去重写一下 uncom message 这个回调函数，就可以接管网页中的打印逻辑了。 这第二个参数就是打印的日制对象，里面有打印的消息内容以及输出的日制级别。我暂时没想到有什么实际功能性上的用途，目前我觉得最大的用处可能就是辅助我们进行代码调试吧，所以这里就简单地打印下对应的日制信息吧。这个地方可以放置打印的日制级别， 后面添加打印日期内容就可以了。 ok， 这样就可以了，我们来操作试一下吧，这是红色的错误日期， 不同的日期级别会打印不同的日期类型，这些就是打印日期的拦截处理了。接着我们来看弹窗类对话框的处理，可以看到这里有好几种类型的拦截处理。首先来看 alert 类型的弹窗吧， 它的第二个参数是触发的请求参数，这里我们可以先加一个日制信息，看一下执行情况，这样可以更方便地观测执行情况。 最后需要返回一个响应对象，如果不知道返回什么的话，就直接点进去看一下，这两个就是它会传过来的参数，而这个就是我们要返回的对象的类型。再点进去还能清楚地知道我们需要构造一个什么样的数据， 这里的 handlebacken 就 要设置为 true 才能生效哈，然后还得需要把函数给变成一补的，这样就可以了。接着我们把打印的日制给调整一下， ok， 我 们来看一下效果。先看一下原本系统的默认弹窗，大概就是长这样子的，我们需要重新进一下页面，先把这里的控制台给清空，然后再来点一下，可以看到现在就不会弹出系统默认的窗口了，那后面就可以做我们自己的逻辑处理了。接着我们把它复制几个下来， 然后把中间的这个给换成确认类的弹窗，后面的返回类型也要一起改一下，但由于确认操作的话会多一些附属参数，所以这里会多一个确认响应的动作设置，里面有确认和取消两种动作类型。另外之前的 handlebackline 还是需要的，接着是输入类的弹窗， 下面返回的对象类型也需要同步更换，这个地方也需要设置一个响应的动作。 ok， 我 们来看一下替换后的效果。 咦，怎么没打印日期呢？这里的错误信息可以先不用管它，具体原因我后面会讲到，对吧？这里还是之前的测试代码，需要把外面包裹的这部分给删掉，后面我们再来加。 ok， 我 们再来看一下， 可以看到现在就有反应了，这里的内容是上面这里设置的参数，这里我们可以把默认的参数值也打印出来看一下， 这就是设置的默认值，现在就可以把它们换成我们自己的弹窗了。我这里还是用上一期分享过的对话框来替代默认的窗体效果哈。普通文字用 show message 去展示就可以了。这里的内容就是上面 request 中的 message 了，如果它没有值的话，可以给一个默认化的处理。 ok， 我 们来看一下效果，现在弹出的就是我们自己的窗口了， 不过这种类型一般是不需要有两个操作按钮的，所以我们可以把取消按钮给屏蔽掉。接着我们再给他设置一个标题，先暂时给他随便填一个内容，然后我们再来看， 这样看起来就要舒服一些了。但是现在的标题还是我们写死的，可以看到这里传过来的消息，我都加了一个前缀。由于这里是无法单独去设置标题的，所以我们可以通过取巧的方式去设置标题，比如说通过字母拆分的方式去传递这个标题。如果说要兼容这种情况的话， 我们需要去添加一个辅助的解析方法，解析后需要返回一个标题和文字内容的对象，同样的也需要去定义一个类型，用来传递着部分数据， 里面只需要保存一个 title 和 message 就 可以了。然后我们在这下面去返回这个对象， 它只需要接收一个原始的内容消息即可。这里要先创建一个用于保存标题的变量，然后需要先去判断一下内容是否为空，只有当内容不为空时，才需要去检测内容中是否包含预定的分割符。 通过英德克去查找 message 中是否包含冒号分隔符，倘若这里包含这个冒号分隔符的话，我们就需要对内容进行拆分，如果规定冒号以前的为标题，那从开始自幅到冒号之前的就是标题，而冒号以后的才是真正的消息内容。我们在拆分的时候需要特别注意下标的边界问题哈。 最后我们把这两个部分组成一个对象进行返回，这个标题如果没有的话，我们可以给一个默认值， 那要是连消息都没有的话，就只能默认给一个空了，然后我们就可以去调用这个方法了， 下面的标题和内容我们就可以从这里面去取了， 下面的我们也按照这个模式去改造一下，不过这个需要展示取消按钮哈。然后我们接着继续往下复制， 这个需要改成收音 port， 这个 content 就 没有了，然后需要把出事值给设置一下，这个值可以直接从 request 中去跑，最后再把消息设置到输入框的占位提示符中去。 ok， 我 们来看一下效果， 可以看到这里就显示了我们解析后的标题了，下面这个是输入类型的弹窗效果，这里输入的内容就是最后会传递给网页端的值。接着我们来看如何把输入的值返回给网页端。可以看到这几个回调函数的返回值是一个一步的抽象对象，但是我们之前的对话框是没有返回值的。 为了兼容到这种情况，我把咱们上一期分享过的对话框进行了一点小小的改造，把这里面也给加上了返回值，并且支持自定义的返回数据格式。这个改动是非常有必要的，如果不这样做，可能无法准确的将数据传递给网页端。这里面相较于之前只做了一些极小的改动，原来这里是返回的 y， 现在需要给它们加一个返回值。因为 so 本身就支持返回数据，所以我们只需要在这里把这个方法给返回回去就可以了。上面的每一个方法都需要添加一个 future 的 返回值哈，如果你不是很关心这部分内容的话，可以适当快进哈。 然后我们随便找一个点进去，接着再进到 base 函数。正确，原来我们只定义了一个 state 类型的 s 范型，为了支持自定义的数据的类型，然后微小了一下下面的 anclos 函数， 接着在上面加了一个 get return value 函数，它只需要由需要返回数据的子类去重写，默认是返回空的。就比如说我们之前的输入对话框，它就需要去重写这个方法，然后去返回输入后的文本值。对了，在子类中同样需要去设置一个 r 范型的占位符哈， 然后我们再回到 base 中来，在这里面先去调用 get return value 方法，这样就可以得到真实的返回值，然后把它交给外部的回调函数去包装它。对了， 在上面还定义了一个用于拦截返回的回调函数，通过它可以把返回值包装成定义的二类类型进行返回。上面是这个回调函数的类型定义， 第一个参数是当前的上下文 context 的 下这个布尔类型的值表示当前是否是确认动作，而最后这个就是不同词组键所会返回的真实数据，最后将这个数据包装成这里的 t 类型进行返回就可以了。 接着就是在构造中对它进行一个抽象，然后我们需要在这里先去尝试调用它，这个是当前的上下文对象，这表示当前是否是确认的动作。这个是推人 value， 就是 上面这里得到了真实的值，如果为空的话就沿用我们原来的返回值，最后在关闭页面的时候把它设置进去。原来这里我们是直接用 confirm 这个值去返回的， 只是说现在把它换成了上面的 result 而已，其他就没什么变化了。你可以是情况对这部分进行调整，这样的话这里的返回值就可以改造一下了，我们直接从这里去返回它， 然后把这部分享用对象给挪到上面来，用我们新添加的 app 回调去包装一下，对了，这里面的静态方法记得都添加这个属性哈， 最后像这样去返回就可以了，至于这上面的范型可设置可不设置。对了，这里的回调函数有三个参数，我给漏掉了两个，需要把它们给补上，然后这里根据 confirm 去返回不同的 icon， 点击确认时返回 i confirm， 反之就返回 cancel。 最后这个地方还需要把输入的值给设置进去，这里的 response 可以 附带传递一个 value 属性，这样就可以把输入的值回传给网页了。 ok， 我 们来看一下改造后的效果，这里我们需要再外加一个 ctrl 的 打印，以便更好地观察它们的返回值。 然后我们把控制台给打开，需要重进一下网页， 可以看到现在还只打印了一个信息，并没有打印外面我们添加的 ctrl。 这里怎么还是 alert 的 标签呢？还是先把它改一下吧， 注意看控制台哈，再注意看这里改动的地方，然后我们点击一下确认按钮，这时候才会触发执行外面的 ctrl 打印，而取消的话返回的就是框。接着我们把上面的也给加上这个打印， 这里是我们还没有改过的哈，也不着急马上改。我们可以来看一下改前后都有些什么区别，可以看到现在几乎是同时打印的两条日制，但明明我们还什么按钮都没点，对吧？所以这里我们也得像刚才一样改造一下， 把它也挪上去，通过按破函数将它包装成一个已不得 response 返回对象， 然后根据 confirm 去返回不同的 response action， 像这样就可以了。对了，我们就顺带着把上面这个也一起给改了吧， 你可以给他也设置一个 action， 但是他的 action 只有唯一的一个 alert 类型，只有一个 confirm 可以 设置，现在我们再来看一下效果，重新进入一下页面， 仔细看，现在就只打印一个了，对吧？外面的 control 还没执行，只有当我们点击按钮之后才会去执行外面的逻辑，点击确认后得到的就是 true 了，这就是我们需要去接管的三个弹窗了。接着我们可以把它们给整理一下，把这些给单独独立成一个方法出去。 再说一遍，这样做是为了保持代码结构的简洁性和可阅读性，或者你也可以继续把它们都堆在一个方法里去写。 这类方法后面的 i think 关键字其实加不加都可以。 对了，这类的返回值要求上面的泛行返回值是可为空的，需要像这样加一个问号，最后把这里的花括号给改成圆括号，像这样就可以了。 下面的也按照这种模式去处理， 然后把复制的内容粘贴下来，这里的参数还是函数模式，需要把它们给补全成一个完整的模式。 ok， 这样咱们就搞定了。接着把它复制一份下来，这个就改成 prompt 的 方法， 返回的数据类型要换一下，同样的请求对象也换一下哈。下面的先给干掉， 然后把这里的代码给挪下去，这里就换成刚才定义的方法名，最后把内容粘贴到这里来，这样上面的主体代码就可以尽量的保持简洁性了。对了，剩下这几个我们也把它们给抽离出去吧，名字可以尽量选择和属性名保持一致， 这个方法它不需要有任何的返回值，然后直接把刚才的内容粘贴下来，接着把参数类型给补全， 然后是之前写的标题处理，这些动作都是重复的，我们按照刚才的手法再来一遍就可以了， ok， 这样就差不多了。至于这个我们就不用去调整了，把它给挪到最后面去就可以了， 这样可以让整体的结构变得更清晰。上面这个函数我们后面还会继续去完善，这里就先这样。接着我们继续去看最后一个很重要的交互通信板块的内容了，这也是本期内容中比较重要的一个知识点。 我们先来看看基本的介绍，它们的通讯方式基本相同，可以使用以下几种方式。第一个是向网页中注入一段脚本，具病，或者说叫处理器吧，叫法不统一， 怎么叫都可以，这是完全支持的一种方式，或者你也可以自己去执行 javascript 脚本，这也是完全支持的。第三种是利用自定义的 scheme 协议来通信，但是这种只能单向通信。最后一个是 a 处的 web message， 不 过这种需要考虑平台的兼容性，由于这种用的很少， 就不专门去介绍它了。先来看 web file 的 通行方式，首先是注入一个处理器，它是通过 controller 像其中添加一个通道， 这个是通道的名字。后面的这个是回调函数，它会把调用的参数从这里传过来，然后就可以做你自己的逻辑处理了。但是这里面有一个巨坑， data 中尤其只有一个 message 可用，并且类型还是矩阵，不支持多类型多参数的传递，只能是矩阵，它会有几个坑或者说是不好的地方。 其中第一个坑就是必须使用固定的模式去调用，这是你设置的通道名，后面 postmessage 是 固定搭配，你添加的任何通道都必须通过这种模式去调用。第二个就是它只支持字母类型的参数，其他类型需要手动转换。 在 javascript 中调用的时候需要通过 json 进行转换，并且在 fatter 中也需要进行 json 反解析操作，不得不说是真的很不方便。这最后一个坑就是它无法给调用者设置返回值，意思就是调用是单向的，如果你需要支持双向通信的话，只能配合 javascript 自己去处理这个逻辑，也就是说在这里你是无法去 return 任何数据的， 因为 mshtsafe 本身的定义就是 white， 所以 这样是无效的。接着我们来看在网页端如何调用，这是你在 javascript 中定义的通道名， 后面只能跟 post message 传递的只能是一个函数串参数，复杂参数就需要自己手动去转换了。比如像这样将参数转换成一个 json 函数， 然后在这里通过 message 再去反解析它。另一个就是执行 javascript 教的了，这部分分为两种，一种是无返回值的调用，就像这样你可以用它去调用 javascript 中存在的函数。另一种是带返回值的调用方式，你可以通过后面的表达式去得到一个从网页端返回的结果，这种模式是异步的，因此你需要使用 await 去等待它执行完成，然后就可以获取到脚本执行后的返回值了。最后一个是自定义协议，它也是通过 controller 去配置它。 web file 是 通过这个函数去定义的， 然后需要构造这样一个对象，其中的这个函数用于拦截请求， request 是 请求对象，这里可以拿到请求地址，那你就可以处理地址的请求协议了。 如果是你自定义的协议，就可以在这里做你自己的逻辑处理了。 feedback 表示阻止页面跳转， now get 表示允许页面继续跳转。接着是 webinubscribe 组件，它也是支持这几种方式的哈。首先是注入处理句柄，这里是通过 i g l script tab 而去注册的，只是函数名略有区别，但和上面的都差不多。另外 这里有几个需要注意的地方， helen name 是 定义在处理器的名字， call back， 用于处理回调的业务逻辑。 rx 是 纯入的参数，它和上面的有个很大的区别。这里的 rx 是 一个动态的数据列表，类型就是纯入的类型，而不是自浮串。另外 还有个很重要的点，它支持设置返回值，你可以给 javascript 调用端返回一个处理后的值，不管你返回的是普通值还是异步，处理的结果最终都会被转换成一个 promise 对 象。相比之下， 它有以下几个优点，第一个是参数是纯入的类型，只不过类型是 dynamic， 支持多参数传递。第二个是支持返回值，基本类型和异步都支持哈，这样就方便多了。在网页端是这样调用的，它也有一个固定的版式，不过这个是绑定到 window 对 象上的， 他在网页中定义了一个与组建同名的对象，然后通过这个 callhander 函数将操作转发到我们在 flatter 中定义的函数中去，后面是他的参数列表，其中第一个参数是我们在 flatter 中定义的函数名，后面是传递过去的参数列表，可以是常见的一些数据类型，也包括 json 对 象。另外 如果你想在加载后就自动触发执行的话，可以像这样希望 windows 对 象中注册一个监听，这个名字是固定的组建库，加载完后会自动触发该事件，然后就会执行内部的回调函数。至于这里面还有些什么隐秘的东西，感兴趣的话 可以去看看他的官网，这是组建的网站地址，然后找到你所使用的版本。这个网站是英文的，看起来可能会有点挠头，这里我们就主要看一下 w y u 这个目录，这下面的东西其实都可以去看一下，这里我们主要看 javascript 这个模块，然后是这个通信模块，这个就是我们所关心的 javascript header。 这一段是在告诉我们要如何去注册一个处理函数，这些内容就是非常核心的要点。下面就是基础的事例代码， 包括返回数据的视力。再往后就是我们前面讲的加载监听了，这个就是注册需要填写了监听器的名字，它很长对吧？不过你也不用特别去记它后面还有一些其他的内容，感兴趣可以自己去看看，我都是根据这些提炼出来的。在这里面就可以直接调用注入进来的处理器了，并且可以直接拿到在 flutter 中返回的数据， 也就是这里设置的这个。对了，记得他们会被包装成一个 promise 的 方式去处理，这是 js 中的一个概念，不懂没关系， 知道就行了。接着就是在 faker 中执行 java script 脚本，这里只有一种模式，有没有返回值都是用这个函数去执行，比如这里去计算一段表达式，前面就能得到这个结果，但试试一步的它。另外也可以像这样直接去调用 js 中定义的函数，函数的返回值都是可以获取到的。 自定义的 skype 处理和上面的很类似，只不过这里是直接通过组建的回调来处理的，里面的逻辑都一样，和上面的没啥区别而已。这里是通过这个 map 去获取当前的请求地址， 对所有的普通请求可以直接放行，也可以针对自定义的 schema 去做处理， al 表示允许放行， console 表示禁止跳转。现在我们就来看这个核心的功能点， 不知道你们还记得之前控制台一直在报的那个错吗？只要点这个按钮就会触发报错。这里的 app 就是 我之前注入进去的一个对象，只不过现在还没有处理，所以一直点就会一直报错， 那我们就来小试一下。先随便注册一个测试函数，这里先用 type 来试一下，后面是处理的回调函数， x 是 传过来的参数列表，这里面我们就先把参数打印出来看一下。 ok， 先就这样吧，但是之前主页的网页代码还得改一下才行。回到我们的网页代码这里来，这里就是调用 flutter 的 一个函数， 里面是之前用过的测试代码，现在先注视掉，把下面的放开，这里保险起见做了一个前置的兼容判断。下面是真正的通信函数，调用了，后面的结果处理就先不要了， 这里我传了一个时间戳过去，如果环境没准备好的话，会把下面这段信息打印出来。 ok， 我 们来看一下效果吧。为了便于观察，咱们先把控制台打印的内容给清空了，可以看到控制台就打印了我们刚加的日制信息，通过断点再详细看一下传递的参数，我们把模式切换到这个选项卡来， 可以看到这确实是一个 number 类型，然后我们来试一下，再往页端去接收它的返回值，还是把它先打印出来，看看是个什么类型。 打印出来的这个就是返回值的类型了，无论有没有返回值以及返回值是什么，它的值始终都是一个 promise 对 象。下面的是传过去的参数哈。然后我们去给它添加一个返回值，先就随便返回一个数字，然后把控制台清空一下， 在 javascript 中的一波也是可以使用和为它，同时它也需要把外面的 function 给标注成 assign 类型的。但是请原谅我由于太长时间没写 javascript 代码了，经查询，这里来信可是要放在最前面的，确实搞忘了， 那我们就顺便来看一下它会出现的错误信息吧。这里的日记中其实已经报错了，就是这个错误信息，当时我一时没想起来，想着一时半会也不好去找解决办法了，所以我干脆就把它给去掉了，然后换了一种原始的写法，这里也没啥好看的，这部分调试过程我就直接省略了哈。 ok， 暂时就这样吧。我们再来看一下运行效果，可以看到现在就能取到返回的结果了，这就是我们前面设置的返回值，现在我们把它换成一个对象试一下，至于建值队就随便写了哈。然后我们来重新运行一下， 现在拿到的就是一个 json 对 象了，那这部分就是向网页中注入处理函数的代码了，接着我们再试试加载完自动执行，这是之前的测试代码，然后把这个给打开，里面原来的代码也给注示了，然后我们直接去调用上面的函数， 这样在网页加载完以后，就会自动执行这个函数了。 可以看到直接就打印了对应的日制信息，但如果我们是在外面直接来执行的话，这样是无法正确执行的。 这里打印了我们设置的上下文环境未准备就绪的提示信息。 web view 是 先加载网页，然后才会把我们配置的内容注入进去，所以 如果你是想自动执行的话，一定要使用这种方式才能正确的执行出式化代码哈。但是吧，不知道你们发现没有，无论是这里这种监听的写法，还是说上面的这种方式，都会显得非常的复杂，固定代码太多了，会给人增加很多的记忆成本，并且非常繁琐。没办法， 这些组建没有提供更便捷的使用方式，那就只能我们自食其力了。我这里把这种方式进行了一个小小的封装，你可以试情况看是否值得去借鉴。这个就是我展示脚本的原文件， 其实我们更期望的是能直接使用，而不是像这样每次去写一大堆，对吧？比如像微信的 api， 它就是用 w x 开头的，像是登录接口，或者请求某些资源等等，这样才像是一个正常的 api， 对 吧？ 这里的名字是我自定义的，下面这部分被简化成了这个函数，这是需要自动执行的匿名函数，在这里面就可以去正常访问 webu 的 上下人了。注册进去的其他函数也可以像这样去调用，里面正常传递参数就可以了，只要是你注册进去的都可以像这样去调用， 这样用起来就简单多了，对吧？更不需要每次都去写这么一大堆。 ok， 那 我们来看要怎么实现这个操作吧。 我这里提前准备了另一个脚本文件，里面的内容也不是很多，首先我要讲一点，要想看懂这个脚本内容的话，需要具备一定的网页开发能力， 肯定也不是所有人都能看懂，所以我们就大概的过一遍哈。这里是定义的一个空的 api 列表，后续我们会通过 flutter 的 代码把它设置进去，保存的就是我们注册的名字，像是这个名字最终设置进去后就是这样的， 不过现在这里我们并不需要去填它，这里的 app 就是 我们最终会向外暴露的 api 入口。 when ready 是 内置在这里的，主要是为了简化下面这种复杂的写法，这就是最基础的一个母字。然后剩下的就是把 api 中的每一个函数给绑定到 app 中去， 然后在内部去调用了一个函数，这个函数就是之前我们看到了很复杂的那部分代码，这样我们就不用再去关心它内部具体要如何工作了。 最后如果未准备就绪的话，返回一个拒绝处理就可以了，相信这部分代码你们应该能看懂的吧。简单点来说，这样一段代码是完全可以实现我们的封装效果的，你只需要像这样把它绑定到 windows 对 象上就可以了。 但是吧，如果你真的就这样直接把这个对象绑定上去的话，就很有可能会遭到别人的恶意篡改，或者像这样偷偷给你删掉也说不定。 这样做很可能会影响到我们程序的一个完整性，所以为此我们需要做一些保护措施。在 javascript 中有很多方式可以做到这一点。我这里使用的是代理的方式，通过创建一个代理对象来隔绝这些不被允许的操作。 这部分主要是处理对象返回的键，你可以在这里面去过滤某些 key， 访问的话正常执行就可以了。但是对于更改我们就直接抛出异常，同样 也不允许去删除我们定义的某个成员，另外也禁止添加新的属性，这样可以尽量的保证我们的对象不会被外部所更改。至于下面这里的话，确实不太好解释，主要目的是为了隐藏方程的内部实现，否则如果你去打印内部成员的话，是会把这里的代码原样不动的打印出来的。 所以为了对外隐藏这些内部函数的真正实现，我们需要去更改属性的描述对象，把它变成类似于 nature function 的 样子。这部分懂网页开发的人可能会明白我在说什么，其他的一两句也解释不清楚。然后就是在定义的时候，优先通过 define property 去定义， 这是要绑定的对象，这是我们定义的名字，然后这里传入我们代理过后的对象。下面是关于这个对象的一些描述配置，你们看着来就好了，如果不支持这种方式的话，就还是用最原始的方式去定义， ok， 这个脚本的代码就只有这么多，这个文件你依然可以去我的公众号上查找。 但是在配置的时候，个人建议最好是不要直接去加载这个文件，原因是读取文件需要时间，即使本地再快，加载文件也会有延迟，所以我们可以把它复制出来，压缩混淆一下。你就随便去找一个支持在线压缩的网站， 比如我们就用这个吧，然后把脚本给粘贴进来，点一下压缩并混淆，这样就得到了一段简化过的代码。但是现在这里压缩后的和我之前测试的代码有点不一样，缺少一个这里定 api 的 数值列表，所以需要把这里给小改一下，先这样占个位，然后再用它去压缩混淆， 再来试一下。 ok， 这样就对了，只要这个地方有个占位，咱们就可以动态地去替换它了。在后面我们去执行这一段脚本， 然后把刚复制的内容粘贴进来，这样相比于加载外部文件的速度是最快的。然后找到刚才标记的这个地方，我们需要把要注册的函数名给动态的设置进去，上面我们还是像这样单个注册的，对吧？试想一下， 如果你要注册很多 api 进去的话，总不能像这样去写一大堆吧？所以我们可以把这个逻辑给单独抽出去，把这些名字通过数组的形式放在这里。最后的代码大概就是这样的，核心的逻辑没有变，然后会被循环的绑定到 app 对 象中去， 其实会直接像这样写，在这里面没有什么区别，只是说这样做局限性太大了，所以可以像我这样去做一个动态的替换。 这类注册的处理器是一个自定义的函数类型，但是这里我们需要重新去定义一个新的类型，做拓展的话，刚才的那个类型就不够用了，类型名可以随便起，返回值可以是任意类型。 第一个参数我们把 ypu 的 控制器给传进去，主要是为了方便内部的访问，然后就是回调函数的参数列表，接着我们拿到这个定义的类型，在这里去定义一个 map 集合，它的 k a 是 处理器的名字，而值就是我们定义的函数类型，我们用它来传递需要注册的 api， 接着在构造中去对它做一个初步化， 然后来到下面这里，这里我们需要先拿到 api 列表中的所有 p， 然后把这些名字用逗号给拼接起来，这样我们就得到了一个关于注册函数的名字列表， 接着我们就把列表中的所有函数注册进去，下面这部分代码就不用单独写了，直接通过 api 集合去循环注册就可以了， 然后把这里的名字给替换成 name。 回调函数，我们可以简写 这里去调用我们重新定义的函数，第一个是 controller 参数，接着是函数的参数列表，这样我们就只需要写这么一次就好了，然后我们再把这个名字设置到下面去，这里需要做一个小小的兼容处理，如果没传的话，把它设置成一个空数组，否则就把它包装成一个数组， 像这样就可以了。对了，上面这里还得多加两个双引号才行，不知道这个操作大家能理解到吗？最后拼接出来大概就是这样的， 这行代码会在每一个名字中间拼上两个双引号作为分隔，但是作为一个数组，这样显然是不完整的，它的首尾元素还没有呢，所以我们需要手动在首尾再拼上一个双引号，这样看着是不是就很熟悉了？最后前后再各加一个方括号，这样不就是一个完整的数组了吗？ 这个补全动作其实就是下面这里的逻辑，一定别忘了这里的空数组哈，最后把这个变量给替换到这里来，就是这一整坨哈， 这样就可以了。最后我们可以把定义的这个 app 名字也给换成动态的，为此我们还需要在这里再定义一个属性，这样就可以通过外部去设置注入的 api 名字， 然后我们复制这个变量，这里我们需要兼容一下外部没有传的情况，如果没有特别设置的话，就设置一个默认的名字，然后我们去把刚刚看到的那个 app 名字给替换，我们往后慢点找哈， 到了这里有一个，然后就是最后这个， ok， 这样就可以了， 那这两个就可以从外面传进来了，但是现在这里我是通过路由跳转的，所以还不太好传，而且这种一般也不会在跳转页面的地方去传，对吧？这部分后面一点我们会进行一个二次封装，现在先不管它， 我们直接在这里来创建一个 mac 集合，试一下效果。这里的类型，选择前面自定义的那个哈，这里我就继续用前面用过的 test， 后面跟的就是我们需要注册到 webview 的 回调函数了，里面就先随便打印的内容看一下， 然后可以再添加几个其他的，这个就改为 tos 形式，然后在这里把 tos 给引入进来， 提醒消息内容的话，用传入参数的第一个就可以了，为了防止无参的情况出现，可以设置一个默认值。 ok， 先就这两个吧，然后复制这个变量， 这里我们需要稍微给处理一下，如果外部没有传入的话，就使用刚才定义的这个算了，还是 把它给换成它。接着我们需要去改动一下网页代码， 这里就先注视掉了哈，下面也给注视掉，然后把这行代码给放开，下面这里一起注视掉。这里调用的这个函数也就是我们之前在这边定义的这个，为了便于观察，咱们先在这里打个断点， 然后来点一下看看。我天，怎么会没有反应呢？这不应该啊，来看一下是不是有哪个环节写的不对呢？这里的函数调用没有问题， 这里的 a p i 调用看起来也没有问题，那既然这里都没有问题的话，根源问题就还是可能会出现在这边这个页面中。哦，我看到了这里的注册函数，没有用最新的变量， ok， 这下就没问题了，那我们再来试一波， 现在断点就进来了，对吧？这就是传过来的参数列表， 我们顺便再来试一下另一个托死的效果，现在还只支持传递一个参数，所以前面这个参数就先不要了。回到页面我们重新点一下， ok， 调用也是没有问题的，通过日制也能很好地观察到， 后面就可以像这样继续给网页注册更多的 api 了。对了，还记得这里的这个 app 对 象名吗？ 现在我们来尝试给它换一个别的名字，比如说微信的 a p i 名字，如果不做任何更改，像这样直接运行的话，这里点击就会报错。可以看到这里提示的就是 app 未定义，我们需要把网页代码中的调用对象给改一下， 现在就和之前是一样的效果了，这就是应用和网页通信的一些内容了。其实到这里所有该讲的都讲了，你应该也可以顺利的用起来了。但是如果你还想搞点花火儿，比如实现一个简单的小程序功能，它们的核心都是 webview， 所以 就得对 webview 进行二次封装。 这块如果感兴趣的话可以接着看哦，那这块咱们就算是过掉了哈。然后我们来刚这最后一块的内容，这些标签页可以全关了。 接着我们在 wechat 目录中创建一个 webu 的 文件，然后我们来仔细观察一下加载的网页， webu 其实只有中间这个区域对吧？导航以及右上角的扩展菜单并不属于 webu， 它只是在这个页面可能会存在而已，所以最好的做法就是将 webu 给独立出来。 这里我本来是想重新规划一下的，后面想了想还是算了，直接把之前页面的代码复制过来吧，再去写一遍，太费时间了。这里的代码全部选中复制过来， 然后把这里的类名给重命名一下，前面创建的这些属性可以保留下来，这几个类型定义需要留在这里，当然下面定义的这个类型也需要哈， 这个 controller 最好是不要直接用，待会儿我们单独给它包装一下。这个是之前的测试代码，现在就不需要了。对了，上面创建的这几个 notifier 还需要做一下销毁处理哈，这个我们晚点再来做。下面的布局需要把 skill 给删掉，留一个 stack 就 可以了， 后面的这一坨直接删掉就可以了，其他的就保持不变。这里的 api 列表需要换回之前的写法，那上面的这个就可以删掉了，这里也换成之前的写法。 然后我们需要把这一部分也给抽取出去，先给这个函数起一个名字，然后在这个方法前面去创建这样一个函数， 最后把刚复制的那一坨放在后面，接着把参数的类型给补全一下。对了，下面的这两部分我们也可以拆分一下，如果你觉得这不需要拆，也可以不拆，这并不是必要的，它们的参数保持一样就可以了。这类就主要是放下面的这部分代码， 然后需要把这里给调整一下，上面的这个条件判断就不需要了。然后我们适当的在这些代码中加一些调试日制，这样可以通过日制就能观察到代码的一个运行情况。 对了，这里的参数我们就不通过微指令来查了，我们换一种其他的设置方式，我们把代码给拉到最底部来，在这里来创建一个我们自己的 ypu 控制器， 然后把刚复制的两行代码放在这里，接着去生成一个抽象构造器，这里可以把模式改成建值对的形式，接着就是把这个控制器给设置到组建中去， 然后在构造中去给它抽象一下，那这里这个它自带的控制器我们就不要了，把它给放到我们自己的 controller 中啊，然后需要把它给设置为私有的， 接着我们去把上面报错的地方给处理一下，对了，我们需要把这几个对象给挪到 controller 中去，这样的话无论是在内部还是外部都可以去使用它们。 这里的注销可以去调用 controller 中的注销，但是在此之前我们需要一个这个 controller 的 应用， 这里出现了一个报错的情况，我想一下要怎么处理才会更好哈，一种是把这里直接改为可为空的， 另一种就是把上面这里改为 b 串它，然后在这里加一个 require 关键字，这样就可以了。这里的销毁工作我们通过 controller 去做，当然这个函数还没有写好哈，现在我们就来创建这个函数，由于只在内部调用，所以定义成私有的就可以了，然后把这几个变量给销毁一下， 最后去调用一下这个方法，下面使用 not file 的 地方加一个前缀就可以了，不过这样貌似有点长，那就把它给简化一下吧，把它提到上面去， 然后把下面换成之前的写法，这样就可以了。对了，这里的网页地址就不从路由中去获取了，我们让它从组件中传进来。 至于这里的这部分我们就不这样写了，在组建中可以把它们给提升成类变量， 然后去写一个抽象函数，这里可以把值前的代码给挪上来，然后小小的调整一下，这里的资源地址改成从组建中去取， 下面就不需要变量的修饰符了，然后把 r 换成 resource 变量， 最后再加一个是否是静态代码块的判断，这样就可以了。然后在初步化的时候去调用一下这个函数，另外在组建更新的时候也需要去调用一下这个函数，但是这里需要检测一下参数是否有变更好， 这样就做好出事化的准备了。这里需要根据情况决定是否需要去设置出事标题，只有当地纸是一个正常的网络地址才去变缸，否则延续之前的配置就可以。 这里的地址换成 resource， 后面的也同步替换一下，这里的变量名太长了，简写一下这个去使用 controller 中的就可以了， 后面的 notifier 也需要给加上 controller 前缀， 至于这里的话需要去改一下在 picker 里面的应用，这个控制器需要换成我们自己的，下面报错的这些可以暂时先放一放，把这边的这些改完了再说。 这里需要给内部的 controller 进行一个复制，下面的 api 需要从 controller 中去取，这里的代码我们还要再处理一下。先把下面这几个给改了， 然后我们把这部分注册的代码也给单独提出去， 最后在 on web compute 中去统一调用它们。 这里的 bridge name 就 不做默认处理了，只能使用传进来的值，这里的这行代码就不要了，然后把这里没写完的日制信息完善一下， 这里需要把 api 的 变量给提上来，然后我们在这里加一个前置判断， 把这里的代码给挪进去，然后在这里面去添加一个调试日期，把后面的日期内容给改一下。 ok， 然后把下面的变量替换一下，这样这部分就搞定了。接着还需要把剩下的几个错处理一下，这里我们可以把用到的几个变量拿出来， 现在需要去访问 controller 中的引用， 这样就可以了。最后还有一个地方再报错，这个也是一样的改法， 这样应该就没有再报错的了。 ok， 这部分没什么要改的了，这几个类型定义可以把它们挪到下面一点去， 然后我们来处理一下进度条的显示问题，你仔细想一下，其实并不是所有情况下都需要显示加载进度的，所以我们可以用一个变量来控制是否显示它 默认可以让它保持显示，这里的话就不能直接这样构建，我们要把 ypu 的 构建给单独提出来，就随便找个位置放吧。 然后我们复制这个函数名， 在这里去调用这个函数， 然后去判断是否需要显示进度条，如果不需要的话，在这直接提前返回就行了，否则还是用下面的 set 层叠布局去构建， 这样就能无差别地适应这两种情况了。最后我们在 controller 中去添加一些可能会用到的功能函数。首先是几个加载资源的方法， loader 用于加载一个网络页面，里面直接把操作转发给原始组建的 controller 去处理就可以了。 这个用来加载静态的代码块， 这个比较短，可以直接用简写模式来写，这个用于加载本地网页文件。 然后是刷新网页的函数， 有了它之后，这边的代码就不会报错了。这个函数用于获取网页的标题内容， 现在的这个主要用于获取网页的原代码， 而这个用于获取在网页中被选中的文字。 这个用于获取网页中的所有 mit 标签，它的返回值是一个 mit tag 列表， 这个用于回退浏览的历史页面，与之相对应的这个就是用于前进浏览的历史页面。既然是无返回的话，那前面的这两个问号就不需要了。 这个是用于清除网页中表单交点的， 这个呢是用于清除表单中填写的数据的， 这个可以用来滚动网页到指定位置。 另外我们还可以设置它是否运用平滑滚动效果。这个代码有点长了，可以把它换成完全体来写。 与之相对的还有另一个滚动函数，它俩最大的区别就是上面是直接滚动到指定位置，而下面则是从当前位置相对滚动多少，它俩就是用来控制滚动条的位置的，如果你想做一键置顶的话，可以用它俩。现在的这个是前面演示过的用来截图的功能函数， 它的返回值是一个字节流的集合哈， 这样这边这几个我们用到的功能就都包含到了。 最后我们再来看一下还有没有什么是没有改到的。 对了，这里还有个用户代理头没设置到，关于这个的话，我们可以在上面去定义一个代理标识的常量，不同平台需要用不同的标识，所以我们可以用 web 来保存。我这里选了两个比较典型的平台， 分别是 android 和 i s。 最后一个信号，表示其他所有平台哈。至于这里面的内容要写些什么我也不知道，不过查一下 ai 就 知道了。我这里就直接复制之前写好的内容了哈。这些你可以去网上找，或者也可以直接从我的公众号中复制进来。这前面其实还有一截没有写，我给统一的放到下面去了， 然后我们在下面去应用它。首先是固定的谋字打前置，目前最新的应该是五点零。最后可以在末尾拼上我们应用的来源和版本。中间的部分就是不同平台的特有标识，我们可以根据各自的平台去取， 这里需要通过 freeform 类去查询当前的所在平台，它返回的是一个对应平台的字串，这里面可以看到具体的值是什么， 所以这里我们可以直接用它去取，如果没取到的话就用默认的星号去取，最后再把网页的缩放给禁用了， ok， 这样就可以了。 对了，现在组建中是没有导航栏的，所以这两部分就可以不要了，里面的逻辑由外部去处理，这里面就主要负责创建 web view 就 可以了。 来吧，我们可以把它给用起来了，像是之前的这些就可以不要了，里面的属性也不要了，这些都可以删了，下面的这些也都统统不要。 图层和注销这两个函数暂时也用不上，这部分也不需要了，下面的这部分换成我们封装的 web view 后面，这里需要创建一个我们自己的控制器，所以原来的这个就不要了， 失策了。结果这里还是要用到抽象函数，需要用它来抽象控制器， 这里就改用 controller 中提供的 notifier 就 可以了，这样就不用大改了，后面也差不多像这样去改， 下面的这些是 webview 中的就都不要了， 这样在功能上就还和之前是一样的。这个导航栏需要保留在这里，然后中间使用封装的 webview 组件， 其他再看一下有什么需要调整的。 ok， 好 像也没啥了。对了，这里我们需要指定一个注册的 api， 名字就随便给一个吧。 后面是需要注册进去的 api， 你 可以直接在这里写。其实我更建议的是把它给单独抽离出去。在与它同级的目录中创建一个 api 的 文件，然后使用父子文件的方式去组合它们。在这里使用 part 去列出子文件， 然后这边用 part of 去指明主体文件，这样在打包后还是同一个文件，但是会更方便管理一些。然后在这边去创建我们的 api 注册函数， 然后这里用它就可以了。但是这怎么再报错呢？我去，刚这里的值类型写错了，这里的名字你可以随意定义。 ok， 我 们来跑一下吧。 我们先来看一下基础的功能有没有什么问题。 ok， 这部分没什么问题。接着我们来看一下正常的网页， 再看看二级页面的加载有没有什么问题。加载开始后，底部也会出现控制菜单栏，这里去返回一下上一个页面，能看到前进后退也是没有问题的。接着我们来看一下拓展菜单的功能， 看起来是都没有问题的，然后我们继续来看本地页面。 ok， 这几个弹窗也没有问题。最后来看一下这个函数调用对了，这里的 api 名字还没匹配上，还需要去改一下网页代码中的对象名，把这个名字换一下就好了。 然后我们再来重新进入一下页面，现在又提示 pos 不是 一个函数了。这个我记得是注册了的吧，怎么会不是一个函数呢？尴尬了。好像之前这边还没添加任何函数，这里我就不去挨个敲了哈，直接把之前我写好的复制过来吧， 然后导入一下依赖包， 这两个是之前测试过的函数，下面的 tos 二是我完善过后的一个版本，在下面就是模拟的一些其他功能函数，后面要怎么玩就看你们自己的了。我们再来重新跑一下， 这个是注册 a p i 的 信息，下面打印的是注册了哪些功能函数。通过这些日制信息，我们能发现一些可能会存在的问题，现在这个功能就没有问题了。最后我们再来看一下调用网页的功能，这个好像没生效呢，没关系，我们来看一下， 我依稀记得这个功能是不是还没有写啊？是了，果然还没有写。在写之前，我们需要先在自定义的控制器中再添加一个辅助函数，这就直接把上面的复制一份下来，这个主要是用来执行动态 javascript 脚本的，这个只需要一个字母类型的参数就可以了。 与之相对的还有一个用来注入 css 样式的功能函数，它可以用来动态注入一些页面样式。对了，下面这里的返回指示 dynamic， 然后把上面的函数名改一下，这样基本上就可以了。接着我们在这边来调用一下刚才加的这个函数， 这里我们去调用网页中写好的函数，然后第一个要设置一个描述文字， 第二个我们传一个时间戳过去， 我们再来看一下， ok， 可以 看到内容就写入到网页中去了，这就是执行网页代码的一个效果。 我们最后再试一下自动执行的功能，这里的名字要换一下哈， 这里可以看到我们当前上下文环境中注入的函数列表， 然后我们试一下调用函数， 可以看到这样出使化后就会自动执行这段代码了。好的，那么本期的视频到这就差不多了，感谢您的观看，咱们下期见。

微信小程序 scroll view 组件的基本使用，今天我们来了解一下 scroll view 组件的基本使用，那比如说我们希望使用这个组件来实现如图这样的一个纵向滚动的效果。我们先来分析一下，比如说这个黑框是一个有高度的容器， 然后里面有三个紫元素，分别是 abc， 然后咱们通过鼠标或者自己的小手在这里往上拖的话，这里面的三个元素会进行上下滚动，那么这个效果要实现的话，其实非常的简单，咱们总共有三个步骤， 那第一步呢，我们需要将最外层的容器设置成 show view 这个组件，然后第二步咱们需要给这个组件加一个属性，是 screw y， 代表说我们允许在纵向上进行滚动。注意啊， 如果允许纵向滚动的话，需要加一个 scroll y 属性，如果是横向滚动，那就是 scroll x， 同时为了让它能够实现纵向滚动的效果，还必须给这个 scroll view 组件加上一个固定的高度，那于是咱们通过这个样式的形式 给他加了一个固定的高度，是一百五十个像素，那为了让他更加的清晰，咱们可以加一个边框线，同时也给他限制了一下宽度。 清楚地了解这个实现的过程之后，那接下来咱们打开微信开发者工具，咱们可以直接基于上个视频的 flags 横向布局效果来进行修改。 上一个视频咱们外面包裹性质的容器是一个普通的 view， 里面是没有办法实现这种滚动效果的，那接下来咱们可以把包裹性质的容器 从 view 替换成 shrew view， 同时也修改一下结束标签，同时咱们为了开启它纵向滚动的效果，还要给添加一个属性 scroll y， 代表说我们允许在纵向上进行滚动， 那么这个时候大家发现这个效果好像并没有出现，那接下来咱们还少一些样式，因为默认情况下你如果这么写的话是没有办法进行滚动的，咱们还需要给外层包裹性的容器加一个强制性的高度才可以。咱们打开自己的样式表， 咱们就不再进行 flex 布局了。先清空给他添加一个边框线，咱们先看一下外面的容器宽度和高度分别是多少。咱们保存可以看到外面这个包裹性容器，他的高度就是里面三个盒子的总高度，他的 宽度是占满整个横向的区域，那接下来咱们可以限制它的宽度，宽度咱们给它设置一百 p x， 然后保存。这个时候大家可以发现这个黑色的边框线就变得只有一百个像素了，但是这个还是没有滚动的效果， 咱们之前说过还需要加一个限定的高度才能实现纵向的滚动。来咱们加一个高度一百五十 px， 咱们保存看一下效果，我鼠标放上去 网上拖动，可以发现咱们外面这个容器就能够让里面的内容进行滚动了。这里注意之前咱们介绍过，在一些电商的移动端项目里面， 是不是经常可以见到一个左侧的滚动列表效果，其实咱们就可以基于 shrow view 这个组件来进行实现，那么实现的过程总共有三步， 第一步，设置外层包裹性容器为 shiro view。 第二步，如果是纵向滚动的话，要加一个属性 shiro y， 如果是横向滚动，就是加一个属性 scroll x。 第三步，通过样式的形式添加一个强制性的宽度或高度，在固定的宽度中，如果里面的内容超出了咱们设置的区域了，就会出现滚动效果。记得点赞、关注、收藏，咱们下期见！

家人们，二零二六最新 webview 沉浸版来了，全程无广，画质超清，手机、平板电视全都能用，附带电视安装教程，小白秒会。先点视频右下角分享， 然后点击分享链接，打开这个蓝色的小鸟没有的宝字，先去下载，打开会弹出资源包，没弹的话去首页搜符号资源屋，再打开热门软件资源包进去后点右下角保存就搞定了。

小程序怎么做？像这样的一个线上的一个小程序怎么做？而我们可以做小程序的首页分类页面 进行分类的切换，商品的线上的一个展示，我们会今天会完整的再教大家制作一个可以上线的线上小程序。我们百度信城网络平台来到官网之后我们注册账号登录，登录之后我们来到管理后台，我们根据我们要做的小程序类型来进行选择。 如果我们做课程类，教部管理，教培类小程序的话，我们要用教育，如果我们是有实体门店做门店管理，会员管理，我们用门店。如果我们是做线上的一个商城电商类的，我们选择商城，我们选择以后 点击来到这边，我们点击去制作页面，就来到了小程序制作页面，我们就可以使用可式化的编辑器 页面，然后代替我们携带吗？然后来制作好这样的一个小程序页面，那么这里面的模块可以自由调整，我们调整页面的 显示的一个效果，你像这边是我们展示店铺的轮播图，下面我们可以放产品的分类，下面的我们可以放一个秒杀活动的一个广告的一个素材， 在下面就可以放一些主推的一些产品或者分类，下面就可以放产品分类，我们在产品分类页面我们可以看一下，我们采用三级导航的形式来做分类， 你像这边是我们一级导航，一级导航里面，然后分二级导航，二级导航里面我们又分到三级导航里面，下面每一个分类下面都有对应的产品的一个展示，整个制作 非常简单，像这样的一个页面，我们有两种制作方式，我们可以直接选择模板，这里面有大量的模板，我们首先要确定我们的行业以及我们做的小程序类型，然后我们在 行业里面我们选择我们需要的行业的小程序。你像这边有几十种行业模板，我们可以任意选择，比如像服装 这边，像五金、建材等等之类的，包括像农产品，我们选择好行业以后，选择行业里面的积分的选项，选择我们需要的模板，然后点击之后他就会一键自动生成一个小程序页面。当然生成好的小程序页面我们还没办法直接使用， 我们需要对里面的内容做修改，那你比如说我们头部顶部，也就是小程序的头部，我们可以设置页面的标题，然后包着 包括设置搜索框以及搜索规则。注意我们小程序里面的搜索规则是搜索我们整个小程序内容页面里面所有 内容的一个搜索，我们可以配置搜索规则，包括去设置搜索词，你像精精确搜索、模糊搜索等等之类的。然后我们在产品分类里面可以直接导入我们后台添加好的产品分类，后台产品分类在两边添加，我们点击商城 选择产品，在产品里面我们选择产品的一个分类，在这边就可以添加分类，添加分类的时候我们注意我们要选择一，我们要选择我们的分类，比如说我们直接添加一级分类， 在一级分类下面，比如说我们继续添加，就可以选择上级分类，以后就可以添加二级分类以及三级分类，添加好以后我们直接在小程序的前端页面就可以调用，你比如我们 在这边我们就可以调用选择我们设置好的一级分类，一级分类选择好以后，他二级分类跟三级分类，你像一级、二级、三级分类，他就会自动同步过来，然后在分类页面也是同理。 那这个分类页面这个模块是怎么来呢？我们先找到我们的编辑器，你看根据鼠标指示我们找到分编辑器，编辑器里面选择产品分类，这边可以调整产品分类的一个样式， 你像这样就是一个横版的分类，这个就是竖版的。好，我们先选择一个分类看一下效果，你看这是横版的，这也是横版的，像这个就是竖版的，我们选择我们的分类，你看这就是竖版的。 有两种显示显示，我们可以自由去选择我们的分类以及显示效果内。添加完成以后我们就可以在配置我们的小程序的就是用户界面，用户界面这里面第一个就是我们这边的一个 头部，我们可以设置背景图片等等之类的，就是我们一个订单管理的一个这一块显示的一个编辑跟设置，下面就是 这边的一个编辑跟设置，我们可以调整他的显示样式以及不需要的，我们就可以给他隐藏掉， 我们可以进行隐藏，我们也可以在这边加入我们的，就比如说我们加入我们的推广中心，加入轮播图，可以做一些广告的一个样式的展示在这边，哎，我们就可以加入轮播图。好，我们设置好以后我们点击保存，保存好以后我们来到管理，就是小程序的 管理，后台就是后台这一块我们分为几大模块，第一个就是商城的日常的一个管理，像产品的添加，产品分类的添加，类型的添加等等之类的。第二个大块就是 订单的管理，我们处理我们日常小程序上面的订单信息。第三个就是会员的管理，在营销里面我们可以把它作为我们小程序日日常经营时 进行，过程中需要用两个工具，里面呢有非常丰富的营销功能来帮助我们运营好我们的小程序。在智能体里面，我们可以给小程序接入 ar 功能，以后的话小程序就可以实现 ar 能力。比如说 用户在小程序上与 ar 进行聊天对话，然后 ar 学习商城里面所有产品的知识以后，然后主动向客户推荐一些小程序上面的一些产品或者内容。好整体单件制作非常简单，大家自己可以去尝试单件制作一下。

下面咱们来继续来讲这个微信小游戏的开发。呃，上面两节呢，咱们把微信小游戏的第一节关于微信小程序的注册与登录， 呃，还有这个微信小游戏的制作工具都已经讲过了。那今天咱们来看一下这个微信小球小游戏里面的一个比较重要的模块，就是这个 spirit 啊， 其实精灵呢，是在咱们每个游戏里面，也就说咱们游戏世界里面的任何一个元素，咱们都可以称之为精灵。这个精灵的说法呢，其实它来自于国外的一个啊，国外的一些游戏的这个原声的概念 啊，它国外的说它叫 spirit， 就是 精灵嘛，精灵来来描述这些游戏中的元素。 呃，在微信小游戏这里面的精灵呢，其实它主要是包含，呃，这么四块，一个是背景啊，另外一个是图片，还有数字和文字。 嗯，咱们咱们来结合一个实际例子来看一下吧，因为大家都学过这个，呃，大家可能之前在小时候都玩过这个超级玛丽，对不对？超级玛丽的话，咱们把这个上一档，咱们把这个图呢放大一下啊， 在这个，其实在这个超级玛丽的这个游戏，呃，在里面其实包含的就是，呃这个游戏世界里面的各种这个元素。 大家看到其实马里奥这个游戏角色啊，其实他就是一个精灵，然后像这个背景啊，这背景里面有，有时候他是有一个蓝色的蓝天背景啊，还有绿地、草地，然后还有油管，这个呢，都属于他的。呃，游戏里面的精灵， 还有这个，你像这个游戏里面的每一个这个砖块啊，就是他在走路的时候和跳跃的时候，他这个砖块还有一些小方块小盒子啊，马里奥当撞击这个盒子的时候，他会弹出一些，比如说一个蘑菇，或者是一些这个， 嗯，一些增强他的体能的一些物品，这些呢也统之统称呢都是这个精灵。 你像这里面的蘑菇，还有这个怪兽啊，还有这个乌龟，当马里奥可能触碰到这个乌龟或者是怪兽的时候，他就被给吃掉了，就是死亡了。这个呢也是游戏里面的这个精灵。 还有呢在马里奥里面呢，还有这个这个食人花啊，食人花这个也是他的一个精灵。 另外呢这个是相当于游戏元素这个主主角的一些精灵，这是相当其实每个精灵的对应的其实就是一个，呃，一个像素的一个图片啊，像素的图片，然后咱们游戏控制的是这个精灵这个图片的移动，然后逻辑 里面呢还有这个数字，呃，你像这个每一关，每一关他进行到那个关卡啊，比如第一关、第二关，然后还有这个在这个 呃玩的时候当前这个时间，也说系统时间，他是哪月哪天的时间，这个呢都是也是统称是这个精灵。 还有就是文字，一些文字的描述，比如说当马里奥然后那个赢的时候，他会有一个提示，呃通关那么一个提示，还有一些比如说这个呃友好的一些提示，比如说这个箭头快进啊，这个 等等啊，这些都属于他的提示。这个呢就是一些文字啊，这个这个在这个呃精灵呢主要是包含这四部分啊，这四部分， 嗯，咱们再来啊，这里我把这个每个美化呢，简单的给描述了一下，其实背景呢是一个特殊的精灵，他能让这个精灵更加的动感啊，是让这个游戏更有层次感。其实背景其实 可以理解成咱们游戏中的一个关卡，通过背景的移动，然后让这个呃游戏主角产生不断运动的错觉，这是一种常用的做法。呃是什么意思呢？比如说咱们在做这个 呃飞机大战的时候，对不对？飞机大战的时候，咱们打开一个， 其实它的背景呢，可能就是这个呃浅灰色的这个背景，然后让背景怎么去那个动态显示出来呢？ 然后其实就是把这个背景呢又做了一个那个循环的这个上下移动啊，上下移动这个不好看，咱们看那个之前做的这个啊，这个 当你选中这个背景的时候，其实它是循环播放的啊，这个背景也就说它会就有一个这个播放效果，播放效果这个是背景， 然后数字呢，其实也是一种特殊的精灵，然后它是由零到九十个数字，还有这个一个中括号还有个点啊，然后来组成的这么一个整体 啊，在使用的时候呢，一般数字呢就是可以作为体呃计数用的啊，还有这个提示时间啊等等啊，都是通过数字来去做的。还有这个 呃文字，文字也是一个比较特殊的这个精灵，然后他呃在这个文字上面可以就是显示出文字的对齐的方式，呃字体的大小啊，然后行高颜色 啊，通过外观啊这些都可以控制来这些文字的一个显示。比如像这个 游戏在结束之前，比如说 game over， 啊啊 game over， 它就会有这么一个，呃，这，呃就是游戏结束了，然后会有个 game over 提示，这个呢它都有长的，长宽还有颜色都是可以控制的。啊， 这个呢？是这个三种，在这个元素里面三种比较特殊的啊，这这几个精灵。好，这个这一小节就到，这这小节主要介绍一下这个游戏中的这个精灵。

看过来的朋友们，最近火爆全网的这个 vivo 电 c a p p 还有很多朋友不知道怎么去下载它，今天我就来出一个教程来教教大家，苹果安卓平板都是可以下载的，现在跟着我一起操作，简单三步教会你下载。首先点击本视频右下角的分享，然后分享连接，再打开手机自带的应用商店，搜索这个下载，打开它， 打开之后点击允许粘贴，然后它会弹出一个资源包，如果没有弹出来，再搜索来搜索北海宝库，点击立即查看，点进去追剧神器，点进去取消全选，然后找到 vivi， 有 电视 app 保存去下载就可以了。

家人们，二零二六最新 web view 神器，免费看四 k 电视全程无广，手机平板电视全适配，附带电视配置教程。小白秒会第一步，先点视频右下角分享，再点击分享链接，然后打开这个蓝色的 app， 没有的话就去下一个， 打开一般会弹出一个资源包，没弹的话去首页搜千千爱分享就行。最后打开这个文件包，点右下角保存就搞定了。

氪金没必要白嫖，我教你。像这个 y o u 电视手机版的，还有好多兄弟们不知道怎么安装，今天我来出一个教程，三步就搞定。接下来跟着我的步骤，首先点我视频右下角的箭头分享，复制之后呢，打开应用商店， 找到这个，进来后啊会自动弹个框，或者在这里输入杰哥分享，然后打开这个文件夹， 取消全选，我们找到这个方 o e o 保存安装就可以了。

呃，大家好，今天呢我继续给大家呃开设一个新的课程，这个课程呢就是关于这个微信小游戏开发的。 呃，最近的微信小游戏开发还是比较火的，然后我打算呃用一些课程呢，然后把微信小游戏开发这一块 的啊，我自己的就结合自己的开发中学习到的一些知识，以及一些练手的项目，然后呃整理了这么一个视频给大家。 呃简单的讲解一下微信小程序开发，因为我也是呃第一次呢来接触微信小程序开发，一边学习一边来去整理这个相关的一些开发教材和文档 啊，有什么讲的不太好的地方，希望大家多多包涵。那下面废话不多说，我就开始今天的这个第一节内容，咱们先来简单的了解一下什么是微信小程序开发。 呃，是这样的，因为我打算整理一个开发者笔记，然后呢，呃，我因为微信开发者官方呢有详细的这个开发文档，呃，我打算也是依据这个文档整理一个简单的一个相当于一个笔记，把里面呃能 呃比较重要的内容给大家，然后摘出来，然后整理出这么一个 ppt 给大家讲一下。嗯，也带着大家来一起来学习一下这个他的官方的开发文档。呃，在这个先，呃，在这个讲第一节之前呢，先给大家简单再回顾一下，因为之前 啊我用这个微信开发者工具呢，然后做了一个这个简单的小 demo 给大家简单演示一下啊，就是一个飞机的，相当于这个飞机大战的那么一个小的啊， 一个小游戏，这个小游戏是按照它官方模板来使用的啊，然后先给大家看看做出来的效果， 这个呢其实就是用官方的这个微信小游戏工具来去制作的啊，这个呢他这个工具呢？所以今天第一节呢，先给大家介绍一下这个工具， 呃，这个微信小游戏开发者工具，这我把这一块粘过来啊，给大家，呃，就是为了方便咱们开发者去开发微信小游戏。微信小游戏， 呃微信官方呢推出了一个，呃这个微信格式化开发工具啊，他的这是微信官方推出的，就相当于腾讯 推出了，推出了这个呃这个小小游戏的格式化开发工具。小游戏的格式化开发工具，其实它就是一个，呃，类似于这个之前咱们用过的这个可能用过的这个 coco 啊，这些搜索引，呃这些引擎 啊，游戏引擎，然后他去通过他是一一款呢啊 web 应用啊， web 应用，他可以，嗯来开发这个微信小游戏，嗯他比较好的地方呢，就是他可以可量化啊操作方式来编辑游戏的场景， 可以使用这个积木作为脚本设计经营的这种行为。这是呃他官方推出来这个工具的一个 主要的一个用处，因为他对于微信小白来说就是不懂开发的一些人员来说，他还是非常友好的，他就基本上都是这个，这个就是他的微信小游戏制作工具啊。这里面 这块后边我会给大家讲这个每一个区域他是做什么用的，相当于通过这种呃拖拉拽的方式啊，就可以就是实现 这个，呃游戏的脚本的编程啊，脚本的编程它是一种积木的方式啊，积木的方式，这个是就是来了解一下啊，这个刚才这个小小游戏呢，也是啊，基于这个来做的啊。这个 我这个视频的话都知道，你看这里面呢，这之前做按的模板来做出来的，这个是微信小程序的这个官方的制作工具的一个简单的一个介绍，简单的一个介绍，那咱们，嗯，那个因为 这个我也可以，这个主要是为了就是减小咱们开发的成本，提高这个开发的效率啊。开发的效率这块因为我是用其他的模板，我把它给现在去了啊， 呃，他对呢一些游戏呃就可以大大提高这，哎， 有点卡呀。 咱们在使用这个微信小游戏开发工具的时候呢，它官方推荐的是使用这个 chrome 浏览器或者最新的 qq 浏览器啊，然后来去 登录这，然后第一步呢就是它这里面呢需要就是如果你使用这个工具的话啊，然后如果创建制作这个工具的话，其实它就是一个 id 嘛，我理解它就是一个 id， 相当于可以就是理解成一个，我给他加个备注， 可以理解成就软件开发的工具，比如说像这个 java 的 这个什么 ide 啊， eclipse 这类的这类的，它其实其实就是一个 ide 啊，然后来这个制作游戏的一个搜索引擎， 那怎么去使用这个？呃，使用这个，呃，微信格式化的制作工具的话，呃，第一步呢就是需要先去这个注册登录，注册登录我给他，呃，这块我给他改一下吧。对，等一下， 为了方便我把这个后边这个东西都给它删掉啊，没什么用啊，我把这个文档重新整理一下， 导读，留一截啊，比如这是第一截啊，第二截，行，将这给它删掉，留几张留几张，然后把后边也给它干掉。 这个第一节呢，就是咱们先去要去，呃，这个先给它删掉，这个就没用了， 咱们要先要去注册登录啊，给它加上一个 注册登录，因为这个呢，它是一个在线的格式化工具，所以需要去注册登录。 注册登录的时候呢其实，嗯，它目前呢，它只是支持这个扫码登录啊，目前只是扫码登录， 呃，它可以通过这个微信个人个人的这个微信，然后登录进来，因为这里面呢我已经登过了。然后登录之后呢，呃，它就直接登录到它，你访问这个 game 点 workin qq 这个地址啊， 然后这是他的官方地址， 这是他的官方地址，然后直接通过这个你个人的这个账号，呃，这个微信码，然后直接登录就行了，这个是 他的注注册和登录的这个方式， 这个呢就是访问加上注设 访问这个，然后直接登录就行了，然后具体的方式就登录完成之后就可以到这了。到这之后，然后第二步呢，就是咱们可以就是新建这个， 呃，可以就是通过这个项目，呃事项啊，项目这个项目，然后创建这个游戏项目来，呃，进行这个微信小游戏的开发啊，微信小游戏的开发 登录完成第二步就是可以 可以创建项目了，创建这个游戏项目， 创建游戏项目的时候呢，是在首页里面点击这个体验这个工具，然后就会进入到咱们这个开发者这个游戏列表，然后点击上面这个新建小游戏这个按钮，输入这个游戏名称， 呃，就可以创建一个空白的这个项目，就是给大家演示一下，登录进来之后可以点击这个新建啊，新建之后呢，它会弹出一个让你创建一个项目的类型啊，这里面它有几个简单的 demo， 呃，就是比如像这个弹屏射击类的，还有第一人称射击类的，答题类的，平台跳跃类的，然后如果你想参照它的，你就可以点点选中它，如果你想建一个空项目啊，就直接点一个空项目就行了。 这一块给它进行一个名称，可以是中文名，也可以是英文名，你可以根据自己的需求吧，然后就去命名定义就行了。在创建的时候注意它这有一个竖屏和横屏，这块就是有在小修小游戏屏幕展示的时候， 你像这个飞行大战，飞机大战之类的就是竖屏的，还有一些横屏的，比如说魂斗罗啊，还是说是超级玛丽，这里是横屏的，你可以去把它这个屏幕的分辨率啊或者大小进行设置，然后直接点击创建 这一块呢，就他会默认的弹到这个微信小游戏制作工具这个出售款界面里面，这就是创建成功了啊，创建成功了， 所以这一块呢就是具体的创建方式，就是这么简单啊，就是通过这个官方呢，也有一个例子，这 可以给它粘的，嗯，缩小一下， 这个就是创建的这个方式啊，创建这个方式， 这个呢就是注册或登录并创建一个具体的这个游戏项目啊。 那下一节呢，咱们来去认识一下这个具体的这个工具的这个详细的，呃，怎么去使用？