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

(一)创建

找到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": {}
}
相关推荐
EasyNVR5 小时前
基于WebRTC与AI大模型接入EasyRTC:打造轻量级、高实时、强互动的嵌入式音视频解决方案
运维·服务器·微信·小程序·webrtc·p2p·智能硬件
我命由我123455 小时前
微信小程序 - 自定义实现分页功能
前端·微信小程序·小程序·前端框架·html·html5·js
HappyAcmen16 小时前
关于微信小程序的面试题及其解析
微信小程序·小程序·notepad++
乔冠宇16 小时前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
lvbb6617 小时前
微信小程序-路线规划功能
微信小程序·小程序·notepad++
爱上大树的小猪20 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
從南走到北1 天前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·开源·微信公众平台
黑云压城After1 天前
uniapp小程序自定义日历(签到、补签功能)
小程序·uni-app
黑云压城After1 天前
小程序(物流、快递),接入GPS北斗获取路线以及当前车辆位置
小程序
万岳科技程序员小金1 天前
互联网医院系统源码解析:如何开发智能化的电子处方小程序?
小程序·app开发·互联网医院系统源码·智慧医疗小程序·医院app