微信小程序开发编写 第1篇
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String,
value: ‘default value’,
data: {
// 这里是一些组件内部数据
someData: {}
methods: {
// 这里是一个自定义方法
customMethod: function(){}
. 声明引⼊⾃定义组件
⾸先要在⻚⾯的 json
⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
// 引用声明
“usingComponents”: {
// 要使用的组件的名称 // 组件的路径
“my-header”:“/components/myHeader/myHeader”
. ⻚⾯中使⽤⾃定义组件
用来替代slot的
. 其他属性
. 定义段与⽰例⽅法
component
构造器可⽤于定义组件,调⽤component
构造器时可以指定组件的属性、数据、⽅法等。
| 定义段 | 类型 | 是否必填 | 描述 |
| — | — | — | — |
| properties | Object Map | 否 | 组件的对外属性,是属性名到属性设置的映射表,参⻅下⽂ |
| data | Object | 否 | 组件的内部数据,和 properties
⼀同⽤于组件的模板渲染 |
| observers | Object | 否 | 组件数据字段监听器,⽤于监听 properties 和 data 的变化,参⻅ 数据监听器 |
| methods | Object | 否 | 组件的⽅法,包括事件响应函数和任意的⾃定义⽅法,关于事件响应函数的使⽤,参⻅ 组件事件 |
| created | Function | 否 | 组件⽣命周期函数,在组件实例刚刚被创建时执⾏,注意此时不能调⽤ sseettDDaattaa ,参⻅ 组件⽣命周期 |
| attached | Function | 否 | 组件⽣命周期函数,在组件实例进⼊⻚⾯节点树时执⾏,参⻅ 组件⽣命周期 |
| ready | Function | 否 | 组件⽣命周期函数,在组件布局完成后执⾏,参⻅ 组件⽣命周期 |
| moved | Function | 否 | 组件⽣命周期函数,在组件实例被移动到节点树另⼀个位置时执⾏,参⻅ 组件⽣命周期 |
| detached | Function | 否 | 组件⽣命周期函数,在组件实例被从⻚⾯节点树移除时执⾏,参⻅ 组件⽣命周期 |
. 组件-自定义组件传参
⽗组件通过属性的⽅式给⼦组件传递参数
⼦组件通过事件的⽅式向⽗组件传递参数
⽗组件 把数据 {{tabs}}
传递到 ⼦组件的 tabItems
属性中
⽗组件 监听 onMyTab
事件
⼦组件 触发 bindmytap
中的 mytap
事件
①. ⾃定义组件触发事件时,需要使⽤ triggerEvent
⽅法,指定事件名、detail
对象
微信小程序开发编写 第2篇
提示:提交审核阶段有些需要注意的事项,一个是小程序的代码最大限制为2M,如果有分包的话可以有更大容量,如果您需要与后端交互,建议把所有相关的图片放到服务器上,另一个就是注册小程序前需检查小程序的logo和名字是否已经被注册过,是否被别人注册了商标
代码以及课件和视频资源领取方式: 关注公众号:小猿搜码 后台发送:csdn小程序
微信小程序开发编写 第3篇
1. 小程序中组件的分类
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
① 视图容器 ② 基础内容 ③ 表单组件 ④ 导航组件 ⑤ 媒体组件 ⑥ map 地图组件 ⑦ canvas 画布组件 ⑧ 开放能力 ⑨ 无障碍访问
2. 常用的视图容器类组件
① view ⚫ 普通视图区域 ⚫ 类似于 HTML 中的 div,是一个块级元素 ⚫ 常用来实现页面的布局效果 ② scroll-view ⚫ 可滚动的视图区域 ⚫ 常用来实现滚动列表效果 ③ swiper 和 swiper-item ⚫ 轮播图容器组件 和 轮播图 item 组件
右下角第4段代码解释:
.container1 这里的.表示选择器是一个类选择器。container1是类名,这意味着这个样式规则将应用于所有具有container1类的HTML元素。
display: flex;: 当一个元素设置为display: flex;后,它的直接子元素将按照弹性盒模型(Flexbox)的布局方式排列。Flexbox是一种用于在容器内分配和对齐子元素的一维布局方法。
justify-content: space-around justify-content属性用于设置弹性容器内弹性项目在主轴上的对齐方式。 space-around值表示弹性项目将在主轴上平均分布,每个项目两侧的空间相等