微信小程序 通过脱离文档流和z-index 覆盖 原生组件

覆盖 textarea 等微信小程序原生组件

1子组件使用 position中的 relative、absolute、fixed

//子组件

父组件

此时可以通过z-index 大小控制子组件和 原生组件textarea覆盖 （前提：要在子组件设置position 使得组件脱离文档流）

题主，您好：

现在市场上有许多这样的平台，比如说，即速应用，轻芒小程序+，上线了，小鹅通，这些都能够生成自己的小程序，不过不同平台可能针对的领域有差别，比如轻芒小程序，专注为内容创作者，快速生成小程序，小鹅通是专注于知识领域的，这些深耕于细分领域的都做的不错。

#如何去实现这样的平台#生成小程序与生成网页应用类似，只不过生成小程序，是按照微信的规则，去写相应的组件。

第一步，首先你要将你支持用户拖拽的模块提前写出来，也称模板区域，这些代码也就是你在小程序中实现的代码，通过HTML+CSS展示在你前端页面，当用户拖拽的时候用到的是Html5的拖拽效果，可以参考W3S的这个链接：html5/html_5_draganddropasp

第二步，当我们将模板区域的组件拖动的到设计区域，这个区域要生成相应的小程序组件，并且展示出来

这上面仅仅只是说明了怎么去实现，第一步，写好组件模板，第二步，实现拖拽，第三步，生成组件代码，这些只是理论知识，真正去实现过程中比这里的复杂情况多的多

所以这里只能给你推荐一下你可能用的到的技术，链接如下：

Vue-Layout:vue可视化布局、自动生成代码

对于基础者的话，难度可能是相当大的，希望加油！

1、在wxml文件中添加按钮组件，并设置按钮的初始样式和点击事件。

2、在js文件中定义一个变量，用于存储商品的初始剩余量。

3、在点击按钮时，更新商品剩余量以及页面显示的剩余量数据。

一、小程序创建组件过程

1、首先创建一个components目录，下面放文件(组件文件)

2、创建两个组件文件（Listitem和lunbo）

3、在pages文件夹json文件里面，进入对应的模块内引用Listitem和lunbo组件

4、在wxml文件中使用标签属性来引入组件

自定义组件中和页面中的class名重名，是不会产生冲突的；

页面中的class和自定义组件中的class重名；同样不会产生冲突；

二、父传子：

三、子传父：

子组件绑定事件handle事件（bindtap=“handle”）

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

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

二 在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对象;

可以选择使用微信原生小程序组件 和 。也可以用第三方的SDK来实现，比如即构科技小程序实时音视频SDK，提供 和 组件，微信官方认证的小程序插件及配套组件。即构科技小程序SDK支持单聊、群聊、聊天室人数无上限，而且还支持1080P高清视频，百万高并发，全终端覆盖，快速集成上线，允许两人或多人使用网络实时的传递文字消息、文件、语音与视频交流。

新手在第一次自定义组件的时候，首先写出来需要定义的组件的内容和布局，防止不熟练而出错。

一、新建一个文件夹，自己命名。以后所有的自定义组件都存放于此。

二、在此文件夹下新建一个自行命名的文件夹，命名最好语义化，与里面自定义组件的名字相呼应。

三、在新建的文件夹内新建一个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文件中，先去定义属性，然后才可以引入使用。

以上就是关于微信小程序 通过脱离文档流和z-index 覆盖 原生组件全部的内容，包括:微信小程序 通过脱离文档流和z-index 覆盖 原生组件、做一个小程序生成平台需要掌握哪些技术、小程序利用按钮组件写商品初始剩余量怎么写等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！