• 05 uniapp/微信小程序 项目day05


    一.登录与支付

    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


    __EOF__

  • 本文作者: Heymar
  • 本文链接: https://www.cnblogs.com/heymar/p/16872690.html
  • 关于博主: 评论和私信会在第一时间回复。或者直接私信我。
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
  • 声援博主: 如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。
  • 相关阅读:
    Confluence漏洞学习——CVE-2021-26084/85,CVE-2022-26134漏洞复现
    圆角属性border-radius: 50%;与不透明度opacity和rgba(opacity:0.5---半透明)
    windbg查看GDT表的基址和长度 段描述符查分实验 段选择子拆分实验
    信息检索 | 常见专类信息检索系统一览
    Mathorcup数学建模竞赛第四届-【妈妈杯】B题:推荐书籍(附解析思路和MATLAB代码)
    小米平板5ProWIFI(elish)刷ArrowOS
    CSS通用样式3——表格
    解决huggingface 在代码因为网络无法下载模型和数据集的问题(伪)
    IntelliJ IDEA中有什么让你相见恨晚的好用插件?
    Webpack 官网文字滚动特效
  • 原文地址:https://www.cnblogs.com/heymar/p/16872690.html