小程序新手教你如何入手

最新推荐文章于 2022-09-14 21:41:57 发布

Tigger1

最新推荐文章于 2022-09-14 21:41:57 发布

阅读量268

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Tigger1/article/details/109234758

版权

首先介绍一下什么是微信小程序？
是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，非常的方便与APP不同的是，小程序无需下载安装、无需卸载、用完即走，那么意味着也不占手机内存，对于手机没内存的人来说，可谓是一大福音啊！此外，也不会推送信息骚扰你，只能用户触发然后我们进入正题微信小程序
**

1.窗口配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
根目录下：entryPagePath：“pages/index/index”’ 小程序默认启动项，每次更新之后要进入的页面
**

根目录下的page：

**
在这里插入图片描述
分享一个小技巧在page写完路径直接保存会自动生成文件夹里边包含微信小程序的基础配置文件
**

根目录下的tabBar

在这里插入图片描述

根目录下的Windows 用于设置小程序的状态栏、导航条、标题、窗口背景色。

在这里插入图片描述

小程序文件类型
.js -------- 脚本文件：页面的交互逻辑均在此页面中进行
在这里插入图片描述

json ------ 配置文件：用于设置程序的配置效果
在这里插入图片描述

.wxml ---- 页面结构文件：书写控件，构建页面
在这里插入图片描述

wxss ----- 样式文件：类似于css样式，用于美化页面
1
2
3
4
.js文件
当我们生成一个文件夹的时候微信开发者工具非常智能会自己提示我们每个生命周期的作用是什么
在这里插入图片描述
.json文件主要是页面的配置项文件夹内的json配置的优先级要高于全局app.json 也可以插入第三方插件库

也可以插入第三方插件库
.css文件页面的css文件

在这里插入图片描述
这里要注意的是微信小程序的css里边是没有px单位的所以刚入门的小伙伴一定要注意单位是rpx rpx rpx重要的事情说三遍

小程序生命周期和小程序页面的生命周期
小程序生命周期

App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数
（1）onLaunch: 初始化小程序时触发，全局只触发一次
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
（3）onHide: 用户从前台切换到后台隐藏时触发
（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
1
2
3
4
5
小程序页面的生命周期

（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
（2）onShow：加载完成后、后台切到前台或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：从前台切到后台或进入其他页面触发
（5）onUnload：页面卸载时触发
1
2
3
4
5
微信小程序的局部文件夹内生命周期要比全局生命周期的优先级高（跟json配置文件一样）

数据请求和封装
为什么要封装网络请求可以极大的节省重复的代码后期利于维护减少高并发请求我也就只能说这么多了。。。
首先环境的切换
在这里插入图片描述