uniapp 笔记

一夜旅行

已于 2024-07-16 13:17:11 修改

阅读量259

点赞数 5

文章标签：笔记前端

于 2024-07-16 13:01:24 首次发布

本文链接：https://blog.csdn.net/qq_40737587/article/details/140459567

版权

uniapp手机一键登录获取code

1.手机一键登录
	使用button按钮自带的属性 open-type 设置getphonenumber，在@getphonenumber回调中获取到用户信息
	getphonenumber(e) {
			// 获取手机一键登录的code
			console.log(e.detail.code)
			//登录的接口信息以及戴的参数
			const code = {
				code: e.detail.code,
				.....
			}
			//接口
			login(code).then(res => {
				//登录是否成功信息
			})
		}

uniapp uni.login所获取的code

1.获取uni.login的code和uni.getUserInfo获取用户信息（查看官网调整信息）

uni.login({
		  provider: 'weixin', //使用微信登录
		  success: function (loginRes) {
		    console.log(loginRes.code);
		    //获取用户信息可以使用,但是不推荐，官方调整 
			    uni.getUserInfo({
	      			provider: 'weixin',
	      			success: function (infoRes) {
	      			// 微信官方默认返回微信昵称和头像
	        		console.log('用户昵称为：' + infoRes.userInfo.nickName);
	        		console.log('用户头像为：' + infoRes.userInfo.avatarUrl);
    		  }
    		});
		  }
		});

2.获取用户昵称和头像

	1.获取微信头像

