小程式新手 教你如何入手

首先 介紹一下 什麼是微信小程式？
是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者掃一掃或搜一下即可開啟應用，非常的方便與APP不同的是，小程式無需下載安裝、無需解除安裝、用完即走，那麼意味著也不佔手機記憶體，對於手機沒記憶體的人來說，可謂是一大福音啊！此外，也不會推送資訊騷擾你，只能使用者觸發 然後我們進入正題 微信小程式
**

1.視窗配置
小程式根目錄下的 app.json 檔案用來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。
根目錄下：entryPagePath：“pages/index/index”’ 小程式預設啟動項，每次更新之後要進入的頁面
**

根目錄下的page：

**
在這裡插入圖片描述
分享一個小技巧 在page寫完路徑直接儲存會自動生成資料夾 裡邊包含微信小程式的基礎配置檔案
**

根目錄下的tabBar

根目錄下的Windows 用於設定小程式的狀態列、導航條、標題、視窗背景色。

小程式檔案型別
.js -------- 指令碼檔案：頁面的互動邏輯均在此頁面中進行

json ------ 配置檔案：用於設定程式的配置效果

.wxml ---- 頁面結構檔案：書寫控制元件，構建頁面

wxss ----- 樣式檔案：類似於css樣式，用於美化頁面
1
2
3
4
.js檔案
當我們生成一個資料夾的時候微信開發者工具非常智慧會自己提示我們每個生命週期的作用是什麼
在這裡插入圖片描述
.json檔案主要是頁面的配置項 資料夾內的json配置的優先順序要高於全域性app.json 也可以插入第三方外掛庫

也可以插入第三方外掛庫
.css檔案 頁面的css檔案

在這裡插入圖片描述
這裡要注意的是微信小程式的css裡邊是沒有px單位的 所以剛入門的小夥伴一定要注意單位是rpx rpx rpx重要的事情說三遍

小程式生命週期 和 小程式頁面的生命週期
小程式生命週期

App() 必須在 app.js 中呼叫，必須呼叫且只能呼叫一次，app.js中定義了一些應用的生命週期函式
（1）onLaunch: 初始化小程式時觸發，全域性只觸發一次
（2）onShow: 小程式初始化完成或使用者從後臺切換到前臺顯示時觸發
（3）onHide: 使用者從前臺切換到後臺隱藏時觸發
（4）onError: 小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
1
2
3
4
5
小程式頁面的生命週期

（1）onLoad：首次進入頁面載入時觸發，可以在 onLoad 的引數中獲取開啟當前頁面路徑中的引數。
（2）onShow：載入完成後、後臺切到前臺或重新進入頁面時觸發
（3）onReady：頁面首次渲染完成時觸發
（4）onHide：從前臺切到後臺或進入其他頁面觸發
（5）onUnload：頁面解除安裝時觸發
1
2
3
4
5
微信小程式的區域性資料夾內生命週期要比全域性生命週期的優先順序高 （跟json配置檔案一樣）

資料請求和封裝
為什麼要封裝網路請求 可以極大的節省重複的程式碼 後期利於維護 減少高併發請求 我也就只能說這麼多了。。。
首先 環境的切換

然後 一個檔案負責統一管理路徑

一個檔案負責封裝http這裡是promise

一個檔案作為入口檔案 負責匯出

然後封裝完成就是 使用
在全域性的app.js檔案中移入入口檔案 然後使用配置檔案

在你使用介面的頁面的js檔案中 匯入

還有下篇 會講述一些文新小程式的 路由配置、跳轉 事件方法 本地儲存等