[手机组件]-组件开发创建-菜鸟教程

云小米

页面的可视化拖拽DIY装修已经很普遍了，特别是商城系；但是要能跟进云一样《全网应用》都可以DIY装修的可能不多。能够像进云一样，自己创建《DIY组件》来满足不同DIY装修需求的就更少了。
什么是《DIY组件》？
答：在装修页面时，一个个供您选择的页面组件菜单，就是DIY组件。如下图：

如果可以自己创建组件，而且全民都能创建，您在DIY装修的时候，就可以自由用自己的DIY组件，而不是只能依赖系统软件的被动提供
进云【全网首发】可以自己创建DIY组件的《全网应用DIY装修》机制：一键复制现有官方DIY组件，在这基础上自己稍作修改，就可以获得自己想要的DIY组件，最后在DIY设计应用页面时，只需选择自己创建的组件，就可以满足无限多样的DIY需求。
复制创建组件的教程：
1、移步自己的进云框架程序后台（超级管理员身份登录）；

2、点击右上角《开发》：

3、点击左侧应用开发--《手机页面组件》

4、点击创建组件

5、选择复制组件--然后选择要复制的组件是那个；

6、选择后，点提交，就会进入组件的详情页面，可以自由修改编辑，保存后，前往页面装修设计，就可以看到刚刚创建的组件，点击即可使用。

组件基础样式依赖：http://s.jinyunweb.com/jinyunui/  进云框架页面默认会加载这些基础样式，建议在创建组件时，可以不用另外加样式，在基础样式的基础上添加组件，让页面更简洁统一
下面是一个单图组件的示例代码：
1、展示代码

//可以从inav.params.下面读取，编辑器自定义的变量<div class="fui-picture" style="background: {{inav.params.background}};">                <div ng-repeat="pic in inav.params.pics" style="display: block; padding: {{inav.params.paddingtop}}px {{inav.params.paddingleft}}px;">                   <img ng-src="{{tomedia(pic.imgurl)}}" />                </div></div>2、编辑器代码：

//把所有的变量赋值到pagedata.editdata.下面<div class="form-group">        <div class="col-sm-2 control-label">上下边距</div>        <div class="col-sm-10">            <div class="form-group">                <div class="slider col-sm-8" data-model="pagedata.editdata.paddingtop" data-min="0" data-max="50"></div>                <div class="col-sm-4 control-labe count"><span>{{pagedata.editdata.paddingtop}}</span>px(像素)</div>            </div>        </div>    </div>    <div class="form-group">        <div class="col-sm-2 control-label">左右边距</div>        <div class="col-sm-10">            <div class="form-group">                <div class="slider col-sm-8" data-model="pagedata.editdata.paddingleft" data-min="0" data-max="50"></div>                <div class="col-sm-4 control-labe count"><span>{{pagedata.editdata.paddingleft}}</span>px(像素)</div>            </div>        </div>    </div>    <div class="form-group">        <div class="col-sm-2 control-label">背景颜色</div>        <div class="col-sm-4">            <div class="input-group">                <input class="form-control input-sm diy-bind color" ng-model="pagedata.editdata.background" type="color" />                <span class="input-group-addon btn btn-default" ng-click="pagedata.editdata.background='#ffffff'" >清除</span>            </div>        </div>    </div>    <div class="form-items indent">        <div class="inner" id="form-items">                <div class="item" ng-repeat="pic in pagedata.editdata.pics">                    <span class="btn-del" title="删除" ng-click="pagedata.editdata.pics.splice($index,1)"></span>                    <div class="item-image">                        <img ng-src="{{tomedia(pic.imgurl)}}"/>                    </div>                    <div class="item-form">                        <div class="input-group" style="margin-bottom:0px; ">                            <input type="text" class="form-control input-sm diy-bind" placeholder="请选择图片或输入图片地址" ng-model="pic.imgurl" />                            <span class="input-group-addon btn btn-default" ng-click="image(pic,'imgurl')">选择图片</span>                        </div>                        <div class="input-group" style="margin-top:10px; margin-bottom:0px; ">                            <input type="text" class="form-control input-sm diy-bind" placeholder="请选择链接或输入链接地址" ng-model="pic.linkurl" />                            <span class="input-group-addon btn btn-default" ng-click="pagedata.choose_url(pic,'linkurl')">选择链接</span>                        </div>                    </div>                </div>        </div>        <div class="btn btn-w-m btn-block btn-default btn-outline" ng-click="pagedata.editdata.pics.push({});"><i class="fa fa-plus"></i> 添加一个</div>    </div>3、生成代码

//用{}包含替换变量<div class="fui-picture" style="background: {background};">        <a ng-repeat="pic in {pics}" ng-click="access_json(pic.linkurl)" style="display: block; padding: {paddingtop}px {paddingleft}px;" data-nocache="true">            <img ng-src="{{tomedia(pic.imgurl)}}" />        </a>    </div>4、小程序代码：

//同理<view class="fui-picture" style="background: {background};">        <a wx:for="{{{pics}}}" data-func="access" data-params="{{item.linkurl}}" bindtap="click" style="display: block; padding: {paddingtop}px {paddingleft}px;" data-nocache="true">            <image mode="widthFix" src="{{root}}{{item.imgurl}}" ></image>        </a></view>5、默认参数：



{    "pics":[{"imgurl":"../core/resource/images/diy/default/banner-1.jpg"}],    "paddingtop":0,    "paddingleft":0}