记录uniapp开发app遇到的问题

本文记录了使用uniapp开发过程中遇到的问题,包括vue3集成pinia的状态管理,uniapp中使用websocket的注意事项,以及苹果支付的前期准备和沙盒账号的管理。强调了uniapp生命周期的导入、pinia的正确引入与使用,以及避免websocket连接错误的方法。
摘要由CSDN通过智能技术生成

这篇文章只要是记录我个人开发app过程遇到的问题,以及运行没有问题的代码片段,如有建议或者问题可以私我

uniapp使用vue3 setup

引入 uniapp 页面声明周期

import { onShow } from "@dcloudio/uni-app";

@dcloudio/uni-app 支持导入的方法

[
  "getSsrGlobalData",
  "onAddToFavorites",
  "onBackPress",
  "onError",
  "onHide",
  "onLaunch",
  "onLoad",
  "onNavigationBarButtonTap",
  "onNavigationBarSearchInputChanged",
  "onNavigationBarSearchInputClicked",
  "onNavigationBarSearchInputConfirmed",
  "onNavigationBarSearchInputFocusChanged",
  "onPageNotFound",
  "onPageScroll",
  "onPullDownRefresh",
  "onReachBottom",
  "onReady",
  "onResize",
  "onShareAppMessage",
  "onShareTimeline",
  "onShow",
  "onTabItemTap",
  "onThemeChange",
  "onUnhandledRejection",
  "onUnload",
  "resolveEasycom",
  "shallowSsrRef",
  "ssrRef"
]

pinia

如果你使用的是vue3编写的
首先在 main.js 文件中 找到vue3的条件编译代码中 引入 import * as Pinia from 'pinia';
千万别忘记return出去

// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
export function createApp() {
  const app = createSSRApp(App);
  app.use(Pinia.createPinia());
  return {
    app,
	Pinia,
  }
}
// #endif

切记!不要在实例创建之前调用这个对象会报错,开始创建的时候并没有报错,等我业务代码写的差不多的时候,就开始疯狂做法,毕竟uniapp报错信息总是莫名其妙看不懂 -_-!!!

建立store

创建一个名为store目录,新建index.js文件

import { defineStore } from 'pinia';
export const Store = defineStore('counter', { 
	state: () => {
		return {
			count: 0,
		}
	},
	// 也可以定义为
	// state: () => ({ count: 0 })
	actions: {
		 increment() 
			this.count++
		 },
	},
})

页面使用

import {Store} from '@/store/index'
const mainStore = Store()
//改变count的值
mainStore.count = 5

是不是超级简单,这个使用起来比vuex丝滑多了!

websocket 使用的坑

uniapp框架不支持直接new websocket()对象,浏览器调试可以使用,但是手机端打开你就会发现报错了,幸好uniapp有提供的uni.connectSocket ,这个是全局的唯一的,千万不要在多个页面直接调用,因为会在下一次创建新的websocket,建立连接时会多次同时请求,关闭几次就同时请求几次,所以要做封装,全局只创建一次!
———我会顺便把封装的代码也贴上,方便大家减少开发时间

	const socketURL ='ws://8.134.153.221:0000' //填写你自己的服务器
	let heartbeatInterval = null  //定时器的变量
	const initSocket= (token) => { //传参的方式传入token
		const SocketTask = uni.connectSocket({
			url: socketURL,
			success: (res) => {
				 uni.showToast({
				 	icon: "none",
				 	title: "连接成功"
				 })
			}
		})
	
		SocketTask.onOpen((e) => {

			// 传一次token到服务器,,这个看你怎么跟后端交互,有些是直接url上传token
			let data = {
					token: token
				}
			SocketTask.send(data)
			// 发送心跳包
			let sendHeartbeat = () => {
				let heartbeat = {
					command: "ping",
					request_id: num + new Date().getTime(),
					time: utils.ISODateString(new Date()),
				}
				SocketTask.send({
					data: JSON.stringify(heartbeat)
				});
			}
			
			// 设置心跳计时器
			heartbeatInterval = setInterval(sendHeartbeat, 60000);
		})
		// 接收消息时触发
		SocketTask.onMessage((MessagEvent) => {
			let ContentData = JSON.parse(MessagEvent.data)
			if (ContentData.code == 10003) {
				// contentData.splice(index)
				uni.showToast({
					icon: "none",
					title: "请先登录"
				})
				uni.navigateTo({
					url: "/pages/login/index"
				})
			}
		})
		// 连接失败时触发
		SocketTask.onError(function(res) {
			uni.showToast({
				icon: "error",
				title: "连接失败"
			})
			//这里连接失败可以重新调用初始化的方法  initSocket(),但是要设置重连机制
		});
		// 连接关闭的回调函数
		SocketTask.onClose(function(res) {
			clearInterval(heartbeatInterval)
		});


	}
	export default initSocket

因为我这个项目没有需要重连的需求所以就没有写,重连机制大概就是设置个倒计时,比如重连5次,5次之后还是失败就要提示用户重启应用或查看网络,如果在5次之内重连成功就清除定时器

页面上使用

import initSocket from "@/utils/socket.js"
initSocket() //初始化websocket,可以在onMounted中再调用
//接收服务器返回的数据
uni.onSocketMessage((MessagEvent)=>{
	console.log(MessagEvent)
})
//发送消息给给服务器
uni.sendSocketMessage(data)

苹果支付–前期准备

相信很多小伙伴第一次对接苹果支付都会被卡很久,所以为了后面的小伙伴,我把我对接苹果的过程记录一下,不是很全面,但是我尽可能写清楚点,以下是我碰到问题,可能跟你们的不一样

首先:一台 MacBook 肯定是少不了的,方便后面上传ipa包,也需要有用到苹果的上传工具,往下看

  • 使用苹果开发者账号登录 App Store Connect,在应用的功能选项卡页面,添加 App 内购项目。
  • 内购项目的各信息需要填写完整,然后保存,此时内购项目的状态应该是准备提交,当提交应用通过审核后,状态则变为已批准
  • 测试时,建议使用测试证书打一个自定义的 iOS 基座进行测试
  • 在应用 TestFight 的选项卡添加 App Store Connect 用户,测试支付时可以使用此用户帐号进行测试
  • 如果使用沙盒账号,第一次购买有成功回调,后面的购买成功没有回调,因为苹果沙盒的坑来的,所以不要傻傻的等回调了,网络上说的清掉购买记录就可以,但是不知道苹果的服务器多久才去清掉,还不如继续创建新的沙盒账号
  • 添加沙盒账号不需要真实有效的邮箱,只需要邮箱格式符合就行了,如果创建不成,多半是格式问题,如果已经有创建过成功的,再创建时按照之前的格式改掉内容就行了
  • 如何更换沙盒账号?在苹果手机 -> 设置 -> iTunes Store与App store ->滚动底部 -> 沙盒账号

未完待续···

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值