uniapp项目开发的功能点

原创已于 2025-04-27 10:15:08 修改 · 756 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-11-23 11:06:16 首次发布

微信小程序开发同时被 2 个专栏收录

42 篇文章

订阅专栏

uni-app

4 篇文章

订阅专栏

一.手机

判断什么手机

		const platform = uni.getSystemInfoSync().platform;//platform == 'ios'

什么机型

const model =  uni.getSystemInfoSync().model //model.toindex('iPhone')

二.授权登录

授权登录有2种方式

（一）静默授权

就直接通过uni.login 获取code ,传递给后端就好

（二）弹出框授权

现在只有手机授权会弹出框的，获取微信用户信息getUserProfile(新版)–不支持弹出框同时不能获取真实微信头像和昵称【统一都是灰色头像和微信用户】
注意：微信小程序手机号授权接口，从23年8月开始实行付费验证【手机号快速验证组件】

<button class="button btn-normal" type="primary" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">授权登录</button>
				//获取手机号授权
			async getPhoneNumber({
				detail
			}) {
				const app = this
				if (detail.errMsg != 'getPhoneNumber:ok') {
					app.$toast("微信授权获取手机号失败")
					return
				}
				app.isLoading = true
				// 后端的获取手机号的接口
				store.dispatch('LoginMpWx', {
						phoneCode: detail.code,
						encryptedData: detail.encryptedData,
						iv: detail.iv
					})
					.then(result => {
						this.$navTo('pages/user/personalData');
					})
					.catch(err => {
						const resultData = err.result.data
						// 显示错误信息
						if (isEmpty(resultData)) {
							app.$toast(err.result.message)
						}

					})
					.finally(() => app.isLoading = false)

			},

三. 昵称头像

现在微信用户信息getUserProfile(新版)–不支持弹出框同时不能获取真实微信头像和昵称【统一都是灰色头像和微信用户】，改成了头像昵称填写。

<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
	<input type="nickname" class="weui-input" placeholder="请输入姓名" @input="bindinput"
						v-model="name" />
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
  name:'',
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
  // 这个是微信临时头像，传给后端存是不行，需要转化，这边可以转成base
    const { avatarUrl } = e.detail 
    let s = uni.getFileSystemManager().readFileSync(avatarUrl , 'base64')
	this.avatarUrl = 'data:image/jpeg;base64,' + s

  },
  //昵称输入框blur
			bindblur(e) {
				this.name = e.detail.value;
			},
})

在这里插入图片描述

四.支付-uni.requestPayment

uniapp 不需要配置，直接调接口就好

后端接口返回订单信息
let params = {
						orderId: _this.orderId,
						emplyeeNo: _this.formInfos.emplyeeNo,
						titleId: _this.formInfos.invoiceTitleId
					}
					Api.nuonuoPay(params).then(payRes => {
						_this.wxPayment(payRes.data)
							.then(() => {
								//跳转到支付成功页面
							})
							.catch(err => {
								console.log(err, '错误')
							})
					}).catch(err => {
						console.log(err, '错误')
					})

/**
			 * 发起支付请求-微信支付
			 * @param {Object} 参数
			 */
			wxPayment(options) {
				var _this = this;
				return new Promise((resolve, reject) => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: options.timeStamp, // 时间戳（单位：秒） 当前
						nonceStr: options.nonceStr, //随机字符串，长度为32个字符以下。
						package: options.package, //统一下单接口返回的 prepay_id 参数值
						signType: options.signType, //签名算法，应与后台下单时的值一致
						paySign: options.paySign, // 签名，这里用的 MD5/RSA 签名
						success: res => resolve(res),
						fail: res => reject(res)
					})
				})
			}

五.地址授权

uni.getLocation(OBJECT)
注意这边获取address 只有app 支持，其他都是获取经纬度
这个会弹出定位授权的弹出框

//1.获取地址经纬度
uni.getLocation({
						type: 'gcj02',
						geocode: true,
						altitude: true,
						isHighAccuracy: true,
						success: function(res1) {
							console.log(res1, '经纬度')
							const longitude = res1.longitude + ',' + res1.latitude
							//这边经纬度 传给后端 转成正确地址
							//2.高德地图API获取地理信息
							uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: '1abe2***************c523408',
								location: longitude
							}
						}).then((res) => {
							console.log(res, '逆解析地址')
							let address = res[1].data
								.regeocode
								.addressComponent
								.city.replace(
									'市',
									'')
							// 特殊判断  福州市-平潭县 
							if (res[1].data
								.regeocode
								.addressComponent
								.district.includes('平潭')) {
								address = '平潭'
							}
							console.log('地址：',address)
							
						}).catch(err => {
							console.log(err, '地址解析报错')
						})
						},
						fail: function(err) {
							console.log(err, 'err')
						}
					});

高德地图API 地理/逆地理编码地址
 获取高德API-key

注意：企业微信可以直接获取不需要弹出地址授权，微信则需求弹出地址授权

六.分享页面以及我的名片-onShareAppMessage

		async onShareAppMessage(res) {
		
			const config = await getShaerConfig({
				type: '2',
				subtype: '1'
			})
			const returnParams = {
				title: data.title,
				content: data.content,
				imageUrl: data.imageUrl
			}
			//分享的内容请求后端的接口
			return {
				...returnParams,
				path: 'pages/index/index'//分享的路径
			}
		},
		同理
				onShareAppMessage() {
			return {
				title: `您好，我是${this.userInfo.name}。这是我的名片请惠存。`,
				path: '/pages/user/businessCard?id=' + this.id,
			}
		},

补充图片可以转发，分享。增加:show-menu-by-longpress=“true”

七.发起订阅-uni.requestSubscribeMessage

取消后，就不会弹出来，需要在小程序设置内，打开

	uni.requestSubscribeMessage({
								tmplIds: [
									'W7LUiaNM',
									'XFu6M206S1wWGaaoU',
									'9siJPU2cCfSUkHF8RBQ'
								],
								success(res) {
									if (res['W7LUiaNM'] ===
										'accept') { // 用户点击确定后
										console.log('已经授权');
									} else {
										console.log('未授权')
									}
								}
							})

八.在线预览pdf

uni.downloadFile({
					url: app.detailsInfos.pdfUrl, //pdf文件地址
					success: function(res) {
						var filePath = res.tempFilePath;
						app.isPreviews = false
						uni.openDocument({
							filePath: filePath,
							showMenu: false, //这个参数可设置你预览的文件能否被直接转发，此次是设置是否展示分享菜单
							success: function(res) {}
						});
					}
				});

注意：这个是可以直接打开pdf的，uni.downloadFile下载不是真实下载在手机上，同时预览pdf页面不能加操作（比如增加返回按钮之类）；企业微信这种方式的话，没有内置预览只能通过安装预览pdf的app，才可以。企业微信小程序没有其他方式可以预览pdf,除了网页的可调用previewFile接口预览看下