

首页  思维导图  详情



微信小程序开发基础知识点笔记

2022-11-01 14:32:41   0  举报





AI智能生成

微信小程序开发基础知识点笔记

微信小程序开发

微信小程序

模版推荐

作者其他创作

大纲/内容

微信小程序介绍

关键词：无需下载安装卸载（&lt;font color=&quot;#662c90&quot;&gt;&lt;u&gt;不占用手机空间&lt;/u&gt;&lt;/font&gt;）、触手可及、用完即走

解决的主要问题：手机安装APP过多，占用手机空间

发展历程

2016年1月9日，微信团队首次提出应用号概念

2016年9月22日，微信公众平台发送小程序内测邀请，内测名额为200个

2016年11月3日，微信小程序对外公测，开发完成后可以提交审核，但公测期间不能发布

2016年12月28日，张小龙公开课针对微信小程序的几点疑惑，包括没有应用商店、没有推送消息等，解释了微信小程序能干什么不能干什么

2016年12月30日，威信公众平台对外公告，上线微信小程序，最多可生成10000个带参数的二维码

2017年1月9日，微信小程序上线

微信小程序提供的功能

支持分享当前页功能，分享到群或者单个好友

小程序线下扫码功能：点餐排队扫一扫

小程序挂起状态：来电话挂起

小程序的消息通知：不同于公众号无主动消息推送

小程序和公众号的关联

小程序的搜索和历史列表：支持关键字搜索

微信小程序不提供的功能

小程序中没有集中入口，没有应用商店

小程序没有订阅关系

小程序不能推送消息

开发工具的使用

开发文档：http://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112

框架文件

全局文件

app.json小程序公共设置

配置页面路径

配置窗口表现

配置标签导航

配置网络超时

配置debug模式

app.js小程序逻辑

定义小程序生命周期函数

定义小程序全局函数

定义小程序全局数据

app.wxss小程序公共样式表

定义公共样式表

工具类文件

util.js

注册函数

处理时间格式的文件

字符串处理文件

页面文件

logs.wxml页面文件

logs.json可以复写的窗口配置文件

logs.wxss页面样式文件

logs.js业务逻辑文件

逻辑层

主要用于处理业务逻辑。提供相关数据

模块化：在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

视图层

将逻辑层的数据渲染成视图页面

WXML(WeiXin Markup language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定：WXML 中的动态数据均来自对应 Page 的 data。

简单绑定：数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

组件属性(需要在双引号之内)

控制属性(需要在双引号之内)

关键字(需要在双引号之内)

运算：可以在 {{}} 内进行简单的运算

三元运算

算数运算

逻辑判断

字符串运算

数据路径运算

组合：可以在 Mustache 内直接进行组合，构成新的对象或者数组。

条件渲染：在框架中，使用 wx:if=&quot;{{condition}}&quot; 来判断是否需要渲染该代码块

block

hidden

列表渲染：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

block

key

模版：WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

使用模版：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

引用

WXML 提供两种文件引用方式import和include。

import可以在该文件中使用目标文件定义的template

import 的作用域

include 可以将目标文件除了 &lt;template/&gt; &lt;wxs/&gt; 外的整个代码引入，相当于是拷贝到 include 位置

事件

事件是视图层到逻辑层的通讯方式。 &lt;br&gt;事件可以将用户的行为反馈到逻辑层进行处理。 &lt;br&gt;事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 &lt;br&gt;事件对象可以携带额外信息，如 id, dataset, touches。

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

与 CSS 相比，WXSS 扩展的特性

尺寸单位：rpx（responsive pixel）: 可以根据屏幕宽度进行自适应

样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

选择器

组件

定义：组件是视图层的基本组成单元。

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

属性类型

Boolean 布尔值

Number 数字

String 字符串

Array 数组

Object 对象

EventHandler 事件处理函数名

Any 任意属性

共同属性类型

id String 组件的唯一标示保持整个页面唯一

class String 组件的样式类在对应的 WXSS 中定义的样式类

style String 组件的内联样式可以动态设置的内联样式

hidden Boolean 组件是否显示所有组件默认显示

data-* Any 自定义属性组件上触发的事件时，会发送给事件处理函数

bind* / catch* EventHandler 组件的事件

特殊属性

组件列表

视图容器(View Container)

view 视图容器

scroll-view 可滚动视图容器

swiper 滑块视图容器

基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

表单(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

picker-view 内嵌列表选择器

slider 滚动选择器

switch 开关选择器

label 标签

导航(Navigation)

navigator 应用链接

多媒体(Media)

audio 音频

image 图片

video 视频

地图(Map)

map 地图

画布(Canvas)

canvas 画布

微信小程序为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

API说明

微信小程序提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

放在根目录下

 Collect

Get Started

微信小程序直播方法培训

 Collect

Get Started

微信小程序初步了解

 Collect

Get Started

《微信小程序开发基础》读书笔记

 Collect

Get Started

微信小程序开发基础知识





0 条评论

下一页