首頁  >  文章  >  微信小程式  >  分享小程式頁面開發應該注意的問題

分享小程式頁面開發應該注意的問題

零下一度
零下一度原創
2017-05-24 09:22:052017瀏覽

這篇文章主要介紹了微信小程式頁面開發注意事項整理的相關資料,需要的朋友可以參考下

小程式的開發注意事項:

#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開關,快取資料、檔案資料、授權資料這些可能要不同項目用到。

【相關推薦】

1. 微信小程式完整原始碼下載

2. 追格微信小程式應用商店原始碼

3. 微信小程式demo:陽淘

以上是分享小程式頁面開發應該注意的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn