微信小程序开发第二章总结

耳朵漏风了

已于 2024-03-06 16:19:42 修改

阅读量947

点赞数 25

文章标签：微信小程序小程序

于 2024-03-06 00:54:55 首次发布

本文链接：https://blog.csdn.net/2301_76558412/article/details/136460328

版权

1、小程序的基本目录结构

2、小程序开发框架

2.1 视图层

MIAN框架是视图是由WXML与WXSS编写

2.2 逻辑层

(1)增加app() 和 Page( )方法，进行程序和页面的注册。

(2)提供丰富的API，如扫一扫、支付等微信特有的能力。

(3)每个页面有独立的作用域，并提供模块化能力。

app.js内容如图

2.3 数据层

2.文件存储(本地存储)使用数据API接口，如下:
wx.getStorage获取本地数据缓存。 wx. setStorage设置本地数据缓存。
器中， wx.clearStorage清理本地数据缓存。

3.网络存储与调用
动的上传或下载文件API 接口，如下:
wx.request发起网络请求。 wx.uploadFile上传文件。 wx.downloadFile下载文件。调用 URL的API接口，如下:
wx. navigateTo新窗口打开页面。 wx.redirectTo原窗口打开页面。

3、创建一个新的小程序页面

1.先创建一个新的小程序项目，如图：

2.继续在项目主目录下新建一个pages目录，在pages目录下新建一个list目录文件夹，并在list目录下新建 list.js、list.json、list.wxml、list.wxss这个是四个是页面所需的文件，如图：

提示：如今创建好的文件都是空的，不能正常运行，需要给.js、.json文件添加简单的逻辑

3、配置文件

小程序的配置文件按其作用范围额可以分为全局配置文件（app.json）和页面配置文件（*.json），小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值( networkTimeout)以及配置多个切换页(tabBar)等。

全局配置项

配置项	类型	是否必填	描述
pages	Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab的表现
networkTimeout	Object	否	设置网络请求API的超时时间值
debug	Boolean	否	设置是否开启 debug模式

3.2 全局文件

