基于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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
HTML的select控件美化
Mar 27 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
基于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的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php数组键名技巧小结
2015/02/17 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
没编程基础可以学python吗
2020/06/17 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
期中考试后的反思
2014/02/08 职场文书
初三毕业评语
2014/12/26 职场文书
升职感谢信
2015/01/22 职场文书
结婚纪念日感言
2015/08/01 职场文书
中秋节主题班会
2015/08/14 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python