微信小程序项目快速入门指南
1. 项目目录结构及介绍
在wechat_applet
项目中,主要的目录结构如下:
wechat_applet/
├── app.js # 应用级逻辑代码
├── app.json # 应用配置文件
├── components/ # 自定义组件目录
│ └── example_component/ # 示例自定义组件
│ ├── index.js # 组件逻辑代码
│ ├── index.wxml # 视图层模板
│ └── index.wxss # 样式表
├── pages/ # 页面目录
│ ├── home/ # 首页
│ │ ├── index.js # 页面逻辑代码
│ │ ├── index.wxml # 视图层模板
│ │ └── index.wxss # 样式表
│ └── ...
└── static/ # 静态资源目录(图片、字体等)
└── utils/ # 工具函数库
解释:
app.js
: 应用程序的主要入口文件,包含全局方法和生命周期事件。app.json
: 应用配置文件,用于设置应用的基础信息、页面列表以及全局样式等。components/
: 存放自定义组件的目录,每个组件有自己的子目录,包括逻辑代码、视图模板和样式表。pages/
: 包含所有页面的目录,每个页面有各自的逻辑代码、视图模板和样式表。static/
: 放置不参与编译的静态资源,如图片、图标等。utils/
: 存放通用的工具函数,供各页面和组件调用。
2. 项目的启动文件介绍
app.js
在app.js
中,你会看到一个基础的微信小程序应用的初始化代码,例如注册应用程序、声明全局变量、监听生命周期函数等。示例代码可能如下:
// 引入API库
import wx from 'wx'
App({
// 应用启动时执行
onLaunch: function() {
console.log('App Launch')
},
// 当前页面进入可视区
onShow: function() {
console.log('App Show')
},
// 全局共享数据
globalData: {
someKey: 'someValue'
}
})
onLaunch
和onShow
是微信小程序生命周期中的两个重要回调函数,通常在这里进行初始化操作或者处理用户登录状态。
app.json
app.json
是一个JSON文件,用于配置整个小程序的基本属性,如应用名称、图标、页面路径等。以下是app.json
的一个基本示例:
{
"name": "MyWechatApplet",
"description": "我的微信小程序示例",
"pages": [
"pages/home/index",
"pages/about/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序"
},
"permission": {
"scope.userLocation": {
"desc": "需要获取您的位置信息以提供服务"
}
}
}
pages
字段定义了小程序运行时会加载的页面列表。window
配置项设置了导航栏和全局样式。permission
配置用来设置权限提示信息,比如请求地理位置授权。
3. 项目的配置文件介绍
除了app.json
之外,项目中还有其他配置文件,如:
- miniprogram.npm.config.json: 如果你的项目使用了npm包,这个文件用于配置NPM依赖的打包规则。
- project.config.json: 微信开发者工具的项目配置文件,包含编译设置、环境变量等,一般由微信开发者工具自动生成,不建议手动修改。
要启动项目,你需要打开微信开发者工具,导入wechat_applet
项目,然后点击“编译”或“预览”,在模拟器或手机上查看和调试你的小程序。记得在发布前进行真机测试并完成必要的权限申请和审核。