微信如何与小程序的视频同时运行

百度知道

微信小程序多个视频组件同时播放

青柠姑娘17

TA获得超过3005个赞

关注

成为第581位粉丝

首先说一下我的应用场景, 在小程序中会有多个页面存在视频组件的情况, 为了防止视频播放时多个视频组件同时播放的情况,现记录一下方案:

一 可以在需要视频播放的地方弄一个视频播放的按钮, 当视频播放的时候再初始化视频组件, 保证整个应用内只有一个视频组件(视频组件的位置需要计算), 整个方法只是理论下的情况;

二 在appjs中 设置两个对象, currentVideoId(播放视频组件的id)和videoContext(当前播放视频的对象, 通过wxcreateVideoContext方法获得), 在页面的js中控制, 保证video组件绑定play方法:

<video src="url" bindplay="play"></video>

在play方法中实现即可:

var id = ecurrentTargetid;

if (id != null) {

if (appcurrentVideoId != id) {

if (appvideoContext != null) {

appvideoContextstop();

consolewarn("暂停");

}

appcurrentVideoId = id;

appvideoContext = wxcreateVideoContext(id);

}

}

因为currentVideoId 和videoContext是唯一的对象, 方法中播放监听事件会暂停之前的播放, 然后再赋值, 等下次video播放监听进来的时候, 会进行判断

三 包含富文本组件的视频组件同时播放的情况

依据上面的例子, 当自定义富文本组件中包含多个video组件时也用上面的方法会产生错误, 虽然log会显示将执行视频暂停或者停止播放, 但是没有效果, 查看 视频api , 提示

根据api显示, id为video组件的id, 还有一个"Object this", 但是依据上面的api使用, 直接用id确实可以获取video对象, 但是api解释中提示, "在自定义组件下，当前组件实例的this，以 *** 作组件内 video组件", 在自定义组件中, 要加this, 所以总结: 在上面api使用中, 如果video在pages页面中, wxcreateVideoContext参数只写id没有问题, 但是当video在自定义组件中, 要必须加this, 才能正确返回VideoContext对象;

自己是可以制作支付宝小程序的，但前提是要懂得编程开发，这个对开发能力要求很高，而且不但需要前期开发，还需要后期维护，所以小程序的开发不是一个人所能开发的了的，所以对于商家或者中小企业来说，一般都是选择小程序开发公司进行开发，这样可以省去很多的精力，专心用于小程序运营方面。

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件，比如button view input image等，有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件：

新建一个components目录，在里边创建自定义组件

组件的组成：

使用组件：

一个简单的示例：

创建comp，代表页面；创建components/xxxx，代表组件。

创建组件：

使用组件：

注意：json文件中不能写注释啥的。这里的注释是为了解释清楚，在开发中不能写注释。

组件的注意事项：

组件的样式细节：

如何控制页面和组件的样式相互影响：

组件和页面相互通信

thistriggerEvent(事件名，参数对象，{})，最后是options，额外的一些选项

预留一个设备，以有利于对以后进行扩展。

好处：

例子：

在移动端，导航栏，nav-bar，分为左中右三部分。不把这三部分的内容写死。就用插槽，为了封装性更好。

单个插槽的使用很简单：

多个插槽的使用稍微复杂，要设置几个东西：

component构造器中可以写哪些东西，如下

pagejs

一：components/adDialogjs

二：components/adDialogwxml

三：components/adDialogjson

四：components/adDialogwxss

组件使用

解释 ：

在组件的视图模板中可以通过 slot 声明一个插槽的位置，其位置的内容可以由外层组件或者页面定义。

示例：

通过 name 属性可以给 slot 命名。一个视图模板的声明可以包含一个默认 slot 和多个命名 slot。外层组件或页面的元素通过 slot=”name” 的属性声明，可以指定自身的插入点。

示例：

slot指令应用

解释：

在 slot 声明时应用 if 或 for 指令，可以让插槽根据组件数据动态化。

示例：

数据环境

解释：

插入 slot 部分的内容，其数据环境为声明时的环境(也就是调用该组件页的环境)

渲染结果

scoped 插槽

解释：

如果 slot 声明中包含 s-bind 或 1 个以上 var- 数据前缀声明，该 slot 为 scoped slot。scoped slot 具有独立的 数据环境。

scoped slot 通常用于组件的视图部分期望由 外部传入视图结构，渲染过程使用组件内部数据。( 个人理解：有了scope就优先使用组件内部的数据，除非内部没有这个数据，才会使用外部传入的数据。 )

渲染结果：

组件样式

组件的样式，可以在组件的 css 文件中编写，并且只对当前组件内节点生效。使用时，需要注意以下几点：

ios 系统把微信小程序添加到桌面的方法如下：

1、在微信里点击打开小程序。

2、进入小程序后，点击想要添加桌面的小程序。

3、进入指定的小程序后，点击右上角的图标。

4、在d出的对话窗内点击“添加桌面”。

5、然后返回手机桌面就可以看到已经添加到桌面了。

小程序在使用时，经常会在不同的页面用到相同的页面结构，这个时候我们如果一个个写的话没有必要，这个时候可以使用模板（template）或者组件（component）。

二者区别 在于：

1、需要定义模板：一个templatewxml文件中能写多个模板，用name区分，

下面定义两个模板

2、使用这两个模板，在对应的wxml文件引入：

3、上面在模板content里定义了点击事件subtractNum方法，因为template中没有js文件，因此template中的点击事件，在使用页面中的js里定义。

建议将有子列表 *** 作交互的写成component。

示例：

对应组件的wxml跟page里的wxml一样：

2、使用自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

下一节将进入如何 组件向父级传值（组件通信）

以上就是关于微信如何与小程序的视频同时运行全部的内容，包括:微信如何与小程序的视频同时运行、支付宝小程序中扩展组件list组件双层循环怎么做、微信小程序组件化开发等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！