uni组件电商核心之选择收货地址一建登录和支付一. 选择收货地址二. 一键登录 http://zh.

一. 选择收货地址


 在 .vue 文件
 
   <button type="primary" size="mini" @click="chooseAddress"> 获取地址</button>

 

 
  methods:{
     async chooseAddress(){
       const res = await uni.chooseAddress()
       console.log(res);
     }
     
     
     .manifest.json文件
      "requiredPrivateInfos": ["chooseAddress"],
      "permission": {
        "scope.userLocation": {
         "desc": "你的位置信息将用于收货地址"
    }
  }

二. 一键登录

zh.uniapp.dcloud.io/api/plugins… uni官网

wx.getUserProfile() 官网截图如下

wx.login()介绍官网截图如下

首先是梳理一下大概逻辑

 /**
           *  正常登录流程 ：  输入手机号  验证码  拿数据请求接口  获取token 
           *  一键登录流程： 
           *     1 encryptedDate  rawData  iv  signature       wx.getUserProfile() 获取用户资料
           *     2 code                                        wx.login() 拿到登录凭证
           *     3 encryptedDate  rawData  iv  signature  code   请求后端接口  获取token 
           */

 <button type="primary" size="mini" @click="longin"> 一键登录</button>

   async longin(){ const res = await uni.getUserProfile({
            desc:'一键登录'  // 必填 声明获取个人信息的用途
          })
           //打印查看 encryptedDate  rawData  iv  signature
          console.log(res);   
           
          const res2 = await uni.login()
          // 打印查看code
          console.log(res2);
          
          //拿到这些数据就是接口
        }

获得的数据为

三. 支付

逻辑

1.创建订单

请求创建订单接口：把订单金额 .收获地址订单中包含的商品信息发送到服务器

服务器返回：订单编号

2.获取支付参数

请求订单支付接口：把订单编号发送给服务器

服务器返回：订单预支付的参数对象（包含订单支付相关的必要参数）

3 发起支付

调用 uni.requestPayment(xxx) 发起微信支付，并把步骤2中返回的数据对象作为参数传给uni.requestPayment()

4 确认支付

调用请求发送订单编号查看订单金额是否到账

uni组件 电商核心之 选择收货地址 一建登录 和支付