基於vue開發的線上付費課程應用

小土狗發表於2019-03-04
Vue

最近在弄一個付費課程的應用，主要有微信登入，支付和自定義分享，在開發過程中遇到的坑，這裡做一下記錄

文章主要有以下幾點

  • 使用庫簡介
  • 微信登入解決
  • 微信支付解決
  • 微信自定義分享解決
  • 頁面前進後退資料狀態解決

使用庫簡介

  • 使用 vux UI元件庫
  • 使用 vue-navigation 快取頁面，此庫實現了前進重新整理後退讀快取的功能，像原生APP導航一樣。用子路由的方式實現tabbar有bug，用vuex解決了。
  • 使用 lib-flexible 解決移動頁面適配

來一個清單

"dependencies": {
    "fastclick": "^1.0.6",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.4",
    "vue": "^2.5.2",
    "vue-navigation": "^1.1.3",
    "vue-router": "^3.0.1",
    "vuex": "^2.1.1",
    "vuex-i18n": "^1.3.1",
    "vux": "^2.7.8"
  }
複製程式碼

微信登入

應用需要登入後可以訪問，微信登入要實現的功能是從任意一個連結進入，判斷是否登入，未登入跳到微信授權，成功後返回登入前連結，由於對php的微信授權做得比較多，所以微信授權放在的php實現，這裡說一下實現過程。路由方式使用了history模式，打包好的index.html 檔案用php渲染出來。路由path定義統一的格式r/xxxx，這樣對於php端的路由可以實現匹配，只要是這個格式的路由都匹配到渲染index.html的方法，要不然訪問的時候服務端出現404錯誤。

php端路由配置，這裡是laravel，其他框架應該也差不多

Route::get('/', 'HomeController@index')->middleware('auth')->name("home");
Route::get('/r/{query}', 'HomeController@index')->middleware('auth')->name("home");
複製程式碼

為什麼不用hash模式呢，因為用hash模式的下php獲取來源地址的時候獲取不到#後面引數，雖然可以用引數傳給後端，但是好麻煩，所以就用history模式了，後面的支付和分享也是這樣

微信登入流程

  • 開啟任意連結xxx.com/r/xxx
  • 先經過php端，匹配路由，匹配失敗的話就會找不到頁面啦~
  • 匹配成功判斷登入，未登入就跳到微信登入，跳轉之前先記錄當前連結，登入成功就返回記錄的連結

使用者登入狀態使用token，token定義在index.html這個頁面裡面

<script>
    var TOKEN = '{{$token}}';//php模板變數
    var HOST = 'http://read.xxx.com';//程式api介面域名
    var INURL = location.href //頁面域名（在ios自定義分享時候會用到）
</script>
複製程式碼

微信支付

微信支付要解決的就是路徑配置問題，由於我們的路由都是以 r/xxxxx的格式來的，所以在微信那邊就直接填寫http://xxx.xxxx.com/r/，注意需要支付的頁面傳參請使用query的方式。要不然r後面就會出現目錄了，比如 r/goods/id/1 要換成 r/goods?id=1,這樣只要定義一個路徑全站都可以拉起支付

自定義分享

由於使用了history的路由模式，所以ios的問題需要解決，在路由跳轉後，安卓能正常難道當前的路徑，ios獲取的是你第一開啟應用的路徑，所以在簽名的時候就得注意了，安卓拿當前路徑去簽名，ios要拿第一次開啟頁面的路徑去簽名。這就是為什麼要在路由初始化之前要定義一個第一次開啟應用的路徑。就是index.html裡面那個具體怎麼去簽名，我這裡使用的是axios

關鍵程式碼

let http = axios.create({
  baseURL: HOST + '/api/',
  timeout: 10000,
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Bearer ' + TOKEN,
    'InUrl': INURL,//傳第一次開啟頁面的連結
    'IsIos': isiOS//傳是否ios
  }
})
複製程式碼

後臺要拿三個

 $is_ios = request()->header('IsIos');//獲取是否ios
$in_url = request()->header('InUrl');//獲取第一次開啟頁面路徑
$in_url = explode("#", $in_url)[0];//處理一下
if ($is_ios == 'true') {
    $url = $in_url;//ios用第一次開啟頁面路徑簽名
} else {
    $url = url()->previous();//安卓就用請求這個介面的路徑去簽名
}
//用url去簽名吧
複製程式碼

拿到簽名後怎麼初始化呢

this.$wechat.config(res.data.wx_config)
複製程式碼

這是vux提供的

由於應用使用了頁面快取，所以在定義自定義分享資料的程式碼就要放在activated裡面執行，具體實現

首先定義一個init=false

mounted開始請求資料拿到簽名

this.$wechat.config(res.data.wx_config)
  this.$wechat.ready(() => {
    this.set_share()
  })
複製程式碼

在methods定義一個方法

set_share () {
  // 自定義分享到朋友圈
  this.$wechat.onMenuShareTimeline({
    title: this.share.title,
    link: this.share.url,
    imgUrl: this.share.icon,
    success: () => {}
  })
  this.$wechat.onMenuShareAppMessage({
    title: this.share.title,
    desc: this.share.desc,
    link: this.share.url,
    imgUrl: this.share.icon
  })
}
複製程式碼

activated定義

activated () {
  this.set_share()
}
複製程式碼

keep-alive 元件啟用時重新設定一下自定義分享的資料，要不然如果在返回前的頁面也定於的自定義分享，返回後頁面沒有重新整理，分享的資料就會是之前的，這裡重新定義一下就可以了

總結一下

第一次寫文章，很多東西不會表達，希望對大家有所幫助！遇到問題請私信

這個專案的程式碼，可以當作專案的初始來哦！開箱即用

預覽地址

基於vue開發的線上付費課程應用

相關文章