微信小程序自学之路day01 - 微信小程序基本认知
一、微信小程序介绍
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
二、创建第一个小程序项目
2.1 打开微信开发者工具-选择小程序
2.2 选择模板
刚开始,就用js来试试。
2.3 小程序的初始模板
三、目录基本结构
3.1 文件作用
文件名 | 含义 |
---|---|
pages | 用来存放所有小程序的页面 (主要) |
utils | 用来存放工具性质的模块(例如:格式化时间的自定义模块) |
app.js | 小程序项目的入口文件 (主要) |
app.json | 小程序项目的全局配置文件 (主要) |
app.wxss | 小程序项目的全局样式文件 |
project.config.json | 项目的配置文件 |
sitemap.json | 用来配置小程序及其页面是否允许被微信索引 |
3.2 认识页面(Page)
文件名 | 含义 |
---|---|
.js | 页面的脚本文件,存放页面的数据、事件处理函数等 |
.json | 文件( 当前页面的配置文件,配置窗口的外观、表现等) |
.wxml | 文件(页面的模板结构文件) |
.wxss | 文件( 当前页面的样式表CSS文件) |
红色方框分别是两个页面。
四、认识小程序中的JSON配置文件
---
4.1 JSON配置介绍
小程序项目中有4种JSON配置文件,分别是:
- 项目根目录中的app.json配置文件
- 项目根目录中的project.config.json 配置文件
- 项目根目录中的sitemap.json配置文件
- 每个页面文件夹中的.json配置文件
4.2 app.json
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab 等。
Demo项目里边的app.json配置内容如下:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
简单了解下这4个配置项的作用
- pages: 用来记录当前小程序所有页面的路径
- window: 全局定义小程序所有页面的背景色、文字颜色等
- style: 全局定义小程序组件所使用的样式版本
- sitemapLocation: 用来指明sitemap.json的位置
4.3 project.config.json
project.config.json是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:
setting
中保存了编译相关的配置
projectname
中保存的是项目名称
appid
中保存的是小程序的账号ID
{
"description": "项目配置文件",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"bundle": false,
"userConfirmedBundleSwitch": false,
"urlCheck": true,
"scopeDataCheck": false,
"coverView": true,
"es6": true,
"postcss": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"preloadBackgroundData": false,
"minified": true,
"autoAudits": false,
"newFeature": false,
"uglifyFileName": false,
"uploadWithSourceMap": true,
"useIsolateContext": true,
"nodeModules": false,
"enhance": true,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"enableEngineNative": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"showES6CompileOption": false,
"minifyWXML": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"compileType": "miniprogram",
"libVersion": "2.19.4",
"appid": "wxbafd23482e0b976c",
"projectname": "miniprogram-92",
"condition": {
},
"editorSetting": {
"tabIndent": "auto",
"tabSize": 4
}
}
4.4 sitemap.json
微信现已开放小程序内搜索
,效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许 微信索引
。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
Tip:
sitemap的索引提示是默认开启
的,如需要关闭sitemap的索引提示,可在小程序项目配置文件project.config.json
的setting
中配置字段checkSiteMap
为false
4.5 页面的.json配置
小程序中的每一个页面,可以使用.json 文件
来对本页面的窗口外观进行配置
,页面中的配置项会覆盖 app.json的window中相同的配置项
。
五、新建一个页面
创建页面流程:
- 打开根目录app.json
- 找到pages配置项
- 页面创建
Tip:
pages是一个数组配置项,创建页面的语法是:"pages/文件夹名称/页面文件名称"
,按照开发规范,文件夹名称
和页面文件名
最好保持一致。如:"pages/test/test"
。默认排在第一位的页面是首页
。刷新之后就创建完成了,会在pages文件中生成一个文件夹里面有4个
文件,分别是样式文件
、模板文件
、数据文件
、页面配置JSON文件
。
六、页面目录中wxml与wxss
6.1 wxml
WXML
(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构
,其作用类似于网页开发中的HTML。白话就是一种开发模板。
WXML和HTML的区别:
- 标签名称不同:
- HTML ( div, span, img, a)
- WXML (view, text, image, navigator)
- 属性节点不同:
<a href="#">超链接</a>
<navigator url=" /pages/ home/home"></navigator>
- 提供了类似于Vue中的模板语法:
- 数据绑定
- 列表渲染
- 条件渲染
6.2 wxss
WXSS
(weixin Style Sheets)是一套样式语言
,用于描述WXML的组件样式,类似于网页开发的CSS。
WXSS与CSS的区别
-
增加了rpx尺寸单位
- CSS中需要手动进行像素单位换算,如:rem;
- WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
-
提供了全局样式和局部样式
- 项目根目录中的app.wxss会用于所有小程序页面
- 局部页面的.wxss样式仅对当前页面生效
-
WXSS仅支持部分CSS选择器
.class和#id
element
并集选择器、后代选择器
::after和::before等伪类选择器
七、 小程序js的分类
三大分类:
-
app.js
是
整个小程序项目的入口文件
,通过调用App()函数
来启动整个小程序 -
页面的.js文件
是页面的入口文件,通过调用Page()函数来创建并运行页面
-
普通的.js文件
用来封装普通的功能模块文件,用来封装公共的函数或属性供页面使用
八、小程序的宿主环境
8.1 什么是宿主环境
宿主
环境指的是程序运行所必须的依赖环境
。
微信小程序的宿主环境
就是微信Android APP
8.2 小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件
- API
8.3 小程序宿主环境的-通信模型
8.3.1 通信主体
小程序的通信主体是渲染层和逻辑层:
- WXML和WXSS样式工作在渲染层
- JS工作在逻辑层
8.3.2 通信模型
小程序中的通信模型分为两部分:
- 渲染层和逻辑层之间的通信
- 有微信客户端进行转发
- 逻辑层和第三方服务器之间的通信
- 由微信客户端进行转发
8.4 小程序运行机制
8.4.1 小程序启动过程
- 把小程序代码包下载到本地
- 解析app.js全局配置文件
- 执行app.js小程序入口文件,调用App()创建小程序实例
- 渲染小程序首页
- 小程序启动完成
8.4.2 页面渲染的过程
- 加载解析页面的.json配置文件
- 加载页面的.wxml模板和wxss样式
- 执行页面的.js文件,调用Page()创建页面实例
- 页面完成渲染
九、组件
微信小程序官网组件文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
9.1 组件分类
小程序组件由宿主环境提供的,一共9大类:
视图容器
基础内容
表单组件
导航组件
- 媒体组件
- map地图组件
- canvas画布组件
- 开放功能
- 无障碍访问
Tip: 前四个组件比较常用!
9.2 常用的视图组件
9.2.1 view
- 普通视图区域
- 类似于HTML中的div盒子,是一个块级元素
- 常用来实现页面的布局效果
view - 基本使用
实现flex横向布局效果:
<!--pages/list/list.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
/*WXSS样式文件代码*/
/* 父容器-视图容器 */
.container1{
display: flex;
justify-content: space-around;
}
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/* 3个子元素盒子 */
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightskyblue;
}
.container1 view:nth-child(3){
background-color: lightcoral;
}
9.2.2 scroll-view - 可视滚动
- 可以滚动的视图区域
- 常用来实现滚动列表效果
scroll-view - 基本使用
纵向滚动 - scroll-y
<!--pages/list/list.wxml-->
// scroll-y="true" 开启允许纵向滚动
<scroll-view class="container1" scroll-y="true">
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
/* 父容器-视图容器 */
.container1{
/* display: flex;
justify-content: space-around; */
border:1px solid red;
/* 给scroll-view 固定高度 */
height: 120px;
width: 100px;
}
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/* 3个子元素盒子 */
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightskyblue;
}
.container1 view:nth-child(3){
background-color: lightcoral;
}
9.2.3 swiper和swiper-item 轮播图
轮播图容器组件
和轮播图item组件
<!-- 轮播图区域 -->
<!-- indicator-dots属性:显示面板指示点 -->
<swiper class="swiper-container" indicator-dots="true">
<!-- 第一项 -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- 第二项 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 第三项 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
/* 父容器-视图容器 */
.swiper-container{
/* 轮播图容器的高度 */
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
/* 3个子元素盒子 */
.swiper-item:nth-child(1).item{
background-color: lightgreen;
}
.swiper-item:nth-child(2).item{
background-color: lightskyblue;
}
.swiper-item:nth-child(3).item{
background-color: rgb(250, 135, 141);
}
swiper 常用属性
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | boolean | false | 是否显示面板指示点 |
indicator-color | color | rgba(0,0,0,.3) | 指示点颜色 |
indicator-active-color | boolean | #000000 | 当前选中的指示点颜色 |
interval | number | 5000 | 自动切换时间间隔 毫秒 |
autoplay | boolean | false | 是否自动切换 |
circular | Boolean | false | 是否采用衔接滑动 |
通用属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 | |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 | |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 | |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 | |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 | |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 | |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 | |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 | |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 | |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 | |
easing-function | string | “default” | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 | |
合法值说明default默认缓动函数linear线性动画easeInCubic缓入动画easeOutCubic缓出动画easeInOutCubic缓入缓出动画 | ||||||
bindchange | eventhandle | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | 1.0.0 | ||
bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}。Skyline 仅支持非 worklet 的组件方法作为回调。 | 2.4.3 | ||
bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件,event.detail 同上。Skyline 仅支持非 worklet 的组件方法作为回调。 | 1.9.0 |
Skyline 特有属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
scroll-with-animation | boolean | true | 否 | 改变 current 时使用动画过渡 | 2.29.0 | |
cache-extent | number | 0 | 否 | 缓存区域大小,值为 1 表示提前渲染上下各一屏区域(swiper 容器大小) | 2.29.0 | |
worklet:onscrollstart | worklet | 否 | 滑动开始时触发,仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy} | |||
worklet:onscrollupdate | worklet | 否 | 滑动位置更新时触发,仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy} | |||
worklet:onscrollend | worklet | 否 | 滑动结束时触发,仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy} |
WebView 特有属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
previous-margin | string | “0px” | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 | |
next-margin | string | “0px” | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 | |
snap-to-edge | boolean | false | 否 | 当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素 | 2.12.1 |
** change
事件 source
返回值**
从 1.4.0 开始,change
事件增加 source
字段,表示导致变更的原因,可能值如下:
autoplay
自动播放导致swiper变化;touch
用户划动引起swiper变化;- 其它原因将用空字符串表示。
Bug & Tip
tip
: 如果在bindchange
的事件回调函数中使用setData
改变current
值,则有可能导致setData
被不停地调用,因而通常情况下请在改变current
值前检测source
字段来判断是否是由于用户触摸引起。tip
: 在 mac 小程序上,若当前组件所在的页面或全局开启了enablePassiveEvent
配置项,该内置组件可能会出现非预期表现(详情参考官方 enablePassiveEvent 文档)
9.2.4 常用的基础内容组件
9.2.4.1 text
- 文本组件
- 类似于HTML中的span标签,是一个行内元素
text组件的基本使用
功能描述:文本。
- 内联文本只能用 text 组件,不能用 view,如
foo bar - 新增 span 组件用于内联文本和图片,如
bar
通用属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
selectable | boolean | false | 否 | 文本是否可选 (已废弃) | 1.1.0 |
Skyline 特有属性
属性 | 类型 | 默认值 | 必填 | 说明 | |
---|---|---|---|---|---|
overflow | string | visible | 是 | 文本溢出处理 | |
合法值说明clip修剪文本fade淡出ellipsis显示省略号visible文本不截断 | |||||
max-lines | number | 是 | 限制文本最大行数 |
WebView 特有属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
user-select | boolean | false | 否 | 文本是否可选,该属性会使文本节点显示为 inline-block | 2.12.1 | |
space | string | 否 | 显示连续空格 | 1.4.0 | ||
合法值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小 | ||||||
decode | boolean | false | 否 | 是否解码 | 1.4.0 |
Bug & Tip
9.2.4.2 rich-text - 组件
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
功能描述:富文本。
- 自基础库 2.33.0 版本开始支持(3.0.0 除外)。
- 遵循 skyline 的样式和布局规则,html tag 被映射成类似 text/span/view 节点,因此存在 text 嵌套问题。
- 不支持 td/tr 等表格布局 tag,也不支持 bdo/bdi 等文字排版 tag。建议完全使用 flex 等 skyline 支持的布局方式来创建富文本内容。
- 提供了可选的兼容布局模式选项
mode
,但仍不保证与 WebView 表现 100% 一致。 - 在 2.33.0 基础库下,请尽可能避免为 html tag 使用 wx-rich-text 开头的类名。
<view>
<rich-text nodes="<h1 style='color:red'>标题</h1>"/>
</view>
通用属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
nodes | array/string | [] | 否 | 节点列表/HTML String | 1.4.0 | |
space | string | 否 | 显示连续空格 | 2.4.1 | ||
合法值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小 | ||||||
user-select | boolean | false | 否 | 文本是否可选,该属性会使节点显示为 block | 2.24.0 |
Skyline 特有属性
属性 | 类型 | 默认值 | 必填 | 说明 | |
---|---|---|---|---|---|
mode | string | default | 否 | 布局兼容模式 | |
合法值说明default完全遵循 skyline 的默认行为,不对节点树进行任何更改。compat尽可能将 tag 映射为 的形式。通常最接近 webview 的表现。aggressive所有 tag 均被映射为形如 的形式。inline-block实验性的 inline-block 布局策略,但无法实现折行。 |
nodes:现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点
元素节点:type = node
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | string | 是 | 支持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | 支持部分受信任的属性,遵循 Pascal 命名法 |
children | 子节点列表 | array | 否 | 结构和 nodes 一致 |
文本节点:type = text
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
text | 文本 | string | 是 | 支持entities |
受信任的HTML节点及属性
全局支持class和style属性,不支持id属性。
节点 | 属性 |
---|---|
a | |
abbr | |
address | |
article | |
aside | |
b | |
bdi | |
bdo | dir |
big | |
blockquote | |
br | |
caption | |
center | |
cite | |
code | |
col | span,width |
colgroup | span,width |
dd | |
del | |
div | |
dl | |
dt | |
em | |
fieldset | |
font | |
footer | |
h1 | |
h2 | |
h3 | |
h4 | |
h5 | |
h6 | |
header | |
hr | |
i | |
img | alt,src,height,width |
ins | |
label | |
legend | |
li | |
mark | |
nav | |
ol | start,type |
p | |
pre | |
q | |
rt | |
ruby | |
s | |
section | |
small | |
span | |
strong | |
sub | |
sup | |
table | width |
tbody | |
td | colspan,height,rowspan,width |
tfoot | |
th | colspan,height,rowspan,width |
thead | |
tr | colspan,height,rowspan,width |
tt | |
u | |
ul |
Bug & Tip
tip
: nodes 不推荐使用 String 类型,性能会有所下降。tip
:rich-text
组件内屏蔽所有节点的事件。tip
: attrs 属性不支持 id ,支持 class 。tip
: name 属性大小写不敏感。tip
: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。tip
: img 标签仅支持网络图片。tip
: 如果在自定义组件中使用rich-text
组件,那么仅自定义组件的 wxss 样式对rich-text
中的 class 生效。