第02课：封装自己的库

喜欢ヅ旅行 2022-12-09 11:49 253阅读 0赞

知识点：

*  封装一个自己的日志，代替原生的 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][enter image description here 1]

### 自定义请求 ###

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][enter image description here 2]

### 添加弹出 Toast ###

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

执行命令，安装 Toast：`npm i --save react-native-root-toast`。

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

![enter image description here][enter image description here 3]

在首页引入 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][enter image description here 4]

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

![01e614a0-191a-11e8-8087-9b6b3b447adf][]

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

![enter image description here][enter image description here 5]

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

![enter image description here][enter image description here 6]

这里我使用的是 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][enter image description here 7]

单击 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][enter image description here 8]

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

![14e47fd0-204d-11e8-94c8-43a1e6ab60e0][]

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

[80223590-1886-11e8-8087-9b6b3b447adf]: /images/20221123/0b19a716b7284ffe929a2d04843a3d73.png
[98604390-1886-11e8-8087-9b6b3b447adf]: /images/20221123/7fd51b5469f849e5ac8a9753e18422b0.png
[cc840ad0-1886-11e8-8087-9b6b3b447adf]: /images/20221123/03209b892dd74b4bbc4d3757a82572e6.png
[enter image description here]: /images/20221123/8d343907bb87406d8fe05c128d19306d.png
[enter image description here 1]: /images/20221123/53e564201f9e48aa89c84ffbce393570.png
[29975590-1889-11e8-8087-9b6b3b447adf]: /images/20221123/ebc82e1f4ee14f058d8d74258a13ba78.png
[e9e272a0-188c-11e8-8087-9b6b3b447adf]: /images/20221123/d17459d0776845fea388337244cfe113.png
[enter image description here 2]: /images/20221123/b10b0c66d9294ccba20014a6d563607b.png
[enter image description here 3]: /images/20221123/547671d3197b450499fae5dc160f15b0.png
[41c80400-18b3-11e8-8087-9b6b3b447adf]: /images/20221123/55bb555048684e0ea23093e86684677b.png
[0da257a0-1919-11e8-8087-9b6b3b447adf]: /images/20221123/6507173340e349afa5a7a42317c96184.png
[4d6ce8a0-1919-11e8-8087-9b6b3b447adf]: /images/20221123/92f1c4b2caba4f7cbe3dd7159b86ffaa.png
[enter image description here 4]: /images/20221123/7d57078dfc094900bd058f5bb1f12b21.png
[01e614a0-191a-11e8-8087-9b6b3b447adf]: /images/20221123/dc0b2fcbbd074178a547e0ab9a4d22be.png
[enter image description here 5]: /images/20221123/0a5f7b560d5c4b27b675273c4ef25db3.png
[enter image description here 6]: /images/20221123/2b104809cd424fcfbce2dc2a1f0a728e.png
[3d6d4f10-204b-11e8-94c8-43a1e6ab60e0]: /images/20221123/7e17e84d1e804db7b5ce36e47b2f89dd.png
[enter image description here 7]: /images/20221123/1ffadc8763f04e45872d82f7e6715259.png
[021b3160-204c-11e8-8063-17489f4fcf26]: /images/20221123/e40d1fc72d374598a5a7f1c0b9bed4a8.png
[8d33ddb0-204c-11e8-a1dd-77d9e3f43337]: /images/20221123/304570381c57478f8bd3abea728c1e9f.png
[enter image description here 8]: /images/20221123/cf5ee02c34d74c7ebbb9ddad21a05c08.png
[14e47fd0-204d-11e8-94c8-43a1e6ab60e0]: /images/20221123/dc300e07cd9a4ac6bd24ad927e69592e.png