(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。

例如app.json文件的配置

{
"pages":[
"pages/news/news",
"pages/index/index"
]
}

3.3 window配置项

window配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。

window配置项及其描述

对象	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景色，如#000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持white/black
navigationBarTitleText	String	-----	导航栏标题文字内容
BackgroundColor	HexColor	#ffffff	下拉刷新窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体，仅支持dark/light
enablePullDownRefresh	Boodean	false	是否开启下拉刷新

app.json中window配置项：

"window":{
"navigationBarBackgroundColor": "#fff"，
"navigationBarTextStyle": "black",
"navigationBarTitleText":"小程序window功能演示"，
"backgroundColor":"#ccc",
"backgroundTextstyle": "light"
}

3.4 tabBar 配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。

tabBar配置项及其描述

对象	类型	是否必填	描述
color	HexColor	是	标签页上的文字默认颜色
selectedColor	HexColor	是	标签页上的文字被选中时呈现的颜色
backgroundColor	HexColor	是	标签页的背景色
borderStyle	String	否	标签条之上的框线颜色，仅支持black/white,默认值为black
list	Array	是	标签页列表，支持2-5个标签页

tabBar中list选项

对象	类型	是否必需	描述
pagePath	String	是	页面路径，必须先在pages中定义
text	String	是	标签页上按钮的文字
iconPath	String	是	标签上图标的40 KB以内图片路径，图标的图片大小限制在
selectedIconPath	String	是	标签被选中时图标的图片路径，图标的图片大小限制在40KB以内

networkTimeout配置项

对象	类型	是否必填	描述	默认值
request	Number	否	wx.reest的超时时间(单位为毫秒(ms))	60000
connectSocket	Number	否	wx.connectSocket 的超时时间(单位为毫秒(ms))	60000
uploadFile	Number	否	wx. uploadFile的超时时间(单位为毫秒(ms))	60 000
downloadFile	Number	否	wx. downloadFile的超时时间(单位为毫秒(ms))	60 000

4、逻辑层

4.1项目逻辑文件

项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

项目逻辑文件配置项

参数	类型	描述
onLaunch	Function	当小程序初始化完成时，自动触发onLauneh，且只触发一次
onShow	Function	当小程序启动(或从后台进入前台显示)时，自动触发onShow
onHide	Function	当小程序从前台进入后台时，自动触发onHide
其他	Any	开发者自定义的属性或方法，用this可以访问

4.2.1 页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。

页面逻辑文件配置项

参数	类型	描述
data	Object	页面的初始数据
onLoad	Function	页面的生命周期函数，用于监听页面加载
onReady	Function	页面的生命周期函数，用于监听页面初次数据绑定完成
onShow	Function	页面的生命周期函数，用于监听页面显示
onHide	Function	页面的生命周期函数，用于监听页面隐藏
onUnload	Function	页面的生命周期函数，用于监听页面卸载
onPullDownRefreash	Function	监听用户的下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
其他	Any	自定义函数或数据，用this可以访问

4.2.1 定义当前页面的生命周期函数

在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
（1）onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query。
（2）onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。 onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
（3）onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。
（4）onUnload 页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调用该函数。

5、页面样式文件

页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决
和修改，决定WXML的组件如何显示。

WXSS常用属性

属性类别	属性名称	属性含义	属性值
字体	font -family	字体	所有的字体
	font - style	字体样式	normal、italic、oblique
	font - variant	字体是否用小型大写	normal、small - caps
	font - weight	字体的粗细	normal、bold、bolder、lighter等
	font - size	字体的大小	px、larger、smaller 等
颜色	color	定义前景色	#rgb、#rrggbb、rgb(255，255，255)
	background - color	定义背景色	#rgb、 #rrggbb、rgb(255，255，255)
	background -image	定义背景图案	url ( imageurl )
	background - repeat	重复方式	repeat、repeat -x、repeat-y、no-repeat
	background - attachment	设置滚动	scroll、fixed
	background - position	初始位置	top、button、left、right、center、x、y
文本	word -spacing	单词间距	normal、px
	letter - spacing	字母间距	normal，px
	text - decoration	文字装饰	none lunderline、overline, link . line - through
	vertical -align	垂直对齐	top、middle、buttom
	text - align	水平对齐	left, center、right
	line -height	行高	normal、px
	white - space	空白处理	warp、nowarp
外边距	margin-top	顶端边距	length、percentage,auto
	margin - right	右侧边距	length 、percentage、auto
	mangin-bottom	底端边距	length、percentage、auto
	margin - left length、	左侧边距	percentage、auto
内边距	padding - top	顶端填充距	length、percentage
	padding-right	右侧填充距	length、percentage
	padding- bottom	底端填充距	length、percentage
	padding-left	左侧填充距	length、percentage
边框	border -top-width	顶端边框宽度	length、thinmedium,thick
	border - right - width	右侧边框宽度	length、thin、medium、thick
	border - bottom - width	底端边框宽度	length、thin、medium、thick
	border -left -width	左侧边框宽度	length、thin、medium,thick
	边框 border - width	一次定义宽度	length、thin、medium、thick
	border -color	边框颜色	color
	border -style	边框样式	none , solid、dotted、ash
	border - top	一次定义顶端	none、solid、dotted,ash
	border -right	一次定义右侧	none、solid、dotted、ash
	border-left	一次定义左侧	none、solid、dotted,ash
	border -radius	圆角边框	number.%
	width	宽度	length、percentage、auto
	height	高度	length、auto
浮动与定位	float	浮动	none、left、right
	clear	清除浮动	left,right、both、none
	display	显示	block, inline, inline - block,none
	position	定位	static、relative、absolute、fixed

耳朵漏风了

关注

25
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发第二章总结

在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。（1）onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和wx.redirectTo及中的query。（2）onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady 页面数据绑定函数。
复制链接

扫一扫