第02课:封装自己的库

知识点:

  • 封装一个自己的日志,代替原生的 console
  • 封装一个自己的请求库,代替原生的 fetch
  • 自适应方法,兼容各种手机屏幕
  • 封装一个本地存储
  • 集成 Toast 弹出提示
  • 让 iOS 支持 HTTP 地址
  • 安卓需要证书才能编译

在正式开始之前,我们先封装几个要用到的库。

自定义本地日志

自定义日志的一个好处就是省的每次都要手动注释 console,而且还可以同时将日志存在本地,或者发到日志服务器,一个方法一举多得了。

在 src 目录下新建一个 utils 文件夹,封装一个日志输出类,开发模式下使用console.log命令,正式情况下记录在变量中,方便在手机上查看日志。

新建一个 log.js 文件,路径为根目录/src/utils/log.js

80223590-1886-11e8-8087-9b6b3b447adf

新建一个数组变量logs,用来临时存放日志信息。

98604390-1886-11e8-8087-9b6b3b447adf

将日志分成信息、警告和错误 3 种,分别给出 3 个可调用的方法,同时给第一个参数加一个好看的颜色。

cc840ad0-1886-11e8-8087-9b6b3b447adf

在 index 中引入日志组件,写几个方法来看看调用的结果。

enter image description here

这里稍微定义一下日志的要求,参数 0,字符串;参数 1,对象;参数 2,字符串。

enter image description here

自定义请求

RN 默认提供了 fetch 方法去请求远程数据,我们再封装一次,这个方法将会针对现有的项目做封装,在使用请求的时候能够更适合、更方便。这里使用 header 保存了一些临时的变量,算是一个小小的全局缓存吧。

创建 request.js 文件,目录:根目录/src/utils/request.js

80223590-1886-11e8-8087-9b6b3b447adf

将请求 header 里的信息单独出来,每次请求都需要带上这个共享 header 数据。

29975590-1889-11e8-8087-9b6b3b447adf

创建一个 Request 类,并将这个类对外公开,这里将请求初始化一次,以后用到别的请求的时候也可以单独实例化一次。

``` javascript /**

  • 请求库 */ class Request {}

export default new Request();

每次请求都将 header 中的内容带入请求中,单独检测 httpcode 和后端返回的 code 值,这里可以直接做权限检测,在需要的时候跳转到登录页。

javascript /**

  • 请求库 / class Request { /*
    • 检测返回状态码
    • @param {*} status
    • @param {*} res */ async _checkStatus(status, res, url) { if (status !== 200) { logWarm('请求失败参数', await res.text(), url, headers); throw new Error('网络连接失败,请检查网络'); } } /**
    • 检查后端返回的状态码
    • @param {*} status */ _checkAppStatus(json, url) { if (json.status != 0) { logWarm('返回状态报错', json, url); throw new Error(${json.errorMsg}); } } /**
    • 内部实现网络请求
    • @param {*} url
    • @param {*} options */ async request(url, options, type) { url = url.indexOf('http') == 0 ? url : url.indexOf('/api') == 0 ? domain + url : baseUrl + url; let res = await fetch(url, options); this.checkStatus(res.status, res, url) if (type === 'json') return await this.jsonFactory(res, url, options) return await this.jsonFactory(res, url, options) } /**
      • 处理json数据
      • @param {*} res
      • @param {*} url */ async jsonFactory(res, url, options) { let json; let txt = ''; try { txt = await res.text(); } catch (e) { log('未拿到返回字符串', { url: url, txt: txt }); throw new Error('数据格式错误'); } try { json = JSON.parse(txt); } catch (e) { logErr('返回数据格式错误', { url: url, txt: txt }); throw new Error('数据格式错误'); } this.checkAppStatus(json, url) log("请求返回", json, url, options); return json.data; } /**
    • get请求
    • @param {*} url */ async get(url, data) { if (data) data = urlEncoded(data); if (url.indexOf('?') < 0 && data) url += '?' + data; return this._request(url, { method: 'GET', headers: headers, timeout: 10000 }, 'json') } /**
    • post请求
    • @param {*} url
    • @param {*} data */ async post(url, data) { return this._request(url, { method: 'POST', headers: Object.assign(headers, { 'Content-Type': 'application/x-www-form-urlencoded' }), timeout: 10000, body: urlEncoded(data) }, 'json') } }
调用一次远程端口并查看日志输出,这里调用的也是案例中要使用到的获取 banner 的接口,该接口不需要用户权限,后面还会遇到需要用户权限的接口。

![enter image description here](http://images.gitbook.cn/ff7983e0-1889-11e8-8087-9b6b3b447adf)

### 自适应方法

这里推荐一种自适应的方法,同时也是前端在开发移动端页面的时候常用的方法,将手机屏幕宽度默认为 750 像素,然后将所有的宽高按照这个比例去缩放,这要求设计出的设计稿宽度也是 750 像素。

在 utils 下新建一个`px.js`文件,按照出入的大小根据当前屏幕的宽度获取到缩放的比例并返回结果。

<img src="http://images.gitbook.cn/ab16ed00-188a-11e8-8087-9b6b3b447adf"  width = "70%" />

在首页引入 px 方法,查看使用 px 之后的效果。

<img src="http://images.gitbook.cn/d4992580-188a-11e8-8087-9b6b3b447adf"  width = "70%" />

<img src="http://images.gitbook.cn/d97950c0-188a-11e8-8087-9b6b3b447adf"  width = "50%" />

可以看到使用 px 将 500 像素缩放之后的效果和最开始设置的纯数字 200 效果是一致的,这里使用的是 iOS 模拟器,真实的屏幕宽是 375,按照 750 宽去算的话会把传入的参数统统除以 2。

### 封装本地存储

RN 提供的 AsyncStorage 可以根据 key 存储相应的字符串,我们这里改进一下,让它可以存储所有类型的字段,利用的是将传入的参数改造成对象,然后使用 JSON 的方法将对象转化成一个可以存储的字符串。

在 utils 下新建一个`Storage.js`。

<img src="http://images.gitbook.cn/3ddb9950-188c-11e8-8087-9b6b3b447adf"  width = "50%" />

将传入的对象转化为字符串并存入 AsyncStorage。

javascript 'use strict';

import { AsyncStorage } from 'react-native';

/**

  • 获取存储的数据
  • @param {*} key */ exports.getItem = async (key) => { let item = await AsyncStorage.getItem(key); if (!item) { return null; } return JSON.parse(item).v || null; } /**
  • 存入数据
  • @param {*} key
  • @param {*} value */ exports.setItem = (key, value) => AsyncStorage.setItem(key, JSON.stringify({ v: value }));

/**

  • 删除已经存在的数据
  • @param {*} key */ exports.removeItem = (key) => AsyncStorage.removeItem(key);

/**

  • 清除所有 */ exports.clear = () => AsyncStorage.clear();

/**

  • 获取所有的key */ exports.getAllKeys = () => AsyncStorage.getAllKeys();

```

