微信小程式開發文件

使用步驟

• 下載微信小程式開發工具
• 微信小程式註冊申請 ，獲取AppID(手機預覽需用到)
• 伺服器配置 ，新增合法域名，每個月只可修改3次 ，可新增多個域名
• 下載開發工具後建立專案，輸入申請的AppID，填寫專案名稱，匯入該工程
• 專案預覽體驗

專案效果圖：

必須掌握的幾個知識點

目錄

小程式配置

• app.json檔案小程式設定全域性配置 ，包括頁面路徑、視窗、選項卡，以及網路超時等

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText"
 
: "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

• 通過appapp.js檔案中App()來註冊一個小程式 提供了生命週期方法

App({
  onLaunch: function
 
(){ 
    // Do something initial when launch.
  },
  onShow: function(){
      // Do something when show.
  },
  onHide: function(){
      // Do something when hide.
  },
  globalData: 'I am global data'
})

通過全域性的getApp()函式，獲取小程式例項

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
 

注意：

App() 必須在 app.js 中註冊，且不能註冊多個。

不要在定義於 App() 內的函式中呼叫 getApp() ，使用 this 就可以拿到 app 例項。

不要在 onLaunch 的時候呼叫 getCurrentPage()，此時 page 還沒有生成。

通過 getApp() 獲取例項之後，不要私自呼叫生命週期函式。

• 通過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.
  },
  // Event handler.
  viewTap: function(){
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

小程式常用API介面

• wx.request https網路請求

wx.request({
  url: 'test.php', //僅為示例，並非真實的介面地址
  method:"GET",
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

• 本地快取

通過key的形式新增快取setStorage （非同步介面）

wx.setStorage({
  key:"key"
  data:"value"
})

通過key的形式獲取快取getStorage （非同步介面）

wx.getStorage({
  key: 'key',
  success: function(res) {
      console.log(res.data)
  } 
})

從本地快取中非同步移除指定 key

wx.removeStorage({
  key: 'key',
  success: function(res) {
    console.log(res.data)
  } 
})

清理本地資料快取

wx.clearStorage()

• 顯示、隱藏訊息提示框

wx.showToast({
  title: '載入中',
  icon: 'loading',
  duration: 10000
})

setTimeout(function(){
  wx.hideToast()
},2000)

• 動態設定當前頁面的標題

wx.setNavigationBarTitle({
  title: '當前頁面'
})

• 導航

保留當前頁面，跳轉到應用內的某個頁面

wx.navigateTo({
  url: 'test?id=1'
})

關閉當前頁面，跳轉到應用內的某個頁面

wx.redirectTo({
  url: 'test?id=1'
})

• 獲取使用者資訊，需要先呼叫 wx.login 介面

wx.getUserInfo({
  success: function(res){
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    var gender = userInfo.gender //性別 0：未知、1：男、2：女 
    var province = userInfo.province
    var city = userInfo.city
    var country = userInfo.country
  }
})

• 裝置

獲取網路型別

wx.getNetworkType({
  success: function(res) {
    var networkType = res.networkType // 返回網路型別2g，3g，4g，wifi
  }
})

獲取系統資訊（非同步介面）

wx.getSystemInfo({
  success: function(res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
  }
})

撥打電話

wx.makePhoneCall({
  phoneNumber: '1340000' //僅為示例，並非真實的電話號碼
})

• 獲取當前的地理位置、速度

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})