# 介绍
微信小程序使用JavaScript开发语言,运行在微信App内,不用去分别开发Android和iOS系统的APP,降低了开发成本,无需考虑兼容问题,即点即用,无需下载安装,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
微信小程序开发文档[https://developers.weixin.qq.com/miniprogram/dev/framework/]()
# 微信小程序环境配置
1. 申请小程序账号,填写相关资料后即可获取自己的小程序帐号
![](https://img.kancloud.cn/06/50/0650f0f90128f16f4570145238065b87_1549x746.png)
2. 自动生成小程序的AppID和密钥,AppID相当于小程序的身份证
![](https://img.kancloud.cn/68/ba/68ba25584f781119f14a0fd02551a304_1305x523.png)
3. 下载小程序开发工具,默认安装后用微信扫码登录
![](https://img.kancloud.cn/5f/63/5f6329311cc16c212b310a71e6f80be1_1477x585.png)
4. 新建行李查询小程序项目
![](https://img.kancloud.cn/e4/27/e427e6d09559108afd4b0b5a581ee481_814x552.png)
5. 默认有代码框架已经初始化,自带Hello World项目
![](https://img.kancloud.cn/21/be/21be1e8bcee451c13842c2cd0164d87e_606x521.png)
6. 目录结构
![](https://img.kancloud.cn/09/23/0923bb8cd39abca2d32a5985c486d8e8_745x330.png)
# 业务功能实现(行李查询)
1. 初始化小程序全局配置,包括小程序所有页面路径、界面样式、网络超时时间、底部tab等
![](https://img.kancloud.cn/5f/e3/5fe357bc0abf44de8f2f125d4e28f32e_622x432.png)
2. app.js中引入appConfig.js(后台接口文件)和util.js(常用工具类文件),并配置在App实例中,这样变量在全局都可以调用了
![](https://img.kancloud.cn/89/52/8952a4160adab99edd6edb5dcfb4aee9_855x574.png)
3. 新建页面(行李查询)
所有的模块页面都放在pages文件夹中,按自己项目的功能分类,新建行李项目luggage,还有子页面行李列表luggageList
与html不同的是,小程序文件不需要单独关联js和wxss文件,会默认将同名的js和wxss文件引用,若要引用外部文件,可按需引用
![](https://img.kancloud.cn/e7/96/e796278a3a530b8a33f8f7bc860a76d1_370x404.png)
4. 配置页面路径(app.json)
![](https://img.kancloud.cn/ed/77/ed77ea33aa179302b994f9b44c124031_1125x407.png)
5. 配置后端接口地址(appConfig.js)
![](https://img.kancloud.cn/4a/73/4a73f551df65ff83a65e700ee3b775bd_823x351.png)
6. 行李查询需要用到的图片资源复制到小程序里(images文件夹)
![](https://img.kancloud.cn/65/b3/65b3586bdeb31119950cddc5eb3ed700_1247x482.png)
7. 静态界面wxml和样式wxss开发
![](https://img.kancloud.cn/cd/a1/cda1523fae55cd7852dc07464c404cab_1019x481.png)
8. 编写查询请求页面和处理逻辑(js)
![](https://img.kancloud.cn/65/ff/65ffd22fa6bcf4abd3526f96f453a698_711x451.png)
9. 成功回调后赋值(js)
![](https://img.kancloud.cn/64/61/64614c0d38b8349ac822319707394634_620x397.png)
10. 界面数据绑定(wxml)
![](https://img.kancloud.cn/98/d6/98d6973e0da02be0c46aefec42855bf8_420x208.png)
11. 前端界面显示效果
![](https://img.kancloud.cn/d6/94/d694f108478b6193c05c01952f8e57e0_324x262.png)
# 效果展示
行李查询主界面
![](https://img.kancloud.cn/b8/d6/b8d6e6f6a13be9ccfd61ffacbeff0c25_322x503.png)
行李查询结果
![](https://img.kancloud.cn/15/0b/150bfc305f63168f24b6c050f0299f1d_322x303.png)