```
<button class="share-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
	<image class="personal_tx" :src="formData.avatarUrl"></image>
</button>
//获取微信头像
	onChooseAvatar(e) {
			console.log(e);
			let _this = this
			let avatarUrl = e.detail.avatarUrl
			console.log('savePicture', avatarUrl);
			//头像图片保存临时地址，传给后端获取永久地址
			API_upload.savePicture(avatarUrl).then(({
				data
			}) => {
				console.log(data, '图片');
				_this.formData.avatarUrl = data
				let param = uni.getStorageSync('userInfor') || {};
				param.avatarUrl = data
				uni.setStorageSync('userInfor', param);
			}).catch(err => {
				console.log('err :>> ', err)
			})
		}
		2.获取用户昵称
			(1).ios端input可能会弹起自带的键盘 添加两个属性限制
			<input placeholder-style="color:#ffffff" style="width: 174rpx;" type="nickname" placeholder="请输入昵称"
						:value="formData.nickName" maxlength="10" @blur="bindbur" :focus="isFocus" @tap="getFocus" />
			data() {
				return {
				isFocus: false,
				}}
				getFocus() {
					this.isFocus = true
				}
				// 昵称获取
				bindbur(e) {
					console.log('this.nickName', e, this.formData.nickName);
					this.formData.nickName = e.detail.value
					let param = uni.getStorageSync('userInfor') || {};
					param.username = e.detail.value;
					uni.setStorageSync('userInfor', param);
				}
				(2).ios端uniappp还有一种会自启自带键盘 uni-popup-dialog 设置 mode="input" 如何防止
					// uni-popup-dialog重写一个输入框
					<uni-popup ref="popup" type="dialog">
						<uni-popup-dialog ref='input_ref' title="头部" placeholder="请输入" mode="input" :duration="2000"
							:before-close="true" @close="close" @confirm="confirm">
							<view class=“input_ys”>
								<uni-easyinput type="text" v-model="hyValue" placeholder="请输入" clearSize="0" />
							</view>
						</uni-popup-dialog>
					</uni-popup>

获取公众号号的code

1.使用web-view调用 你在微信公众平台设置的域名

重新创建一个文件webView.vue
	<template>
		<web-view src="公众平台的域名"></web-view>
	</template>
	
	<script>
	</script>
	
	<style scoped lang="scss">
	</style>
创建一个文件index.html 配置访问域名返回的code
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <style>
		.main{
		    text-align: center; /*让div内部文字居中*/
		    width: 300px;
		    height: 350px;
		    margin: auto;
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		}
        </style>
        <title>xxxx你自己配置的名称</title>
    </head>
    <body>
    	<div class="main">设置中。。。</div>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script type="text/javascript">
			if (window.location.search === ''){
				const appid = '微信公众平台的appid'
			    const redirect_uri = encodeURI('微信公众平台的域名')
			    // 官方网址携带你的appid和域名地址
			    const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_base#wechat_redirect'
			    window.location = encodeURI(url)
			} else {
			    var code = window.location.search;
			     // 成功后返回到你配置地址上  在onLoad(option) option获取地址上的code返回给后端
			    wx.miniProgram.reLaunch({
			        url:'/pages/home/index' + code
			    })
			}
		</script>
    </body>
</html>

uniapp导航跳转

1.声明式导航通过navigator进行跳转
编程式导航通过

godetail(){
		// 保留当前页跳转到应用内某个页面
		uni.navigateTo({
				url:'../detail/detail'
			})
		},
		gomessage(){
			// 跳转到tabBar,并关闭其他所有非tarBar页面
			uni.switchTab({
				url:'../message/message'
			})
		},
		redirectMessage(){
			// 关闭当前页，跳转到应用内的某个页面
			uni.redirectTo({
				url:'../detail/detail'
			})

uniapp 微信支付流程

uniapp小程序支付流程：
1.申请微信支付：微信支付平台完成注册和申请审核。申请成功后，将获得微信支付所必须的各种证书、密钥等信息，这些信息将用于后续的支付请求。
2.配置： hbuilder配置基本在hbuilder中manifest.json下的App模块配置Payment（支付）选择需要支付的选项，配置appid
3.获取登录信息：在登录的时候获取uni.login获取的code返回给后端，后端处理获取openid和信息
4.创建订单：后端在服务器上生成订单号返回
5.前端调用支付接口：在前端（uniapp项目），当用户点击支付按钮时，前端将向服务器发送请求，获取上述支付参数。调用微信支付API的wx.requestPayment()方法，传入支付参数，拉起支付密码框，完成支付
6.处理支付：处理支付成功信心和返回上一页或者你返回的页面

<view class="foot_btn" @click="applySucc">
				<span>立即支付</span>
			</view>
			// 支付成功跳转
			applySucc() {
				let orderInfo = '' //从服务器获取的订单
				let productId = this.productBuy.id
				// 调用接口返回订单信息
				productOrderSave(productId).then((res) => {
					let obj = JSON.parse(res)
					let valueAfterEqual = obj.packageVal.split('=')[1]
					// const now = new Date();
					// // 将当前时间转换为时间戳（毫秒）
					// const timestamp = now.getTime();
					console.log(valueAfterEqual, obj, 'duixiang');
					wx.requestPayment({
						"timeStamp": obj.timestamp,
						"nonceStr": obj.nonceStr,
						"package": obj.packageVal,
						"signType": "RSA",
						"paySign": obj.paySign,
						"success": function(res) {
						// 支付成功返回界面，配置自己的路径
							uni.switchTab({
								url: '/pages/curriculum/curriculum'
							})
						},
						fail: function(err) {
							console.log('支付失败:' + JSON.stringify(err));
							uni.navigateBack()
						}
					})
				})
			},

一夜旅行

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
uniapp 笔记

5.**前端调用支付接口：**在前端（uniapp项目），当用户点击支付按钮时，前端将向服务器发送请求，获取上述支付参数。调用微信支付API的wx.requestPayment()方法，传入支付参数，拉起支付密码框，完成支付。1.**申请微信支付：**微信支付平台完成注册和申请审核。申请成功后，将获得微信支付所必须的各种证书、密钥等信息，这些信息将用于后续的支付请求。6.**处理支付：**处理支付成功信心和返回上一页或者你返回的页面。4.**创建订单：**后端在服务器上生成订单号返回。
复制链接

扫一扫