最近在弄一个付费课程的应用,主要有微信登录,支付和自定义分享,在开发过程中遇到的坑,这里做一下记录
文章主要有以下几点
使用库简介
微信登录解决
微信支付解决
微信自定义分享解决
页面前进后退数据状态解决
使用库简介
使用 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://juejin.im/post/5a6832ba5188256922633a7c