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

(一)创建

找到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": {}
}
相关推荐
Lucky小黄人9 小时前
微信小程序开发常见报错
微信小程序·小程序
微爱帮监所写信寄信16 小时前
微爱帮监狱寄信写信工具照片高清处理技术架构
开发语言·人工智能·网络协议·微信·php
Stanford_110618 小时前
【2026新年启程】学习之路,探索之路,技术之路,成长之路……都与你同行!!!
前端·c++·学习·微信小程序·排序算法·微信开放平台
初学者521319 小时前
微信小程序调用录音没反应,本地开发测试却没问题,operateRecorderfail appid privacy api banned
微信小程序·小程序
微爱帮监所写信寄信19 小时前
微爱帮监狱寄信写信小程序信件内容实时保存技术方案
java·服务器·开发语言·前端·小程序
孙严Pay21 小时前
代付业务解析
笔记·科技·计算机网络·其他·微信
说私域21 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序的内容价值生成与多点选择传播策略研究
人工智能·微信·小程序·开源
微爱帮监所写信寄信21 小时前
微爱帮监狱寄信写信小程序PHP底层优化框架
java·开发语言·数据库·spring·微信·php·mybatis
孙严Pay1 天前
分享三种不同的支付体验,各自有着不同的特点与适用场景。
笔记·科技·计算机网络·其他·微信
资深数据库专家1 天前
window 11 检测到一个 TDI 筛选器(\Driver\gwredirector)。该筛选器尚未通过 Microsoft 认证 。 如何解决
经验分享·微信·微信公众平台·新浪微博