小程序项目记录_小程序的应用的生命周期和页面生命周期和组件的生命周期有神魔区别-CSDN博客

本文链接：https://blog.csdn.net/weixin_43403054/article/details/126277933

小程序与普通网页开发的区别

1.运行环境不同：小程序运行在微信环境中
2.API不同
3.开发模式不同：申请小程序开发账号https://mp.weixin.qq.com/获取小程序的AppID，安装小程序开发者工具 Stable Build https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.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中的模板语法

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

WXSS和CSS的区别

1.新增了rpx尺寸单位
2.提供全局的样式和局部样式:全局app.wxcss; 局部页面的.wxss
3.wxss仅支持部分css选择器
class类选择器和#id选择器
element元素选择器
并集选择器，后代选择器
：：after和：：before等伪类选择器

WXML模板语法

数据绑定基本原则：

1.在data中定义数据:Mustache语法格式{{}}
2.在WXML中使用数据
3.三元运算，动态绑定属性，

事件绑定：

事件：事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
事件：
tap
input
change

事件传参：

小程序中的事件传参比较特殊，！！不能在绑定事件的同时为事件处理函数传递参数，通过data-*自定义属性传参* 为参数的名字。
!!target和currentTarget区别
target：触发事件的组件的一些属性集合/！触发事件的源头组件
currentTarget:当前组件的一些属性值/！当前事件所绑定的组件

条件渲染

wx:if=“{{条件}}：！！以动态创建和移除元素的方式，控制元素的展示与隐藏。控制条件复杂时使用
结合一次控制多个组件的展示与隐藏，并不是组件，只是一个包裹性质的容器，不会在页面中做任何渲染。
hidden=”{{条件}}"：为ture隐藏，以切换样式的方式，控制元素的显示和隐藏，建议在频繁切换时使用。

列表渲染

wx:for=“{{数组名字}}”
{{index}}索引
{{item}}当前循环项
wx:key提高渲染效率

WXSS模板样式

扩展的特性：rpx尺寸单位；@import样式导入，相对路径，以；结束
rpx解决屏幕适配的尺寸单位，原理宽度分为750份。
1.当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
2.当局部样式权重大于或等于全局样式的权重时，才会覆盖全局样式。
tabar最少2个最对5个顶部不会有icon图标

小程序中的JS文件

1.app.js:整个小程序项目的入口文件，通过调用App()函数来启动整个小程序
2.页面的.js文件：是页面的入口文件，通过调用Page()函数来创建并运行
3.普通的.js文件：是普通的功能模块文件，用来封装公共的函数或者属性供页面使用。

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

通信机制:

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

WXML模板和WXSS样式工作在渲染层
JS脚本工作在逻辑层
小程序中的通信模型
渲染层和逻辑层之间通信：由微信客户端转发
逻辑层和第三方服务器之间的通信：由微信客户端进行转发

运行机制

1.小程序启动过程

把小程序代码包下载到本地
解析app.json全局配置文件
执行app.js小程序入口文件，调用APP()创建小程序实例
渲染小程序首页
小程序启动完成

2.页面渲染过程

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

组件

9大类

常用的视图容器类组件
- view实现布局
- scroll-view实现滚动列表效果
- swiper和swiper-item轮播图容器组件和轮播图item组件
1. 常用的基础内容组件
- text：文本组件，类似于span行内元素
  属性：selectable/user-select：长按选中文本效果
- rich-text:福文本组件，支持把HTML字符串渲染为WXML结构
其它常用组件
- button
- image`

API

!!!小程序的API是由宿主环境提供的，通过丰富的小程序API。开发者可以方便调用微信提供放入能力，比如：获取用户信息，本地存储，支付功能等。
API分为三大类：
1.事件监听API
特点：以on开头，用来监听某些事件的触发
2.同步API
特点1：以sync结尾的API
特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常。
3.异步API
特点：类似于Jquery中$.ajax(option)函数需要通过success,fail,complete接收调查结果
！！！

协同工作

小程序版本

1.开发版本
2.体验版本
3.审核版本
4.线上版本

小程序中网络数据请求

网络请求的限制：只能请求https类型的请求
必须将接口的域名添加到信任列表中

1.配置request合法域名
需求描述：假设在自己的微信小程序中，希望请求https://www.escook.cn/域名下的接口
注意：
域名只支持https协议
域名不能使用IP地址或localhost
域名必须经过ICP备案
服务器域名一个月内最多申请5次修改
!wx.request()方法，可以发起GET请求
Ajax技术的核心时依赖于浏览器中的XMLHttpRequest这个对象，小程序不能叫做发起Ajax请求，而是叫做发起网络数据请求。

页面导航

1.声明式导航，open-type="switchTab"跳转到tabBar页面，
open-type="navigate"跳转到非tabBar页面，可以省略
open-type=“navigateBack” delta=“1” 后退一层
2.编程式导航：调用小程序的导航API，实现页面跳转
wx.witchTab(Object object)方法跳转到tabBar页面，
wx.navigateTo(Object object)跳转到非tabBar页面
wx.navigateBack后退