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

(一)创建

找到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": {}
}
相关推荐
wx_ywyy67984 分钟前
小程序定制开发实战:需求拆解、UI 设计与个性化功能落地流程
小程序·小程序开发·小程序制作·小程序搭建·小程序设计·小程序定制开发·小程序开发搭建
亮子AI7 分钟前
【小程序】详细比较微信小程序的 onLoad 和 onShow
微信小程序·小程序
权泽谦8 分钟前
用 Python 做一个天气预报桌面小程序(附源码 + 打包与部署指导)
开发语言·python·小程序
小小王app小程序开发10 分钟前
盲盒抽赏小程序爬塔玩法分析:技术实现 + 留存破局,打造长效抽赏生态
小程序
阿里花盘1 小时前
教育培训机构如何搭建自己的在线教育小程序?
小程序·哈希算法·剪枝·霍夫曼树
2501_916007472 小时前
手机使用过的痕迹能查到吗?完整查询指南与步骤
android·ios·智能手机·小程序·uni-app·iphone·webview
TiAmo zhang3 小时前
微信小程序开发案例 | 极简清单小程序(下)
微信小程序·小程序·notepad++
從南走到北3 小时前
JAVA国际版同城外卖跑腿团购到店跑腿多合一APP系统源码支持Android+IOS+H5
android·java·ios·微信小程序·小程序
说私域7 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的赛道力构建与品牌发展研究
人工智能·小程序
码起来呗16 小时前
基于微信小程序的旅游攻略分享互动平台设计与实现-项目分享
微信小程序·小程序·旅游