微信小程序的目錄結構解剖


在微信小程序當中,我們看到有: .js后綴文件,.json后綴文件,.wxss后綴文件,.wxml后綴文件

.js后綴文件就是我們寫的普通的js文件

.json后綴文件就是小程序的配置文件,比如:windows的樣式,頁面的渲染文件順序,Tabs導航的配置

 

當然,初始化的實例當中沒有給出Tabs配置,其實就跟window的格式一樣

.wxss后綴文件就是我們寫的css文件

.wxml后綴文件就相當於我們的html文件,里面的view標簽就看做是div , text標簽就看做是p

所有的頁面都在pages文件夾當中,每個頁面都有一個單獨的文件,這個文件里就包括了.js .wxss .wxml 或者 .json文件

utils文件夾中,你可以放一些common函數,常用的變量等,需要的時候通過import來取得

在project.config.json配置文件當中,我們可以看到項目的設置跟介紹,版本,appid等信息

 

注意事項:

1.整個小程序實例是MVC開發思想跟模式

2.布局用flexbox

3.在小程序里,像素的單位是rpx,rpx單位是微信小程序中css的尺寸單位,rpx可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

(Tips): 建議設計稿以iphone6尺寸做為視覺標准稿,因為這樣的話設備寬度為750px比較容易計算出rpx單位,這樣一來,1px=1rpx;至於在不同的設備上實際上要換算成多少個rem就交給小程序自己換算了

4.學習一些基本的ES6語法(比如:import(引入)  export(輸出)  箭頭函數等等)

總結幾點:需要學習下彈性盒子布局,ES6基礎語法,然后根據上訴所說,就可以開始小程序的編程之旅啦!

如果大家有意見,可以在下方評價,歡迎來訪!

下一篇,微信小程序Tabs如何配置(navigator)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM