小程序模板和组件的区别（点击 *** 作事件）

小程序在使用时，经常会在不同的页面用到相同的页面结构，这个时候我们如果一个个写的话没有必要，这个时候可以使用模板（template）或者组件（component）。

二者区别 在于：

1、需要定义模板：一个template.wxml文件中能写多个模板，用name区分，

下面定义两个模板

2、使耐迅庆用这两个模板，在对应的wxml文件引入：

3、上面在模板content里定义了点击事件subtractNum方法，因为template中没有js文件，因此template中的点击事件，在使用页面中的js里定义。

建议将有子列表昌握 *** 作交互的写成component。

示例：

对应组件的wxml跟page里的wxml一样：

2、使用自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值昌裤。

下一节将进入如何 组件向父级传值（组件通信）

小程序的设计效果与用户体验直接相关，一个设计美观的小程序，更能吸引用户流量，也能给用户好的体验，给商家带来更高转化率。不过大多数需要生成小程序的人都是不懂技术和设计知识的小白，这种情况下如果你需要一个美观的小程序，就要用到小程序页面设计模板。

这种模板该怎么用呢？小程序页面设计涉及到哪些部分？下面就跟大家科普一下小程序页面设计步骤：

首先你需要找一个设计美观的小程序模板，尽量找知名度较高的类型，比如「上线了」，模板设计感强，简洁现代风，视觉效果很好。新手注册账号后选择“创建小程序”，再选一个你喜欢的模板类型，这里我以电商模板为例给大家示范下如何使用。

点击模板进入小程序编辑页面，在【小程序设计】这一栏，你会看到“通用风格”，在这里你可设置小程序主题色、分页导航、启用搜索功能。在“页面设计”中，你可以添加各种功能版块，一个小程序主页就是由各种不同的版块组成的。

目前电商小程序中有11种不同的版块，你可千万不要一股脑儿全部堆砌上去，而要遵循一定逻辑。一般来说，一个小程序主页版块顺序是图片banner - 快捷按钮 - 商品分类，中间可根据需求适当穿插视频、标题、优惠券等不同功能版块。总之主页设计一定要流程明确，让用户能顺畅地使用页面，并且理解接下来的 *** 作。

新手尤其要注意头图banner版块，这部分一般展示主打产品、重要的品牌信息、当前进行的活动等，力求快速吸引到访客。你可以使用轮播图形式，也可以使用拼接图海报样式，如下图所示。图片可链接到相关商品或商品分类，还能跳转到其他小程序。

上线了小程序案例，禁止转载

快捷按钮则需要简明清晰，让访客能快速找到自己需要的商品类型。如果你自己不会设计快捷按钮图标，那么可以使用上银如颂线了自带的图标。

点击左侧【商店】栏，你可以添加新的商品，设置商品详情（包括名称、描述、图片、规格、价格等等），添加商品分类锋郑，开启评论系统，设置配送服务。

在【粉丝运营】模块，你可以根据不同标签筛选粉丝，详细了解店铺粉丝情况；在【营销中心】你可以添加各种营销工具，包括优惠券、拼团、分销系统等等，在节日适当做些营销活动，有利于你提升商品销量。

在【应用中心】你可以根据需求添加文章和直播模块，给自己的品牌做更详细说明，让粉丝更了解自己。全部搭建好并预览无误后，点击左下角“立即发布”，按要求注册授权等待审核橡祥就好了。

以上就是微信小程序页面设计的方法了，不需要你懂专业设计知识，所见即所得，能随时预览自己做出的小程序效果。现在各种小程序已经非常多，你若想让自己的小程序脱颖而出，给客户留下深刻印象，就一定要重视设计效果。

---