上一篇只是簡單的註冊過程,下面開始進入開發過程

一.新建小程式檔案,根據自己的喜好選擇是否需要微信雲開發以及模板

二.檔案目錄

首先可以看到APP.json檔案中pages屬性下對應的是pages資料夾下對應的頁面路徑.排在最上面的是啟動時載入的首頁.要新加頁面的話直接在配置裡面在新增一條路徑對應的檔案會自動生成.

每個頁面下都有對應的具體檔案

index.js對應的js檔案

index.json對應的是json檔案

index.wxml對應的頁面檔案

index.wxss對應的樣式檔案

中間的引用關係小程式已經處理好了不需要在像之前HTML一樣手動引用了.

三.看下每個頁面下的js檔案.這裡我們新建一個demo頁面來看下整個JS檔案

// pages/demo/demo.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

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

  },

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

  },

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

  },

  
 
/**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

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

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})

我們可以看到基本每個自帶的js方法中文備註都很齊全做過後臺開發的這塊就不多說了

四.簡單封裝請求類

分裝一個request.js檔案放到utils資料夾下

const request=(options)=>{
  return new Promise((resolve,reject)=>{
    const {data,method,url}=options//引數重新對映封裝
    if(data&&method!=='get'){
      options.data=JSON.stringify(data)//不是Get請求序列化請求引數(根據後臺介面格式序列化對應格式)
    }
    wx.showLoading({//加在中效果
      title: '載入中',
      mask: true
    });
    wx.request({//傳送請求
      header:{
        'Content-Type':'application/json',//引數格式
        'Token':wx.getStorageSync('Token')//攜帶唯一票據
      },
      ...options,//注意前面三個點不能少一種引數的縮寫方式
      success:function(res){
        wx.hideLoading({//隱藏 loading 提示框
        });
          ////////////////////////////////////////
          //根據成功返回結果編寫業務邏輯
          ////////////////////////////////////////
      },
      fail:function(res){//傳送請求錯誤回撥
        wx.hideLoading({//隱藏 loading 提示框
        });
        reject(res)
      }
    })
  })
}
export default request

五.處理api呼叫

新建API資料夾用於存放所有的介面請求

由於這個小程式比較簡單介面量上所以所有介面都放到common.js檔案裡面了

下面分別來看看兩個檔案裡面是做什麼的.

1>http.js檔案

整理歸納所有介面JS檔案,在開發過程中後臺一般不會把所有介面放到同一個控制器中,對應的前端也應該按模組不同把不同型別的請求介面放到不同的js檔案裡.比如:處理使用者資料的介面都存放到user.js,訂單的資料介面都存放到order.js檔案中(封裝思想)

import * as common from './common'
export default{
  common
}

我這裡只有一個common.js檔案所以我這裡的配置就簡單了,如果你這邊有多的js檔案,修改一下配置就行

import * as common from './common'
import * as order from './order'
import * as user from './user'
export default{
  common,
  order,
  user,
}

就是一個簡單的呼叫檔案對外暴露介面

2>common.js

這裡主要對介面請求進行請求地址和請求方式簡單分裝

import request from '../utils/request.js'
const baseUrl='後臺提供的請求介面地址';
export function waybilllist(data){
  return request({
    url: `${baseUrl}/waybill/getwaybilllist`,
    method: 'post',
    data
  })
}

我們可以看到首先引用了request.js所有的介面都會走之前分裝的請求方法.baseUrl由於我這邊介面少就丟到同一個檔案裡面了.這裡介面js檔案多的情況下需要進行一個配置檔案的分裝介面地址調配置檔案裡面的資料做到修改一次介面地址所有js檔案都生效

六.頁面js檔案使用

首先需要在頁面js檔案裡獲取js檔案例項(需要注意路徑問題)

//獲取應用例項
import http from '../../api/http.js'

已我這邊獲取訂單列表為例

getWaybilllist() {
    //處理引數(當然還有跟簡便的方法)
    let WaybillStatus;
    let pageSize = this.data.pageSize;
    let curPage = this.data.curPage;
    //開始傳送請求
    http.common.waybilllist({
      Status: WaybillStatus,
      pageSize: pageSize,
      CurrentPage: curPage,
      dateTime:this.data.dateTime
    }).then(res => {
      //////////////////////////////
      //根據返回引數處理業務邏輯
      /////////////////////////////
      }
    }).catch(err => {//請求報錯處理
      console.log(err);
    })
  }

至此一個簡單的HTTP請求封裝加使用的例子就完畢了

多提一嘴,不管前端還是後端開發在實際專案中要有意識的考慮封裝和複用的思想.整個程式碼而言封裝和費用是繞不開的,大部分都是在封裝的基礎上做變型處理但是基礎的版本沒有對於開發就是重複做無用功.

希望這次整理對剛接觸小程式的人有所幫助,當然也歡迎技術大佬提供很好的建議和意見