微信小程序开发

微信小程序开发学习笔记（二）——小程序框架、组件、WXML-腾讯云开发者社区-腾讯云

微信小程序开发学习文档（万字总结，一篇搞定前端开发）_微信小程序文档-CSDN博客

微信官方文档 | 微信开放文档

小程序简介

与普通网页开发的区别：

1.运行环境不同

网页运行在浏览器环境中

小程序运行在微信环境中

2.API不同

小程序无法调用DOM和BOM的API，可以调用微信环境中提供的各种API

3.开发模式不同

网页：浏览器+代码编辑器

小程序：申请小程序开发账号->安装开发工具->创建和配置小程序项目

第一步 下载“微信开发者工具”

注册appId或申请测试账号

第二步 创建小程序

小程序代码文件结构

​​​​​​​

​​​​​​​

第三步 新建小程序页面

app.json -> pages中新增页面的存放路径, 会自动创建目录

pages -> 存放所有页面的路径

项目首页应用pages中排在第一位的路径，所以改变顺序，可以改变页面首页，默认为pages/index/index

index.wxml是微信的标签语言（类似html），页面的结构由该文件控制，会将.js中设置的样式及内容通过wxml展示出来

.wxs是wexin script，是微信的一套脚本语言，结合.wxml构建页面的架构，类似JavaScript但不一致，有自己的语法。

.wxss是微信style sheets，类似CSS

3.1 WXML

和html区别，标签名称不同，属性节点不同，提供了类似Vue中的模板语法

3.2 WXSS

类似css，区别 ：

3.3 .JS

在小程序汇总，通过该文件来处理用户的操作，比如：响应用户的点击，获取用户的位置

基本知识

​​​​​​​1.宿主环境

程序运行所必需的依赖环境，安卓/ios是微信的宿主环境，手机微信是小程序的宿主环境

1.1 通信模型

通信主体，渲染层和逻辑层

通信：渲染层和逻辑层之间的通信，由微信客户端进行转发

            逻辑层与第三方服务器之间的通信，由微信客户端进行转

1.2 运行机制

小程序启动过程：小程序的代码包下载到本地，解析app.json，执行其中的小程序入口文件，调用App（）创建小程序实例，渲染小程序首页，小程序启动完成

页面渲染的过程：加载解析页面的.json配置文件，加载页面的.wxml模版和 .wxss 样式，执行页面的.js文件，调用Page()创建页面实例

1.3 组件

组件由宿主环境提供

1.3.1 视图容器类组件

2. 三大API

2.1 事件监听API

以on开头，用来监听某些事件的触发

2.2 同步API

以sync结尾，其结果可以通过函数返回值直接获取，如果执行出错会抛出异常

2.3 异步API

类似jQuery中的$.ajax(options)函数，需要通过success，fail，complete接收调用的结果

3.WXML模板语法

3.1 数据绑定

将数据定义到data对象中

info: 'hello world'

