C#開發微信小程序（二）

導航： C#開發微信小程序系列

 

關於小程序項目結構，框架介紹，組件說明等，請查看微信小程序官方文檔，關於以下貼出來的代碼部分我只是截取了一些片段，方便說明問題，如果需要查看完整源代碼，可以在我的項目庫中下載：

https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git

https://git.dev.tencent.com/dwBurning/LazyOrders.git

 

繼上一篇寫微信小程序的文章已經有一年多了，當時也是淺嘗輒止的學習了一下，源代碼也沒有公布，因為寫的不規范，容易誤導大家，剛好最近有同學在評論里問我要源代碼，於是，又重新整理完善了一番，在整理的過程中，發現了很多的小問題，所以再寫一篇，供大家參考。

 第一：目錄結構，從這個截圖可以看到，這個小程序有三個菜單（tabBar），而最初的版本，我所有的page都在pages文件夾下，這樣整個程序運行起來也沒什么問題，只是很不規范，看起來不舒服，於是，我調整了目錄結構。每個菜單下的page放在對應的文件夾下，分別為home，carts，mine

 

 

 第二：請求地址，最初的版本，每一次發起http請求，都是在單獨的頁面寫了url路徑，當然可能當時是復制的，所以一旦要修改這個url地址的時候，就要到各個頁面去修改，這個是大忌，所以此次更改，我將url地址設置成了全局變量，修改的時候改這一個地方就可以了。

在App.js中增加全局變量globalData，具體參數如下：

App({
  onLaunch: function() {

  },
  globalData: {
    url: 'http://localhost:8089/api/LazyOrders',
    urlCarts: 'http://localhost:8089/api/Carts',
    urlCategory: 'http://localhost:8089/api/Category',
    urlMenu: 'http://localhost:8089/api/Menu',
    carts: [],
    orders: [],
    sessionKey: ''
  }
})

具體使用：

 const app = getApp();

 /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    var _this = this;
    util.checkSession();
    wx.request({
      url: app.globalData.urlCategory,
      success: function(res) {
        _this.setData({
          navLeftItems: res.data.Context,
          navRightItems: res.data.Context
        })
      }
    })

  },

第三：對通用樣式抽取獨立的CSS文件，pages文件夾下的common文件夾，放置通用樣式文件，比如index.wxss，在其他頁面的wxss文件直接引用，注意關鍵字import

@import '../common/index.wxss';

第四：抽取公共方法，在util文件夾下有一個util.js的文件，我在里邊新增加了一個方法checkSession，用來檢查登錄是否過期，添加方法后，在其他頁面還不可以直接調用，必須要在module.exports暴露這個方法，才可以在其他地方調用。

const app = getApp()

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime,
  checkSession: checkSession
}

function checkSession() {
  wx.checkSession({
    success() {
      //session_key 未過期，並且在本生命周期一直有效
      console.log('session_key 未過期！')
    },
    fail() {
      // session_key 已經失效，需要重新執行登錄流程
      wx.login({
        success: function(res) {
          if (res.code) {
            //發起網絡請求
            wx.request({
              url: app.globalData.url,
              data: {
                code: res.code
              },
              method: 'POST',
              success: function(res) {
                console.log(res.data);
                app.globalData.sessionKey = res.data;
                wx.setStorage({
                  key: 'sessionKey',
                  data: res.data,
                })
              }
            })
          } else {
            console.log('登錄失敗！' + res.errMsg)
          }
        }
      })
    }
  })
}

具體使用：

var util = require('../../utils/util.js');

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    var _this = this;
    util.checkSession();
    wx.request({
      url: app.globalData.urlCategory,
      success: function(res) {
        _this.setData({
          navLeftItems: res.data.Context,
          navRightItems: res.data.Context
        })
      }
    })
  },

以上是對小程序前端整理過程中發現的問題，當然還有對后端Api整理過程中發現的問題，放到下一篇再做介紹。