记录uniapp开发app遇到的问题

前端o_o小江

已于 2023-05-12 17:36:27 修改

阅读量898

点赞数

文章标签： uni-app 前端 vue.js

于 2023-04-24 11:52:06 首次发布

本文链接：https://blog.youkuaiyun.com/web_xiaojiang/article/details/130338521

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章只要是记录我个人开发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 ->滚动底部 -> 沙盒账号

未完待续···