小程序>微信小程序
第一节 认识小程序>微信小程序
01 创建Hello World小程序
Question1： Hello World怎么显示在页面上的？
Answer: 在小程序中，每一个组件对应一个文件夹，放在pages目录下，比如/pages/index对应的就是index组件，组件包括四个部分内容，分别是js文件、json文件、wxml文件、wxss文件。要想Hello World显示在页面上，需首先在js文件中定义相应的属性，如下图所示，我们在js文件中的Page属性中给data属性设置了一个motto的属性，值为Hello World，紧接着我们会在wxml文件中通过{{}}语法去引用我们的属性，如{{motto}}
| 文件名称 | 文件作用 |
|---|---|
| .js文件 | 小程序中的数据及定义的一些函数、方法 |
| .json文件 | 小程序中的配置 |
| .wxml文件 | 小程序中的页面视图 |
| .wxss文件 | 小程序中页面的样式 |
第二节 小程序>微信小程序框架的目录结构
小程序>微信小程序框架，学习一个框架，大家首先要把自己的基础打牢，特别是js相关方面的知识基础一定要有。
Question1：小程序中的目录结构都代表什么意思？
Answer：如下图所示
01 app.js文件
02 app.json文件
app.json文件可以对常用的功能进行设置：配置页面路径、配置窗口表现、配置标签导航、配置网络超时、启用新版组件样式、配置debug模式、配置跳转的小程序列表等。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTitleText": "Weixin",
},
"tabBar": {
"list": [
{
"pagePath": "/pages/index/index",
"text": "首页"
},
{
"pagePath": "/pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
配置页面路径
在app.json中pages属性中放入对应组件的路径，是进行页面访问的必要条件。
配置窗口表现
navigationBarBackgroundColor 导航条背景色
navigationBarTitleText 导航条文字
navigationBarTextStyle 导航条文字颜色
enablePullDownRefresh 窗口是否可以下拉刷新
backgroundColor 窗口的背景色
backgroundTextStyle 下拉背景字体或者loading样式
配置标签导航
tabBar是一个对象，主要有selectedColor、backgroundColor、borderStyle、list四个属性。
03 app.wxss文件
小程序公共样式表，是对css进行了扩展，使用方式和css一样。
04 project.config.json文件
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"bundle": false,
"userConfirmedBundleSwitch": false,
"urlCheck": true,
"scopeDataCheck": false,
"coverView": true,
"es6": true,
"postcss": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"preloadBackgroundData": false,
"minified": true,
"autoAudits": false,
"newFeature": false,
"uglifyFileName": false,
"uploadWithSourceMap": true,
"useIsolateContext": true,
"nodeModules": false,
"enhance": true,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"enableEngineNative": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"showES6CompileOption": false
},
"compileType": "miniprogram",
"libVersion": "2.24.1",
"appid": "wx682898bb37c1b879",
"projectname": "%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%AF%BE%E6%9C%AC%E6%A1%88%E4%BE%8B",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"staticServerOptions": {
"baseURL": "",
"servePath": ""
},
"isGameTourist": false,
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"game": {
"list": []
},
"plugin": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
}
}
05 框架页面文件
一个小程序框架页面文件由5个文件组成，分别是js文件（页面逻辑）、json文件（页面配置）、wxml文件（页面结构）、wxs文件（小程序脚本文件）、wxss（页面样式表）。每一个页面都是一个独立的文件夹。
06 小案例
app.json文件
{
"pages": [
"pages/movie/movie",
"pages/cinema/cinema",
"pages/find/find",
"pages/me/me"
],
"window": {
"navigationBarBackgroundColor": "#666666",
"navigationBarTextStyle":"black",
"navigationBarTitleText": "猫眼",
"backgroundColor": "#909090",
"enablePullDownRefresh": true
},
"tabBar": {
"selectedColor": "#88FF88",
"backgroundColor": "#AAAAAA",
"borderStyle": "black",
"position": "top",
"list": [
{
"pagePath": "pages/movie/movie",
"text": "电影"
},
{
"pagePath": "pages/cinema/cinema",
"text": "影院"
},
{
"pagePath": "pages/find/find",
"text": "发现"
},
{
"pagePath": "pages/me/me",
"text": "我的"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
