微信小程序入门篇（第2章）

秃头小锦鲤

已于 2023-04-19 00:51:11 修改

阅读量483

点赞数

分类专栏：微信小程序入门级教程文章标签：微信小程序前端小程序

于 2023-04-18 23:57:49 首次发布

本文链接：https://blog.csdn.net/m0_48431810/article/details/130231474

版权

微信小程序入门级教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、框架全局文件

1、结构主要分为框架全局文件、工具类文件、页面文件如下：

框架全局文件必须放在项目的根目录中。

框架全局文件对所有页面都有效。

文件	是否必填	作用
app.js	是	装载小程序逻辑
app.json	是	装载小程序公共设置
app.wxss	否	装载小程序公共样式
proiect.config.json	是	装载小程序项目个性化配置
sitemap.json	是	配置小程序及其页面是否允许被微信索引

app.ts文件用来定义全局数据和函数的使用，可以指定微信小程序的生命周期函数。

生命周期函数可以理解为微信小程序自己定义的函数，如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、 onHide（监听小程序隐藏）等。

不同阶段不同场景可以使用不同的生命周期函数。

app.ts文件中还可以定义一些全局函数和数据，其他页面引用app.ts文件后就可以直接使用。

2. app.json小程序公共设置文件

app.json文件可以对常用的功能进行设置：配置页面路径、配置窗口表现置标签导航、配置网络超时、启用组件样式、配置debug模式、配置的小程序列表。

3. app.wxss小程序公共样式表

app.wxss文件对CSS样式进行了扩展。它和CSS的使用方式一样，写法兼容大部分CSS样式 app.wxss文件还形成了自己的风格，即对所有页面定义的一个全局样式。

只要页面有全局样式里的class，就可以渲染全局样式里的效果；但如果页面又重新定义了这个class样式，则会把全局样式覆盖掉，使用自己的样式。

4. project.config.json小程序项目个性化配置

重新安装工具或者换计算机工作时，用户只要载入同一个项目的代码包，开发者工具就会自动

恢复到当时开发项目时的个性化配置，其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。

配置如下：

1.{
2.
"description": "项目配置文件",
3.
"packOptions": {
4.
"ignore": [ ]
5.
},
6. "setting": {
7.
"urlCheck": true,
8.
"es6": true,
9.
"postcss": true,
10.
"minified": true,
11.
"newFeature": true,
12.
"autoAudits": false,
13.
"coverView": true,
14.
"showShadowRootInWxmlPanel": true,
15.
"scopeDataCheck": false
16. },
17. "compileType": "miniprogram",
18. "libVersion": "2.9.4",
19. "appid": "wxa7730e0596be9404",
20. "projectname": "demo",

21. "debugOptions": {
22. "hidedInDevtools": [ ]
23. },
24. "isGameTourist": false,
25. "simulatorType": "wechat",
26. "simulatorPluginLibVersion": { },
27. "condition": {
28. "search": {
29. "current": -1,
30. "list": [ ]
31. },
32. "conversation": {
33. "current": -1,
34. "list": [ ]
35. },
36. "game": {
37. "currentL": -1,
38. "list": [ ]
39. },
40. "miniprogram": {
41. "current": -1,
42. "list": [ ]
43. }
44. }
45. }

5. sitemap.json小程序及其页面是否允许被微信索引

小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引，文件内容

为一个JSON对象。如果没有sitemap.json文件，则默认为所有页面都允许被索引。

二、工具类文件

在微信小程序框架目录里有一个utils文件夹，它用来存放工具栏的JavaScript函数。

三、框架页面文件

文件类型	是否必填	作用
JS	是	页面逻辑
JSON	否	页面配置
WXML	是	页面结构
WXS	否	小程序脚本语言
WXSS	否	页面样式表

微信小程序的框架页面文件都放置在pages文件夹下面

四、制作“猫眼电影”小程序底部导航栏

1、先把准备好的底部标签导航图标复制到“movie”项目下面 准备好面的底部标签导航图标复制到“movie”项目下面备好的底部标签导航图标复制到“movie项目下面将准准备好的底部标签导航图到

配置页面路径：

窗口及导航栏设置：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#D53E37",
    "navigationBarTitleText": "电影",
    "navigationBarTextStyle": "white"

底部标签导航设置：

"tabBar":{
    "selectedColor": "#D53E7",
    "backgroundColor": "#F5F5F5",
    "borderStyle": "white",
    "list": [{
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath": "image/movie_1.jpg",
        "selectedColor": "image/movie.jpg"
    },{
        "pagePath": "pages/cinema/cinema",
        "text": "影院",
        "iconPath": "image/cinema.jpg",
        "selectedIconPath": "image/cinema_1.jpg"
    },{
        "pagePath": "pages/find/find",
        "text": "发现",
        "iconPath": "image/find.jpg",
        "selectedIconPath": "image/find_1.jpg"
    },{
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "image/me.jpg",
        "selectedIconPath": "image/me_1.jpg"
    }]
}}

制作“猫眼电影”底部导航效果：