微信小程序開發系列二 小程序開發基礎

一、基本目錄結構

pages
   |-- index
        |-- index.js
        |-- index.json
        |-- index.wxml
        |-- index.wxss
app.js       小程序邏輯文件，不可缺少
app.json  小程序全局配置文件，不可缺少
app.wxss 全局樣式
project.config.json  項目配置文件，包括項目名稱、appid等

二、 小程序生命週期

//app.js
App({
  onLaunch: function (){ // 小程序初始化完成時觸發，全局只調用一次
  },
  onShow: function (options) { // 小程序啓動或從後臺進入前臺顯示時觸發
  },
  onHide: function () { // 小程序從前臺進入後臺時觸發
  },
  onError: function (msg) { // 小程序發生錯誤或者api調用失敗時觸發，並帶上錯誤信息
  }
})

app.js中定義的全局屬性和全局方法在其他頁面中可以通過 getApp() 獲取，如：

var app = getApp()
console.log(app.data)

三、網絡調用

wx.request  發起網絡請求
wx.uploadFile 上傳文件
wx.downloadFile 下載文件
wx.navigateTo  在新窗口打開頁面，原頁面不銷燬，wx.navigateBack可返回
wx.redirectTo  在原窗口打開頁面

四、全局配置文件 app.json

//app.json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {},
  "tabBar": {}, // 底部tab設置
  "networkTime": {} // 網絡超時設置
}

更多參數參見 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

五、頁面邏輯文件

//index.js
Page({
  data: {
    name: 'mike',
    age: 20
  },
  onLoad: function() { // 頁面加載
  },
  onReady: function() { // 初次渲染完成
  },
  onShow: function() { // 頁面顯示
  },
  onHide: function() { // 頁面隱藏
  },
  onUnload: function() { // 頁面卸載
  },
  onPulldownRefresh: function() { // 用戶下拉
  },
  onReachButton: function() { // 上拉觸底
  },
  myclick: function() { // 自定義函數或者數據, this可以訪問
    console.log('clicked');
  },
  other: {} // 自定義函數或者數據, this可以訪問
})

頁面窗口配置參見 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html