Онлайн-приложение для платного курса, основанное на разработке vue

Vue.js

В последнее время я работаю над приложением для платных курсов, в основном включая вход в WeChat, оплату и пользовательский обмен.Ямы, встречающиеся в процессе разработки, записываются здесь.

В статье в основном есть следующие моменты

  • Введение в использование библиотеки
  • Решение для входа в WeChat
  • Платежное решение WeChat
  • Индивидуальное решение для обмена WeChat
  • Решение о статусе данных страницы вперед и назад

Введение в использование библиотеки

  • использоватьvuxбиблиотека компонентов пользовательского интерфейса
  • использоватьvue-navigationСтраницы кэша, эта библиотека реализует функции пересылки, обновления и чтения кэшей, как и нативная навигация в приложении. Есть ошибка в реализации таббара с подмаршрутизацией, которая решается с помощью 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"
  }

Вход в WeChat

Приложение должно быть авторизовано и может быть доступно.Функция, которая должна быть реализована при входе в WeChat, заключается в том, чтобы войти по любой ссылке, определить, следует ли войти в систему, перейти к авторизации WeChat, если вы не вошли в систему, и вернуться к ссылке до входа в систему после Здесь размещена php-реализация авторизации WeChat. О процессе реализации поговорим здесь. маршрутизация используетсяhistoryвыкройка, упаковкаindex.htmlФайл отображается в php. Путь маршрутизации определяет единый формат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Режим, потому что при использовании php для получения исходного адреса в хеш-режиме невозможно получить параметры, стоящие за #.Хотя параметры могут быть переданы в бэкенд, это очень хлопотно, поэтому я используюhistoryрежим, и то же самое верно для последующих платежей и обмена

Процесс входа в WeChat

  • открыть любую ссылкуxxx.com/r/xxx
  • После прохождения стороны PHP сопоставьте маршрут, в случае неудачи вы не найдете страницу ~
  • Если совпадение прошло успешно, считается, что вы вошли в систему. Если вы не вошли в систему, вы перейдете к WeChat, чтобы войти. Прежде чем прыгать, запишите текущую ссылку. Если вход будет успешным, вы вернетесь к записанной ссылке. .

Статус входа пользователя использует токен, который определен на странице index.html.

<script>
    var TOKEN = '{{$token}}';//php模板变量
    var HOST = 'http://read.xxx.com';//程序api接口域名
    var INURL = location.href //页面域名（在ios自定义分享时候会用到）
</script>

WeChat Pay

Платеж WeChat должен решить проблему конфигурации пути, потому что наша маршрутизация основана наr/xxxxxформате, так что просто заполните прямо в WeChathttp://xxx.xxxx.com/r/, обратите внимание на страницу, которую необходимо оплатить, пожалуйста, используйтеqueryПуть. В противном случае после r появится каталог, напримерr/goods/id/1заменить наr/goods?id=1, так что пока путь определен, вся станция может подтягивать платеж

пользовательский общий доступ

из-за использованияhistory,значит надо решить проблему ios.После скачков маршрута,Android может нормально работать?Текущий путь?ios получает путь первого открытого вами приложения,поэтому надо быть внимательным при подписании.Android берет текущий Путь для подписи, 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 сбросить пользовательские общие данные. В противном случае, если страница перед возвратом также запланирована для пользовательского общего доступа, страница после возврата не обновляется, а общие данные будут предыдущими. Давайте переопределим это здесь просто отлично

В заключение

Пишу статью впервые, многое не могу выразить, надеюсь всем поможет! Если у вас возникли проблемы, пожалуйста, отправьте личное сообщение

код для этого проекта, можно использовать как начало проекта! из коробки

адрес предварительного просмотра

Категории