推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 828|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(1):微信小程序的文件結構

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:01:17 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

文件結構





示例目錄:HelloWorld





*******************************************************分割線********************************************************





全局文件



app.js文件

這個是小程序的腳本代碼文件,可以在這個文件上進行監聽,并處理小程序的一些生命周期(比如一些全局變量)


在這個app.js文件內,需要使用App()函數,來注冊程序。






演示:

//app.js

App({

  onLaunch: function () {

    //當小程序初始化完成時,會觸發onLaunch(全局只觸發一次)

  },

  onShow: function () {

  //當小程序啟動,或從后臺進入前臺顯示,會觸發onShow

  },

  onHide: function () {

  //當小程序從前臺進入后臺,會觸發onHide

  },

  onError: function (msg) {

  //當小程序發生腳本錯誤,或者api調用失敗時,會觸發onError并帶上錯誤信息

  },

  other:function(){

//全局函數,可以被項目上的其他js文件調用

  },

  globalData:{

//全局對象

  },

})





app.json文件

小程序的全局配置文件





pages

來指定小程序由哪些頁面組成

接受一個數組,每一項都是字符串。每一項代表對應頁面的【路徑+文件名】信息,數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面,都需要對pages數組進行修改。

文件名不需要寫文件后綴,因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。

例如:


{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"


}



備注:pages內只需要寫wxml文件的路徑,其他文件不用寫




window

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



示例:

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}





tabBar

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

Tip: 通過頁面跳轉(wx.navigateTo)或者頁面重定向(wx.redirectTo)所到達的頁面,即使它是定義在 tabBar配置中的頁面,也不會顯示底部的 tab欄。

tabBar 是一個數組,只能配置最少2個、最多5個 tab,tab按數組的順序排序。






示例:

{

  "tabBar": {

  "color":"#818181",

  "selectedColor":"#0082D7",

  "borderStyle":"white",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首頁",

      "iconPath":"images/tabbar/[email protected]",

      "selectedIconPath":"images/tabbar/[email protected]"

    }, {

      "pagePath": "pages/me/me",

      "text": "設置",

      "iconPath":"images/tabbar/[email protected]",

      "selectedIconPath":"images/tabbar/[email protected]"


  }

}




networkTimeout

可以設置各種網絡請求的超時時間。



示例:

{

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  }

}




debug

可以在開發者工具中開啟 debug模式,在開發者工具的控制臺面板,調試信息以 info的形式給出,其信息有Page的注冊,頁面路由,數據更新,事件觸發 。 可以幫助開發者快速定位一些常見的問題。

示例:

{

  "debug": false

}




app.wxss文件


定義全局的樣式

基本上與css差不多,這里不用多講





*******************************************************分割線********************************************************





一個頁面的內部



xxx.js

邏輯主函數

Page({

})




示例:

//index.js

Page({

  data: {

    text: "This is page data."

  },

  onLoad: function(options) {

    // Do some initialize when page load.

  },

  onReady: function() {

    // Do something when page ready.

  },

  onShow: function() {

    // Do something when page show.

  },

  onHide: function() {

    // Do something when page hide.

  },

  onUnload: function() {

    // Do something when page close.

  },

  onPullDownRefresh: function() {

    // Do something when pull down.

  },

  onReachBottom: function() {

    // Do something when page reach bottom.

  },

  onShareAppMessage: function () {

   // return custom share data when user share.

  },

  // Event handler.

  viewTap: function() {

    this.setData({

      text: 'Set some data for updating view.'

    })

  },

  customData: {

    hi: 'MINA'

  }

})









示例:

Page({

  onShareAppMessage: function () {

    return {

      title: '自定義分享標題',

      desc: '自定義分享描述',

      path: '/page/user?id=123'

    }

  }

})







xxx.wxml

使用微信提供的組件來代替html元素


示例:







xxx.wxss

小程序樣式,與css樣式基本相似,這里不重復論述

在當前頁面的wxss文件內編輯的css樣式,只能使用在當前頁面







xxx.json

每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多,只是設置 app.json中的 window配置項的內容,頁面中配置項會覆蓋 app.json的 window中相同的配置項。

頁面的.json只能設置 window相關的配置項,以決定本頁面的窗口表現,所以無需寫 window這個鍵




示例:

{

  "navigationBarBackgroundColor": "#ffffff",

  "navigationBarTextStyle": "black",

  "navigationBarTitleText": "微信接口功能演示",

  "backgroundColor": "#eeeeee",

  "backgroundTextStyle": "light"

}



本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 体育彩票历史开奖结果 大赢家比分网平台首页 福彩p62昨晚开奖号 闲来陕西麻将下载 北京pc蛋蛋28大小计划 疯狂飞艇彩票 手机看片1024免费新版 意甲2020新赛程 北京pk计划 亿酷丹东麻将安卓版下载 奕趣贵州麻将一级代理 广东快乐今天十分开