微信小程序 js xmss json 使用

app.js

App({
  onLaunch (options) {
    // Do something initial when launch.
    監聽小程序初始化。
  },
  onShow (options) {
      //options 監聽通過什么方式進入 獲取場景值
    // Do something when show.
    監聽小程序啟動或切前台。（微信切進前台）
  },
  onHide () {
    // Do something when hide.
    監聽小程序切后台。（進入后台）
    //把零時數據存儲起來
  },
  onError (msg) {
     // 錯誤監聽函數。
    console.log(msg)
  },
  onPageNotFound(){
      頁面不存在監聽函數。
  }
  
  //開發者可以添加任意的函數或數據變量到 Object 參數中，用 this 可以訪問
  globalData: 'I am global data'
  setnewfn(){
      consoel.log('任意函數')
  }
})

 

 

 

 

app.json 進行全局配置

界面風格的設置：

屬性	類型	必填	描述	最低版本
pages	string[]	是	頁面路徑列表

pages 配置項 數組里寫頁面入徑 小程序可以找到頁面

第一個數組的值，代表的小程序進入時，最先顯示的頁面。

 

 

window 配置項（缺點只能用默認的導航條）

 

用於設置小程序的狀態欄、導航條、標題、窗口背景色。

 

1.用於自定義導航欄 (滿足於設計師的需求)

navigationStyle :custom

 

2.下拉加載更多

onReachBottomDistance ：50 下拉加載更多

當創建一個pages/home/home 頁面時 ，下拉頁面會觸發一個page.js 里的生命周期函數

onReachBottom : function(){

//用來加載數據

}

 

3.屏幕旋轉設置

pageOrientation ： auto/ portrait / landscape 詳見 響應顯示區域變化

portrait 人像模式 豎屏

landscape 風景模式 橫屏

手機以什么方式顯示

等等配置

 

 

tabBar 配置項

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

 

{
  "pages": [//配置頁面路徑
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/mine/mine"
  ],
  "window": {//用於設置小程序的狀態欄、導航條、標題、窗口背景色
    "navigationBarBackgroundColor": "#e54847",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "貓眼",
    "backgroundColor": "#E8E8E8",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "pageOrientation": "auto"
  },
  "tabBar": {//配值tab
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/movie/movie",
        "text": "電影",
        "iconPath":"/images/2153438.jpg",
        "selectedIconPath":"/images/2153400.jpg"
      },
      {
        "pagePath": "pages/cinema/cinema",
        "text": "影院",
        "iconPath": "/images/1906157.jpg",
        "selectedIconPath": "/images/1902757.jpg"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/685380.jpg",
        "selectedIconPath": "/images/685255.jpg"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

 

注意：圖片格式要png格式，引入圖片不能寫絕對路徑

 

app.wxss 全局樣式 的設置

如果在pages/home/home 自己的wxss的文件設置樣式，會覆蓋全局樣式

樣式導入

使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

示例代碼：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

 

內聯樣式

框架組件上支持使用 style、class 屬性來控制組件的樣式。

• style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

<view style="color:{{color}};" />

 

• class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

<view class="normal_view" />

 

微信適配的問題

設計師設計出寬750px 的設計圖 這樣我們前端可以不用進行換算 直接使用750rpx

顯示在手機圖像和設計圖的圖像相同。

 

pages 下面的頁面

js文件

生命周期函數

Page({
  /**
   * 頁面的初始數據,給xml為文件使用{{}}
   */
   //改數據data 方法 this.setData({}})
  data: {
      
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
  },
  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
  },
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作（下拉刷新）
   */
  onPullDownRefresh: function () {
  },
  /**
   * 頁面上拉觸底事件的處理函數（上拉加載更多）
   */
  onReachBottom: function () {
  },
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
      return{//用於自定義轉發內容
          title:'快來領紅包了'
          path："/pages/home/home?id=110",//path用於轉發我的小程序給好友，好友通過二維碼，
          等,進入該路徑的頁面,通過添加參數就知道你是怎樣進入頁面的。做【派發紅包的事情。
      }
  }
  onResize：function(){
      //頁面旋轉是觸發
  }
  onTabItemTap：function(){
      //點擊到tab欄   設置該生命函數的頁面 會執行該函數
      主要的作用是：點擊該頁面 去瀏覽 然后再點擊該頁面會有觸發返回top部
      點擊tab  會播放某個聲音
  }
})