微信小程序开发基础知识点笔记
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
开发工具的使用
配置页面路径
配置窗口表现
配置标签导航
配置网络超时
配置debug模式
app.json小程序公共设置
定义小程序生命周期函数
定义小程序全局函数
定义小程序全局数据
app.js小程序逻辑
定义公共样式表
app.wxss小程序公共样式表
全局文件
注册函数
util.js
处理时间格式的文件
字符串处理文件
工具类文件
logs.wxml页面文件
logs.json可以复写的窗口配置文件
logs.wxss页面样式文件
logs.js业务逻辑文件
页面文件
框架文件
主要用于处理业务逻辑。提供相关数据
模块化：在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
逻辑层
将逻辑层的数据渲染成视图页面
内容
组件属性(需要在双引号之内)
控制属性(需要在双引号之内)
关键字(需要在双引号之内)
三元运算
算数运算
逻辑判断
字符串运算
数据路径运算
运算：可以在 {{}} 内进行简单的运算
组合：可以在 Mustache 内直接进行组合，构成新的对象或者数组。
简单绑定：数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
数据绑定：WXML 中的动态数据均来自对应 Page 的 data。
block
hidden
条件渲染：在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块
key
列表渲染：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
使用模版：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
模版：WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
import 的作用域
import可以在该文件中使用目标文件定义的template
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
WXML 提供两种文件引用方式import和include。
引用
事件
WXML(WeiXin Markup language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
WXSS 用来决定 WXML 的组件应该怎么显示。
尺寸单位：rpx（responsive pixel）: 可以根据屏幕宽度进行自适应
样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
与 CSS 相比，WXSS 扩展的特性
内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
全局样式与局部样式
选择器
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
视图层
定义：组件是视图层的基本组成单元。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
Boolean 布尔值
Number 数字
String 字符串
Array 数组
Object 对象
EventHandler 事件处理函数名
Any 任意属性
属性类型
id String 组件的唯一标示 保持整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
bind* / catch* EventHandler 组件的事件
共同属性类型
特殊属性
view 视图容器
scroll-view 可滚动视图容器
swiper 滑块视图容器
视图容器(View Container)
icon 图标
text 文字
progress 进度条
基础内容(Basic Content)
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
picker-view 内嵌列表选择器
slider 滚动选择器
switch 开关选择器
label 标签
表单(Form)
navigator 应用链接
导航(Navigation)
audio 音频
image 图片
video 视频
多媒体(Media)
map 地图
地图(Map)
canvas 画布
画布(Canvas)
组件列表
微信小程序为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
组件
微信小程序提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
API说明
放在根目录下
微信小程序开发基础知识点笔记
0 条评论
回复 删除
下一页
