微信小程序開發流程

前言

• 前段日子，公司須要作一款小程序的產品。因爲時間緊湊，須要有人獨立負責，本身又對這方面比較感興趣就接下來。爲了之後開發方便，整理下開發流程，讓同事及網友參考。

建立項目

• 點擊連接，進入登錄頁面。
• 點擊【設置】【開發設置】查看並記錄【APPID】和【APPSecret】
• 下載開發者工具並安裝
• 打開開發者工具，【微信登錄】，選擇【建立項目】填入APPID及相應的項目名稱和路徑，勾選quickly start便可建立小程序實例。

項目介紹

項目初始架構

• -|Pages
• ---|index
• -----|index.js
• -----|index.wxml
• -----|index.wxss
• -|utils
• -|app.js
• -|app.json
• -|app.wxss

項目文件類型介紹

• 重點介紹下
• app.js

//app.js
App({
  //初始化操做，能夠在這裏作一些獲取權限和用戶登錄的操做
  onLaunch: function () {
    // 登陸
    wx.login({
    })
    // 獲取用戶信息
    wx.getSetting({
      
    })
  },
  //全局數據，能夠將公用的數據存儲到這邊
  globalData: {
    userInfo: null
  }
})

• app.wxss 全局公共樣式定義
• app.json 全局配置，例

{
  //配置頁面路徑，新建Page時必須在這邊記錄路徑，不然會報錯。
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  //配置小程序的窗口背景色，配置導航條樣式，配置默認標題
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }.
  //設置頁面底部tab
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  },
  //設置網絡超時時間
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  //設置是否開啓debug
  "debug": true
}

• Page.js文件是腳本文件，負責處理當前頁面的邏輯。

Page({

  /**
   * 頁面的初始數據，
   */
  data: {
  
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

• Page.json是配置文件,只能配置【window 相關的配置項】
• Page.wxss是樣式文件,相似爲css文件
• Page.wxml是頁面，能夠理解成xml版的jsp。

小程序的不一樣跳轉頁面方法

• wx.navigateTo(OBJECT)： 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack能夠返回到原頁面。
• wx.navigateBack(OBJECT)：關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages()) 獲取當前的頁面棧，決定須要返回幾層。
• wx.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內的某個頁面。
• wx.reLaunch(OBJECT)：關閉全部頁面，打開到應用內的某個頁面。
• wx.switchTab(OBJECT)：跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面

小程序 display flex佈局

display：flex屬性

flex-direction 決定項目的排列方向

• row（默認值）：主軸爲水平方向，起點在左端。
• row-reverse：主軸爲水平方向，起點在右端。
• column：主軸爲垂直方向，起點在上沿。
• column-reverse：主軸爲垂直方向，起點在下沿

flex-wrap

• nowrap（默認）：不換行。
• wrap：換行，第一行在上方。
• wrap-reverse：換行，第一行在下方。

flex-flow

• flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

justify-content 定義了項目在主軸上的對齊方式

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items

align-content 定義項目在交叉軸上如何對齊

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

注意事項

• 小程序不能跳轉外部連接
• 在測試請求時，能夠關閉安全域名、TLS 版本以及 HTTPS 證書校驗，操做爲點擊開發者工具右上方【詳情】【項目設置】勾選【不校驗安全域名、TLS 版本以及 HTTPS 證書】便可。
• 測試項目時可用console.log輸出測試。
• 因爲android，ios，開發工具的運行環境都不同，因此注意少部分樣式有誤差的問題。
• 小程序若是使用wx.navigateTo來進行跳轉時，由於保留當前頁面，跳轉到應用內的某個頁面，因此最多隻能連續跳轉【五個頁面】
• 小程序最大存儲空間爲【10M】
• js與js之間的調用用require('js的路徑')的方式調用，相似js模塊化處理。

參考連接

• 小程序官網教程
• 相關資源地址分享
• icon網站
• 微信小程序佈局display flex佈局介紹