小程序開發文檔 · 服務云開發文檔

# 介紹微信小程序使用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)