微信小程序第二章总结

最新推荐文章于 2024-06-26 17:47:29 发布

wik_Zjy

最新推荐文章于 2024-06-26 17:47:29 发布

阅读量1.7k

点赞数 36

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

本文链接：https://blog.csdn.net/wik_Zjy/article/details/136460227

版权

基本的项目目录：

以app开头的文件是应用程序级别的文件,更改一处全局生效。而页面pages的配置优先级高于全局配置(就近原则)
小程序是允许你修改文件目录名的

小程序配置文件：

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json 和⻚⾯⾃⼰的page.json

-全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/calc/calc",
    "pages/history/history",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#da7c0c",
    "navigationBarTitleText": "简易计算器",
    "navigationBarTextStyle":"white"
  }
}

主体文件和页面文件：

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责程序的整体配置，它们的名称是固定的。
■app.js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少app.wxss小程序主样式表文件，类似HTML的:css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。2图北
2.1.2 页面文件
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json 设置的路径找到相对应的资源进行数据绑定。
.js文件页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxm文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML 页面中的.html文件。该文件在页面中不可缺少。
w文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖Pp中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。
.json文件页面配置文件。该文件在页面中不可缺少。

小程序框架接口：

Ⅰ-App(Object object)
注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果

相应的app()参数在下方的小程序生命周期中有指出

AppObject getApp(Object object)
获取到小程序全局唯一的 App 实例

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global dat
//或者
const {GbaseUrl} =getApp()  //GbaseUrl是自己在app.js定义的全局变量

注意:

1.不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() 。使用 this 就可以拿到 app 实例。

2.通过 getApp() 获取实例之后，不要私自调用生命周期函数

小程序的开发框架：

创建小程序页面：

1创建第一个页面文件

2.创建另一个页面文件

配置文件：

全局配置项：

window配置项：

app.json中window配置项：

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

tabBar配置项：

tabBar中list选项：

networkTimeout配置项：

逻辑层文件：

1.项目逻辑文件:

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

项目逻辑文件配置项:

页面逻辑文件配置项:

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

在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操作时，调用该函数。

页面结构文件：

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxm文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<vew>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
WXML,还具有数据绑定、条件数据绑定、列表数据绑定、板、引用页面文件、页面事件等能力。