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

这篇具有很好参考价值的文章主要介绍了小程序基础学习(组件化)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(一)创建

        找到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": {}
}

 文章来源地址https://www.toymoban.com/news/detail-789664.html

到了这里,关于小程序基础学习(组件化)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序的组件化开发

    目录: 1 小程序组件化思想 2 自定义组件的过程 3 组件样式实现细节 4 组件使用过程通信 5 组件插槽定义使用 6 Component构造器 在小程序里面需要创建组件的话需要在最外层建component包,然后在使用新建component来创建类似page的4个文件: 组件和页面的区别就是,组件文件会有额

    2024年02月10日
    浏览(40)
  • 【前端知识】React 基础巩固(十七)——组件化开发(一)

    什么是组件化开发? 分而治之的思想 将一个页面拆分成一个个小的功能块 将应用抽象成一颗组件树 React的组件相对于Vue更加的灵活和多样 按照不同的方式可以分为很多类组件 根据 组件的定义方式 ,分为: 函数组件 、 类组件 根据 组件内部是否有状态需要维护 ,分为:

    2024年02月12日
    浏览(69)
  • 【前端知识】React 基础巩固(十九)——组件化开发(三)

    Main.jsx TabControl/index.jsx TabControl/style.css

    2024年02月13日
    浏览(55)
  • Android学习之路(23)组件化框架ARouter的使用

    支持直接解析标准URL进行跳转,并自动注入参数到目标页面中 支持多模块工程使用 支持添加多个拦截器,自定义拦截顺序 支持依赖注入,可单独作为依赖注入框架使用 支持InstantRun 支持MultiDex (Google方案) 映射关系按组分类、多级管理,按需初始化 支持用户指定全局降级与局

    2024年01月22日
    浏览(83)
  • Android学习之路(22) 从模块化到组件化

    Android 应用项目 , 都存在一个应用模块 ( Application Module ) , 在 build.gradle 构建脚本中 , 第一个插件配置 com.android.application , 表明 该 Module 编译打包后的输出是 APK 安装包 ; 该项目可以直接运行 ; 如果在 build.gradle 配置的是 com.android.library 插件 , 那么 编译 Module 打包后输出的是 a

    2024年01月22日
    浏览(50)
  • Vue学习Day3——生命周期\组件化

    Vue生命周期:就是一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段:创建响应式数据 2.挂载阶段:渲染模板 3.更新阶段:修改数据,更新视图 4.销毁阶段:销毁Vue实例 Vue生命周期过程中,会 自动运行一些函数 ,被称

    2024年02月15日
    浏览(47)
  • HarmonyOS(二)—— 初识ArkTS开发语言(下)之ArkTS声明式语法和组件化基础

    通过前面ArkTS开发语言(上)之TypeScript入门以及ArkTS开发语言(中)之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进,知道了ArkTS具备了声明式语法和组件化特性,今天,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使

    2024年02月04日
    浏览(58)
  • Android组件化架构开发--为什么要使用组件化?组件分层?组件路由的简单实现。

    1.1 单工程项目结构 一般我们都是一个业务建一个包 缺点: 各种业务代码混杂在同一个模块里,开发人员在开发、调测过程的效率越来越低,定位某个业务问题,需要在多个业务代码混合的模块中寻找和跳转。 需要了解各个业务的功能,避免代码的改动影响其它业务的功能

    2024年02月10日
    浏览(64)
  • 组件化开发之如何封装组件-react

    组件是构建用户界面的基本单元,它是一个独立的、可重用的、可组合的代码单元,用于表示UI的一部分。 人话:当谈论组件时,就像在搭积木一样,每个组件都是一个 独立的、可以重复使用 的代码块,用来构建网页或应用的各个部分。比如界面的布局,像按钮、文本输入

    2024年02月11日
    浏览(63)
  • Vue组件化开发--公共组件的封装

    目录 为什么要封装组件 应用场景 vue自己封装组件(局部、全局)  Vue组件的三要素 ①全局组件 1)方式:  2)示例: ②局部组件 1)方式: 2)示例: 命名规范:(注意) 脚手架vue-cli中的组件 父传子(props) 通过 $on 传递父组件方法 $parent获取父组件然后使用父组件中的

    2024年02月05日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包