微信小程式學習之初探小程式

2022-10-07 10:24:08 字數 2036 閱讀 4568

前言

9月21日,傳言已久的微信應用號正式以「微信公眾平台小程式」的名義發布,依然採取了內測制度,目前只有少部分開發者可使用。「微信之父」張小龍在朋友圈介紹,這種小程式是一種不需要**安裝即可使用的應用,使用者掃一掃或者搜一下即可開啟應用,對使用者來說應用觸手可及,對微信來說體現了用完即走的理念。應用號出來之後,有人說微信這次要顛覆appstore了,開發者直接基於微信開發小程式就可以了,不用開發什麼app了。更有人說微信就是乙個作業系統,真的如此嗎?不管怎樣,我們下面先來一探微信小程式。

一 專案檔案結構

當開啟微信小程式的demo的時候,我個人習慣是先看整個專案的檔案結構,先大致弄清這部分是幹什麼的,那部分又是幹什麼的,微信小程式基本的檔案結構如下圖:

首先我們一眼就可以看到,在專案根目錄有三個檔案,app.js,app.json,以及app.wxss,下面來談談我對這三個檔案的理解。

1 . app.js

app.js中包含乙個app()函式,我把它理解為微信小程式真正意義上的入口,也就是說當啟動乙個小程式的時候,首先會執行到這裡。app()函式用來註冊乙個小程式,引數為object型別,可以在其中指定小程式的生命週期函式(理解還不是很透徹), 當然,也可以定義乙個全域性的資料和函式,

我們可以在頁面中呼叫全域性的getapp()方法,獲得小程式例項,從而來呼叫我們定義的全域性資料和函式。

2 . app.json

app.json可以kmzixzr對小程式進行全域性的配置,比如我們可以配置小程式有哪些頁面、視窗表現形式、設定網路超時時間、設定多tab等。下面就是乙個簡單的配置:

, "tabbar": ,]

}, "networktimeout": ,

"debug": true

}3 .app.wxss

app.wxss檔案比較好理解了,它相當於乙個全域性的樣式表,等同於前端中的css檔案,任何頁面都可以使用這個樣式表,當然,如果某個頁面重複定義了某個屬性的表現形式的話,則會覆蓋app.wxss檔案中定義的。

以上三個檔案中,app.js和app.json是每個微信小程式必須要有的,app.wxss則根據需要來新增。

在圖一的檔案結構中,還有三個資料夾目錄:images,pages,utils,這種形式就類似我們開發中分包的做法(其實就是)-將具有型別性質的檔案或者類分目錄存放,這樣便於維護專案。

我們來關注下pages目錄,這個目錄存放了小程式的所有頁面。

這裡我們定義了兩個頁面,index(首頁)和logs(顯示某種日誌)。

可以看到,在每個頁面中,也有類似前邊兒我們所說的app.js,app.json等檔案,下面我們就來看看它們具體是什麼。

以logs頁面為例:

1 .logs.js

我們看一下這個檔案中簡單的**:

var util = require('../../utils/util.js')

page(,

onload: function () )

}) }

})如果你有過開發經驗或者是js開發經驗,那麼一樣就可以看出,這個類的結構很簡單:1.引入了乙個外部檔案,2.有乙個函式,進行了某種處理。

我們看一下官方文件是怎麼介紹這個以js結尾的檔案的:包含乙個page()函式,p函式用來註冊乙個頁面。接受乙個object引數,其指定頁面的初始資料、生命週期函式、事件處理函式等。它是頁面的邏輯檔案,頁面邏輯在這裡處理。

在這個檔案中,我們可以定義變數,函式等。

2 .logs.json

app.json是小程式的全部配置檔案,那麼不難理解,logs.json則是logs頁面的配置檔案,在這裡我們可以配置頁面標題等屬性。

3 .logs.wxml

wxml檔案是頁面獨有的,它相當於介面,它是與使用者互動的入口,微信提供了很多基礎元件,例如按鈕,文字以及進度條等,都可以在這個檔案中配置並顯示出具體的效果。

4 .logs.wxss

wxss跟app.wxss檔案一樣,都是樣式表檔案,不過每個頁面下的這個檔案時對於某個頁面的,而app.wxss則是全域性的樣式配置,相同屬性的話,logs.wxss會覆蓋掉app.wxss中的。

對於頁面下的檔案配置,我們來看一下官方的說明:

總結

微信小程式學習

在實際開發過程中遇到 warning now you can provide attr wx key for a wx for to improve performance.上網查詢資料與檢視官方文件發現原因大致如下 官方解釋 wx key 如果列表中專案的位置會動態改變或者有新的專案新增到列表中,...

微信小程式學習

1.json 字尾的 json 配置檔案 project.config.json 在工具上做的任何配置都會寫入到這個檔案,其中會包括編輯器的顏色 上傳時自動壓縮 格式 雙引號 2.wxml 字尾的 wxml 模板檔案 this.setdata js中處理狀態 3.wxss 字尾的 wxss 樣式檔案...

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...