基于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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
初识PHP中的Swoole
2016/04/05 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
使用Python快速制作可视化报表的方法
2019/02/03 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
机电系毕业生求职信
2014/07/11 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
道士塔读书笔记
2015/06/30 职场文书
运动会加油稿
2015/07/22 职场文书