江西住房和城乡建设厅网站,公司注册资本,微信注册账号申请,全网霸屏推广营销系统最近自己在尝试使用AIGC写一个小程序#xff0c;页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制#xff0c;会经常出现对于需求理解跑偏情况#xff0c;需要不断的重复强调#xff0c;并纠正错误#xff0c;才能得到你想要的… 最近自己在尝试使用AIGC写一个小程序页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制会经常出现对于需求理解跑偏情况需要不断的重复强调并纠正错误才能得到你想要的内容)。 因为最近某些原因所处的环境网络没办法科学上网剩下的页面优化需要自己做。
组件
大家都比较讨厌屎山代码。所以我们在不断增加业务代码的过程中需要不断的重构代码。在代码的世界里有个词叫封装相信这个词大家都不陌生封装的方式有很多种在前端的世界里有个东西叫组件个人认为这也是封装的一部分。当然还有就是工具封装之前有写一篇文章叫【微信小程序篇】-请求封装这也是封装的一种方式。
微信小程序自定义组件
为什么在不论是VUE、小程序等会有一个组件的概念呢 核心是为了把一些公用的页面代码、交互代码、样式代码封装为一个整体让其他页面引用的时候不需要再写重复代码只需要引入组件通过组件的方式进行页面渲染不影响预期的设计同时减少重复的代码量。这是组件最重要的应用场景。
1.组件的定义及使用
在微信小程序的官方开发文档中已经很明确了组件的定义我们可以再一起来实际操作一番。我们一起来使用微信小程序原生实现一遍。 1.在目录components下创建组件目录demoCard 2.在demoCard下面创建component组件 3.确定组件创建成功
3.1 查看demoCard.json中component的值为true
{component: true,usingComponents: {}
}3.2 在demoCard.wxml中定义组件内容
view这里是demo组件/view4.在页面中引入组件
4.1 在页面的demo.json文件中增加组件引用
{usingComponents: {dynamicCard: /components/demoCard/demoCard}
}4.1 在页面的demo.wxml中使用组件
demoCard/demoCard2.外部数据传入组件
我们在实际使用中经常需要把页面的数据传入到组件中那么我们应该怎么传入呢下面我们开始实际操作 1.在demoCard.js/demoCard.ts这里我使用的是ts中的properties中定义我们需要的属性
Component({/*** 组件的属性列表*/properties: {dateStr: null},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})2.在使用组件的时候把值符给属性
demoCard dateStr测试传值/demoCard
!-- 或者 --
demoCard dateStr{{ demoDateStr }}/demoCard3.在组件的demoCard.wxml中使用属性
view这里是demo组件{{ dateStr }}/view这里我们会发现组件只要定义了属性这些属性作为外部传值的承载在组件内部页面我们可以和正常页面做数据使用。
关于组件就介绍到这里如果有问题可以在评论区留言记得三连哦。
