目前正在写一个微信公众号的小项目,记录一下遇到的问题和解决方法(主要是前端)。内容持续更新中~
主要实现
前后端分离
前端为 SPA 单页面
使用微信的JSSDK
微信支付
技术方案
后端使用 php 搭建接口
vux ui框架
vu2.0e全家桶(vue、vue-router、vue-resource、vuex)
问题列表
跨域问题
因为生产环境下是同域名,不存在跨域问题。生产环境配置反向代理解决了跨域。这里遇到的问题主要是开发环境下,后端和前端分别在两个 http 服务器上。因为前端项目直接用 vue-cli 生成,所以用到了 webpack,正好 webpack 的 dev-server 可以设置反向代理。在config/index.js
里找到 dev
下的 proxyTable
配置项,并加入配置即可
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8888',
changeOrigin:true,
pathRewrite:{
//'^/api':''
}
}
}
授权回调处理
主要是获取用户的 openid。因为每个用户的 openid 固定不变,所以在首次加载时会检测 store 中是否有openid,如果没有就跳转到授权页面获取openid再跳转回来,并写入 localstorage,并更新 store。
//检测url中是否有openid
if(this.$route.query.openid){
this.$store.commit('updateOpenid',this.$route.query.openid);
}
//跳转授权
if(!this.$store.state.openid){
//授权完成后需要携带openid参数再跳回来
window.location.href="/access";
}
但是实际应用中这样并不安全,因为直接将 openid 传回页面,容易被客户端篡改。所以更加安全的做法是授权之后生成一个 token 和对应的 openid 存入数据库,并设置 token 失效时间,不把 openid 直接暴露给前端。前端提交时使用 token,在后端再取出对应的 openid
微信支付
看了下文档,以前是需要用 jssdk 唤起支付,而现在则是把微信 jssdk 内置到了微信的浏览器中。可以直接使用 WeixinJSBridge 来唤起支付。当然签名生成和订单需要在后端做。而且支付流程似乎也做了更改,以前是把订单信息和加密字符串同时传递到微信服务器,而现在是先在后端把订单信息传递给微信服务器,返回 prepay_id。前端只需要接收 prepay_id 并传递就可以了,这样的话更安全一些。
在前端组件中的代码更加简单化
pay(){
let _this=this;
let jsApiParameters={};
let onBridgeReady=function(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
jsApiParameters,
(res)=>{
if (res.err_msg == "get_brand_wcpay_request:ok") {
_this.alert('支付成功');
window.location.reload();
}
if (res.err_msg == "get_brand_wcpay_request:cancel") {
_this.alert('取消支付');
window.location.reload();
}
}
);
}
let callpay=function(){
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
}
//请求支付数据
this.$http.get('wechat/wxpay?openid='+this.$store.state.openid+'&id='+this.$route.params.id)
.then((response)=>{
if(response.body.status==1){
jsApiParameters=response.body.data;
callpay();
}else{
_this.alert(response.body.msg);
}
});
}
支付授权目录问题
因为微信的支付授权目录要精确到子目录级别,而 spa 的 url的形式大概为 /wechat/#/show/1、/wechat/#/list/type 这样,就会产生发生支付的页面报支付目录未定义的问题。针对这个问题可以在根目录后加加上 ? 符号链接,后面的地址就会被当成参数解析,而不会当成目录。/wechat/?#/show/1、/wechat?#/list/type,这样解析出来的目录都是在 /wechat/ 根目录下面
安卓下无法使用 html5 input 无法唤起摄像头
上传图片部分使用的是html5直接选择图片上传
<input id="uploaderInput" @change="change" class="weui-uploader__input" type="file" accept="image/*" multiple />
在 ios 设备下没有问题,会弹出选择拍照、图库等选项。但是朋友说在安卓下只能选择图库,而且无法多选。上网查了一下,确实在部分安卓平台下有这个问题。加上 capture=camera” 可以直接使用拍照,但是选择图库又没了。。。
解决方案有两个
1.使用微信的 jssdk 来选择图片,但是这样上传部分要修改。
2.在安卓下使用 vux 提供的 Actionsheet 组件来代替系统默认的选择,分别加上选择图库、直接打开拍照。
好气啊,手头又没有安卓设备,索性先放下不管了。
博客链接:https://lscho.com/tech/vue-we…,后续在博客更新