用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-2-25 22:57:51 天下雪原创达人 造轮子 人生巅峰 楼主 06824
微信小程序的组件是否都是原生实现的,类似React Native?

No,小程序视图层仍然依赖于Webview,只有部分组件是原生组件,用来解决Mobile Web体验问题。目前原生组件包括:input,textarea,video,map,canvas

tip: input 组件是一个 native 组件,字体是系统字体,所以无法设置 font-family;
tip: textarea 组件是由客户端创建的原生组件,它的层级是最高的。
tip: video 组件是由客户端创建的原生组件,它的层级是最高的。
tip: map 组件是由客户端创建的原生组件,它的层级是最高的。
tip: canvas 组件是由客户端创建的原生组件,它的层级是最高的。

而其它组件都是基于Web Component规范实现的Custom Element,而诸如picker弹出选择器行为,navigator跳转行为,都是基于微信原生提供的能力,理解为调用wx.xxxApi


分享者:启明
小程序中 canvas、textarea、video 等组件使用原生渲染,如果需要弹层交互的话它们会挡住弹层。解决办法就是在弹层后将这些组件 hidden 属性设置为 true,弹出消失时重置为 false 即可。另一个问题是如果这些组件在弹层内,它们不会限制在弹层中,而是会随着页面整体进行滚动。


新增案例:
为什么微信小程序在iOS真机测试z-index设置不生效?
最近,在踩小程序的坑,想做一个播放视频的页面,海报显示在视频组件上方,点击海报后,图片消失开始加载视频。写完代码,在安卓上测试通过。到IOS真机上测试,发现z-index设置根本不生效,页面显示都是视频未播放前的黑色豆腐块。有没有大神知道怎么回事?我看iOS的小程序“开眼视频Eyepetizer”都做到这个效果了
答:陈小帅
map \ canvas \ video 属于原生组件,层级是最高的,不管你设置任何的z-index都是不能覆盖到这些原生组件上。
像摩拜单车的地图上那些按钮都是controls,或者“ 开眼视频Eyepetizer ”上面的视频播放按钮,其实就是一张图片,图片里有个按钮图标,点击图片切换成视频播放。
[AppleScript] 纯文本查看 复制代码
<view class="playVideo">
    <image class="playimg" wx:if="{{playvideos == 1}}" src="../../img/vrplay.jpg" bindtap="play" mode="widthFix"></image>
    <video class="video" wx:if="{{playvideos == 2}}" src="http://113.106.202.72/youku/xxx.mp4" autoplay="autoplay" ></video>
 </view>


有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
发新帖
您需要登录后才可以回帖 登录 | 立即注册