天天看點

「小程式JAVA實戰」微信開發者工具helloworld(三)

第一個小程式demo的運作,首選需要去使用開發工具
https://mp.weixin.qq.com/cgi-bin/wx 點選開發工具,選擇自己的系統版本進行下載下傳,安裝就可以了
「小程式JAVA實戰」微信開發者工具helloworld(三)
「小程式JAVA實戰」微信開發者工具helloworld(三)

打開下載下傳後的安裝檔案

「小程式JAVA實戰」微信開發者工具helloworld(三)

選擇對應的安裝目錄

「小程式JAVA實戰」微信開發者工具helloworld(三)

等待安裝

「小程式JAVA實戰」微信開發者工具helloworld(三)

安裝完畢

「小程式JAVA實戰」微信開發者工具helloworld(三)

打開安裝後的檔案

「小程式JAVA實戰」微信開發者工具helloworld(三)

掃描二維碼

「小程式JAVA實戰」微信開發者工具helloworld(三)

選擇小程式

「小程式JAVA實戰」微信開發者工具helloworld(三)

選擇安裝目錄

> 類似eclipse的項目路徑

「小程式JAVA實戰」微信開發者工具helloworld(三)
「小程式JAVA實戰」微信開發者工具helloworld(三)

4.打開後的預設界面

做過web開發的都很熟悉Google Chrome浏覽器,感覺跟他很像是吧。後面在使用中在詳細的介紹某個按鈕的功能,其實都不太複雜。
「小程式JAVA實戰」微信開發者工具helloworld(三)

編譯預覽

> 點選工具上的編譯按鈕,可以在工具的左側模拟器界面看到這個小程式的表現,也可以點選預覽按鈕,通過微信的掃一掃在手機上體驗你的第一個小程式。

「小程式JAVA實戰」微信開發者工具helloworld(三)
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE
「小程式JAVA實戰」微信開發者工具helloworld(三)

app.js

app.json 是對目前小程式的全局配置,包括了小程式的所有頁面路徑、界面表現、網絡逾時時間、底部 tab 等。

app.json

其實用來表示 pages/logs 目錄下的 logs.json 這類和小程式頁面相關的配置。如果你整個小程式的風格是藍色調,那麼你可以在 app.json 裡邊聲明頂部顔色是藍色即可。實際情況可能不是這樣,可能你小程式裡邊的每個頁面都有不一樣的色調來區分不同功能子產品,是以我們提供了 page.json,讓開發者可以獨立定義每個頁面的一些屬性,例如剛剛說的頂部顔色、是否允許下拉重新整理等等。

wxcss

WXSS 具有 CSS 大部分的特性,小程式在 WXSS 也做了一些擴充和修改。新增了尺寸機關。在寫 CSS 樣式時,開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置像素比,采用一些技巧來換算一些像素機關。WXSS 在底層支援新的尺寸機關 rpx ,開發者可以免去換算的煩惱,隻要交給小程式底層來換算即可,由于換算采用的浮點數運算,是以運算結果會和預期結果有一點點偏差。

提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同,你可以寫一個 app.wxss 作為全局樣式,會作用于目前小程式的所有頁面,局部頁面樣式 page.wxss 僅對目前頁面生效。

此外 WXSS 僅支援部分 CSS 選擇器。

project.config.json

通常大家在使用一個工具的時候,都會針對各自喜好做一些個性化配置,例如界面顔色、編譯配置等等,當你換了另外一台電腦重新安裝工具的時候,你還要重新配置。

wxml 等基本等同咱們開發的html,wxss是等同css, 通過這三個檔案基本的就可以構成咱們的頁面了。基本頁面的構成就需要這3個檔案。
「小程式JAVA實戰」微信開發者工具helloworld(三)
utils 常用公共js的抽象。
「小程式JAVA實戰」微信開發者工具helloworld(三)
在page内定義的一個logs檔案夾,以後開發的時候可能需要定義很多個名稱的檔案夾。
「小程式JAVA實戰」微信開發者工具helloworld(三)
「小程式JAVA實戰」微信開發者工具helloworld(三)
「小程式JAVA實戰」微信開發者工具helloworld(三)

PS:這就是大緻的工具介紹,後面循序漸進慢慢的搞透,搞熟悉。