uniapp-黑马优选学习03

发布时间 2023-06-19 23:21:34作者: 耗喜天涯

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 有效性

    

    >>参数说明如下

    

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