小程序（一）使用 Component 构造器

最新推荐文章于 2022-11-16 22:14:43 发布

华[sir]

最新推荐文章于 2022-11-16 22:14:43 发布

阅读量865

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_32509065/article/details/105385220

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序文档

一.主要文件与html的关系

wxml	wxss	js	json配置文件
html	css	js

组件- 就像HTML 的 div, p 等标签
api-小程序提供了很多 API 给开发者去使用,js语法
模块化
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

二.小程序的运行环境

wxml wxss	js
渲染层	逻辑层 -App Service
WebView线程	JsCore线程

这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发。

三.框架

响应的数据绑定：在逻辑层修改数据，视图层就会做相应的更新。
场景值：用来描述用户进入小程序的路径。

平台差异
尽管各运行环境是十分相似的，但是还是有些许区别：JavaScript 语法和 API 支持不一致：语法上开发者可以通过开启 ES6 转 ES5 的功能来规避（详情）；此外，小程序基础库内置了必要的Polyfill，来弥补API的差异（详情)。
WXSS 渲染表现不一致：尽管可以通过开启样式补全来规避大部分的问题，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

四.创建自定义组件

类似于页面，需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

组件wxss: 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器，这里的样式只应用于这个自定义组件。
组件的 js 文件： 需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" } }

在组件模板中可以提供一个节点，引用时可插入其他组件，默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。

五.使用 Component 构造器

页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。

{
  "usingComponents": {}
}

组件的生命周期
指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
behaviors 是用于组件间代码共享的特性，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior ，behavior 也可以引用其他 behavior 。

var pageCommonBehavior = require('./common-behavior');
Component({

  behaviors: [pageCommonBehavior],//该组件应用了js模板来初始化

  properties: {//使用组件时可以给属性赋值
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    }) },
  },
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
 observers: { //数据监听器,可用通配符，参考文档
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
  },

  methods: { 
  //组件其他函数写在这
    onMyButtonTap: function(){
      this.setData({
      })
    },
 
  }
})

组件其它特性：抽象节点。。。
第三方自定义组件： 小程序从基础库版本 2.2.1 开始支持使用 npm 安装第三方包，因此也支持开发和使用第三方自定义组件包。
插件： 一个插件可以包含若干个自定义组件、页面，和一组 js 接口。