编辑器用的 hbuilder
H5具有的功能 微信授权登录 -> 进入首页 轮播图 商品分类渲染 等
首页::::
这个地方就自己写html+css 根据ui设计图来布局 然后调接口写功能 swiper在uniapp官网或者uview中有插件 uview需要引入 具体不做过多介绍
课程模块::::
直播模块没做::::
我的模块::::
强退出来的 所以微信授权中 图片跟姓名没有拿到 正常流程是可以拿到的
-----------------------------------开发过程中遇到的问题-----------------------------------------------
支付模块 因为是H5支付 所以用的是js-sdk代码如下
//支付goPay() {
if(this.isIdent == 0){
this.show = truereturn
}
if(this.isBuy == 1){
uni.showToast({
title:'您已购买该课程,无需再次购买',
icon:'none'
})
return
}
this.$rqt.submitOrder({ //该接口用于获取订单号 courseId: this.detailList.courseId,
orderMoney: this.detailList.coursePrice
}).then(res => {
if (res.code == 1) {
this.orderSn = res.datathis.wxPay()
}
})
},
wxPay() {//接口 用于支付信息 后台返回this.$rqt.wxPrePay({
orderSn: this.orderSn
}).then(res => {
this.wxPay2(res.data)
})
},
//微信支付js-sdk --------------------------- 直接用以下方法即可实现H5调用支付wxPay2(payInfo) { //老版微信支付,通过微信浏览器中的WeixinJSBridge支付functiononBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": payInfo.appId, //公众号名称，由商户传入 "timeStamp": payInfo.timeStamp, //时间戳，自1970年以来的秒数 "nonceStr": payInfo.nonceStr, //随机串 "package": payInfo.package,
"signType": payInfo.signType, //微信签名方式： "paySign": payInfo.paySign//微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
console.log('支付成功')
//在这里做后续操作
} elseif (res.err_msg == "get_brand_wcpay_request:cancel" || res.err_msg ==
"get_brand_wcpay_request:fail") {
console.log('取消支付');
}
});
}
if (typeofWeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} elseif (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
}
---------------------------------------微信公众号授权微信登录遇到的问题-----------------------------
登录的时候后端给我的接口有1.微信授权接口 用于获取openId 支付的时候用 2.微信登录接口 用于获取token
首先登录的时候点击登录 需要获取用户登录的code 如何获取code??以下代码 我会具体讲解
<script>
exportdefault {
data() {
return {
code: '',
urls:''
}
},
onLoad() {
// this.$store.state.faceCode = 1this.urls = window.location.href// 获取当前的urllet a = this.urls.substring(6).split('&')
this.code = a[0].split('?')[1].split('=')[1] //截取字符串 获取url里面的codeif(this.code){ //如果第一次能获取到code 就跳转到主页
uni.switchTab({ //在tabber里面配置了 所以用switchTab跳转 如果第一次没有获取到code 往下执行url:'/pages/index/index'
})
return
}
},
methods: {
handlerLogin() {
this.getCode()
},
//如果第一次没有获取code 就通过以下代码来获取code 向微信服务器发送请求-----------------------具体功能大概就是 向微信公众号发送请求 获取到之后重定向到 redirect配置的地址 redirect里面不能拼接参数?? 我试过不行,我不知道是不是我拼接的方式不对 但是拼接进去之后就请求不到code参数了 如果必须要拼接参数 建议就直接在window.location.href里面写死吧 然后重定向的时候再拼接参数getCode() {
// this.init()let appid = "wxb393e72********"; //个人开发者appid 微信公众号的appid 可以是个人的可以是公司的let redirect = encodeURIComponent('http://api.****.vip/index'); //重定向回来的地址 let wx_code = this.getUrlParam("code"); // 截取url中的code//判断有没有codeif (!wx_code) { //向微信接口请求 获取codewindow.location.href =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&connect_redirect=1`;
} else {
this.getOpenId(wx_code); //把code传给后台获取用户信息
}
},
//getUrlParam方法就是使用正则截取地址栏里的codegetUrlParam: function(name) {
var reg = newRegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) returnunescape(r[2]);
returnnull;
},
//这是我自己写的接口 应该没啥用 但是我测不出来 不敢删....用于获取openId的getOpenId(code) {
this.$rqt.auth({
code: code
}).then(res => {
this.code = res.code
uni.setStorageSync('openId', res.data.openid)
})
},
}
}
</script>
通过以上方法就能获取到code 然后通过url传到首页 然后你自己通过字符串截取的方式截取自己想要的东西就行了 下面这三行是截取code的代码 自己试试就行
let a = this.urls.substring(6).split('&')
this.code = a[0].split('?')[1].split('=')[1]
console.log('this.code', this.code);
首页功能代码 其实也没啥 给大家看看 获取过来code之后是怎么用的 有需要的就看看
onLoad(option) {
let identUrl = window.location.href//这个identUrl是获取人脸识别成功之后传过来的url let idents = identUrl.substring(6).split('code=')[1].split('&')[0]//截取自己想要的参数this.urls = window.location.href//这个是获取 登录url时code的参数 你也可以用identUrl 我分开了 用来区分一下吧算是 this.init() // class商品分类接口this.banner() //轮播图接口this.hotListInit()//推荐商品接口//这个if是用来区别是否人脸认证成功 用的是腾讯云人脸识别 code==0时 认证成功 如果code!= 0 就往下走if(idents != 0){
this.personInit() //开始微信授权登录
}
},
methods: {
//首页推荐hotListInit() {
this.$rqt.hotList().then(res => {
this.hotList = res.data
})
},
// 获取CodepersonInit() { // 获取到url里面的code let a = this.urls.substring(6).split('&')
this.code = a[0].split('?')[1].split('=')[1]//截取codethis.autoInfo()//截取到code之后走微信授权接口 你也可以加一个if判断 是否截取到code
},
// 微信授权autoInfo() {
this.$rqt.auth({
code: this.code//接口传给后端code参数
}).then(res => {
uni.setStorageSync('openId', res.data.openid) //获取openidthis.nickname = res.data.nicknamethis.headimgurl = res.data.headimgurl
uni.setStorageSync('headimgurl',res.data.headimgurl)//获取微信用户头像
uni.setStorageSync('nickname',res.data.nickname)//获取微信用户昵称//为什么我要用本地存储的方式来存参数====因为开发的时候遇到了这么一个问题 ,每次进入首页之后需要进行人脸识别,通过window.location.href跳转外部H5页面,然后认证成功返回到主页的时候整个H5会重新刷新 导致页面跟接口会重新调用和渲染 然后code就失效了(微信授权登录的code只能用一次昂 用过一次就失效了 然后获取到的openId就是个null了),所以我就用了本地存储来保存第一次获取到的参数if(res.code == 1){//调用微信授权接口如果接口返回的code == 1 就继续走微信登录接口this.loginInfo()
}
})
},
//微信登录loginInfo() {
var openId = uni.getStorageSync('openId') //微信登录需要用到openId 我就把他这么拿过来了 原因我在上面写了 各位如果有好的办法欢迎在下方留言讨论this.$rqt.login({ // 需要传递的参数openId: openId,
nickname: this.nickname,
headimgurl: this.headimgurl
}).then(res => {
if (res.code == 1) { //然后这里是如果code == 1 存一下token正常登录即可
uni.setStorageSync('token', res.data)
}
elseif (res.data.code == 3) { // 如果code == 3 走人脸识别 res.data.data里面的参数是外部链接 H5跳H5 就直接用window.location.href跳转就行 不要用webView了 用webView有点小问题 就没啥用..
uni.setStorageSync('WebUrl',res.data.data)
uni.removeStorageSync('token') // 清除一下本地存储的token 因为授权登录成功之后还会返回一个tokenwindow.location.href = res.data.datareturn
}
})
},
! ! ! ! ! ! ! 我不知道为啥我在destoryed和unonload生命周期里面通过uni.removestorageSync('token')来清除token无效 beforedestoryed里面也没有用 我不知道是为什么 关闭应用的时候根本清不掉本地的token 所以我就写在code==3当中了 然后整个登录的接口就都走完了,code跟openId都获取到了
为什么auth接口里面会返回nickName跟headImgUrl?? 因为我当时调用微信授权登录的时候 获取到用户的微信头像跟微信名称被加密过了 所以我让后端给解密了一下然后传过来了
只有人脸识别走的是三方链接 识别的结果还是自己写的
<script>
export default {
data() {
return {
identText:'认证失败，请重新认证信息',
Code:0,
userId:0,
faceCode:1,
idents:1
}
},
onLoad() { //认证成功和失败的时候 都可以通过url的code来认证 code==0是是认证成功 其他都是失败
let identUrl = window.location.href //这个是获取当前页面的url 获取code参数
this.idents = identUrl.substring(6).split('code=')[1].split('&')[0]
let urls = uni.getStorageSync('WebUrl') //这个是获取接口需要传递的参数
this.userId = urls.substring(6).split('userId=')[1].split('&')[0]
this.identMethods()
},
methods: {
identMethods(){
let indexToken = uni.getStorageSync('token')
if(this.idents == 0){ //如果获取到的code == 0 认证成功
this.identText = '认证成功'
this.$rqt.ident({
userId:this.userId
}).then(res=>{
this.Code = res.code
if(res.data == ''){//res.data 里面是token 如果获取到的token为空 就别走了
return
}else{ // 如果认证成功之后获取到了tone 就更新一下token
uni.setStorageSync('token',res.data)
}
})
}else{
this.identText = '认证失败，请重新认证信息'
}
},
confirmBtn(){
if(this.idents == 0){
// this.getCode()
uni.switchTab({
url:`/pages/index/index`
})
}else { //如果失败 就接着认证
let webUrl = uni.getStorageSync('WebUrl')
window.location.href = webUrl
}
}
}
}
</script>
还有很多功能 还有看视频啥的功能就不一一列举了 再放张图吧
还有一个问题 想问一下各位大佬 ,就是我在开发微信公众号的时候 微信授权需要通话微信开发者工具来获取 外部浏览器调试H5不能获取到微信授权 然后在开发微信公众号H5的时候 我用的是 微信开发者工具里面的公众号页面开发的 这玩意儿开发...没法热更新调试代码 每次更新完代码 都需要提交到服务器上面然后再通过链接在开发者工具里面打开才能看到你更新的代码的效果
没法热更新代码 没法热更新代码...所以我在调试的时候就很烦 请问各位大佬在开发公众号的时候 有没有什么别的办法能热更新代码 实时调试 有的话麻烦在下面留个言 谢谢各位大佬了!!!
当然各位如果有什么问题的话也可以在下方留言 或者是联系企鹅 743180155 欢迎讨论
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
