小程序第三天学习总结

分包加载

分包加载是将小程序拆分成若干个部分叫做分包，在分包的基础上能够实现自动加载当前所需部分小程序代码，在一定程序能够提升小程序的加载速度，同时也能解决小程序代码包大小不能超过 2M 的限制。类似于vue中的按需加载功能。

使用分包

框架接口

框架接口指的是小程序提供的一些全局函数，如之前学习到的App/Page/Component函数

getApp

getApp 是一个全局的函数，调用该函数可以获取小程序应用实例，通过小程序应用实例可实现数据或方法的共享。比如我们在app.js中的App里面通过wx.getStorageSync('token')获取小程序的token，这样我们在其他界面就能直接调用这个方法进行获取，而无需每次都获取token。

// app.js
App({
  // 读取本地存储的token数据
  token: wx.getStorageSync('token'),
  onLaunch() {
    // 生命周期
  },
  http(params) {
    // 举例封装网络请求
    wx.request({
      ...params,
      header: {},
    })
  }
})

// pages/index/index.js
// 获取小程序实例
const app = getApp()

Page({
  onLoad() {
    // 能够读取到全局实全名定义的 token 数据
    console.log(app.token)

    // 调用全局实例中定义的方法
    app.http({
      url: '',
      method: 'GET'
    })
  },
})

getCurrentPage

getCurrentPages 获取当前页面栈，页面栈中包含的是页面的实例，数组中第一个元素为首页，最后一个元素为当前页面。当我们使用这个方法的时候不能在App.onLaunch里面调用，因为这个时候page还没有生成。

// pages/index/index.js
Page({
  onLoad() {
    // 获取页面历史栈
    const pageStack = getCurrentPages()
    // 获取前一个页面的页面实例
    const prevPage = pageStack[pageStack.length - 1]
  }
})

头像昵称

在进行小程序开发中，获取用户昵称和头像是比较常见的功能。

用户头像

小程序文档规定：获取用户头像必须用到 button 组件，且用户必须要主动点击 button 按钮，以下是 button 的使用细节：

• 设置 button 的属性 open-type 值为 chooseAvatar 单词chooseAvatar中的A是大写
• 监听 button 的 chooseavatar 事件

    <!-- pages/profile/index.wxml -->
    <view class="profile">
      <view class="avatar">
        <button
          open-type="chooseAvatar"
          bind:chooseavatar="getUserAvatar"
        >
          <image src="{{profile.avatarUrl}}"></image>
        </button>
      </view>
      <view class="nickname">
        <label for="">昵称:</label>
        <input type="text" value="{{profile.nickName}}" />
      </view>
      <button class="save" type="primary">保存</button>
    </view>
    
    // pages/profile/index.js
    Page({
      data: {
        profile: {
          avatarUrl: '/static/images/avatar.png',
          nickName: '微信用户',
        },
      },
      // 获取用户头像
      getUserAvatar(ev) {
        // 获取头像对应的地址
        // console.log(ev.detail.avatarUrl)
        this.setData({
          'profile.avatarUrl': ev.detail.avatarUrl,
        })
      },
    })

获取微信昵称

获取用户头像必须用到 input 组件，当 input 获得焦点后小程序会自动展示用户的昵称 以下是 input 的使用细节：

• 设置 input 的 type 属性值为 nickname
• 监听 input 组件的 input 、blur 、change 等事件获取表单中的值
• 注意：小程序的文档中并没有标明 input 组件能够监听 change 事件，经部分测试后发现能够支持 change 事件的监听，生产环境应用时要注意！

// 
<view class="nickname">
    <label for="">昵称:</label>
    <input type="nickname" bind:change="getUserNickName" value="{{profile.nickName}}" /> 
</view>

// pages/profile/index.js
Page({
  data: {
    profile: {
      avatarUrl: '/static/images/avatar.png',
      nickName: '微信用户',
    },
  },
  // 获取用户头像
  getUserAvatar(ev) {
    // 获取头像对应的地址
    this.setData({
      'profile.avatarUrl': ev.detail.avatarUrl,
    })
  },
  getUserNickName(ev) {
    // 获取用户设置的昵称
    this.setData({
      'profile.nickName': ev.detail.value,
    })
  },
})

uniapp实现一键登录思路

`` // 通过button标签获取用户信息（设置button的open-type为getPhoneNumber），并通过@getPhoneNumber回调获取信息 // 调用 uni.login方法，获取到code // 用code和用户信息请求后端接口 <button class="button-div" type="primary" open-type="getPhoneNumber" @getphonenumber="getUserInfo"> 微信用户一键登录

获取到手机号的回调

getUserInfo(e) { if (e && e.detail.errMsg === 'getPhoneNumber:ok') { uni.showLoading({ mask: true, title: '加载中' }); let self = this; uni.login({ provider: 'weixin', success: result => { if (result && result.code) { // 此时获取到了用户信息和code，使用这些信息去调用后端接口实现自身逻辑 self.authorizeInfo(self.phoneNumberInfo.detail, result.code); } }, fail: result => { console.log(result) } }); } }

``

小程序的路由

小程序中的路由与vue里面不一样，它只是页面的跳转，一般在页面中使用navigator组件来实现，有很多场景需要在 js 中根据逻辑的执行结果跳转到某个页面，比如检测到用户尚未登录就跳转到登录页面。