首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

微信小程序整理笔记

2024-12-20 来源:化拓教育网

跳一跳的出现,带来了小程序又一个春天。

今天整理小程序的各种组件和api。整理完笔记应该要开始我的小程序填坑之旅了。

1.微信小程序开发者工具

Quick Start 项目结构

3. 约定大于配置

4. 小程序的wxml文件必须严格遵循xml的语法

5. 页面文件组成

6. 小程序配置文件, 页面配置 优先于 项目配置

二.小程序框架

1. 逻辑层的 JavaScript

    -> 微信小程序里面的JavaScript 仅仅只指ECMAScript

    -> 微信小程序JavaScript中是没有BOM和DOM对象的

三.应用的生命周期

1. Page({  })  // 创建一个页面实例对象

2. onLoad : 页面加载, 这个页面即将要工作了, 适合去做数据初始化

    onShow : 页面进入到焦点状态 ( 前台展示 )

    onHide : 页面隐藏的时候触发

    onReady : 当页面准备好了, 页面渲染完成

    onUnload : 页面卸载 , 当页面被销毁

四. 数据绑定

1. mustache 小胡子语法 : 专门用于输出逻辑层暴露的数据

    -->  {{message}}

2. mustache 还可以作用在元素的 内容 和 属性上

    --> 

3. 可以做字符串的拼接, 也可以支持一些简单的运算符, 逻辑判断, 三元表达式也都可以

4. 小程序的 wxml 中, 属性的值 如果只是在双引号内部, 它永远是字符串

5. mustache 可以用于声明有类型的值  

        --->  例如 :   // 这样才是给checked赋了一个Boolean类型的false值

6. 在 data 中, 只能暴露数据成员, 不能暴露函数

7. wxs标签 类似于 咱们在 html 中的 script标签,  可以定义一些行内脚本, 

    // 这里可以导出一个对象, 这个对象可以直接在界面上使用

    // 这里的代码必须遵循 commonjs规范

module.exports = {

addPostfix: function(input){

return input + 'wxs';

}

}

五. 条件渲染

1. 对于频繁需要被切换显示的元素, 不应该是用ws:if 属性 影响性能, 对于永远不会变了的元素可以使用这个属性进行判断

2. 可以使用hidden属性: true就是隐藏 , false就是显示 , 效率会更高一些

3. block 只是一个包装元素, 不会被界面的结构造成任何影响

六. 列表渲染

1. wx:for

七. 事件处理

1. 通过bindtap="事件名称" 来绑定事件, 但是会产生冒泡

2. 通过 catchtap 绑定的事件不会有冒泡

3. 可以通过 data-xx 属性, 可以给事件处理函数传递额外的参数

八. 单向数据流

九.小程序是没有跨域问题的

显示全文