微信小程序开发基础知识点笔记
2022-11-01 14:32:41 0 举报AI智能生成
微信小程序开发基础知识点笔记
作者其他创作
大纲/内容
微信小程序介绍
关键词：无需下载安装卸载（<font color="#662c90"><u>不占用手机空间</u></font>）、触手可及、用完即走
解决的主要问题：手机安装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="{{condition}}" 来判断是否需要渲染该代码块
block
hidden
列表渲染：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
block
key
模版：WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
使用模版：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
引用
WXML 提供两种文件引用方式import和include。
import可以在该文件中使用目标文件定义的template
import 的作用域
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
事件
事件是视图层到逻辑层的通讯方式。 <br>事件可以将用户的行为反馈到逻辑层进行处理。 <br>事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 <br>事件对象可以携带额外信息，如 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，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
放在根目录下
0 条评论
下一页
