uniapp Vue3的创建和微信小程序的安装与应用

在你创建好了一个uniapp项目后可以在其子目录pages的index目录下可以找打系统给我们的基础index.vue页面,这个也是我们的基础页面

如果所还不会创建一个uniapp项目的可以点击这个连接创建uni-app项目-CSDN博客去了解uniapp项目创建过程

在我们找到初始页面之后可以直接使用初始页面,也可以自己创建一个页面

找到左边的目录右击可以弹出一个选项框来可以根据自己所需创建对应的文件、目录或页面

找到上方的运行选项,鼠标左击一下即可弹出下方的选项

第一次安装这个应用的话会要求

创建好了之后可以在右上角看到一个预览

如果你对页面进行了修改的话,可以 CRTL+S 保存你的修改,并且旁边的区域会同步你的修改结果,可以让你知道自己的修改结果

点击运行,你可以选择你需要的游览器,建议选择只带,如果没有可以下载

当你没有你所选择的游览器时或者没有填你的游览器安装路径就会弹出

点击确定可以跳转到另一个窗口

选择完毕后直接运行你拥有的游览器即可看到效果

与先前的测试结果时一样的,只是在比较多的页面内容是,先前的表示结果效果不会太好

当我们在 view 标签里写了东西是保存一下,更改会同步到游览器

当你在一个view里面写东西的话其内容会在,上级view的旁边

如果你在一个view标签外的地方创建一个view是,其内容会在上一个view的上面或者下面,反正不是同一级的

当然如果你要开发微信小程序或者抖音小程序等也可以选择去编写

没有安装的话可以选自己要安装的内容,点击运行设置即可

跳转过去之后可以选择你要安装的版本

点击之后会在你电脑的游览器下载提示你

安装好了之后解压即可

找到你存放的地址,解其压缩包,下面那个文件夹会在后面有提示

之后会出现这个页面

点击下一步

选择我接收

找到你要存放的地址,点击安装,等待其安装结束

选择姓名那个微信开发者工具箱.exe 双击之后登陆即可

第一次会提示你登录,微信扫码注册登录即可

 

如果要用的话必须设置权限

之后就可以使用了

运行之后会弹出微信小程序的编辑页面

关闭的话只需找到你的开始运行微信小程序的地方

关闭之后控制台会提示你的

这就是一些uniapp Vue3基本的创建和微信小程序的安装与应用

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3+uni-app实现微信小程序登录流程主要分为以下步骤: 1. 在uni-app项目中安装并引入微信小程序登录插件(如wxlogin),在main.js中初始化并配置插件参数。 2. 创建一个登录页面,该页面包含点击按钮触发微信登录的操作,可以通过uni.login()方法调用微信小程序登录接口获取code。 3. 接收到微信小程序登录接口返回的code后,将code发送给后端服务器,后端服务器将code和小程序的App ID以及App Secret发送给微信服务器进行登录凭证校验,获取到session_key和openid。 4. 服务器根据openid和session_key生成一个自定义的token,返回给前端。 5. 前端将token保存在本地,使用uni.setStorage()方法进行存储,以便后续的登录状态维持和接口请求验证。 6. 在需要登录验证的页面或组件中,通过uni.getStorage()方法获取本地存储的token,并将token添加到请求头中,发送给后端服务器进行接口请求。 7. 后端服务器接收到带有token的请求,对token进行校验和解析,验证token是否有效,从而确保用户的登录状态。 总结:通过以上步骤,实现了Vue3+uni-app微信小程序的登录流程。用户通过点击按钮触发微信小程序登录接口,后端服务器校验登录凭证,生成token并返回给前端前端保存token并在请求接口时携带token进行验证,保证了用户的登录状态和接口访问权限的安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值