在vue中線上付費課程（詳細教學）

這篇文章主要介紹了基於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 = &#39;{{$token}}&#39;;//php模板变量
  var HOST = &#39;http://read.xxx.com&#39;;//程序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 元件啟動時重新設定一下自訂分享的數據，要不然如果在返回前的頁面也定於的自訂分享，返回後頁面沒有刷新，分享的數據就會是之前的，這裡重新定義一下就可以了。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用百度地圖如何實現地圖網格

#使用selenium抓取淘寶資料資訊

在JS中命令模式概念與用法（詳細教學）

#微信小程式使用Promise如何實現回調？

以上是在vue中線上付費課程（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！