首页 > 编程语言 >05 uniapp/微信小程序 项目day05

05 uniapp/微信小程序 项目day05

时间:2022-11-09 10:22:36浏览次数:40  
标签:uniapp 登录 05 微信 token 点击 api 跳转

一.登录与支付

1.1 登录

1.1.1 条件判断

当我们点击结算应当进行条件判断

image-20220829113928685

第一个如果没有勾选商品

第二个是没选择地址

第三个是未登录

image-20220829161042279

1.1.2 页面布局

应该有两个页面,一个点击登录,一个登陆成功后的页面,所以应该创建两个组件

image-20220830175012031

他们应该按需展示,并且条件为是否有token

image-20220830175142666

然后未登录的页面结构

uni icon的头像icon

image-20220830175241161

image-20220830175250045

1.1.3 获取用户基本信息

由于微信登录并不像pc点击登录就去调用接口,微信登录需要调用自己的登录api,然后获取到一些信息密匙等,而我们的登录接口就需要这些密匙

也会弹出登录授权框

image-20220830182020946

用到一个api

uni.getUserProfile其中desc为这次调用的登陆的信息说明

首先是取消登录的验证

image-20220830183405582

登录成功将我们的用户信息存进vuex

image-20220830184431058

image-20220830184551354

然后组件这边存进来

注意这里做了改造用它规定的回调来写

image-20220830190009081

1.1.4 获取code

我们的登录接口还需要一个参数code

这个码只能通过 uni.login这个api获取

所以我们登录成功获取了profile信息后还应该再去获取code

image-20220830191212199

现在有了code就可以去发起请求了

image-20220830193010932

登录成功应该将token永久存储

image-20220830193059405

image-20220830193157854

state里面也要修改

image-20220830193220900

注意我们的数据回来不仅是要存在storage里面,要让页面能够响应到还应该给她赋一次值

image-20220830193830407

1.2 用户信息

1.2.1 渲染用户头像和昵称

现在组件定义好基本结构

image-20220831175818032

然后从vuex拿回我们之前存进去的数据,并渲染上来

image-20220831180104218

1.2.2 三个面板

接下来是这个页面三个面版的渲染

主要是一些html及css的规划

image-20220831181126925

1.2.3 退出登录

主要就是要用到一个api 来弹出是否退出登录的消息框

uni.showModal

image-20220831181406777

同样的会有两个返回,一个是否为null的错误返回,一个是成功返回,而且promise catch捕获一下错误

image-20220831181548187

如果返回有值,且有confirm这个对象,那么就清空token、userinfo、地址信息

image-20220831181840237

1.2.4 三秒跳转

当未登录的时候在购物车点击结算应该提示未登录,还有多少s跳转到登录页

定义一个初试的秒数

image-20220919183223055

当我们没有token也就是没有登陆的时候就去调用一个定时器每秒钟执行这个提示

注意,toast有一个属性mask,表示开启了面罩不能够点击后面的内容,防止点击穿透

image-20220919183845446

现在要解决的问题,就是让秒数到0后就跳转过去并且停止定时器

创建一个定时器

image-20220919184105167

判断seconds是否小于0,如果是就停止定时器,并且跳转过去,最重要的return返回seconds为3

image-20220919184257569

登录成功后导航跳转

当我们登陆成功应该从哪来回哪去,这里用的方法是

首先在vuex定义一个对象,这个对象应该存储两个信息,opentype以及form,分别表示跳转的方式和跳转的地址

image-20220919190557477

image-20220919190618251

然后我们在点击结算那里进行一个传值

在我们跳转的成功回调里面进行传值

image-20220919190823048

这个时候,我们的登陆成功得到token后面应该去判断一下是否有这两个值,有就跳转,并且把redirectInfo重置为空对象,不然容易出现问题

image-20220919191606843

1.3 微信支付

首先前提:我们需要将请求头改变,因为只有登录之后才能调用支付相关的接口,所以必须为有权限的接口添加请求头字段

