Online paid courses in vue (detailed tutorial)

This article mainly introduces the application process of online paid courses developed based on vue. It is very good and has reference value. Friends in need can refer to

• Using vux UI component library

• Use vue-navigation to cache the page. This library implements the function of forward refresh and backward read cache, just like native APP navigation. There was a bug in implementing tabbar using sub-routing, but it was solved using vuex.

• Use lib-flexible to solve mobile page adaptation

Let’s make a list

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

The application needs to be logged in to access. The function to be implemented by WeChat login is to enter from any link and determine whether to log in. If not logged in, jump to WeChat authorization. After success, return to the pre-login link. , because we have done a lot of WeChat authorization for PHP, so WeChat authorization is implemented in PHP. Here is the implementation process. The routing method uses the history mode, and the packaged index.html file is rendered using PHP. The routing path defines a unified format r/xxxx, so that the routing on the PHP side can be matched. As long as the routing in this format is matched to the method of rendering index.html, otherwise a 404 error will appear on the server when accessing.

php side routing configuration, here is laravel, other frameworks should be similar

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

Why not use hash mode, because when using hash mode, php cannot get the source address when getting the # following Although parameters can be passed to the backend, it is very troublesome, so I use the history mode. The same is true for subsequent payments and sharing

WeChat login process

• Open any link xxx.com/r/xxx

• First go through the php side and match the route. If the matching fails, it will not be found. Page~

• If the match is successful, the login will be judged. If you are not logged in, you will jump to WeChat login. Before jumping, record the current link. If the login is successful, the recorded link will be returned.

User login status uses token, and the token is defined in the index.html page

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

WeChat payment

WeChat payment requirements The solution is the path configuration problem. Since our routes are all in the format of r/xxxx, we directly fill in http://xxx.xxxx.com/r/ on WeChat and pay attention to the page parameters that need to be paid. Please use query method. Otherwise, a directory will appear after r. For example, r/goods/id/1 needs to be replaced by r/goods?id=1. In this way, as long as a path is defined, the entire site can launch payment

Custom sharing

Since the history routing mode is used, the problem of ios needs to be solved. After the route jump, Android can normally access the current path, which is obtained by ios. It is the path where you first open the application, so you have to pay attention when signing. Android uses the current path to sign, and iOS uses the path where the page is opened for the first time to sign. This is why it is necessary to define a path for opening the application for the first time before routing initialization. It’s the specific how to sign in index.html. What I use here is axios

Key code

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

The background needs to get three

$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去签名吧

How to initialize after getting the signature

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

This is provided by vux

Since the application uses page caching, the code for defining custom shared data must be executed in activated. The specific implementation

First define an init=false

mounted and start requesting data to get the signature

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

Define a method in 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 definition

activated () {
 this.set_share()
}

keep- When the alive component is activated, reset the custom shared data. Otherwise, if the page before returning is also scheduled for custom sharing, and the page is not refreshed after returning, the shared data will be the previous one. Just redefine it here. .

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use Baidu Map to implement map grid

Use selenium to capture Taobao data information

Concept and usage of command mode in JS (detailed tutorial)

How to implement callbacks using Promise in WeChat applet?

The above is the detailed content of Online paid courses in vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!