微信小程序开发教学系列（2）- 基础知识
2. 基础知识
本章将介绍微信小程序的基础知识，包括小程序的组成与结构、小程序的生命周期、常用的小程序配置项以及常用的小程序组件介绍和使用方法。
2.1 小程序的组成与结构
微信小程序由三个基本部分组成：视图层、逻辑层和数据层。
- 视图层：视图层由
wxml和wxss文件组成，负责显示页面的结构和样式。 - 逻辑层：逻辑层由
js文件组成，负责处理页面的逻辑、事件和数据交互。 - 数据层：数据层由
json文件组成，负责配置页面的基本信息和传递数据。
以下是一个典型的小程序目录结构：
pages/
|- index/
|- index.js
|- index.wxml
|- index.wxss
|- index.json
|- detail/
|- detail.js
|- detail.wxml
|- detail.wxss
|- detail.json
app.js
app.json
app.wxss
2.2 小程序的生命周期
小程序的生命周期包括以下几个关键阶段：
onLaunch：小程序初始化时执行的函数，在小程序的生命周期中，onLaunch是小程序初始化时执行的函数。在这个函数中，可以进行一些初始化操作，如获取用户信息、设置全局变量等。
示例代码如下：
App({
onLaunch: function () {
// 小程序初始化
console.log('小程序初始化');
// 获取用户信息
wx.getUserInfo({
success: function (res) {
console.log('获取用户信息成功', res.userInfo);
},
fail: function (res) {
console.log('获取用户信息失败', res);
}
});
// 设置全局变量
this.globalData = {
appName: 'MyApp',
version: '1.0.0'
};
}
})
在上述代码中，onLaunch函数中的代码将在小程序初始化时执行。具体来说，它会输出一条日志信息，获取用户信息并打印出来，然后设置了一个全局变量。
2.3 常用的小程序配置项
小程序的配置文件app.json中包含了一些常用的配置项，如下所示：
{
"pages": [
"pages/index/index",
"pages/detail/detail"
],
"window": {
"navigationBarTitleText": "小程序示例",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#999999",
"selectedColor": "#ff0000",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tabbar/home.png",
"selectedIconPath": "images/tabbar/home_active.png"
},
{
"pagePath": "pages/detail/detail",
"text": "详情",
"iconPath": "images/tabbar/detail.png",
"selectedIconPath": "images/tabbar/detail_active.png"
}
]
},
"networkTimeout": {
"request": 5000,
"downloadFile": 10000
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位服务"
}
},
"sitemapLocation": "sitemap.json"
}
在上述示例中，常用的小程序配置项包括：
pages：配置小程序的页面路径，用于实现页面的跳转。window：配置小程序的窗口样式，如导航栏的文字颜色、背景色等。tabBar：配置小程序的底部导航栏，包括图标、文字等。networkTimeout：配置小程序的网络请求超时时间。permission：配置小程序的权限要求，指定小程序需要获取用户位置信息的权限，并提供相应的权限说明。
2.4 常用的小程序组件介绍和使用方法
微信小程序提供了丰富的组件库，用于构建页面的结构和交互效果。以下是一些常用的小程序组件示例：
文本和图像组件
文本组件用于显示文字内容，图像组件用于展示图片。
<view>
<text>这是一段文字text>
<image src="path/to/image.png">image>
view>
列表组件
列表组件用于展示多个数据项，常用的列表组件有
<view>
<view wx:for="{{list}}" wx:key="index">
<text>{{item}}text>
view>
<scroll-view>
scroll-view>
<swiper>
swiper>
view>
表单组件
表单组件用于用户输入和提交数据，常用的表单组件有、