在请求拦截器操作,我们的请求拦截器参数,会有url以及Authorization等属性,如果说url里面带有my就是表示需要权限的接口,这个时候就要参数里面的header的authorization属性带上我们的token去发起请求

image-20220919193050439

微信支付三部曲

首先创建订单

在我们点击结算那里都通过了验证就整合数据,创建订单接口需要的数据

image-20220919194440474

整合数据

image-20220919194742696

然后发起请求并保存下来

image-20220919195520348

订单预支付

然后继续拿这个订单编号去发起预支付的请求,获取到要调用微信支付api的一些参数

image-20220919195932123

实现支付

用到微信支付的api uni.requestPayment

接受两个回调如果有错误就返回错误

image-20220919200344014

如果没有错误还要再次调用我们的接口去判断一些有没有支付成功

image-20220919200412018

二.发布

为什么要进行发布?

因为只要发布后才能被用户搜索到,而且现在体积是偏大的,只有发布后进行压缩了体积才会变小

2.1 发布为小程序

首先发行

img

需要去dccloud添加应用并重新在manifest.json输入uniappId

image-20220920180822817

image-20220920180831622

发行成功后点击开发者工具上传

image-20220920180902516

上传成功后在微信公众平台提交审核

按照他的步骤一步一步来把详细信息弄完整

image-20220920182806001

审核成功后发布上线即可

2.2 发布为安卓app

首先还是要设置好我们的manifest里面的appid

然后要设置好图标

image-20220920183143682

直接选择云打包

img

image-20220920183255596

标签:uniapp,登录,05,微信,token,点击,api,跳转
From: https://www.cnblogs.com/heymar/p/16872690.html

相关文章

  • 611005 CAD 多边形矩形圆弧圆
    本节课讲解5CAD多边形矩形圆弧圆。1.多边形快捷键【POL】,输入侧面数,可以选择【内切】或【外接】。2.内切的图形在圆形内,外接的图形在圆形外面,参数一样的情况下,图形大......
  • uniapp-uview 微信小程序form中自定义校验规则失效问题。
    uniapp-uview微信小程序form中自定义校验规则失效问题。仔细阅读官方文档,发现有提示。需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。如......
  • 微信共享停车场小程序开发设计方案
    随着城市的发展,人们的生活水平提高,车辆的增多,在有限的城市空间中,停车难成为了人们经常遇到的问题,附近找不到停车位置的情况时有发生,为了更好的解决这一问题,可以通过共享停车......
  • uniapp_01_实现打开文件管理
    *##关于uniapp实现app端文件管理*####前言*####安卓是如何实现的*####uniapp中几种实现方式*####文档里需要用到的主要api介绍*####实现###前言......
  • Day05.1:变量及其作用域
    变量变量:可以变化的量变量代表一块空间,里面放什么东西是不确定的;一个柜子里面有很多层,有一层是放鞋子的,鞋子类型有运动鞋、跑步鞋、靴子等;拿着定价120元的一双运动鞋......
  • Day05.2:常量及变量命名规范
    常量常量:一旦被初始化后不能更改的的值。被设定死了的变量finaltypeVARNAME=value;finaldoublePI=3.14;final数据类型常量名=值;常量名字符使用大写final作为......
  • 基于微信小程序的心理自测咨询APP设计与实现-计算机毕业设计源码+LW文档
    摘要首先,论文一开始便是清楚地论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程分析以及用例分析,更进一步明确系统的需求。然后在......
  • 基于微信小程序的个人健康打卡系统设计与实现-计算机毕业设计源码+LW文档
    摘要网络的广泛应用给生活带来了十分的便利。所以把个人健康打卡管理与现在网络相结合,利用java技术建设个人健康打卡系统,实现个人健康打卡的信息化。则对于进一步提高个人......
  • 基于微信小程序的健身app设计与实现-计算机毕业设计源码+LW文档
    摘要首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。......
  • 任务卡_05-数据库_数据库基础
    目录​​一,数据库训练任务​​​​1,任务概述​​​​2,参考代码​​​​2.1建表及插入数据​​​​2.2 检索​​​​3,参考资料​​​​MySQL数据库中int,bigint,smallint和......