微信小程序基础
2020-08-10 10:41:18 1 举报
AI智能生成
官方定义:小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。体现了“用完即走”的理念,用户不关心是否安装太多应用的问题,应用将无处不在,随时随地可用,但又无需安装卸载。
作者其他创作
大纲/内容
微信小程序基础
微信小程序介绍
关键词:无需下载安装卸载(不占用手机空间)、触手可及、用完即走
解决的主要问题:手机安装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 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
key
模版:WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
使用模版:使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入
引用
WXML 提供两种文件引用方式import和include。
import可以在该文件中使用目标文件定义的template
import 的作用域
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置
事件
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
与 CSS 相比,WXSS 扩展的特性
尺寸单位:rpx(responsive pixel): 可以根据屏幕宽度进行自适应
样式导入:使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
内联样式:框架组件上支持使用 style、class 属性来控制组件的样式。
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
选择器
组件
定义:组件是视图层的基本组成单元。
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
属性类型
Boolean\t布尔值
Number\t数字
String\t字符串
Array\t数组
Object\t对象
EventHandler\t事件处理函数名
Any\t任意属性
共同属性类型
id\tString\t组件的唯一标示\t保持整个页面唯一
class\tString\t组件的样式类\t在对应的 WXSS 中定义的样式类
style\tString\t组件的内联样式\t可以动态设置的内联样式
hidden\tBoolean\t组件是否显示\t所有组件默认显示
data-*\tAny\t自定义属性\t组件上触发的事件时,会发送给事件处理函数
bind* / catch*\tEventHandler\t组件的事件
特殊属性
组件列表
视图容器(View Container)
view\t视图容器
scroll-view\t可滚动视图容器
swiper\t滑块视图容器
基础内容(Basic Content)
icon\t图标
text\t文字
progress\t进度条
表单(Form)
button\t按钮
form\t表单
input\t输入框
checkbox\t多项选择器
radio\t单项选择器
picker\t列表选择器
picker-view\t内嵌列表选择器
slider\t滚动选择器
switch\t开关选择器
label\t标签
导航(Navigation)
navigator\t应用链接
多媒体(Media)
audio\t音频
image\t图片
video\t视频
地图(Map)
map\t地图
画布(Canvas)
canvas\t画布
微信小程序为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
API说明
微信小程序提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
官方定义:小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。体现了“用完即走”的理念,用户不关心是否安装太多应用的问题,应用将无处不在,随时随地可用,但又无需安装卸载。
放在根目录下
0 条评论
回复 删除
下一页