小程序基础学习(组件化)

(一)创建

找到components文件夹下面创建新的文件夹

然后再文件夹内创建component格式的文件

创建后这样

我创建的是my-info的文件夹以及my-info的components文件,跟着普通的页面一样

(二) 注册组件

找到你需要使用组件的json文件中注册组件即可

第一个值是你定义组件起的名称,第二个值是组件的地址,然后在组件中写入代码

(三) 使用

找到你需要使用组件的地方加入你组成的组件名称即可

最后分享一下组件增加后一些内容的代码。仅供参考

复制代码
<!--components/my-info/my-info.wxml-->
<view class="text">
<text class="texts">{{text}}</text>
</view>
<view class="number">
<text class="number">{{number}}</text>
</view>

/* components/my-info/my-info.wxss */
.texts{
  color: blue;
  font-size: large;

}
.number{
  color: yellow;
  font-size: larger;
}

// components/my-info/my-info.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    "number":100,
    "text":"牛马程序员在此"

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

{
  "component": true,
  "usingComponents": {}
}
相关推荐
M哥支付3 小时前
快捷支付 VS 网关支付 安全对比
服务器·网络·其他·微信·金融
bug总结5 小时前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
Quor5 小时前
小程序工作室:AI 生成即运行的可视化工作台
人工智能·小程序
盟道科技10 小时前
小程序电商订单超时自动取消的三种实现方案:定时扫描、Redis 过期监听、延迟消息对比与生产落地
数据库·redis·小程序
lhldsg11 小时前
智慧场馆解决方案小程序系统:从架构设计到落地实践
java·小程序·需求分析
凉红茶12 小时前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程
CRMEB系统商城13 小时前
汽车养护连锁的数字化底座CRMEB 多门店系统实战方案
java·开发语言·小程序·开源·汽车
小马过河R13 小时前
微信小程序自定义登录态维护:从入门到生产级落地
后端·微信小程序·小程序·架构·登录态
火眼金睛炼单词13 小时前
零基础高效记忆单词:小程序学习法的完整实操指南
学习·小程序
vx+_bysj686913 小时前
springboot 旅行小程序97353
spring boot·后端·小程序·旅行小程序