微信小程序支付与授权
1.先登录
一、页面
<view class="container">
<button disabled="{{disabled}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号授权</button>
</view>
<button disabled="{{disabled}}" bindtap="getUserProfile">获取用户信息</button>
二、js
1.页面初始化就调用wx.login方法
onLoad() {
wx.login({
success: res => {
let code = res.code;
this.setData({
logincode:code
})
}
})
2.bindtap方法
getPhoneNumber(e){
console.log(JSON.stringify(e));
//设置按钮为disable
this.setData({ disabled:true});
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){
wx.showToast({
title: '你点击了取消按钮',
icon: "none"
});
//恢复按钮为disable:false
this.setData({ disabled:false});
}else{
wx.showLoading({
title: '登录中...',
})
//手机验证登录之前 就是为了拿到 encryptedData 和 iv
//页面初始化时候就已经调用了 wx.login 获得到logincode
wx.request({
url: app.globalData.requeUrl + '',
method: "POST",
data: {
code: this.data.logincode,
action: "PhoneOauthLogin",
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
},
header: {
"Content-Type": "application/x-www-form-urlencoded",
},
success: res => {
wx.hideLoading();
console.log(res);
//res.data.code== 1 表示请求成功
if(res.data.code == 1){
//openid不为空 就存起来
if (res.data.openid) {
wx.setStorageSync("openid", res.data.openid)
}
if(res.data.data.phoneNumber == null){
wx.showToast({
title: '授权失败,请重试',
icon: "none"
})
this.setData({ disabled:false});
}else{
//手机号不为空 Cookie就存起来
wx.setStorageSync('sessionid', res.header['Set-Cookie']);
wx.showToast({
title: "授权成功",
icon: "none"
})
wx.reLaunch({
url: '../zhifu/zhifu',
})
}
}else {
wx.showToast({
title: "授权失败,请重试",
icon: "none"
})
}
},
})
}}
2.支付
一、bindtap方法
<cover-view class="pay-foot clearfix sdgjs">
<button class="sdgjs" bindtap="payNow" class="fr suborder">确认支付</button>
</cover-view>
二、js代码
payNow(){
//先获取有没有cookie
var cookie = wx.getStorageSync("sessionid");
if(cookie){
wx.request({
url: app.globalData.requeUrl + '',
method: "POST",
data: {
action: 'OpeatePayOrder',
addressid:236, //地址id
receivetime: 0, //配送时间
paytype: 1, //支付状态
freight: 0,
remark: ''
},
header: {
"Content-Type": "application/x-www-form-urlencoded",
'cookie': wx.getStorageSync("sessionid")//读取cookie
},
success: res =>{
console.log(res)
if (res.data.code == -1 && res.data.msg == "未登陆无权访问!") {
this.noCookie();
}else{
if (res.data.code >= -1) {
//这是订单号 我就写死值了
var out_trade_no ="LK1499967092202103111139222690";
wx.request({//支付
url: app.globalData.requeUrl + '',
method: "POST",
data: {
action: 'topay',
orderid: 3153, //订单id 我这里写的死值
openid: wx.getStorageSync("openid") //传的授权时候的openid
},
header: {
"Content-Type": "application/x-www-form-urlencoded",
'cookie': wx.getStorageSync("sessionid")//读取cookie
},
success: res => {
//请求成功后获得这些数据 通过wx.requestPayment 进行微信的api接口调用
console.log(res)
wx.requestPayment({
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package,
signType: 'MD5',
paySign: res.data.paySign,
'notify_url':'', //回调地址
success (res) {
wx.request({
url: app.globalData.requeUrl + '',
method: "POST",
data: {
action: 'PayStatus',
out_trade_no: out_trade_no //订单号
},
header: {
"Content-Type": "application/x-www-form-urlencoded",
'cookie': wx.getStorageSync("sessionid")//读取cookie
},
success: res => {
console.log(res)
wx.showToast({
title: res.data.msg,
icon: "none"
})
}
})
},
fail (res) {
wx.showToast({
title: "已经取消支付",
icon: "none"
})
wx.redirectTo({
url: '/pages/car/car',
})
}
})
}
})
}else{
wx.showToast({
title: res.data.msg,
icon:"none"
})
}
}
}
})
}else{
this.noCookie();
}
},
noCookie(){
wx.showModal({
title: '登录状态通知',
content: '登陆超时,请重新登录',
showCancel: true,//是否显示取消按钮
confirmText: "立刻登录",//默认是“确定”
cancelText: "我先看看",//默认是“取消”
confirmColor: '#cd0900',//确定文字的颜色
success: function (res) {
if (res.cancel) {
} else {
wx.navigateTo({
url:"/pages/index/index"
})
}
}
})
},
3.位置定位
1.页面代码
<button bindtap="getLocation" style='width:100%'>
<input type="text" placeholder="选择收货址" value='{{chooseAddress}}' disabled="true"></input>
<text class="fl van-icon cuIcon-right lg text-gray"></text>
</button>
2.js代码
data: {
lat:"",
lng:"",
chooseAddress:''
},
getLocation(){
var that = this;
wx.chooseLocation({
success (res) {
console.log(res)
that.setData({
let:res.latitude,
lng:res.longitude,
chooseAddress:res.address
})
}
})
},
4.授权https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.openSetting.html
wx.authorizeForMiniProgram({
scope: 'scope.record',
success () {
// 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
wx.startRecord()
}
})
3.微信小程序图片上传
1.页面编写
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" wx:for="{{fileList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{fileList[index]}}">
<image src='{{imgurl+fileList[index]}}' mode='aspectFill'></image>
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="cuIcon-close"></text>
</view>
</view>
<view class="solids" bindtap="ChooseImage" wx:if="{{fileList.length<4}}">
<text class="cuIcon-cameraadd"></text>
</view>
</view>
2.js代码
ChooseImage() {
var that=this;
wx.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
wx.showLoading({
title: '加载中...',
mask: true
});
if (that.data.imgList.length != 0) {
that.setData({
imgList: that.data.imgList.concat(res.tempFilePaths)
})
} else {
that.setData({
imgList: res.tempFilePaths
})
}
const tempFilePaths = res.tempFilePaths
console.log(that.data.imgList)
let url = [];
for (let i = 0; i < tempFilePaths.length; i++) {
wx.uploadFile({
url: app.globalData.requeUrl + '/api/WebUpload/uploadImg', //仅为示例,非真实的接口地址
filePath: tempFilePaths[i],
name: 'file',
formData: {
'user': 'test'
},
success (res){
wx.hideLoading();
url.push((JSON.parse(res.data)).picturePath);
console.log(url)
that.setData({
fileList:url
})
},
fail:function(data){
wx.hideLoading();
wx.showToast({
title: '上传失败',
icon:'none'
})
}
})
}
}
});
},
3.查看和删除
ViewImage(e) {
wx.previewImage({
urls: this.data.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
var that=this;
let index=e.currentTarget.dataset.index;
wx.showModal({
title: '提示信息',
content: '确定要删除这张照片吗?',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
wx.request({
url: app.globalData.requeUrl + '/api/WebUpload/DelImg',
method: 'get',
data: {
fileparth:that.data.fileList[e.currentTarget.dataset.index],
},
header: {
'content-type': 'application/json',
// 'TokenValue':wx.getStorageSync('Token'),
},
success(res) {
console.log(res)
if(res.data.success==true){
that.data.fileList.splice(index, 1);
that.setData({
fileList: that.data.fileList
})
}else{
Dialog.alert({
title: '提示信息',
message: '删除图片失败,网络开了个小差,请稍后重试!',
}).then(() => {
// on close
});
}
}
})
}
}
})
},