华山资源网

基于vue开发的在线付费课程应用过程
网络编程 2024/11/15 佚名
3 1
  • 使用 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"color: #ff0000">自定义分享

由于使用了 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开发的在线付费课程应用过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com