为啥我的页面模板的from提交不了数据_小程序，组件与模板对比，及其简单使用

接着上篇小程序，如果你会这两种方式，代码就简洁了，重复代码也少了，这篇来说说组件(component)和模板(template)。

一.为啥要用组件呢？

正如上篇说的，为了页面简洁和代码的重复利用，复杂页面拆分成多个小组件，这样代码就低耦合了。

组件组成部分：

组件有四个文件，分别为.js、.wxml、.json和.wxss文件，类似page。

组件有.js文件就能进行逻辑处理，.js就是汽车发动机一样的，让页面有了灵魂。

模块组成部分：

模板template只有两个文件，分别为.wxml和.wxss文件。所以只能做显示，而不能进行逻辑处理。

组件和模板使用场景：

模板(template)一般只是重复性显示。

组件(component)一般是业务逻辑复杂时使用。

注意点：

1. 组件名称最好都用小写，并且用中横线隔离(例如：scroll-view)。

组件名称不能使用wx开头，否则会报错，因为小程序相关文件都是wx开头(例如.wxml、.wxs、wxss)。
组件中.json配置文件的 "component": true,不能修改哟，要不然外面使用不了该组件啦。

  "component": true,

最后来个简单实例：

首先，在根目录下新建component文件夹，component文件夹下新建list-comp文件夹，list-comp文件夹下右键选择新建Componnet，成功后就会出现四个文件，分别为 list-comp.js、list-comp.wxml、list-comp.json和list-comp.wxss文件。

其次，把上篇 list-temp.wxml 页面代码拷贝到 list-comp.wxml，list-temp.wxss里的样式代码拷贝到 list-comp.wxss，列表要循环的数组拷贝到list-comp.js中的data里。

最后，在要使用组件的page里的.json文件里配置下，对应的.wxml页面里直接使用.json

 "usingComponents": {    "list-comp":"/component/listcomp/list-comp"  },

wxml页面：

最后效果：

谢谢大家浏览，这篇写得不辛苦，哈哈，喜欢就关注和评论下。

我是只说代码的大饼。

为啥我的页面模板的from提交不了数据_小程序，组件与模板对比，及其简单使用相关推荐

为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
html表单中的数据提交后清空,怎么实现小程序中表单提交后自动清空内容
怎么实现小程序中表单提交后自动清空内容发布时间:2021-03-09 10:50:51 来源:亿速云阅读:88 作者:小新小编给大家分享一下怎么实现小程序中表单提交后自动清空内容,相信大部分人都 ...
开发提交审核流程_小程序如何提交审核，多久能通过？
小程序制作时需要代码开发的,因此,如果是想成为小程序商家的老板们,可以通过客源多这样的小程序制作公司来完成. 当然,老板们也可以多方面的了解一些小程序的制作过程,如果是想自己开发的程序员,这些审核流程 ...
微信小程序提交审核时提示：“ 小程序页面内容涉及账户充值服务，需补充商家自营-预付卡销售-发行方类目。请在基础信息处申请该类目”的解决方法
微信小程序在多次提交审核时,出现这个提示: 1: 小程序页面内容涉及账户充值服务,需补充商家自营-预付卡销售-发行方类目.请在基础信息处申请该类目,通过资质审核并在配置功能页添加符合该类目的功能页面. ...
小程序提交表单mysql_微信小程序form表单提交到MYSQL实例（PHP）
小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的 ...
woocommerce分类页面模板_小程序模板怎么设计才好看？
微信小程序界面的风格.色彩.版块布局都需要好好设计,但是大多数想要制作小程序的商家.个人都是新手,不懂设计知识.所以今天就跟大家科普下微信小程序模板设计要点,教你设计出一个美观的小程序. 1.选择高质 ...
小程序中ajax返回数据,微信小程序调用接口返回数据或提交数据
/*习惯用ajax了,则把(wx.request)封装一下, 调用方式 1.先引入:const http = require('../../js/http.js') 2.使用方式:http.post或 ...
点击微信返回时重复提交表单php,微信小程序遇坑——多次点击页面重复加载及数据重复提交...
目前总结解决方法:同时需要设置模块的函数,函数都可放置在util.js中去. 首先: 一.在util.js中放入如下两组函数 1. 设置点击后多久不能再次操作该 function throttle(f ...
小程序input提交后如何清空输入框数据：小程序与Vue的数据绑定方式
前言一直觉得,小程序与Vue有着神似之风.这一点在我第一天开始接触小程序时就这么认为,或者说,任何前端相关的语言,不管是node.js.Vue.angular.小程序,都和js有着千丝万缕的联系. ...

为啥我的页面模板的from提交不了数据_小程序，组件与模板对比，及其简单使用

为啥我的页面模板的from提交不了数据_小程序，组件与模板对比，及其简单使用相关推荐

最新文章

热门文章