学习微信小程序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配置文件，分别是:

1. 项目根目录中的app.json配置文件
2. 项目根目录中的project.config.json 配置文件
3. 项目根目录中的sitemap.json配置文件
4. 每个页面文件夹中的.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个配置项的作用

1. pages: 用来记录当前小程序所有页面的路径
2. window: 全局定义小程序所有页面的背景色、文字颜色等
3. style: 全局定义小程序组件所使用的样式版本
4. 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的区别：

1. 标签名称不同:

• HTML ( div, span, img, a)
• WXML (view, text, image, navigator)

2. 属性节点不同:

<a href="#">超链接</a>
<navigator url=" /pages/ home/home"></navigator>

3. 提供了类似于Vue中的模板语法:

• 数据绑定
• 列表渲染
• 条件渲染

---

6.2 wxss

       WXSS（weixin Style Sheets）是一套样式语言,用于描述WXML的组件样式，类似于网页开发的CSS。

WXSS与CSS的区别

1. 增加了rpx尺寸单位

   • CSS中需要手动进行像素单位换算，如：rem;
   • WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

2. 提供了全局样式和局部样式

   • 项目根目录中的app.wxss会用于所有小程序页面
   • 局部页面的.wxss样式仅对当前页面生效

3. WXSS仅支持部分CSS选择器

.class和#id

element

并集选择器、后代选择器

::after和::before等伪类选择器

七、 小程序js的分类

---

三大分类：

1. app.js

   是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序

2. 页面的.js文件

   是页面的入口文件,通过调用Page()函数来创建并运行页面

3. 普通的.js文件

   用来封装普通的功能模块文件，用来封装公共的函数或属性供页面使用

八、小程序的宿主环境

---

8.1 什么是宿主环境

宿主环境指的是程序运行所必须的依赖环境。

微信小程序的宿主环境就是微信Android APP

8.2 小程序宿主环境包含的内容

1. 通信模型
2. 运行机制
3. 组件
4. API

8.3 小程序宿主环境的-通信模型

8.3.1 通信主体

小程序的通信主体是渲染层和逻辑层:

• WXML和WXSS样式工作在渲染层
• JS工作在逻辑层

8.3.2 通信模型

小程序中的通信模型分为两部分：

1. 渲染层和逻辑层之间的通信
   • 有微信客户端进行转发
2. 逻辑层和第三方服务器之间的通信
   • 由微信客户端进行转发

8.4 小程序运行机制

8.4.1 小程序启动过程

1. 把小程序代码包下载到本地
2. 解析app.js全局配置文件
3. 执行app.js小程序入口文件，调用App（）创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

8.4.2 页面渲染的过程

1. 加载解析页面的.json配置文件
2. 加载页面的.wxml模板和wxss样式
3. 执行页面的.js文件，调用Page（）创建页面实例
4. 页面完成渲染

九、组件

---

微信小程序官网组件文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html

9.1 组件分类

---

小程序组件由宿主环境提供的，一共9大类:

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放功能
9. 无障碍访问

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字段，表示导致变更的原因，可能值如下：

1. autoplay 自动播放导致swiper变化；
2. touch 用户划动引起swiper变化；
3. 其它原因将用空字符串表示。

Bug & Tip

1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。
2. tip: 在 mac 小程序上，若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考官方 enablePassiveEvent 文档）

9.2.4 常用的基础内容组件

---

9.2.4.1 text

• 文本组件
• 类似于HTML中的span标签，是一个行内元素

text组件的基本使用

功能描述：文本。

1. 内联文本只能用 text 组件，不能用 view，如 foo bar
2. 新增 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

1. tip: decode可以解析的有 < > & '    
2. tip: 各个操作系统的空格标准并不一致。
3. tip:text 组件内只支持 text 嵌套。
4. tip: 除了文本节点以外的其他节点都无法长按选中。

---

9.2.4.2 rich-text - 组件

• 富文本组件
• 支持把HTML字符串渲染为WXML结构

功能描述:富文本。

1. 自基础库 2.33.0 版本开始支持（3.0.0 除外）。
2. 遵循 skyline 的样式和布局规则，html tag 被映射成类似 text/span/view 节点，因此存在 text 嵌套问题。
3. 不支持 td/tr 等表格布局 tag，也不支持 bdo/bdi 等文字排版 tag。建议完全使用 flex 等 skyline 支持的布局方式来创建富文本内容。
4. 提供了可选的兼容布局模式选项 mode，但仍不保证与 WebView 表现 100% 一致。
5. 在 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

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
2. tip: rich-text 组件内屏蔽所有节点的事件。
3. tip: attrs 属性不支持 id ，支持 class 。
4. tip: name 属性大小写不敏感。
5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6. tip: img 标签仅支持网络图片。
7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。