在首页使用 setItem 存入数据,然后第二次进入页面再使用 getItem 获取数据。

e9e272a0-188c-11e8-8087-9b6b3b447adf

这里用到了 componentDidMount 这个方法,该方法是在组件生命周期中的初始化完成之后执行的。

enter image description here

添加弹出 Toast

之前公司使用的是自己开发的提示方法,该方法需要改变原生代码,非常的不方便,这里推荐使用第三方的开源组件react-native-root-toast,只需要安装一下就好了。

执行命令,安装 Toast:npm i --save react-native-root-toast

在 utils 目录下新建 toast.js 文件,添加 Toast 的默认方法并填入默认参数,这里设置显示时间为 1000 毫秒,背景颜色是一个半透明的黑色,其目的也是为了方便调用,如果需要多种效果的就定义多个即可。

enter image description here

在首页引入 Toast 并看看实际的效果。

41c80400-18b3-11e8-8087-9b6b3b447adf

让 iOS 支持 Http 协议

苹果之前推荐使用 Https 协议,现在默认是不支持 Http 的,如果需要支持 Http 则要单独设置,案例中的项目也用到了 Http,所以需要修改 info.plist 文件,让 iOS 可以访问 Http 的地址。

使用 Xcode 选择打开其他项目。

0da257a0-1919-11e8-8087-9b6b3b447adf

打开项目下的 iOS 文件夹,选择项目文件并打开。

4d6ce8a0-1919-11e8-8087-9b6b3b447adf

选择 info.plist 文件,在右边选择第一行并点击 + 号添加一项。

enter image description here

选择 App Transport Security Setting 这一项,会弹出提示,单击“确定”按钮即可自动刷新。

01e614a0-191a-11e8-8087-9b6b3b447adf

在上面添加的新配置中添加一个新的配置 Allow Arbitrary Loads,同时设置为 YES。

enter image description here

改完配置还需要编译一次,单击左上角的三角形或者菜单中 product 下的 build 选项。

enter image description here

这里我使用的是 Xcode 修改配置文件,如果你发现配置文件没有变化,也可以自己改 info.plist 文件的内容。

编译安卓客户端

使用 Android Studio 打开根项目下的 Android 目录,打开 build.gradle 文件,这个就是项目的 Gradle 配置文件,通常使用这个文件对整个项目进行描述。

3d6d4f10-204b-11e8-94c8-43a1e6ab60e0

经过一定时间的等待,IDE 就会初始化整个项目,如果有一些需要下载的文件也会在这个时间通知下载。

单击菜单build/gennerate signed apk,这个就是编译一个可以安装在安卓手机上的安装包,也可以通过单击make project来看看项目是否可以编译通过。

enter image description here

单击 Next 按钮,IDE 会提示需要选择一个证书,这里可以选择一个已有的并输入密码,也可以通过单击create new来创建一个,后面一直单击 Next 按钮就可以了,IDE 会在生成 APK 之后弹出通知。

021b3160-204c-11e8-8063-17489f4fcf26

选择创建一个新的证书,根据提示填入相应的内容,之后单击 OK 按钮即可生成,记得选择 remember password,下次直接填入密码。

8d33ddb0-204c-11e8-a1dd-77d9e3f43337

经过一整机器躁动之后,IDE 弹出编译结果,点击蓝色字可以快速打开 APK 的地址。

enter image description here

将 APK 文件发送到手机上安装即可,一个自己开发的 App 就安装好了。

14e47fd0-204d-11e8-94c8-43a1e6ab60e0

这里要注意,在打包之前要把 RN 打包生成的 bundle 文件放入 Android 文件下的 assets 目录中,否则 Android 会因为找不到启动文件而报错。

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页