用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-12-22 20:52:57 hongweicao优秀会员纪念 layout可视化工具 楼主 92023
本帖最后由 hongweicao 于 2016-12-22 21:17 编辑

第一次写帖子真是紧张啊,哎呦忘了该写啥了,那我就简单介绍一下,这篇帖子看似跟小程序没有关系,实则不然(大牛请绕道):请继续往下看-->

Web Components 是啥??? 一开始我也不知道,关于这个中文的资料找到一些,质量都还不错。我们先来看两个词,如下:      
  • 标签:如<input>, <table>这些原生tag
  • 组件(Web Components ):由<input>, <table>等这些原生的标签组成的自定义组件。如:<user-list></user-list>

  (上面两句摘抄的,嘻嘻,我也懒),虽然我没说什么,但是我想大家瞬间都明白了吧。对的你就是这么聪明,这就是为什么你还在做码农 ,而别人已经是老板了
(老板都蠢,,不要告诉我的老板,哈哈),是的,把我们平时用到的html标签组合起来就变成了一个组件(Web Components )。
下面我们来看看怎样做一个简单的组件:
使用一个组件的一般流程是这样的-----创建一个自己的组件-------调用这个组件;这样可能你还不是很清楚,那么我们来看示例,

首先我们创建一个组件,也可以叫做模板吧,反正我是这么叫,这个组件名称  firstcoment.html 下面是代码以及很拗口的解释;我语文不好谅解一下呗,


[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <template>
    <style>
        .coloured {
            color: red;
        }
    </style>
    <p>My favorite colour is: <strong class="coloured">Red</strong></p>
    <input placeholder=""></input>
</template>
<script>
    (function() {
        // 基于HTML元素原型创建一个对象
        var element = Object.create(HTMLElement.prototype);
        //从<template>获取内容
        var template = document.currentScript.ownerDocument.querySelector('template').content;
        // 在创建元素的实例时触发
        element.createdCallback = function() {
            // 创建ShadowRoot实例
            var shadowRoot = this.createShadowRoot();
            // 将模板克隆添加到ShadowRoot实例中
            var clone = document.importNode(template, true);
            shadowRoot.appendChild(clone);
        };
        //注册自己构建的新元素
        document.registerElement('favorite-colour', {
            prototype: element
        });
/*            //创建一个实例
    var xfoo = document.createElement('favorite-colour');
    //插入页面
    document.body.appendChild(xfoo);*/(块注释)
    }());
</script>
</body>
</html>
其实这个大家直接运行的话已经出来效果了(要把块注释的地方取消注释),但是这样的话就不符合我们上面所说的使用方式了,所以我们再来一个页面
如下:GetComponent.html

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="import"  href="firstcoment.html">
</head>
<body>
     <favorite-colour ></favorite-colour>
</body>
</html>


用link将组建导入,然后像标签一样把刚才
document.registerElement('favorite-colour', {
prototype: element
});注册的favorite-colour这个组件写在body中就可以了。到这里一个简单的组件就完成了,但是如果你单单双击GetComponent.html页面
运行想看效果的话是不行的,这样会报错如下:

QQ截图20161222201622.png

看大致意思是导入的路径的问题,我英语也不好,咋办?????搜资料吧,我擦嘞,找到两国外篇英文的帖子,不过大致猜出来
意思了,运行这个需要一个服务、服务?服务?服务?咋搞个服务?我们来试试发布一个网站试试?不巧啊,真的就可以了。看看效果如下:
QQ截图20161222202258.png

已经可以显示了。
到这里可能大家有的人会问这个Web Components到底干啥用的?我们来看一下这个东西  <view></view>  ,难道?难道?对的,小程序中的这个其实就是组件。
(大牛早就知道了,我也是刚知道的,不要笑我菜)。这里我通过简单的介绍让大家和我一起了解一下,下面给上几个学习的地址(也是我最近学习,也要和大家分享的东东):
Web Components:
      http://sentsin.com/web/1089.html
      http://fex.baidu.com/blog/2014/05/web-components-future-oriented/
      https://www.html5rocks.com/zh/tutorials/webcomponents/template/      http://javascript.ruanyifeng.com/htmlapi/webcomponents.html

polymer:
     https://segmentfault.com/a/1190000003810019     http://www.reqianduan.com/2481.html


目前资料有这些,希望和大家一起学习进步!上面呢只是简单给大家介绍一下,那些链接的文章要比我写的好千千倍,大家一定要看!
如果有兴趣的同学可以在  422740450  这个群里找到我,最近有心的进展我会及时和大家分享的。希望大家多多支持。
polymer是啥?等两天再给大家简单介绍一下。我也正在学习中ing



评分

参与人数 2原创 +1 浮云 +30 收起 理由
comeonliuqd + 10
天下雪 + 1 + 20 我来除草

查看全部评分

通读整篇文章,发现大神似乎想传图片,但是没传上来啊 1.png ,有个效果如下那个地方应该是有张图片的吧
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
天下雪 发表于 2016-12-22 21:04
通读整篇文章,发现大神似乎想传图片,但是没传上来啊,有个效果如下那个地方应该是有张图片的吧
...

是的,我来重新改一下
hongweicao 发表于 2016-12-22 21:14
是的,我来重新改一下

新手不懂,这个东西怎么用于微信小程序呢,主要作用是什么
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
天下雪 发表于 2016-12-22 21:25
新手不懂,这个东西怎么用于微信小程序呢,主要作用是什么

呃呃,看来我不适合写文章,小程序中的标题【简易教程   框架   组件    API   工具   Q&A】可以直白的告诉我们,我们所用的像view都是组件而不是标签,web Components就是合成组件的化学成分
hongweicao 发表于 2016-12-22 21:33
呃呃,看来我不适合写文章,小程序中的标题【简易教程   框架   组件    API   工具   Q&A】可 ...

非也非也,不是你不适合写文章,是我基本毫无技术基础,你想想,去看一个有些技术含量的东西,可想而知了;{:3_41:}既然适合微信小程序,那么晚点就弄到首页去
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
天下雪 发表于 2016-12-22 21:46
非也非也,不是你不适合写文章,是我基本毫无技术基础,你想想,去看一个有些技术含量的东西,可 ...

我也是刚了解下来,后面有做的demo的话会继续更新一些实际的示例,分享一下。谁知道你是不是张小龙呢??

hongweicao 发表于 2016-12-22 21:54
我也是刚了解下来,后面有做的demo的话会继续更新一些实际的示例,分享一下。谁知道你是不是张小龙呢?? ...

我隐藏了这么久,难道还是被发现了吗?{:3_54:}
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
天下雪 发表于 2016-12-22 22:10
我隐藏了这么久,难道还是被发现了吗?

评分

参与人数 1浮云 +40 收起 理由
天下雪 + 40 发现论坛问题奖励

查看全部评分


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