可以选择使用微信原生小程序组件 和 。也可以用第三方的SDK来实现,比如即构科技小程序实时音视频SDK,提供 和 组件,微信官方认证的小程序插件及配套组件。即构科技小程序SDK支持单聊、群聊、聊天室人数无上限,而且还支持1080P高清视频,百万高并发,全终端覆盖,快速集成上线,允许两人或多人使用网络实时的传递文字消息、文件、语音与视频交流。
本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序开发者作为字典查阅和检索。
小程序组件有一些公共属性,在每个组件中代表的意义和数据类型都是一样的。
容器组件:内部能嵌套任何标签。常用的视图容器有: view , scroll-view , swiper
<view/> 是一个块级容器组件,任何一种复杂的布局都可以嵌套在 <view/> 组件内,并在 wxss 中设置相关样式。
<view/> 除了上述组件共有的属性外,还包含一组关于点击行为的属性。
在布局中,需要容器具有可滑动的功能,且能监听滚动、触顶、触底等事件,就需要 <scroll-view/> 组件, <scroll-view/> 在 <view/> 组件上添加滚动相关的属性,通过这些属性,可以响应滚动相关事件。
注意:
<textarea/> , <video/> , <map/> , <canvas/> 不能嵌套在 <scroll-view/> 中使用
利用 swiper 组件,可以实现轮播图,滑动页面,预览等,一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成,不能单独使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/> 标签,放置其它的标签会被删除,其中, <swiper-item/> 中能放置任何标签,高度默认为 100% ,另外没有任何其它特殊属性。
<swiper/> 的属性如下:
解释 :
在组件的视图模板中可以通过 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 文件中编写,并且只对当前组件内节点生效。使用时,需要注意以下几点:
新手在第一次自定义组件的时候,首先写出来需要定义的组件的内容和布局,防止不熟练而出错。
一、新建一个文件夹,自己命名。以后所有的自定义组件都存放于此。
二、在此文件夹下新建一个自行命名的文件夹,命名最好语义化,与里面自定义组件的名字相呼应。
三、在新建的文件夹内新建一个Component文件 命名也是自定义。
四、在xxx里面把事先写好的ml和ss以及js文件复制进去。
1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样 {{}}是插值表达式。这里可以直接使用js里面定义的数据。
eg:
1、组件自定义的属性列表写在 properties里面。需要写成对象的形式
eg:
2、组件的方法列表写在 methods里面
eg:
五、在需要引用自定义组件页面文件的xxxjson里面引用。
注意:引用的时候,不可以以/开头。前面命名可以自命名,不必和后面名字一样。
六、在需要引用的页面里的的xxxwxml里写已经命名好的组件。
组件的名字为自定义命名。
eg:
因为组件是自己写的,并非微信提供的官方组件,所以如果想要获取触发事件的话 ,需要写一个同步组件回传数据
触发自定义事件用triggerEvent。在需要调用的方法内写thistriggerEvent(“自定义属性名”,‘需要更新的数据’)
eg:
然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”
利用data-active="变量名"属性添加需要变化的变量
eg:
xxxwxml内写法:
注意:想要在页面中使用自定义的组件属性时,必须要现在定义组件的文件夹内的js文件中,先去定义属性,然后才可以引入使用。
微信小程序直播没有组件的解决方法:
1、在微信小程序中申请了小程序直播,目前已经开通。
2、已经重新进行了有赞小程序授权,授权已经具备小程序直播权限。
3、查看了插件,拥有有赞视频直播插件和小程序直播插件。
4、在小程序里面设置了直播间。
以上就是关于微信小程序聊天组件开发,除原生外有第三方的吗全部的内容,包括:微信小程序聊天组件开发,除原生外有第三方的吗、小程序常用组件-视图容器、百度小程序自定义组件slot和样式等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)