| 小程序组件之 | 您所在的位置：网站首页 › cover视频 › 小程序组件之 |
小程序组件之
|
cover-image与image
没错我们就是从头开始往下撸。有啥就讲啥。外带一些扩展。
聊正题因为是第一个组件，不对，应该说是第一组组件，因为image和cover-image是两个组件，不过因为太像啦，所以就拿出来一起讲。因为是第一组，所以我讲解一下，wxml的代码都写在后缀为wxml中，css代码都写在wxss中，js在后缀是js的文件中，不需要像pc端那样刻意的去引用，只要写好了，系统自己就很聪明，帮你搞定这些事了，前提是文件名相同。 ok，这个东西时间久了 都会用的。咱们聊正事啦，终于开始讲正题啦，憋死我了。image和cover-image都是在小程序中引入图片的组件（组件你们暂时理解为html标签就好）。当我们希望在页面上放上一些图片，我们就会使用这两个标签之一 代码如下！（图片引入） 是不是很简单然后效果如下： wxss div{ position: fixed; top: 0; left: 0; width: 100%; height: 500px; background-color: red; z-index: 3; } .img{ z-index: 1; }效果图 补充几个小的知识点。 第一，写好了代码要怎么看效果呢？答案：保存后，工具回自动帮你编译的，也可以设置保存后不能被编译。 第二，怎么从手机上看效果呢？
在上面的cover-image的组件，我用了两个组件，不知道你们会不会困惑。现在给你们解惑。 在引入本地资源的时候，有两种引入的方式。 第一种，相对路径引入。 第二种，绝对路径引入。 基本区别和使用大家都清楚，有一些人不清楚的是，资源的开头中/和./和…/和什么都不填写有什么区别 /代表着根目录的意思，资源从miniprogram文件夹下开始找 ./代表着当前目录的意思，和什么都不写没区别。 …/代表着从文件的上一级目录下开始寻找。 还没完，我们还有内容小内容一、src接受的文件资源可以是本地资源，网图的链接和云文件的fileId(这个后面聊) 接受文件的后缀名包括jpg/png/gif/svg/webp/base64 小内容二、明明是小内容，为啥这么大？哈哈哈，因为很重要，而且在博客中是第一次讲(组件触发事件) 就是，如果文件加载成功或者失败，我们都可以根据它的一些属性来触发一些事件。 上代码！ wxml js Page({ show_success(){ console.log('success') }, show_filed(){ console.log('filed') } })第一个正常的image,如果正常引入成功，可以触发show_success函数。 第二个明显是文件路径错了，会触发show_filed函数。 上图 上一篇：认识微信开放文档 下一篇：cover-view\view与text |
忽略博主最帅的事实，我们看效果就好了，前面两个都是用cover-image引入的图片，最后一个是用image引入的图片，是不是看出差别了？cover-image引入的图片铺满了整个屏幕，image好像没有，不过这是小问题，不是它们最大的差别。 它们最大的差别在于，image是正常使用的图片引入的组件，而cover-image有点强，强在它始终在可视页面的最上层（我就是这条街最靓的仔，谁都挡不住我）。什么时候回发生遮挡呢？比如，定位。有元素定位至图片上方。image会被遮挡，但是cover-image就不会被遮挡。484有点没画面？ok，上代码！ wxml
emmm。。。效果貌似没啥差别。不过，放下你们手中的锤子镰刀啥的，博主就不是唬人的人，昂，你们放心。差别在那呢？在于，这个效果图是在微信开发者工具上的效果。如果你在手机上看，效果就不一样了，你们看～～～
上面的两个没有被挡住，最后面的image被挡住啦，是不是就很神奇（有些效果在手机上才能看见，很坑啊）。
点击预览或真机调试，然后扫码，就可以查看效果啦。
有趣的是，filed这个事件竟然先被执行，但是大家不要被误导，这是个意外，多数情况下，还是成功的事件先被执行（我刷新了n多次，都是success在前面（因为它被写在前面，当然，我说的是wxml）） 
我把两个代码调个位置，会发现，图片加载失败也会占个位置。哎，其实在开发中，知道上面的就完全够用了，但是一个组件想要被吃透，你得花很久的时间的。所以，出门聊天，千万别说自己精通哪门语言，再自信都不行。 那这两个组件就介绍到这，一般的开发知道这些，完全够用了。下期见！【本文地址】