1. 程式人生 > >微信小程序開發之電影預告

微信小程序開發之電影預告

開發 作用 app.js ber 自定義 頁面 日期和時間 hat code

一、小程序支持的標簽
1、view:
div和view都是盒模型,默認display:block。
盒模型在布局過程中,一般推薦display:flex的寫法,配合justify-content:center;align-items:center;
的定義實現盒模型在橫向和縱向的居中。
2、text:
除了text文本節點以外的其他節點都無法長按選中
3、icon
icon可以直接用微信組件默認的圖標,默認是iconfont格式的
4、input
input 的類型,有效值:text, number, idcard, digit, time, date 。
5、picker
picker默認支持普通、日期和時間三種選擇器
6、navigator
navigator支持相對路徑和絕對路徑的跳轉,默認是打開新頁面,當前頁面打開需要加redirect;
7、image
小程序的image與HTML5的img最大的區別在於:小程序的image是按照background-image來實現的。
默認image的高寬是320x240。必須通過樣式定義去覆蓋這個默認高寬,auto在這裏不生效
8、button
小程序不支持button:active這種樣式的寫法,button的點擊態通過.button-hover{}的樣式覆蓋,也可修改hover-class為自定義的樣式名。
9、<swiper><swiper> 圖片輪播 樣式和屬性作用在 swiper標簽上
二、文件類型說明
app.json

{
  "pages":[  //哪個寫在第一位,哪個就是入口文件
    "pages/index/index",
    "pages/user/user",
    "pages/subject/subject"
  ], 
  "window":{  //配置小程序頭部的樣式及標題等等
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {  //配置小程序底部tab切換,最少包含2項,且"pagePath" 需在 pages 數組中
    "list": [
        {
          "pagePath": "pages/index/index",  //這裏的路徑必須和上面pages裏面的路徑一樣
          "text": "text",  //tab切換的名字
          "iconPath": "iconPath",  //tab切換名字上面的圖標
          "selectedIconPath": "selectedIconPath"  //選中時候tab的圖標
        },
        {
          "pagePath": "pages/user/user",
        "text": "user"
          "iconPath": "iconPath",
          "selectedIconPath": "selectedIconPath"
        }
    ]
  }
}

三、創建文件,在pages上右鍵,新建目錄 -> 新建Page -> 輸入名稱,如user,即可自動創建4種格式的wx文件

微信小程序開發之電影預告