1. 程式人生 > 程式設計 >微信小程式學習總結(一)專案建立與目錄結構分析

微信小程式學習總結(一)專案建立與目錄結構分析

本文例項講述了微信小程式專案建立與目錄結構。分享給大家供大家參考,具體如下:

首先,放上微信公眾品臺的網址https://mp.weixin.qq.com/,下面內容完全可以跟著做。https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
下載開發工具。

建立專案

如圖所示

這裡寫圖片描述

選點此校驗就行啦,右邊有個詳情也點開瞅兩眼。

這裡寫圖片描述

上傳測試和騰訊這塊點不了是為啥呢,因為你建立專案的時候沒有填寫AppID,下一題。

具體的東西下載下來瞅瞅點點就行。下面介紹結構。

目錄結構

這裡寫圖片描述

1.wxml相當於html,wxss相當於css

2.在 app.json 的 pages 欄位,新增需要新建的頁面的路徑,將會自動生成改頁面所需要的檔案

這裡寫圖片描述
同樣裡面也會生成四個檔案,且與檔名同名的檔案。

這裡寫圖片描述
3.ctrl+s相當於點選編譯

4.外面的四個檔案相當於全域性檔案,那麼是聽誰的呢,當然是就近原則了,離誰近受誰影響

例子:在index.wxml寫上這麼一句<text>hello world </text>,在index.wxss中寫上text{ color:red; },在全域性wxss中寫text{ color:blue; },結果顏色為紅色啦。

5.json檔案是來幹嘛的呢。我們來看官方的解釋。app.json檔案用來對微信小程式進行全域性配置,決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。

第一部分pages

這裡寫圖片描述
接受一個數組,每一項都是字串,來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】資訊,陣列的第一項代表小程式的初始頁面。小程式中新增/減少頁面,都需要對 pages 陣列進行修改。

第二部分window

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

這裡寫圖片描述
很給力!

希望本文所述對大家微信小程式設計有所幫助。