基于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 组件激活时重新设置一下自定义分享的数据,要不然如果在返回前的页面也定于的自定义分享,返回后页面没有刷新,分享的数据就会是之前的,这里重新定义一下就可以了。

总结

以上所述是小编给大家介绍的基于vue开发的在线付费课程应用过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • Vue.js手风琴菜单组件开发实例
  • 详解Vue 开发模式下跨域问题
  • vue.js+Echarts开发图表放大缩小功能实例
  • vue开发调试神器vue-devtools使用详解
  • vue+mockjs模拟数据实现前后端分离开发的实例代码
  • 详解Vue微信公众号开发踩坑全记录
(0)

相关推荐

  • vue.js+Echarts开发图表放大缩小功能实例

    最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便.但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能.当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化.而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的.于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在

  • vue+mockjs模拟数据实现前后端分离开发的实例代码

    本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回

  • 详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

  • Vue.js手风琴菜单组件开发实例

    本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下 小图标是引入font-awesome字体图标库绘制的.效果如下图所示: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet"

  • vue开发调试神器vue-devtools使用详解

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插件 GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包 地址:http://npm.taobao.org/ 命令行安装npm淘宝镜像: $ npm install -g cnpm --registry=https://

  • 详解Vue 开发模式下跨域问题

    设置请求头部 后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com 前端post请求设置withCredentials=true 这里用了axios的请求数据方法代码如下: import axios from 'axios' import config from '../config' export default { request (method, uri, data,

  • 基于vue开发的在线付费课程应用过程

    使用 vux UI组件库 使用 vue-navigation 缓存页面,此库实现了前进刷新后退读缓存的功能,像原生APP导航一样.用子路由的方式实现tabbar有bug,用vuex解决了. 使用 lib-flexible 解决移动页面适配 来一个清单 "dependencies": { "fastclick": "^1.0.6", "lib-flexible": "^0.3.2", "lodash

  • 基于Vue开发数字输入框组件

    随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: (1)index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

  • 基于vue 开发中出现警告问题去除方法

    出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 以上这篇基于vue 开发中出现警告问题去除方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 使用vue.js开发时一些注意事项 Vue开发过程中遇到的疑惑知识点总结

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 使用Vue开发自己的Chrome扩展程序过程详解

    前言 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序.它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等. 好消息是浏览器扩展并不难写.可以用你已经熟悉的 Web 技术(HTML.CSS 和 JavaScript)创建 -- 就像普通网页一样.但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方. 在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展.这个扩展程序的 JavaScript 部分,我

  • vue开发中关于axios的封装过程

    目录 关于axios的封装 vue中axios全局封装 axios封装 api的统一管理 关于axios的封装 下面代码参考了 vue-element-admin 中的封装方式,request.js 文件如下,封装一个 axios 实例: import axios from 'axios' import { BASE_URL } from './http' import router from '../router'   // create an axios instance const ser

  • Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • 基于Vue 2.0的模块化前端 UI 组件库小结

    AT-UI 是一款基于 Vue.js 2.0 的轻量级.模块化前端 UI 组件库,主要用于快速开发 PC 网站产品. 专门为桌面应用程序构建,AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程,以及一个体面的干净整洁的 UI 组件. 特性 基于 Vue 开发的 UI 组件 基于 npm + webpack + babel 的工作流,支持 ES2015 CSS 样式独立,保证不同的框架实现都能保持统一的 UI 风格( 详见: AT-UI Style) 提供友好的

  • 基于vue中解决v-for使用报红并出现警告的问题

    代码报红对于追求优美代码的强迫症患者来说看着很不舒服,报红如下: 控制台中也会有: (Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for

  • 基于VUE.JS的移动端框架Mint UI的使用

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

随机推荐