基于vue开发的在线付费课程应用
最近在弄一个付费课程的应用,主要有微信登录,支付和自定义分享,在开发过程中遇到的坑,这里做一下记录
文章主要有以下几点
- 使用库简介
- 微信登录解决
- 微信支付解决
- 微信自定义分享解决
- 页面前进后退数据状态解决
使用库简介
- 使用
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 组件激活时重新设置一下自定义分享的数据,要不然如果在返回前的页面也定于的自定义分享,返回后页面没有刷新,分享的数据就会是之前的,这里重新定义一下就可以了
总结一下
第一次写文章,很多东西不会表达,希望对大家有所帮助!遇到问题请私信
这个项目的代码,可以当作项目的初始来哦!开箱即用
预览地址
原文地址:https://www.cnblogs.com/baimeishaoxia/p/11795310.html
- TensorFlow 入门
- Python 爬虫 1 快速入门
- Exim Off-by-one(CVE-2018-6789)漏洞复现分析
- 一文学会用 Tensorflow 搭建神经网络
- 数据降维处理:PCA之特征值分解法例子解析
- 理解Eureka的自我保护模式
- 如何使用Feign构造多参数的请求
- 最简日志打印规范
- 碎片化 | 第四阶段-47-值栈细节问题-视频
- word2vec 模型思想和代码实现
- 碎片化 | 第四阶段-48-hibernate概述和配置-视频
- 【LEETCODE】模拟面试-357- Count Numbers with Unique Digits
- Python 爬虫 2 爬取多页网页
- 碎片化 | 第四阶段-49-hibernate之HQL查询操作-视频
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP设计模式之外观模式(Facade)入门与应用详解
- PHP实现简单用户登录界面
- 使用python批量修改XML文件中图像的depth值
- PHP数组对象与Json转换操作实例分析
- PHP防止sql注入小技巧之sql预处理原理与实现方法分析
- php实现微信公众号企业转账功能
- 实例分析10个PHP常见安全问题
- laravel清除视图缓存的代码
- Smarty模板类内部原理实例分析
- laravel框架与其他框架的详细对比
- ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写办法
- PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
- PHP实现简单登录界面
- PHP创建XML接口示例
- PHP设计模式之单例模式入门与应用详解