问题描述不是很明确，也没有具体一点的补充说明，如果有相应的截图，建议一并上传，再补充下具体的情况说明，以便给予针对性的说明或介绍。
小程序优势
不用安装，即开即用，用完就走。省流量，省安装时间，不占用桌面。
体验上虽然没法完全媲美原生APP，但综合考虑还是更优。
对于小程序拥有者来说，开发成本更低，他们可以更多财力，人力，精力放在如何运营好产品，做好内容本身。
对于用户来说，相较于各种APP，微信小程序UI和操作流程会更统一。这也会降低用户的使用难度。
对于小程序拥有者来说，相较于原生APP，推广更容易更简单，更省成本。
提交与小程序功能相匹配的标签，帮助小程序触达更多精准分发
针对定制功能来说，价格会比较昂贵，因为定制需要重新花时间开发，一般工期都在一个月以内的时间，基本上都是几万元，所以这个小商户来说，肯定是承受不起的
如果是单独的满足一些基础的功能，没必要采用定制的模式，比如目前市场上许多网络公司卖微信小程序的模版，基本功能都具备的，花个几百或者几千购买就足够了，比较适合中小型企业
定制需要麻烦专业的团队去开发需要高昂的费用和时间的，而且还不一定实用，建议你去点点客小程序看看，不仅全行业覆盖小程序还免费
不可以，小程序有自己的一套模板规范，不是很难，可以对照着html标签来看。
比如：小程序一个标签view就相当于html标签div。
定制一个微信商城小程序需要多少钱，这个不是一概而全的，要看开发小程序本身的复杂程度，是需要服务器后台支持的，越复杂的费用越高：
1.就是自己开发自己做。如果自己不懂编程，可以招聘程序员来做，程序员的工资1万到万/月不等，一个功稍强的商城至少需要5个人员，时间就看功能的复杂程度了，半年甚至一年多完工都有可能。
2.就是找技术公司外包。假如自己什么也不懂，自己也没有技术团队，但预算还可以的情况下可以考虑这种方式，市面上定制开发一般起步5万以上，功能稍微多一点的，十几万的预算很正常，功能简单一点的工期一般要一个月到三个月不等，稍微功能多一点的商城小程序开发周期半年到一年也是很正常的。
3.就是找一个具有开发微信小程序商城资质的开发公司，购买模板即可。这一个方式是在自己没有开发能力、并且预算不高的情况下，最方便也比较省钱的方式，价格一般几千元。因为我们不需要耗费那么多精力去自己开发，也不需要花费太多的钱去养一个开发人员或是开发部门，我们只需要支付开发一个小程序的市场价格即可。
一、前言
小程序中的组件其实相当于网页中的HTML标签，只不过标签名字不一样，接下来我们一起来看下微信小程序都给我们提供了哪些组件吧。
二、容器组件可以存放其它组件的容器组件，目前主要有如下几种：
cover-image覆盖在原生组件之上的图片视图cover-view覆盖在原生组件之上的文本视图match-media 匹配检测节点movable-area的可移动区域movable-view可移动的视图容器，在页面中可以拖拽滑动page-container页面容器scroll-view可滚动视图区域share-element共享元素swiper滑块视图容器swiper-item仅可放置在swiper组件中，宽高自动设置为100%view视图容器
这里小编来和大家说说常用的一些容器组件。
三、基础内容组件这里给我们提供了常见的几种图标还有进度条，如果你想用HTML中的标签请在富文本组件中使用，另外，小程序中的文本组件是text，如下：
icon图标progress进度条rich-text富文本text文本四、表单组件
button按钮checkbox多选项目checkbox-group多项选择器，内部由多个checkbox组成editor富文本编辑器，可以对图片、文字进行编辑form表单input输入框keyboard-accessory设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图label用来改进表单组件的可用性picker从底部弹起的滚动选择器picker-view嵌入页面的滚动选择器picker-view-column滚动选择器子项radio单选项目radio-group单项选择器，内部由多个 radio 组成slider滑动选择器switch开关选择器textarea多行输入框五、导航组件
本项目内的页面跳转，不过不支持外部链接的跳转。
functional-page-navigator仅在插件中有效，用于跳转到插件功能页navigator页面链接六、媒体组件
audio音频camera系统相机image图片live-player实时音视频播放（v2.9.1 起支持同层渲染）live-pusher实时音视频录制（v2.9.1 起支持同层渲染）video视频（v2.4.0 起支持同层渲染）voip-room多人音视频对话七、地图
map地图（v2.7.0 起支持同层渲染，相关api wx.createMapContext八、画布
canvas画布九、开放组件
web-view承载网页的容器adBanner 广告ad-custom原生模板 广告official-account公众号关注组件open-data用于展示微信开放的数据
专门用来做广告或者获取小程序的用户的数据。
十、原生组件native-component小程序中的部分组件是由客户端创建的原生组件
小程序的原生组件为：
cameracanvasinput（仅在focus时表现为原生组件）live-playerlive-pushermaptextareavideo原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。原生组件还无法在 picker-view中使用。
原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。原生组件会遮挡 vConsole 弹出的调试面板。为了解决原生组件层级最高的限制。小程序专门提供了 cover-view和 cover-image组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
十一、无障碍访问aria-component满足视障人士对于小程序的访问需求十二、导航栏
navigation-bar 页面导航条配置节点，用于指定导航栏的一些属性十三、页面属性配置节点
page-meta页面属性配置节点，用于指定页面的一些属性、监听页面事件十四、可视化
如果你觉得一个个写组件很麻烦，那么你可以使用可视化的方式来使用组件，如图：
这样可以帮助我们快速构建页面。
十五、ui组件虽然微信给我们提供了一些组件，但是这些组件并不是特别美观，于是乎，小编决定使用一些已经写好了三方的组件，这里推荐腾讯团队做的一个ui组件库-----WeUI。这里小编已经下载好了，给大家一个地址：（访问密码：6511），下载好了之后，我们将其放入到项目中去，然后添加到项目的全局样式文件，如图：
然后就可以使用了，如图：
虽然说weui的组件做的还不错，基本上不用我们自己写样式，但是文档写的不适合小白学习，所以这里小编给大家推荐一款新的小程序组件库，他就是iview weapp，下载地址：（访问密码：6511），由于iview weapp和weui的样式文件不一样，因此我们只有一个个导入，需要什么导入什么，首先打开页面配置文件，如下：
然后使用自定义的组件名来使用这个组件，如下：
注：这里我们需要删除example和build，否则会报错。
十六、自定义组件在实际开发中，并不是所有的组件都能满足我们的需求，我们总有需要自己写组件的时候，微信小程序可以让我们轻松实现自定义组件，首先我们创建一个自定义的组件文件夹，然后分别写入页面，样式和脚本，如图：
然后我们将该组件导入到我们要应用到该组件的页面配置文件中去，如图：
然后引入该组件bb，如图：
十七、数据传递很多时候，咱们组件中的数据并不全是静态的，有的时候也要做成动态的响应式的组件，这个时候需要我们进行数据传递，首先我们需要在页面文件夹的js文件中去添加需要传递的数据的键值对，如图：
十八、条件渲染还是使用上面的d1数据，条件渲染是将我们所设置的条件进行对比，哪个组件的条件符合就显示哪个组件，如图：
十九、列表渲染主要是通过遍历的方式来输出一些数组字典对象，如下：
使用模板增加了代码的复用性，想用哪个就用哪个，如图：
这里的模板中的data属性我们也可以直接在里面给他赋值，如图：
二十一、引入模板虽然我们可以自己制作模板，但是很多时候为了代码的简洁性，我们需要进行拆分代码，这个时候就可以使用引入的概念，在此之前，我们需要写一个模板文件，如图：
然后导入它，如图：
当然，除此之外还有一个更简单的导入方法，如图：
可以看到，template中的内容他是不会包含进去的，也就是说他只会引入除模板以外的组件和内容。
二十二、总结本文主要讲到了关于微信小程序中的组件的应用，其实也就是我们熟知的页面标签，通过他们我们可以在页面中嵌入一些元素，由于现在很多三方组件的崛起，建议大家尽量用三方框架去做。感兴趣请关注小编公众号“简易编程网”。
注：文中组件的来历及解释部分参考微信开放文档
初学某种编程语言时，很多人会从手撸一个Todo-List（待办清单）开始。
咱们也不能免俗，从本章开始，先撸个单机版 Todo-List ，再逐步拓展为 Web 版本。
准备工作我们在创建小程序项目时，开发工具”好心“送了些示例代码。
它是一个获取用户登录数据的小 Demo 。如果你的新版开发工具没有给示例代码，那则无视之。
因此首先将 app.wxss 和 pages/index/index.wxss 中的代码清空，免得它们捣乱。它们分别是全局和页面的样式文件，控制着页面元素的外观。
接下来修改 app.json 文件：
// app.json{ // ... // 修改字段 "window": {// ..."navigationBarBackgroundColor": "#6495ED","navigationBarTitleText": "Todo-List",// ... }, // ... // 新增字段 "useExtendedLib": {"weui": true }}
app.json 是全局配置文件，控制着项目的基本属性。
"window" 字段指定了小程序的字体颜色、导航栏样式等等属性。这里我们将导航栏的背景修改为淡蓝色，将页面标题修改为 Todo-List 。保存文件后，开发工具左侧的手机模拟器会自动更新，可以发现导航栏已经变为蓝色了。
"useExtendedLib" 指定了本项目要使用扩展库 WeUI 。WeUI 是官方提供的一套 UI 样式库，用过 Bootstrap 的朋友上手起来会比较快。
原生的 UI 实在有点难用（且丑）。类似 WeUI 的样式库还有很多，这个就读者以后去探索了。
扩展库的概念类似于 Python 开发时用 pip 安装第三方库，不同的是扩展库并没有将三方库安装到程序包中，而是对公共资源的某种”引用“。因此使用扩展库的好处是它不占小程序自己的体积，但是缺点是目前支持的库非常的少，WeUI 就是其中之一。
小程序的体积应当尽可能小。体积小的好处是首次启动时加载时间较短，用户体验佳。另一方面是因为微信规定小程序有体积上限，超过上限是无法部署到线上的。见小程序最大体积。
准备工作这样就完成了，接下来开始撸正经代码。
WXML模板从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 描述页面的结构，CSS 描述页面的样子，JS 处理页面和用户的交互。
在小程序中也有同样的角色，其中 WXML 充当的就是 HTML 的角色。
根据 app.json 中的配置可知，pages/index/ 是小程序的首页。因此首先清空 pages/index/index.wxml 的内容，然后写入下面的神秘文字：
<!-- pages/index/index.wxml --><view class="container"> <view class="weui-cells weui-cells_after-title"><checkbox-group bind:change="checkboxChange"><label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="id"><view class="weui-cell__hd"><checkbox value="{{item.id}}" checked="{{item.checked}}" /></view><view class="weui-cell__bd">{{item.content}}</view></label></checkbox-group> </view></view><view> 是小程序中的最基础的视图容器，类似 HTML 的标签 div 。此外小程序还提供了 button , text 等等标签，以及地图、视频、音频、扫码等等开放能力。与传统网页开发不同，小程序的模板可以包含 if 、 for 等逻辑控制语法。比如上面的 wx:for="{{items}}" 语句，意思是循环渲染 items 容器中的元素（items后面马上会定义）。{{}} 花括号表示这里不是一个普通的字符串，而是实实在在的数据。 wx:key 用于帮助模板引擎识别每个 items 元素，类似于数据库中的主键。<checkbox-group ...> 是多选框控件整体。bind:change="checkboxChange" 意思是监听多选框控件的状态，每当其内容发生变化时，立即调用 checkboxChange() 方法（此方法后面马上会定义）。bind:change 是监听控件事件的内置固定写法，类似的还有按钮的 bind:tap 、输入框的 bind:input 等等。<checkbox ...> 为多选框的实际单个元素。value 为其绑定的数据，checked 属性表示它是否被选中。
除此之外，代码里还有很多类似 weui-cells/weui-cell__bd 之类的属性，这个就是 WeUI 提供的美化 UI 控件外观的样式了，有需要对照WeUI文档抄过来即可，和 Bootstrap 差不多，就不展开讲了。读者可以尝试把这些属性删除后，看看多选框外观的变化。
上面的 WXML 中出现了两个非常关键的东西：
items ，它是数组类型的数据，提供多选框循环渲染所需的内容。checkboxChange() 方法，它的作用是监听多选框的状态，一但发生变化则执行某些逻辑处理。在传统的网页开发中，接下来就应该在页面底部写 Javascript 脚本，定义这些数据和方法了。但小程序强大的地方在于：它将视觉外观的渲染，和逻辑层彻底拆开了，各司其职。
来实际体验下。清空 pages/index/index.js 中的示例代码，写入下面这一坨：
// pages/index/index.jsPage({ // 页面持有的状态数据 data: {items: [{id: 3,content: '和丢丢去超市买白菜',checked: false,},{id: 2,content: '周二和老王吃烧烤',checked: false,},{id: 1,content: '凌晨给老板汇报工作',checked: false,}], }, // 监听多选框的状态改变事件 checkboxChange(e) {// 页面持有的数据// 获取本地数据的写法为 this.data.xxxconst items = JSON.parse(JSON.stringify(this.data.items))// checkbox持有的数据const values = e.detail.value// 将items和values进行对比// 根据values的值更新页面数据(即data.items)for (let i = 0, lenI = items.length; i < lenI; ++i) {items[i].checked = falsefor (let j = 0, lenJ = values.length; j < lenJ; ++j) {// values[j]是String// 将其转换为Intif (items[i].id === parseInt(values[j])) {items[i].checked = truebreak}}}// 更新数据this.setData({items: items})// 打印的内容会展现在调试器中console.log(this.data.items) },})
分解上面的内容：
小程序的每个页面，都需要在对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。所以你可以看到，这个 js 文件中所有代码都是在页面构造器 Page() 中的。data 字典对象，它持有了当前页面所有的本地状态。大多数情况下，你都应该将数据放到这里集中管理。一但其中的数据发生变化，小程序能够感知到并且立即自动更新页面中对应的元素。这种模式简化了程序员智力负担，你不再需要手动更新页面使其和数据相对应。这也就是传说中的数据绑定，或者叫数据驱动了。页面中所有需要用到的方法也都定义在 Page() 构造器中，比如 checkboxChange() 。几个值得关注的地方：
它的参数 e 是多选框控件传递进来的，包含整个控件的状态和数据。你可以用 console.log(e) 打印看看里面的内容。方法用了两个 for 循环检查了多选框的状态，如果当前条目被选中则将 items 中对应的条目设置为已选中（.checked = true），如果未被选中则设置为 .checked = false 。调用 Page 构造器内置的方法 this.setData({...}) 更新数据，以键值对的方式给出。注意页面持有的状态必须用 this.setData() ，不能手动更新（比如用等号赋值），否则将导致渲染不同步等 bug 。赋值局部变量时用 JSON.parse(JSON.stringify(...)) 实现了深拷贝。如果这里直接用等号赋值 const items = this.data.items ，仅仅是传递了对数据的”引用“（浅拷贝），在后续操作中将违背”不能手动更新本地状态”的原则。这就大功告成了。
注意到没有，逻辑层只关注了 data 中数据的状态。至于更新渲染的工作，框架自动帮你完成了。
保存文件，重载模拟器效果如下：
神奇吧。强烈建议第一次接触数据驱动模式的读者在这里停一下，对比观察 wxml 和 js 文件中各个控件、事件、数据、方法之间的对应关系。
Component构造器上面用的 Page 构造器适用于简单的页面，对于复杂的页面它可能并不好用。
幸好小程序还提供另一种选择： Component 构造器。虽说 Page 和 Component 有很多细节上的差别，但就目前这个简单的例子来说，唯一的区别是：方法需要放在 methods: { } 里面。
试试改造它：
// pages/index/index.jsComponent({ data: {items: [...] }, methods: {checkboxChange(e) {// ...} },})
功能完全一致。
后续章节将以 Compnent 构造器为主讲解，想了解它两更多区别和细节的可参考文档。
总结现在我们有个可以瞎点来点去的多选框列表了。但这没用啊，它只是个固定内容的小玩意。
下一章继续探讨小程序的数据输入，让示例真正动起来。
点赞 or 吐槽？来博客或GitHub评论区！
自定义列表的介绍场景使用介绍：在网页的底部导航中通常会使用自定义列表实现。
标签的组成介绍：
dl：表示自定义列表的整体，用于包含dt/dd标签。
dt：表示自定义列表的主题。
dd：表示自定义列表的针对主体的每一项内容。
显示特点的介绍：
dd前会默认显示缩进效果。
注意事项介绍：
dl标签中只允许包含dt/dd标签。
dt/dd标签可以包含任意内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>自定义列表效果展示</h4>
<dl>
<dt>效果展示</dt>
<dd>wangdongdong</dd>
</dl>
</body>
</html>
程序执行效果：
