基于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 相关文章推荐
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
java必学必会之static关键字
Dec 03 Javascript
实例浅析js的this
Dec 11 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
Angular2自定义分页组件
Apr 19 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
vue3不同环境下实现配置代理
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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php 魔术函数使用说明
2010/02/21 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
详解php协程知识点
2018/09/21 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
python画折线图的程序
2018/07/26 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
公务员转正鉴定材料
2014/02/11 职场文书
对照检查剖析材料
2014/09/30 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
用JS写一个发布订阅模式
2021/11/07 Javascript
Django框架中视图的用法
2022/06/10 Python