基于vue开发的在线付费课程应用过程


Posted in Javascript onJanuary 25, 2018
  • 使用 vux UI组件库
  • 使用 vue-navigation 缓存页面,此库实现了前进刷新后退读缓存的功能,像原生APP导航一样。用子路由的方式实现tabbar有bug,用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"
 }

微信登录

应用需要登录后可以访问,微信登录要实现的功能是从任意一个链接进入,判断是否登录,未登录跳到微信授权,成功后返回登录前链接,由于对php的微信授权做得比较多,所以微信授权放在的php实现,这里说一下实现过程。路由方式使用了 history 模式,打包好的 index.html 文件用php渲染出来。路由path定义统一的格式 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 模式呢,因为用hash模式的下php获取来源地址的时候获取不到#后面参数,虽然可以用参数传给后端,但是好麻烦,所以就用 history 模式了,后面的支付和分享也是这样

微信登录流程

  • 打开任意链接 xxx.com/r/xxx
  • 先经过php端,匹配路由,匹配失败的话就会找不到页面啦~
  • 匹配成功判断登录,未登录就跳到微信登录,跳转之前先记录当前链接,登录成功就返回记录的链接

用户登录状态使用token,token定义在index.html这个页面里面

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

微信支付

微信支付要解决的就是路径配置问题,由于我们的路由都是以 r/xxxxx 的格式来的,所以在微信那边就直接填写 http://xxx.xxxx.com/r/ ,注意需要支付的页面传参请使用 query 的方式。要不然r后面就会出现目录了,比如 r/goods/id/1 要换成 r/goods?id=1 ,这样只要定义一个路径全站都可以拉起支付

自定义分享

由于使用了 history 的路由模式,所以ios的问题需要解决,在路由跳转后,安卓能正常难道当前的路径,ios获取的是你第一打开应用的路径,所以在签名的时候就得注意了,安卓拿当前路径去签名,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 组件激活时重新设置一下自定义分享的数据,要不然如果在返回前的页面也定于的自定义分享,返回后页面没有刷新,分享的数据就会是之前的,这里重新定义一下就可以了。

总结

以上所述是小编给大家介绍的基于vue开发的在线付费课程应用过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
Jquery注册事件实现方法
May 18 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 #Javascript
关于express与koa的使用对比详解
Jan 25 #Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 #Javascript
Vue框架之goods组件开发详解
Jan 25 #Javascript
前端MVVM框架解析之双向绑定
Jan 24 #Javascript
JS运动特效之完美运动框架实例分析
Jan 24 #Javascript
JS运动特效之同时运动实现方法分析
Jan 24 #Javascript
You might like
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
vue element实现表格合并行数据
2020/11/30 Vue.js
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python写的一个简单监控系统
2015/06/19 Python
Python实现把数字转换成中文
2015/06/29 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
入党转正申请书范文
2019/05/20 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
详解Python中*args和**kwargs的使用
2022/04/07 Python