小程序

微信小程序

准备工作

注册小程序帐号

① 准备一个微信号
② 申请小程序账号：https://mp.weixin.qq.com/wxopen/waregister?action=step1

获取开发密钥（appId）

在做项目时需要密钥

公众平台登录小程序->开发->开发设置->AppID(小程序ID)

安装开发工具

开发工具，可以选择自己喜欢的，也可以选择微信工具，下载微信开发工具，微信开发工具可完成开发，调试，打包，部署的工作

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

默认的目录结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zqqkdD5X-1617698618518)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1599034334559.png)]

1、全局文件

​ app开头的文件名是全局文件（文件名不能），包括app.js、app.json、app.wxss。

​ app.js：是全局的js文件，里面的变量可以在任何地方使用。

​ app.json：是对小程序的全局配置。

​ app.wxss：是全局样式。

2、页面级文件（pages文件夹下）

​ 如：pages/index下。index.js、index.json、index.wxml、index.wxss。这四个文件名必须一样。

​ index.js：页面js文件，启动后需要先执行【必须有】

​ index.json：页面配置文件。只能配置窗口项。决定当前窗口表现

​ index.wxml：页面布局文件，相当于html 【必须有】

​ index.wxss：页面样式文件。当index.wxss里的样式和全局的app.wxss的样式冲突时，以index.wxss为准。

文件类型

.wxml, .wxss, .json, .js 文件的作用

① WXML（WeiXin Markup Language）文件

wxml模板：跟网页中的html是完成同样的功能。

wxml和HTML的不同之处

A. 标签名不同: wxml把常用的标签进行了封装，如：地图()等等

B. 采用mvvm的模式（如同react和vue一样），js中不直接操作DOM，只操作数据，所以，wxml中就出现了类似于vue中的指令：如：wx:if等

② WXSS文件

​ 和网页开发中的css一样，但是进行了扩展.

​ wxss在css的基础上扩展了哪些？

1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

2、提供了全局的样式和局部样式，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3、此外 WXSS 仅支持部分 CSS 选择器，详细参考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

③ JS文件

JS文件就是我们的js文件，完成交互的。

④ JSON文件

配置文件：

App.json：是小程序配置：

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE

project.config.json：工具配置

page.json：页面配置

开发文档

框架 组件 API

框架（mina框架）

​ 微信客户端给小程序所提供的环境为宿主环境，小程序的运行环境分成渲染层(webview)和逻辑层(jscore)，WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层,小程序的渲染层和逻辑层分别由2个线程管理，这两个线程的通信会经由微信客户端

配置

全局配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json，对微信小程序进行全局配置(页面管理，窗口设置，网络请求)

页面配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

pagename.json，对本页面的窗口表现进行配置，覆盖全局

项目环境配置

sitemap.json，project.config.json

1）、project.config.json是项目开发环境配置， 包括版本、依赖、程序名之类 。

2）、sitemap.json： 配置小程序内的搜索， 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引 。 用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129 。

​ 如果想全局禁用索引，配置project.config.json，在 setting内部添加checkSiteMap:false,

wxml（官方组件)

https://developers.weixin.qq.com/miniprogram/dev/component/

1、视图容器（View Container）
view 视图容器
scroll-view 可滚动视图容器
swiper 可滑动的视频容器

2、基础内容（Basic Content）

​ icon 图标
​ text 文字
​ progress 进度条

3、表单组件（From）

​ button 按钮
​ form 表单
​ input 输入框
​ checkbox 多项选择器
​ radio 单项选择器
​ picker 列表选择器
​ slider 滑动选择器
​ switch 开关选择器
​ label 标签

4、操作反馈组件（Interaction）

​ action-sheet 上拉菜单
​ modal 模态弹框
​ toast 短通知

5、导航（Navigation）

​ navigator 应用内跳转

6、多媒体（Media）

​ audio 音频
​ image 图片
​ video 视频

7、地图（Map）

​ map 地图

8、画布（Canvas）

wxss（样式）

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

CSS 相比，WXSS 扩展的特性有：

​ 尺寸单位

​ 样式导入

1、WXSS尺寸单位

rpx尺寸单位可以根据屏幕宽度进行自适应。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NgDmIIF4-1617698618521)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps1.jpg)]

如：

ss

bb

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fS3YEa0x-1617698618523)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps2.jpg)]

2、WXSS样式导入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ojcQGh7S-1617698618525)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps3.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lf5dt29E-1617698618526)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps4.jpg)]使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

3、WXSS内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8HQaTI5Q-1617698618527)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps5.jpg)]

4、WXSS选择器

目前支持的选择器有：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0zMK3F6-1617698618528)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps6.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aW8BHdg7-1617698618528)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps7.jpg)]

5、WXSS全局样式与局部样式

​ 定义在 app.wxss 中的样式为全局样式，作用于所有页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

js（逻辑）

App()和page()

App()是注册小程序的，Page() 是注册页面的，都接受一个 Object 参数，App() 必须在 app.js 中调用，Page()必须出现在页面.js中，必须调用且只能调用一次，都会给当前注册生命周期钩子，和实例成员(方法、属性)

Object 参数

• data:{} 数据
• 钩子函数(参数){this 指向当前页面，当前小程序}
• 自定义函数(){ this 指向当前页面，当前小程序 }
• 自定义属性:值

页面与主程通讯

pages里面 let app=getApp(), app.实例属性|方法

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

在WXML里使用双花括号即可。双括号里可以写变量，表达式（包括三元表达式）

1、组件内容绑定使用（双花括号）将变量包起来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWMbeS54-1617698618529)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps9.jpg)]

2、组件属性(需要在双引号之内，并写上双花括号)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mjfuUwLT-1617698618529)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps10.jpg)]

列表渲染

​ 1）、wx:for 指令完成列表渲染。

​ 格式：wx:for="{ {数组}}"

​ 默认数组的当前项的下标变量名默认为 index，当前项的变量名默认为 item

​ 如：<组件 wx:for="{ {数据}}">{ {item}}/{ {index}}</组件>

​ 2）、自定义下标名和当前项的名字：

​ 使用 wx:for-item 可以指定数组当前元素的变量名，

​ 使用 wx:for-index 可以指定数组当前下标的变量名：

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dWOAk4Q8-1617698618530)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1599037117910.png)]

​ 3）、将 wx:for 用在标签上，以渲染一个包含多节点的结构块

​ block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

条件渲染

1）、wx:if 指令完成条件渲染

<组件 wx:if="{ {布尔数据}}"> 惰性渲染 （相当于vue的 v-if）

wx:elif="{ {}}"

wx:els