집 >웹 프론트엔드 >JS 튜토리얼 >vue의 온라인 유료 강좌(자세한 튜토리얼)

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

亚连원래의: 2018-06-09 15:55:462615검색

이 글은 주로 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(&#39;/&#39;, &#39;HomeController@index&#39;)->middleware(&#39;auth&#39;)->name("home");
Route::get(&#39;/r/{query}&#39;, &#39;HomeController@index&#39;)->middleware(&#39;auth&#39;)->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 + &#39;/api/&#39;,
 timeout: 10000,
 headers: {
  &#39;Accept&#39;: &#39;application/json&#39;,
  &#39;Authorization&#39;: &#39;Bearer &#39; + TOKEN,
  &#39;InUrl&#39;: INURL,//传第一次打开页面的链接
  &#39;IsIos&#39;: isiOS//传是否ios
 }
})

백그라운드에서 3개

$is_ios = request()->header(&#39;IsIos&#39;);//获取是否ios
$in_url = request()->header(&#39;InUrl&#39;);//获取第一次打开页面路径
$in_url = explode("#", $in_url)[0];//处理一下
if ($is_ios == &#39;true&#39;) {
  $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 구성 요소가 활성화될 때 사용자 정의 공유 데이터를 재설정하도록 정의합니다. 그렇지 않으면 반환 전 페이지도 사용자 정의 공유로 예약되어 있고 반환 후 페이지가 새로 고쳐지지 않는 경우, 공유 데이터는 이전의 데이터이므로 여기서 다시 정의하면 됩니다.

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

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

관련 기사