這篇文章將為大家詳細(xì)講解有關(guān)vue開發(fā)應(yīng)用的示例分析，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、柳江網(wǎng)站維護(hù)、網(wǎng)站推廣。

• 使用 vux UI組件庫

• 使用 vue-navigation 緩存頁面，此庫實(shí)現(xiàn)了前進(jìn)刷新后退讀緩存的功能，像原生APP導(dǎo)航一樣。用子路由的方式實(shí)現(xiàn)tabbar有bug，用vuex解決了。

• 使用 lib-flexible 解決移動(dòng)頁面適配

來一個(gè)清單

"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"
 }

微信登錄

應(yīng)用需要登錄后可以訪問，微信登錄要實(shí)現(xiàn)的功能是從任意一個(gè)鏈接進(jìn)入，判斷是否登錄，未登錄跳到微信授權(quán)，成功后返回登錄前鏈接，由于對(duì)php的微信授權(quán)做得比較多，所以微信授權(quán)放在的php實(shí)現(xiàn)，這里說一下實(shí)現(xiàn)過程。路由方式使用了 history 模式，打包好的 index.html 文件用php渲染出來。路由path定義統(tǒng)一的格式 r/xxxx ，這樣對(duì)于php端的路由可以實(shí)現(xiàn)匹配，只要是這個(gè)格式的路由都匹配到渲染 index.html 的方法，要不然訪問的時(shí)候服務(wù)端出現(xiàn)404錯(cuò)誤。

php端路由配置，這里是laravel，其他框架應(yīng)該也差不多

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

為什么不用 hash 模式呢，因?yàn)橛胔ash模式的下php獲取來源地址的時(shí)候獲取不到#后面參數(shù)，雖然可以用參數(shù)傳給后端，但是好麻煩，所以就用 history 模式了，后面的支付和分享也是這樣

微信登錄流程

• 打開任意鏈接 xxx.com/r/xxx

• 先經(jīng)過php端，匹配路由，匹配失敗的話就會(huì)找不到頁面啦~

• 匹配成功判斷登錄，未登錄就跳到微信登錄，跳轉(zhuǎn)之前先記錄當(dāng)前鏈接，登錄成功就返回記錄的鏈接

用戶登錄狀態(tài)使用token，token定義在index.html這個(gè)頁面里面

微信支付

微信支付要解決的就是路徑配置問題，由于我們的路由都是以 r/xxxxx 的格式來的，所以在微信那邊就直接填寫 http://xxx.xxxx.com/r/ ，注意需要支付的頁面?zhèn)鲄⒄?qǐng)使用 query 的方式。要不然r后面就會(huì)出現(xiàn)目錄了，比如 r/goods/id/1 要換成 r/goods?id=1 ,這樣只要定義一個(gè)路徑全站都可以拉起支付

自定義分享

由于使用了 history 的路由模式，所以ios的問題需要解決，在路由跳轉(zhuǎn)后，安卓能正常難道當(dāng)前的路徑，ios獲取的是你第一打開應(yīng)用的路徑，所以在簽名的時(shí)候就得注意了，安卓拿當(dāng)前路徑去簽名，ios要拿第一次打開頁面的路徑去簽名。這就是為什么要在路由初始化之前要定義一個(gè)第一次打開應(yīng)用的路徑。就是 index.html 里面那個(gè)具體怎么去簽名，我這里使用的是 axios

關(guān)鍵代碼

let http = axios.create({
 baseURL: HOST + '/api/',
 timeout: 10000,
 headers: {
  'Accept': 'application/json',
  'Authorization': 'Bearer ' + TOKEN,
  'InUrl': INURL,//傳第一次打開頁面的鏈接
  'IsIos': isiOS//傳是否ios
 }
})

后臺(tái)要拿三個(gè)

$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();//安卓就用請(qǐng)求這個(gè)接口的路徑去簽名
}
//用url去簽名吧

拿到簽名后怎么初始化呢

this.$wechat.config(res.data.wx_config)

這是vux提供的

由于應(yīng)用使用了頁面緩存，所以在定義自定義分享數(shù)據(jù)的代碼就要放在 activated 里面執(zhí)行，具體實(shí)現(xiàn)

首先定義一個(gè) init=false

mounted 開始請(qǐng)求數(shù)據(jù)拿到簽名

this.$wechat.config(res.data.wx_config)
 this.$wechat.ready(() => {
  this.set_share()
 })

在 methods 定義一個(gè)方法

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 組件激活時(shí)重新設(shè)置一下自定義分享的數(shù)據(jù)，要不然如果在返回前的頁面也定于的自定義分享，返回后頁面沒有刷新，分享的數(shù)據(jù)就會(huì)是之前的，這里重新定義一下就可以了。

關(guān)于vue開發(fā)應(yīng)用的示例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。