3.1.2 mustache语法(插值表达式） - 双大括号{{}}

动态绑定内容，将字符串类型的info显示到页面上

动态绑定属性，将图片链接等以图片的格式显示在页面上，需要在wxml中确定使用哪种标签，在其属性位置使用双大括号

3.1.2.1 三元运算

在mustache语法中 完成 条件表达式？ 表达式1:表达式2

3.1.2.2 算数运算

可以在mustache语法中完成算数运算

3.2 事件绑定

事件是渲染层到逻辑层的通讯方式

将用户在渲染层的行为通过事件传递到逻辑层进行处理

小程序中常用的事件：tap （触屏的触摸），input（文本框的输入事件），change（状态改变）

3.2.1 事件对象的属性列表

代表当前事件的一些属性，如类型type，timeStamp（页面打开到触发事件所经过的毫秒数），target（触发事件的组件的一些属性值的组合），touches（当前停留在屏幕中的触摸点信息的数组），detail（额外的信息），currentTarget（当前组件的一些属性值）

3.2.1.1

target - 触发该事件的源头组件

currentTarget - 当前事件所绑定的组件

对于外层view来说：

内部按钮为源头组件​​​​​​​

当前正在触发事件的组件是view，冒泡已经到达view

3.2.1.2 bindtap

不存在html中鼠标点击onclick事件，通过tap事件响应用户的触摸行为

通过bindtap，可以为组件绑定tap触摸事件

在.js文件中定义对应的事件处理函数，事件参数通过形参event来接收

3.2.2 事件传参

不能在绑定事件的同时为事件处理函数传递参数，因为小程序会把bindtap的属性值统一当作事件名称来处理，即入参也会被当作名称的一部分，而不是一个参数

传参：data-*={{input}}，*代表参数的名字,input为参数的值

event.target.dataset.*, *为参数的名字，获取到传递的值

3.3 条件渲染

使用 wx:if="{{condition}}"来判断是否需要渲染该代码块，加在标签中

用block标签包裹多个view，对block进行条件判断，但是不会渲染block

hidden控制元素的显示与隐藏

3.4 列表渲染

wx:for,得到index和item

wx:key, 小程序在实现列表渲染时，建议为渲染出来的列表项指定唯一的key值来提高渲染效率

4. WXSS 模板样式

样式语言

wxss对css进行了扩充及修改：

rpx尺寸单位

@import 样式导入

通用的：通用选择器，通用的样式选择

4.1 rpx单位

responsive picxel，微信小程序独有，解决屏适配的尺寸单位

原理：rpx把所有设备的屏幕在宽度上等分为750份，在较小的屏幕上，1rpx的宽度较小，反之则较大，在不同设备运行时，小程序会自动把rpc样式单位换算成对应的像素单位来渲染，从儿实现屏幕适配

以1rpx=0.5px为标准进行样式设计

4.2样式导入

@import， 可以访问其他文件中的样式

4.3 全局样式和局部样式

app.wxss控制全局即所有页面的样式

***.wxss控制其对应的某一个页面的样式

局部样式和全局样式冲突时，局部样式会覆盖

局部样式权重大于等于全局样式时，局部样式会覆盖（以某一个样式为 单位，而不是整个文件）

5. 全局配置

全局配置文件 app.json

pages - 小程序中所有页面存放路径

window - 小程序窗口的外观

tabBar - 小程序底部tabBar效果

style - 是否启用新版的组件样式

5.1 window

导航栏背景色只支持16进制写法

5.1.1 下拉刷新：手指下拉滑动，小程序页面刷新

在window中新加enablePullDownRefresh，置为true，在app.json中添加会对所有页面刷新

模拟器不能完全模拟在真机上的操作，需要扫码在真机上预览

下拉刷新的背景色：backgroundColor

下拉刷新的loading样式：backgroundTextStyle：light or dark

5.1.2 上拉触底：手指上拉滑动，加载更多数据

小程序设置中默认距离为50px，即距离屏幕底部50px的时候，会触发加载更多数据

onReachBottomDistance设置新的数值

5.2 tabBar

实现多页面之间的快速切换，只能配置最少两个，最多5个tab页签

底部tabBar

顶部tabBar

渲染顶部tabBar时，不限时icon（图标），只显示文本

在app.json中添加tabBar配置项，和window并列

6. 页面配置

页面配置和全局配置的关系

在window中配置的都是全局生效的窗口表现，某些页面的特殊窗口表现，需要页面级别的.json配置文件

enablePullDownRefresh 只对当前页面开启下拉刷新效果

7. 网络数据请求

7.1 小程序中网络请求的限制

只能请求HTTPS类型的接口

必须将接口的域名添加到信任列表中，工具栏-详情-项目配置-域名信息

7.2 发起GET请求

wx.request() 方法，发起GET数据请求，域名必须是已经配置过的。

7.3 发起POST请求

wx.request()，method使用POST

7.4 在页面刚加载时请求数据

自动请求一些初始化的数据

.js文件中的onLoad事件中调用需要的函数

7.5 跳过request合法域名校验

详情-本地设置-不校验合法域名等，只能在开发测试阶段使用，项目上线时必须配置合法域名

7.6 跨域和Ajax

在小程序中不存在跨域问题，因为小程序宿主环境不是浏览器

8 自定义编译模式

每次编译之后定格到想要的页面

9 生命周期

一个对象从创建-运行-销毁的整个阶段

小程序生命周期分类：

应用生命周期

页面生命周期

生命周期函数：小程序框架提供的内置函数，伴随生命周期，自动按次序执行

允许程序员在特定的时间点，执行某些特定的操作，强调时间点

​​​​​​​

10 WXS脚本

在wxml中无法调用在页面的.js中定义的函数，但是可以调用wxs中定义的函数 -- 过滤器

11 自定义组件

创建components文件夹，并划分子目录

引用组件：在.json文件中的usingComponents写入组件所在路径，并为其起名，之后在.wxml文件中将该名称作为标签名使用

组件默认使用自己的样式，app.wxss中的全局样式对组件无效

stylesolation空翼修改组件的样式隔离

12 全局数据共享

组件之间的数据共享，各个组件统一从一个store中获取、更新数据，实现数据共享