vue의 온라인 유료 강좌(자세한 튜토리얼)

이 글은 주로 Vue를 기반으로 개발된 온라인 유료 강좌의 신청 과정을 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다

• vux UI 컴포넌트 라이브러리를 사용하세요

• 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 로그인

애플리케이션에 로그인해야 액세스할 수 있는 기능입니다. 어떤 링크에서든 들어가 로그인 여부를 확인하고, 로그인되지 않은 경우 위챗 인증으로 이동하고, 성공 후 사전 로그인 링크로 돌아가는 것입니다. PHP에 대한 위챗 인증이 더 많이 이루어지기 때문에 위챗 인증은 에서 구현됩니다. PHP 구현 과정은 다음과 같습니다. 라우팅 방법은 히스토리 모드를 사용하며, 패키지된 index.html 파일은 PHP를 사용하여 렌더링됩니다. 라우팅 경로는 통합 형식 r/xxxx를 정의하므로 이 형식의 라우팅이 index.html 렌더링 방법과 일치하는 한 PHP 측 라우팅이 일치할 수 있습니다. 그렇지 않으면 404 오류가 표시됩니다. 서버에 접속할 때.

php 측 라우팅 구성, 이것은 laravel이며 다른 프레임워크도 유사해야 합니다

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

해시 모드를 사용하지 않는 이유는 해시 모드를 사용하여 소스 주소를 얻을 때 PHP는 # 다음에 매개변수를 가져올 수 없기 때문입니다. 매개 변수 백엔드가 매우 번거로워서 후속 결제 및 공유에도 동일하게 적용됩니다.

모든 링크 열기 xxx.com/r/xxx

• 먼저 통과하세요. PHP 측에서 경로를 일치시키세요. 일치하지 않으면 페이지를 찾을 수 없습니다~

• 일치가 성공하면 로그인이 되지 않은 것으로 판단됩니다. 점프하기 전에 현재 링크를 기록하세요. 로그인에 성공하면 기록된 링크가 반환됩니다

• 사용자 로그인 상태는 토큰을 사용하며 토큰은 index.html 페이지에 정의되어 있습니다

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

WeChat 결제

WeChat 결제에서 해결해야 할 것은 경로 구성 문제입니다. 경로가 모두 r/xxxxx를 기반으로 하기 때문입니다. 형식은 양식에서 나오므로 http://xxx.xxxx만 입력하면 됩니다. com/r/에서 직접 결제가 필요한 페이지 매개변수를 전달할 때 쿼리 방법을 사용하세요. 그렇지 않으면 r 뒤에 디렉토리가 나타납니다. 예를 들어 r/goods/id/1은 r/goods?id=1로 대체되어야 합니다. 이렇게 하면 경로를 정의하는 한 전체 사이트에서 결제를 시작할 수 있습니다.

맞춤형 공유

이력 라우팅 모드를 사용하므로 iOS의 문제를 해결해야 합니다. 라우팅 점프 후 Android는 정상적으로 현재 경로를 찾을 수 있습니다. 따라서 Android는 현재 경로를 사용하여 서명하고 iOS는 처음 열린 페이지의 경로를 사용하여 서명한다는 점에 유의해야 합니다. 그렇기 때문에 라우팅 초기화 전 처음으로 애플리케이션을 열기 위한 경로를 정의해야 합니다. index.html에 로그인하는 구체적인 방법입니다. axioskey code

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

백그라운드에서 3개

$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)

제공됩니다. by vux

애플리케이션은 페이지 캐싱을 사용하므로 사용자 정의 공유 데이터를 정의하는 코드를 활성화된 상태에서 실행해야 합니다. 이를 구현하려면 먼저 init=false

마운트를 정의하고 서명을 얻기 위한 데이터 요청을 시작하세요

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

Define

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 구성 요소가 활성화될 때 사용자 정의 공유 데이터를 재설정하도록 정의합니다. 그렇지 않으면 반환 전 페이지도 사용자 정의 공유로 예약되어 있고 반환 후 페이지가 새로 고쳐지지 않는 경우, 공유 데이터는 이전의 데이터이므로 여기서 다시 정의하면 됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

바이두 지도를 사용하여 지도 그리드를 구현하는 방법

셀레늄을 사용하여 Taobao 데이터 정보 캡처

JS의 명령 모드 개념 및 사용법(자세한 튜토리얼)

WeChat 애플릿 방법 Promise를 사용하여 콜백을 구현하려면?

위 내용은 vue의 온라인 유료 강좌(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!