微信小程式頁面開發注意事項整理，小程式頁面注意事項

小程式頁面開發注意事項整理，小程式頁面注意事項

小程式的開發注意事項：

1、js檔案

每個頁面對應的js檔案可以定義頁面onReady，onLoad，onShow，onHide，onUnload，還有頁面的資料，自訂的函數要寫到一塊，內部約定是都寫到預設函數的後面。既“頁面中先data，再預設函數，再自訂函數”方便review code，提高協作效率。

2、json檔案

預設不可為空，即使沒有內容也要為空白資料{}，原先定義在app.json中的內容，如果需要在當前頁面中重新定義，那麼只要把內容複寫過來，直接賦新值即可，用於設定小程式的狀態列、導航條、標題、視窗背景色。常用的是頁面的標題

{ "navigationBarTitleText": "我的", "selfdata":"全棧工程師師不靠譜更新", "tabBar": {  "list": [{  "pagePath": "pagePath",  "text": "text",  "iconPath": "iconPath",  "selectedIconPath": "selectedIconPath"  }],  "position":"top" }}

見慣了菜單在底部的，來一個在top吧。

3、wxml檔案

頁面頭部和底部需要封裝好，做成模版，分別匯入入頁面

<import src="/pages/common/head.wxml"/><import src="/pages/common/foot.wxml"/>

之前HTML編寫的好習慣還是要帶入進來有head還有foot，當然業務內容就body，每一塊就用一個view封裝起來，方便控制布局和class

頁面載入的時候擷取資料，從網路或從緩衝中，資料再通過頁面的data中定義的內容在頁面渲染。具體的呈現列表、條件這些多多的使用。

4、wxss檔案

@import "common.wxss";

公用樣式、reset樣式要根據不同項目提前管理好，不要使用px，不要使用px，不要使用px，重要的事情要說三遍，小程式為了保證相容和自適應使用了新的單位rpx

5、要提供一個供使用者清理本機快取的按鈕。相當於項目的reset開關，快取資料、檔案資料、授權資料這些可能要不同項目中用到。

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！