uniapp-黑马优选学习03

01. uni 数字组件： uni-number-box

02. 在 flex 布局中，如果子元素未铺满的处理

　　>> 情形：

　　　　   

 　　>> 处理方式： 为相应的子元素，配置 flex=1

03. 商品信息的滑动删除

　　>> 组件： uni-swipe-action 和  uni-swipe-action-item

　　>> 注意： options 已经修改为：left-options, right-options 了

04. 关于授权的内容

　　>> 在开发环境，即使清除了授权信息，但同样不需授权，此处仅做登记，后期碰上了再详看

　　>> 授权机制代码如下：　　

async chooseAddress(){
        const [err,succ]= await uni.chooseAddress().catch(err=>err)
        // 成功选择了收货地址
        if(succ && succ.errMsg==='chooseAddress:ok'){
          this.setAddress(succ)
        }
        // 用户没授权,则向用户重新发起授权申请
        //if(err && err.errMsg==='chooseAddress:fail auth deny'){
　　　　 if(err && (err.errMsg==='chooseAddress:fail auth deny' || err.errMsg==='chooseAddress:fail authorize no response')){
          this.reAuth()
        }
      },
      async reAuth(){
        // 提示用户授权
        const [err2,confirmResult] = await uni.showModal({
          content:'检测到您没有打开地址权限，是否去设置打开',
          confirmText:'确认',
          cancelText:'取消'
        })
        // 如果弹窗异常，直接退出
        if(err2) return
        // 如果用户点击了取消,则提示用户取消了地址授权
        if(confirmResult.cancel) return uni.$showMsg('您取消了地址授权')
        // 如果用户点击了确认，则进入授权页面，让用户重新授权
        if(confirmResult.confirm) return uni.openSetting({
          // 对授权结果进行识别
          success:(settingResult)=> {
            // 授权成功
            if(settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功，请选择地址')
            // 取消了授权
            if(!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了地址权')
          }
        })        
      }

 

　　>> 课程截图　　　　

　　　　

　　　　>> 点击确认和取消时的结果信息

　　　　

　　　　>> 点击确认后，进入设置界面

　　　　

　　　　>> 设置界面返回后的结果

　　　　　　

 >>05. 用户登陆: 前置条件，调用 getUserInfo 获取权限及相应的登陆参数

　　> 界面样式

　　　　

　　>  布局及按钮事件：下面红色内容为固定写法，紫色部分为内部处理函数名，可自定义　　　　

<template>
  <view class="login-container">
    <uni-icons type="contact-filled" size="100" color="gray"></uni-icons>
    <button type="primary" class="btn_login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登陆</button>
    <view class="tips-text">登陆后尽享更多权益</view>
  </view>
</template>

　　> 点击后，可获取到相应的数据

　　　

　　　　> errMsg 标识授权是否成功

　　　

 　　>> 关于微信了用户头像和昵称的事情，今天查了下，变了好多次了，

　　>> 当前的情况是： 

 　　　　

　　>> 当前处理方式

　　　　a. 通过 wx.login 可以直接获取  code 

 　　　　　　

　　　　b. 结合已经获取到的 code ,再加上APP的二个参数：appid，secret , 封装成一个请求参数对象，

　　　　　　Get 方式调用：https://api.weixin.qq.com/sns/jscode2session  验证 code  的有效性； 

　　　　　验证成功后，表示登陆成功

　　　　　　

　　　　c.  样例 

　　　　　　

　　　　　　

methods: {
      async doTest() {
        // 调用 login 接口获取登录凭证（code）
        const [err, tmpRtn] = await uni.login()
        console.log(tmpRtn)
        if (err || tmpRtn.errMsg !== "login:ok") return uni.$showMsg('登陆失败')
        //登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程
        // 此处直接向微信服务端发起请求
        // 配置请求参数: grant_type为固定定法
        const req = {
          appid: '----小程序的 APPID----',
          secret: '----小程序的密钥----',
          js_code: '---- login 接口返回的 code----'
          grant_type: 'authorization_code'
        }
        // 发起请求
        uni.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session',
          method: 'GET',
          data: req,
          success: res => {
            console.log(res)
          }
        })
      }
    }

 

 　　>> login 请求到的 code ,有效期 5分钟

　　　　

　　>> jscode2session 接口验证 code 有效性

　　　　

　　　　>>参数说明如下

　　　　

 　　>> 小程序登陆流程(官方)