05 uniapp/微信小程序 项目day05
一.登录与支付
1.1 登录
1.1.1 条件判断
当我们点击结算应当进行条件判断
第一个如果没有勾选商品
第二个是没选择地址
第三个是未登录
1.1.2 页面布局
应该有两个页面,一个点击登录,一个登陆成功后的页面,所以应该创建两个组件
他们应该按需展示,并且条件为是否有token
然后未登录的页面结构
uni icon的头像icon
1.1.3 获取用户基本信息
由于微信登录并不像pc点击登录就去调用接口,微信登录需要调用自己的登录api,然后获取到一些信息密匙等,而我们的登录接口就需要这些密匙
也会弹出登录授权框
用到一个api
uni.getUserProfile其中desc为这次调用的登陆的信息说明
首先是取消登录的验证
登录成功将我们的用户信息存进vuex
然后组件这边存进来
注意这里做了改造用它规定的回调来写
1.1.4 获取code
我们的登录接口还需要一个参数code
这个码只能通过 uni.login这个api获取
所以我们登录成功获取了profile信息后还应该再去获取code
现在有了code就可以去发起请求了
登录成功应该将token永久存储
state里面也要修改
注意我们的数据回来不仅是要存在storage里面,要让页面能够响应到还应该给她赋一次值
1.2 用户信息
1.2.1 渲染用户头像和昵称
现在组件定义好基本结构
然后从vuex拿回我们之前存进去的数据,并渲染上来
1.2.2 三个面板
接下来是这个页面三个面版的渲染
主要是一些html及css的规划
1.2.3 退出登录
主要就是要用到一个api 来弹出是否退出登录的消息框
uni.showModal
同样的会有两个返回,一个是否为null的错误返回,一个是成功返回,而且promise catch捕获一下错误
如果返回有值,且有confirm这个对象,那么就清空token、userinfo、地址信息
1.2.4 三秒跳转
当未登录的时候在购物车点击结算应该提示未登录,还有多少s跳转到登录页
定义一个初试的秒数
当我们没有token也就是没有登陆的时候就去调用一个定时器每秒钟执行这个提示
注意,toast有一个属性mask,表示开启了面罩不能够点击后面的内容,防止点击穿透
现在要解决的问题,就是让秒数到0后就跳转过去并且停止定时器
创建一个定时器
判断seconds是否小于0,如果是就停止定时器,并且跳转过去,最重要的return返回seconds为3
登录成功后导航跳转
当我们登陆成功应该从哪来回哪去,这里用的方法是
首先在vuex定义一个对象,这个对象应该存储两个信息,opentype以及form,分别表示跳转的方式和跳转的地址
然后我们在点击结算那里进行一个传值
在我们跳转的成功回调里面进行传值
这个时候,我们的登陆成功得到token后面应该去判断一下是否有这两个值,有就跳转,并且把redirectInfo重置为空对象,不然容易出现问题
1.3 微信支付
首先前提:我们需要将请求头改变,因为只有登录之后才能调用支付相关的接口,所以必须为有权限的接口添加请求头字段
在请求拦截器操作,我们的请求拦截器参数,会有url以及Authorization等属性,如果说url里面带有my就是表示需要权限的接口,这个时候就要参数里面的header的authorization属性带上我们的token去发起请求
微信支付三部曲:
首先创建订单
在我们点击结算那里都通过了验证就整合数据,创建订单接口需要的数据
整合数据
然后发起请求并保存下来
订单预支付
然后继续拿这个订单编号去发起预支付的请求,获取到要调用微信支付api的一些参数
实现支付
用到微信支付的api uni.requestPayment
接受两个回调如果有错误就返回错误
如果没有错误还要再次调用我们的接口去判断一些有没有支付成功
二.发布
为什么要进行发布?
因为只要发布后才能被用户搜索到,而且现在体积是偏大的,只有发布后进行压缩了体积才会变小
2.1 发布为小程序
首先发行
需要去dccloud添加应用并重新在manifest.json输入uniappId
发行成功后点击开发者工具上传
上传成功后在微信公众平台提交审核
按照他的步骤一步一步来把详细信息弄完整
审核成功后发布上线即可
2.2 发布为安卓app
首先还是要设置好我们的manifest里面的appid
然后要设置好图标
直接选择云打包
05 uniapp/微信小程序 项目day05的更多相关文章
- 01 uniapp/微信小程序 项目day01
一.起步 1.1 配置uni-app开发环境 什么是uni-app,就是基于vue的一个开发框架,可以将我们写的一套代码,同时发布到ios.安卓.小程序等多个平台 官方推荐使用Hbuilderx来写u ...
- uniapp/微信小程序 项目day03
一.商品列表 1.1 获取数据 首先能够进入商品列表的途径 传的数据有 了解了这个之后就可以开始了,先创建分支 创建编译模式,并分配初试数据 这个时候就可以获取数据了 需要的数据 所以在发起请求之前需 ...
- 04 uniapp/微信小程序 项目day04
一.加入购物车 1.1 购物车数量 先创建购物车git 这里的数据肯定要做全局数据,因为不能只在details这个页面去操作他,他到底有几个也是由购物车页面获取到的 所以需要vuex 创建store文 ...
- 02 uniapp/微信小程序 项目day02
一.分类 1.1 页面布局 首先创建cate的分支 定义基本结构,因为是两个需要滚动的区域,所以这里要用到组件 scroll 这个组件如果是y scroll那就要固定高度,x scroll那就要固定宽 ...
- 使用uni-app(Vue.js)创建运行微信小程序项目步骤
使用uni-app(Vue.js)开发微信小程序项目步骤 1. 新建一个uni-app项目 创建完成后的目录结构 2. 打开微信小程序开发工具端的端口调试功能 3. 运行创建的项目 效果
- 微信小程序项目转换为uni-app项目
一.它是谁? [miniprogram-to-uniapp]转换微信小程序"项目为uni-app项目.原则上混淆过的项目,也可以进转换,因为关键字丢失,不一定会完美. 二.它的原理是什么? ...
- 【重点突破】—— UniApp 微信小程序开发官网学习One
一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...
- 微信小程序开发01 --- 微信小程序项目结构介绍
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...
- 高仿Readhub小程序 微信小程序项目【原】
# News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高 ...
随机推荐
- 「SHOI2014」概率充电器
题面 n <= 500000 0<= p,qi <= 100 题解 这是道概率树形DP题,但是很难推怎么用加法原理和乘法原理正向求每个点被充电的概率,所以我们求每个点不被充电的概 ...
- 域渗透-Kerberos身份验证流程
域渗透-Kerberos身份验证流程 Kerberos协议框架 在 Kerberos 协议中主要是有三个角色的存在: 1. 访问服务的 Client: 2. 提供服务的 Server: 3.KDC(K ...
- FFT快速傅立叶变换:解析wav波频图、Time Domain、Frequency Domain
您好,此教程将教大家使用scipy.fft分析wav文件的波频图.Time Domain.Frequency Domain. 实际案例:声音降噪,去除高频. 结果: 波频图: Time Domain:
- 状态 :睡眠中,进程ID:13431,yum提示Another app is currently holding the yum lock; waiting for it to exit...
问题描述: 今天想在虚拟机上重新安装docker然后使用到yum命令报错: 解决办法: [root@localhost ~]# rm -f /var/run/yum.pid 然后重新运行刚才的yum命 ...
- 实践分享!GitLab CI/CD 快速入门
用过 GitLab 的同学肯定也对 GitLab CI/CD 不陌生,GitLab CI/CD 是一个内置在 GitLab 中的工具,它可以帮助我们在每次代码推送时运行一系列脚本来构建.测试和验证代码 ...
- Spire.Cloud 私有化部署教程(三) - Windows 系统
本教程主要介绍如何在 Windows 系统上实现 Spire.Cloud 私有化部署. 详细步骤如下: 一.安装依赖 我们的私有部署的依赖有 Nodejs.MySQL.Redis 和 RabbitMQ ...
- 诺塔斯读写卡QT SDK笔记
卡片操作函数调用 寻卡: Request --> LotusCardRequest 防撞处理: Anticollission --> LotusCardAnticoll 选卡: Selec ...
- KingbaseES 中select distinct on 语句
用法 SELECT DISTINCT ON ( expression [, ...] ) 把记录根据[, -]的值进行分组,分组之后仅返回每一组的第一行. 需要注意的是,如果不指定ORDER BY子句 ...
- 从零开始搭建gitea代码管理平台
Gitea,一款极易搭建的Git自助服务.如其名,Git with a cup of tea.跨平台的开源服务,支持Linux.Windows.macOS和ARM平台.配置要求低,甚至可以运行在树莓派 ...
- 华南理工大学 Python第2章课后小测-2
1.(单选)下列符号中,有()个是Python的关键字.(1)if (2)lambda (3)not (4) For (5)None(6)from (7)True (8)fina ...