uni-starter创建App项目最全流程(日后还有其他功能会不断更新)

news2024/11/19 3:42:22

一、创建项目

        在HbuilderX中点击创建项目,选择uni-starter模板,选择阿里云、Vue3,填写项目名称后点击创建。如果没有下载过uni-starter会自动下载该插件,如下图:

二、 创建云服务器并关联项目

        如果是第一次使用,鼠标右击uniCloud(该目录下存储云函数和云对象) ,然后点击关联云服务空间或项目,之后点击新建,浏览器自动打开云服务空间:uniCloud控制台在此处可以创建一个免费试用一个月的阿里云服务空间。创建完成后,回到HBuilderx中,再次点击关联云服务空间,这时会显示你刚创建的云服务空间,如果没有可以刷新一下或者重新启动HBuilderx。(HBuilderx最好一直保持和云服务空间同一个账号登录状态,不然刷新不出来)

三、创建并配置uni-id

         在目录uniCloud/cloudfunctions/common/uni-config-center/下新建uni-id/config.json
参考文档云端配置config.json的说明完成配置.uni-config-center 云配置中心 | uniCloud
        这里尤为重要,后续登录报错提示:Invalid uni-id config file就是这个文件没有创建或者该文件注释没有删除,又或者该文件内容格式有误,总之就是文件没法生效。下面我附上自己的代码,大家复制粘贴即可正常使用,但AppID和secret等内容还需要各自参照官网来配置。(注意微信开放平台和微信公众平台是两个不同的平台!!!

{
    "passwordSecret": [{
        "type": "sdasd-23",
        "version": 1
    }],
    "passwordStrength": "medium",
    "tokenSecret": "asd12asd#23",
    "requestAuthSecret": "",
    "tokenExpiresIn": 7200,
    "tokenExpiresThreshold": 3600,
    "maxTokenLength": 10,
    "passwordErrorLimit": 6,
    "passwordErrorRetryTime": 3600,
    "autoSetInviteCode": false,
    "forceInviteCode": false,
    "idCardCertifyLimit": 1,
    "realNameCertifyLimit": 5,
    "sensitiveInfoEncryptSecret": "",
    "frvNeedAlivePhoto": false,
    "userRegisterDefaultRole": [],
    "app": {
        "tokenExpiresIn": 2592000,
        "tokenExpiresThreshold": 864000,
        "oauth": {
 
            "weixin": {
                "appid": "",
                "appsecret": ""
            },
 
            "qq": {
                "appid": "",
                "appsecret": ""
            },
            "apple": {
                "bundleId": ""
            }
        }
    },
    "web": {
        "tokenExpiresIn": 7200,
        "tokenExpiresThreshold": 3600,
        "oauth": {
            "weixin-h5": {
                "appid": "",
                "appsecret": ""
            },
            "weixin-web": {
                "appid": "",
                "appsecret": ""
            }
        }
    },
    "mp-weixin": {
        "tokenExpiresIn": 259200,
        "tokenExpiresThreshold": 86400,
        "oauth": {
 
            "weixin": {
                "appid": "",
                "appsecret": ""
            }
        }
    },
    "mp-qq": {
        "tokenExpiresIn": 259200,
        "tokenExpiresThreshold": 86400,
        "oauth": {
 
            "qq": {
                "appid": "",
                "appsecret": ""
            }
        }
    },
    "mp-alipay": {
        "tokenExpiresIn": 259200,
        "tokenExpiresThreshold": 86400,
        "oauth": {
 
            "alipay": {
                "appid": "",
                "privateKey": "",
                "keyType": "PKCS8"
            }
        }
    },
    "service": {
        "sms": {
            "name": "",
            "codeExpiresIn": 180,
            "scene": {
                "bind-mobile-by-sms": {
                    "templateId": "",
                    "codeExpiresIn": 240
                }
            }
        },
        "univerify": {
            "appid": ""
        }
    }
}

         注意:passwordSecret里和type值和tokenSecret值都是自己随意配置的,passwordSecret里和type值一般不随便更改,只改一次,如果后续还需要可以在数组中新增一个对象,把版本号改成2以此类推即可。

四、配置manifest.json文件 

        注意:manifest.json文件每次修改都需要重新启动项目,有时候HBuilderx自身问题需要重新启动才能解决。 

        这里的uni-app是创建项目就有的,一般不更改。 

五、在微信开放平台注册并创建项目

        点击下面链接:微信开放平台 ,实名认证注册后(最好是企业认证,这才创建应用等会很方便,下列也是以企业认证来叙述)。在管理中心创建移动应用,填写好信息后即可(注意记住你的包名!!!

 六、开启短信登录功能

         在uniCloud控制台中点击短信登录,在阅读完协议后点击同意开通即可。

         如果要实现真正的短信验证登录,还需要配置签名等,如官方文档中所示:业务开通 | uniCloud

七、开始一键登录功能 

        同上图所示,点击一键登录后同意该协议 ,随后点击应用管理,添加应用,如下图所示:

        这里的应用包名可以直接点击官网链接,也可以点击我这里复制的官网链接:开发者中心 在这里点击我的应用,找到你在HBuilderx中新创建的uni-starter项目名字,随后点击Android证书(点点赞,耐心等待几分钟即可),生成完成后点击证书如下图所示:

        证书最好下载下来,方便后续需要,将对应的信息填写到上图中所需的应用签名里。点击各平台信息后点击新增,这里填写好对应的信息后会让你填写包名(这个包名一定一定要和微信开放平台里的包名一致!!!

结果如下图所示:

        注意:一键登录需要付费,测试阶段充值一块钱即可。 

八、分享功能 

        在manifest.json文件中,勾选分享功能即可。如文章内容所示:uni-app官网。这里值得注意的是一定要在HBuilderx中使用自定义基座才能在真机中测试成功。(使用自定义基座要求包名一致,即uniCloud应用的包名必须和微信开放平台的报名一致)。步骤如下图所示:

        耐心等待5-10分钟即可 ,随后拿出安卓手机,用USB线连接电脑,打开设置,找到关于本机-版本信息-版本号后,多点击几次版本号(5-10次左右)进入开发者模式(不同的手机可能不一样,大家网上查一下就可以了),然后再设置中找到开发者选项,开启USB调试,之后即可在HBuilderx中点击运行到手机或模拟器中了,选择Android APP基座,使用自定义基座,如果没有显示你的手机型号就多刷新几次,还不行就重启HBuilderx,之后即可正常运行测试了。

九、微信登录 

         在uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json文件中,配置对应的id和秘钥准备工作 | 微信开放文档,在manifest.json中勾选微信登录,并填写微信开放平台提供的ID。

十 、线上推送

        首先在 manifest.json的APP模块配置中勾选push2.0在线推送,在开发者中心选择uni-push2.0的应用信息完成配置。

        之后来到项目文件App.vue中补充下列代码,获取cid、监听推送事件并创建推送。

		onLaunch: function() {
			console.log('App Launch')
			this.globalData.$i18n = this.$i18n
			this.globalData.$t = str => this.$t(str)
			initApp();
			uniIdPageInit()
			// 新增
			// // 启动监听推送 
			uni.onPushMessage(res => {
				const {
					title,
					content
				} = {
					...res.data
				}
				if (res.type === 'receive') {
					// 创建本地通知栏消息
					uni.createPushMessage({
						title,
						content,
						icon: "配德美",
						success() {
							console.log("推送成功");
						},
						fail() {
							console.log("推送失败");
						}
					})
				}
			})

			// 原有代码不做修改
            //
		},
		onShow: function() {
			console.log('App Show')
			// 在应用程序启动时获取CID
			// 新增
			uni.getPushClientId({
				success: (res) => {
					console.log("cid:" + res.cid);
				},
				fail(err) {
					console.log(err)
				}
			})

		},

        然后创建云函数 ,点击添加公共模块,勾选uni-cloud-push。

        在刚创建的云函数的index.js文件中写入推送功能的云函数代码 :

'use strict';
const uniPush = uniCloud.getPushManager({
	appId: ""//填写自己项目的appId(看manifest.json文件中应用标识)
})
exports.main = async (event) => {
	let obj = JSON.parse(event.body)
	console.log(obj);
	const res = await uniPush.sendMessage({
		"push_clientid": obj.cids, // 设备id,支持多个以数组的形式指定多个设备,如["cid-1","cid-2"],数组长度不大于1000
		"title": obj.title, // 标题
		"content": obj.content, // 内容
		"payload": obj.payload, // 数据
		"force_notification": true, // 服务端推送 需要加这一句
		"request_id": obj.request_id, //请求唯一标识号,10-32位之间;如果request_id重复,会导致消息丢失
		"options": obj.options
	})
	return res //一定要return回去
};

        在刚创建的云函数的package.json 文件中配置下面内容:

{
	"name": "my-uni-cloud-push",
	"version": "1.0.0",
	"main": "index.js",
	"description": "消息推送",
	"dependencies": {},
	"extensions": {
		"uni-cloud-jql": {},
		"uni-cloud-push": {}
	},
	"author": "niu"
}

        之后右击该云函数,上传并运行,来到你这个项目对应的云服务空间,打开云函数/云对象中的函数,找到你刚写的云函数(在普通函数中),右边有个详情按钮,点击进入后编辑路径,如图添加一个后缀即可完成编辑,复制该连接在Postman或Apifox中发送post请求,如下图所示:

 

{
    "push_clientid": "",//填写从HBuilderx控制台收到的cid,也可以丛云数据库opendb-device中查找
    "title": "App有消息了!",
    "content": "请查收您的消息,不要忘记今天要加班!",
    "payload": {
        "text": "体验一下下uni-push2.0"
    }
}

        最终完成测试,这里我写的时候没有进行真机测试,但已经测试过了 ,各位可以尽情使用!有任何问题可以在评论区留言!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1687383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux中gcc/g++的基本使用

目录 gcc/g的使用gcc/g是如何生成可执行文件的预处理编译汇编链接 库.o文件是如何与库链接的? debug版本和release版本 gcc/g的使用 在windows中,我们在VS中编写好了代码之后就可以直接在VS中对源码进行编译等操作后运行 而在Linux下,我们可…

C++_vector操作使用

文章目录 🚀1.1 vector介绍🚀1.2 vector的初始化🚀1.3 vector的常用内置函数🚀1.4 vector的遍历 🚀1.1 vector介绍 vector是表示可变大小数组的序列容器。就像数组一样,vector也采用的连续存储空间来存储元…

领域知识 | 智能驾驶安全领域部分常见概论

Hi,早。 最近想买个新能源车,这个车吧相比于之前的内燃车,新能源车与外界的交互多了很多。比如娱乐的第三方应用,OTA升级等应用。 交互带来的便利越多,暴露的风险自然也就越大,相比于手机等消费者终端设备…

tomcat三级指导

版本 ./catalina.sh linux version.bat win 1.确认是否使用了tomcat管理后台 我们先找到配置文件:tomcat主目录下/conf/server.xml 可以查看到连接端口,默认为8080 然后查看manager-gui管理页面配置文件,是否设置了用户登录 配置文件…

【C语言回顾】动态内存管理

前言1. 动态内存管理初步概述2. malloc3. calloc4. realloc5. free6. 常见的动态内存错误7. 柔性数组8. 程序内存区域划分结语 #include<GUIQU.h> int main { 上期回顾: 【C语言回顾】联合和枚举 个人主页&#xff1a;C_GUIQU 专栏&#xff1a;【C语言学习】 return 一键…

人工智能再现大脑细胞导航的活动模式

人工智能再现大脑细胞导航的活动模式 李升伟 编译 深度学习算法可自发模拟特殊神经元的活动&#xff0c;这种神经元活动可以告诉我们在空间的位置。 大鼠使用被称为网格细胞的大脑细胞帮助它们导航&#xff0c;人工智能程序已经可以再现这种能力。 科学家已经使用人工智能来再…

网络初识 一

一、网络发展史 1.1 独立模式 最开始的网络,计算机之间是相互独立的. 比如,三个计算机分别存着各自的数据,A正在获取第一台计算机的数据,等要获取第二台计算机的数据时要移动到第二台计算机那里,B想要获取第一台计算机的数据,就要等A使用完. 1.2 网络互连 随着时代的发展,…

Codigger编码场景介绍(二):驾驶舱场景(Cockpit)

Codigger&#xff0c;一个专为开发人员设计的工具&#xff0c;致力于为不同的开发场景提供最佳的切换体验。Codigger囊括了多种场景&#xff0c;如传统场景、调试场景、设计器场景、驾驶舱场景以及纯净场景等。在上一篇文章中&#xff0c;我们介绍了传统场景模式&#xff0c;今…

Linux 应用入门(一)

1. 交叉编译 概念&#xff1a;在当前编译平台下&#xff0c;编译出来的程序能运行在体系结构不同的另一种目标平台上&#xff0c;但是编译平台本身却不能运行该程序。 为什么需要交叉编译&#xff1f; 速度&#xff1a;目标平台得运行速度比主机往往慢得多&#xff0c;因为许多…

Linux程序开发(十一):进程与进程间通信设计之趣味猫咪抓老鼠游戏

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

在未来你将何去何从?

在数字化的浪潮中&#xff0c;信息技术行业无疑是推动全球经济和社会发展的重要动力。随着科技的不断迭代与进步&#xff0c;云计算、大数据、人工智能&#xff08;AI&#xff09;、物联网&#xff08;IoT&#xff09;、5G通信和区块链等技术已经深入到我们生活的每一个角落&am…

Python调用科大讯飞在线语音合成API --内附完整项目

一&#xff0c;注册讯飞账号&#xff0c;并实名制。 讯飞开放平台-以语音交互为核心的人工智能开放平台 (xfyun.cn) 二、找到音频合成&#xff0c;按页面提示申请免费试用。 在线语音合成_免费试用-讯飞开放平台 (xfyun.cn) 三、申请免费使用后&#xff0c;找到API信息如下…

数据仓库ETL

小白的数据仓库学习笔记 2024/5/20 18:25 文章目录 ETLdim打开创建项目&#xff08;选这个&#xff0c;这个是做etl的&#xff09;建立元数据的连接同样的&#xff0c;建立与数据仓库的连接新建ssis包序列容器全量etl增量etl建立sql任务双击打开&#xff0c;设置连接、内容 双击…

共享单车(八):数据库

实现后台数据库访问模块的框架&#xff0c;能够实现验证请求并响应&#xff08;支持数据库操作&#xff09;。 数据库设计 class SqlTabel //负责数据库表的创建 { public:SqlTabel(std::shared_ptr<MysqlConnection> sqlconn) :sqlconn_(sqlconn) {}bool CreateUserI…

BeautifulSoup4通过lxml使用Xpath,以及获取(定位)元素和其文本或者属性

环境&#xff1a;win10&#xff0c;python3.8.10 首先需要安装&#xff1a;beautifulsoup4&#xff0c;lxml 使用命令&#xff1a; pip38 install beautifulsoup4 pip38 install lxml 安装完毕后查看一下&#xff1a; 写代码&#xff1a; from bs4 import BeautifulSoup …

5.24机器人基础-入门1

参考书籍&#xff1a;《机器人学导论》John.J.Craig 机器人方面的学习和线性代数、矩阵论部分的学习密切相关&#xff0c;建议先学习线性代数会更好理解此部分内容。虽然学了线代但是能忘的都忘得差不多的我要泪目了。本文主要介绍基础的运动学和动力学区别&#xff0c;正向运…

RocketMQ 架构原理

注册中心 注册中心使用得nameserver, nameserver不会进行频繁的读写&#xff0c;所以整体的性能开销小&#xff0c;稳定性也高。 注册中心没隔10s会扫描一次所有的broker&#xff0c;如果2min没有发送心跳过来&#xff0c;就人为挂了&#xff0c;断开连接。此时会更新topic与队…

IEN在Web3.0中的性能与安全优势

随着Web3.0的快速发展&#xff0c;优化网络基础设施变得至关重要。智能生态网络&#xff08;Intelligent Ecological Network, IEN&#xff09;作为新一代网络架构&#xff0c;在提升性能与增强安全方面展现出巨大潜力。本文将深入探讨IEN在Web3.0中的技术优势&#xff0c;并展…

Linux安装Docker教程(实测可用)

前言 Docker是一个开源的应用容器引擎&#xff0c;它允许开发者将应用程序及其依赖打包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上。以下是对Docker的具体介绍&#xff1a; 技术起源&#xff1a;容器技术起源于程序员对于环境搭建与应用部署效…