微信小程序

2026/9/8 23:53:38 拓冰建站浏览量

一、项目、配置简介

1、目录文件介绍

二、小程序框架：逻辑层、视图层

1、wxml设置数据和js修改数据 this.setData()

2、点击事件 bindtap

wxml

<view> Hello {{name}}! </view><button bindtap="changeName"> Click me! </button>
</view>

Page({changeName(){this.setData({name:'MINA'})}
})

3、注册小程序

4、behaviors

5、Componet控件

6、路由；页面跳转

7、模块化 module.exports

8、列表渲染：for循环 wx:for

<view wx:for="{{array}}">{{item}}</view>

9、条件渲染 wx:if wx:elif wx:else

10、模版 <template>

<template name="staffName"><view>firstName:{{firstName}} ,  lastName:{{lastName}}</view>
</template><template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

1) <template name="staffName"> staffName 模板名， firstName:{{firstName}} , lastName:{{lastName}} 模版输出内容： firstName:xxx , lastName:xxx

2) is="staffName" is说明模版是哪一个 data中 ... 不能少

3）js中按照模版输出语句传入参数即可

11、wxss(css) 布局控件属性：宽高、边距、颜色、大小等 , 控件中引用class="xxx"

/* pages/test/test.wxss */
.normalPadding{margin-top: 10px;margin-left: 50px;color: #d61aaa;
}

<text class="normalPadding">WXSS样式测试</text>

12、选择器

13、事件绑定

1）bindtap 不拦截传递

2) catchtap 拦截传递

3）mut-bind 互斥事件绑定

14、事件对象

15、数据双向绑定 input ：多用于输入框

16、组件属性

17、获取界面节点信息

18、小程序随屏幕旋转

19、动画

三、小程序运行时

1、小程序生命周期

2、重启策略

3、被销毁数据保存

4、小程序手动更新

四、自定义组件

1、创建自定义组件

新建组件文件夹；新建component；

其他文件json中引用

布局中使用

2、组件模版

单slot 节点

多slot节点用 name区分

3、组件样式

4、组件样式隔离

5、外部样式引用

作用是统一样式，所有组件或page都可以直接使用，方便修改

新建外部组件

wxss 定义外部样式

需要使用的自定义组件中添加外部样式

自定义组件使用外部样式进行布局

Page中使用组件，并且使用外部样式

到这儿你可能发现外部样式并没有效果，赋值未成功，需要在app.wxss中引用你使用到的外部样式

6、引用页面 '~ '或父组件样式 '^'

7、Component 构造器

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

Component({behaviors: [],properties: {myProperty: { // 属性名type: String,value: ''},myProperty2: String // 简化的定义方式},data: {}, // 私有数据，可用于模板渲染lifetimes: {// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function () { },moved: function () { },detached: function () { },},// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖ready: function() { },pageLifetimes: {// 组件所在页面的生命周期函数show: function () { },hide: function () { },resize: function () { },},methods: {onMyButtonTap: function(){this.setData({// 更新属性和数据的方法与更新页面数据的方法类似})},// 内部方法建议以下划线开头_myPrivateMethod: function(){// 这里将 data.A[0].B 设为 'myPrivateData'this.setData({'A[0].B': 'myPrivateData'})},_propertyChange: function(newVal, oldVal) {}}})