vue のオンライン有料コース (詳細なチュートリアル)

この記事は主にvueをベースに開発されたオンライン有料コースの申請プロセスを紹介しています。非常に優れており、必要な友人は参考にしてください

• vue-navigationを使用してください。ページをキャッシュするために、このライブラリはネイティブ APP ナビゲーションと同様に、前方リフレッシュと後方読み取りキャッシュの機能を実装します。サブルーティングを使用したタブバーの実装にバグがありましたが、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認証にジャンプし、成功したらログイン前のリンクに戻るというPHP用のWeChat認証がさらに行われるため、WeChat認証は で実装されます。 PHP の実装プロセスは次のとおりです。ルーティング方法では履歴モードが使用され、パッケージ化されたindex.htmlファイルはPHPを使用してレンダリングされます。ルーティングパスはr/xxxxという統一形式で定義されているため、この形式のルーティングがindex.htmlのレンダリング方法と一致していれば一致しますが、そうでない場合は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側でルートをマッチングします マッチングに失敗した場合はページが見つかりません~

• マッチングが成功した場合はログインしていないと判断されます。 WeChat ログインにジャンプします。ジャンプする前に、現在のリンクを記録します。ログインが成功すると、記録されたリンクが返されます

ユーザーのログイン ステータスは、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/を入力するだけです。 WeChat 上で直接 r/ 支払いを必要とするページパラメータを渡すにはクエリメソッドを使用する必要があることに注意してください。それ以外の場合は、r の後にディレクトリが表示されます。たとえば、r/goods/id/1 を r/goods?id=1 に置き換える必要があります。このようにして、パスを定義する限り、サイト全体で支払いを開始できます。

カスタマイズされた共有 履歴ルーティングモードが使用されているため、iOS の問題はルートジャンプ後に通常、iOS が取得するのは最初に開いたパスです。 Android は現在のパスを使用して署名し、iOS は最初に開いたページのパスを使用して署名することに注意してください。このため、ルーティングの初期化の前に、初めてアプリケーションを開くためのパスを定義する必要があります。 Index.html での具体的なサインイン方法です

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

バックグラウンドで axios

キーコード

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

定義。メソッド

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 コンポーネントを定義します。それ以外の場合、戻る前のページもカスタム共有用にスケジュールされており、戻った後にページが更新されない場合、共有データは以前のものなので、ここで再定義するだけです。

上記は私があなたのためにまとめたものです。

関連記事:

Baidu Mapsを使用してマップグリッドを実装する方法

Seleniumを使用して淘宝データ情報を取得する

JSのコマンドモードの概念と使用法(詳細なチュートリアル)

WeChatアプレットの方法Promiseを使用してコールバックを実装するには?

以上がvue のオンライン有料コース (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。