学习笔记

时间：2024-12-17 19:57:11

request.js前言

本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明。

文档版本：1.0.2

一、准备

uni-app 是一个使用  开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1.1 软件安装

创建uni-app有两种，一个是通过 HBuilderX 可视化界面，另一个是通过vue-cli命令行。本文档以HbuilderX为创建说明，以微信开发者工具进行运行项目和代码说明。

HbuilderX 下载地址：/

HbuilderX 文档地址：/Tutorial/startup

微信开发者工具下载地址：/miniprogram/dev/devtools/

HbuilderX安装结束后，一般需要下载开发项目需要的插件，选择工具-->插件安装-->安装或去市场插件查找下载，然后放到目录下的uni_modules文件夹（安装时候自动生成），如scss/sass编译，App真机运行等。

微信开发者工具安装结束后，在工具栏上选择 设置-->通用设置-->安全-->打开服务端口。

其次，在微信开发者平台(/)注册开发者账号，找到自己的开发ID，AppId，并记录好，为项目从HbuilderX运行到微信开发者工具做准备。

然后，在微信公众平台(/)注册对应的账号，比如本次注册的是小程序，则微信开发者APPID如下图中找到：

  接着配置微信开发者工具的AppId，在微信开发者工具界面点击右上角详情->基本信息->AppId进行配置，如下图：

二、基于HbuilderX 的uni-app项目搭建

2.1 创建项目

1.在点击工具栏里的文件 -> 新建 -> 项目：

2.选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。 

uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发可以参考该模板，毕竟这个模板已内置大量常用组件。

然后在HBuilder X内工具栏点击 运行—>运行到小程序模拟器 -->微信开发者工具，便能初步看到运行成效。

2. 搭建目录文件代码

根据需要，我们写一个简单的登录，使用登录功能来阐述各个目录文件之间的联系。

首先，我们先把已创建的相关文件进行挂载到全局，即在或者App.vue写相关代码：

然后在被引入的文件写必要的内容信息：

然后在被引入的文件写必要的内容信息：

    

  1. 

    

    　.clearfix:before{content:" ";display:table}
    

    2. 

  2. 

    

    
.clearfix:after{content:" ";display:table;clear:both}
    

    3. 

  3. 

    

    
.fl{float:left}
    

    4. 

  4. 

    

    
.fr{float:right}
    

    5.

 

    

  1. 

    

    export default function request({
    

    2. 

  2. 

    

        url,
    

    3. 

  3. 

    

        method = "GET",
    

    4. 

  4. 

    

        params = {},
    

    5. 

  5. 

    

        header,
    

    6. 

  6. 

    

        loadding = false,
    

    7. 

  7. 

    

        loaddingText = "加载中..."

    

    8. 

  8. 

    

    }) {
    

    9. 

  9. 

    

        return new Promise((resolve, reject) => {
    

    10. 

  10. 

    

    ​
    

    11. 

  11. 

    

            if (loadding) {
    

    12. 

  12. 

    

                ({
    

    13. 

  13. 

    

                    title: loaddingText
    

    14. 

  14. 

    

                })
    

    15. 

  15. 

    

            }
    

    16. 

  16. 

    

            setTimeout(() => {
    

    17. 

  17. 

    

                ({
    

    18. 

  18. 

    

                    url,
    

    19. 

  19. 

    

                    method,
    

    20. 

  20. 

    

                    data: params,
    

    21. 

  21. 

    

                    header,
    

    22. 

  22. 

    

                    success: (res) => {
    

    23. 

  23. 

    

                        if (res) {
    

    24. 

  24. 

    

                            resolve(res.data)
    

    25. 

  25. 

    

                        } else {
    

    26. 

  26. 

    

                            resolve(res)
    

    27. 

  27. 

    

                        }
    

    28. 

  28. 

    

                        if (loadding) {
    

    29. 

  29. 

    

                            ()
    

    30. 

  30. 

    

                        }
    

    31. 

  31. 

    

                    },
    

    32. 

  32. 

    

                    fail: (res) => {
    

    33. 

  33. 

    

                        reject(res)
    

    34. 

  34. 

    

                    }
    

    35. 

  35. 

    

                })
    

    36. 

  36. 

    

            }, 1000)
    

    37. 

  37. 

    

        }).catch(err => {
    

    38. 

  38. 

    

            // 这里既可以捕获throw的异常也可以捕获reject的异常
    

    39. 

  39. 

    

            ("[Promise catch]:", err)
    

    40. 

  40. 

    

            if (loadding) {
    

    41. 

  41. 

    

                ()
    

    42. 

  42. 

    

            }　return (err)
    

    43. 

  43. 

    

        })
    

    44. 

  44. 

    

    }
    

    45. 


    

  1. 

    

    
export default {
    

    2. 

  2. 

    

        BASE_URL:""

    

    3. 

  3. 

    

    }
    

    4.

 

然后我们开始写登录页面。登录页面需要写用户名、密码、登录按钮三个组件，则需要使用uview创建。使用uview创建组件之前的几个确保：

确保1 HBuilder X 是安装了 scss/sass 编译插件

确保2 在根目录下  文件中引入 uview-ui/

@import 'uview-ui/';

确保3 在根目录下  文件中的style代码块添加 lang="scss"属性 和 引入 uview-ui/

    

  1. 

    

    
<style lang="scss">

    

    2. 

  2. 

    

        @import "uview-ui/";
    

    3. 

  3. 

    

    
</style>

    

    4.

确保4 在根目录下文件中 引入并使用uView的JS库，注意这两行要放在import Vue之后。

    

  1. 

    

    import uView from "uview-ui";
    

    2. 

  2. 

    

    Vue.use(uView);
    

    3.

 如果是不想书写引入文件代码，即我们每当引入一个UI组件，就需要添加

import xxx from "uView-ui/components/u-xxx/";

等相关代码。则需要确保5 在根目录下文件中 ，配置easycom组件模式 

 

    

  1. 

    

    
// 
    

    2. 

  2. 

    

    {
    

    3. 

  3. 

    

        "easycom": {
    

    4. 

  4. 

    

            "^u-(.*)": "uview-ui/components/u-$1/u-$"

    

    5. 

  5. 

    

        },
    

    6. 

  6. 

    

        
    

    7. 

  7. 

    

        // 此为本身已有的内容
    

    8. 

  8. 

    

        "pages": [
    

    9. 

  9. 

    

            // ......
    

    10. 

  10. 

    

        ]
    

    11. 

  11. 

    

    }
    

    12.

 

接着我们在pages/login/，即登录页面中，引入uview组件和书写登录代码：

pages/login/

    

  1. 

    

    
<template>

    

    2. 

  2. 

    

        <view class="content">

    

    3. 

  3. 

    

            <view class="inp">

    

    4. 

  4. 

    

                <u-input v-model="username" type="text" :border="true" placeholder="请输入用户名" />

    

    5. 

  5. 

    

            </view>

    

    6. 

  6. 

    

            <view class="inp">

    

    7. 

  7. 

    

                <u-input v-model="password" type="password" :border="true" placeholder="请输入密码" />

    

    8. 

  8. 

    

            </view>

    

    9. 

  9. 

    

            <view class="inp">

    

    10. 

  10. 

    

                <u-button type="primary" shape="circle" style="margin-top: 40rpx;" @click="onLogin">登录</u-button>

    

    11. 

  11. 

    

            </view>

    

    12. 

  12. 

    

        </view>

    

    13. 

  13. 

    

    
</template>

    

    14. 

  14. 

    

     
    

    15. 

  15. 

    

    
<script>

    

    16. 

  16. 

    

        import {
    

    17. 

  17. 

    

            login
    

    18. 

  18. 

    

        } from '@/api/'

    

    19. 

  19. 

    

        export default {
    

    20. 

  20. 

    

            data() {
    

    21. 

  21. 

    

                return {
    

    22. 

  22. 

    

                    username: '',
    

    23. 

  23. 

    

                    password: ''

    

    24. 

  24. 

    

                }
    

    25. 

  25. 

    

            },
    

    26. 

  26. 

    

            onLoad() {
    

    27. 

  27. 

    

     
    

    28. 

  28. 

    

            },
    

    29. 

  29. 

    

            methods: {
    

    30. 

  30. 

    

                onLogin() {
    

    31. 

  31. 

    

                    // #ifdef MP-WEIXIN
    

    32. 

  32. 

    

                    ({
    

    33. 

  33. 

    

                        success: res0 => {
    

    34. 

  34. 

    

                            login({
    

    35. 

  35. 

    

                                params: {
    

    36. 

  36. 

    

                                    username: ,
    

    37. 

  37. 

    

                                    password: ,
    

    38. 

  38. 

    

                                    code: res0.code

    

    39. 

  39. 

    

                                },
    

    40. 

  40. 

    

                                loadding: true,
    

    41. 

  41. 

    

                                loaddingText: "登录中..."

    

    42. 

  42. 

    

                            }).then(res => {
    

    43. 

  43. 

    

                                this.$ = res
    

    44. 

  44. 

    

                                if (res) {
    

    45. 

  45. 

    

                                    ({
    

    46. 

  46. 

    

                                        url: "../index/index"

    

    47. 

  47. 

    

                                    })
    

    48. 

  48. 

    

                                } else {
    

    49. 

  49. 

    

                                    ({
    

    50. 

  50. 

    

                                        title: "登录失败",
    

    51. 

  51. 

    

                                        duration: 1000,
    

    52. 

  52. 

    

                                        icon: "none"

    

    53. 

  53. 

    

                                    })
    

    54. 

  54. 

    

                                }
    

    55. 

  55. 

    

                            })
    

    56. 

  56. 

    

                        },
    

    57. 

  57. 

    

                        fail: err => {
    

    58. 

  58. 

    

                            ("fail:", err)
    

    59. 

  59. 

    

                        }
    

    60. 

  60. 

    

                    })
    

    61. 

  61. 

    

                    // #endif
    

    62. 

  62. 

    

                    // #ifdef  H5

    

    63. 

  63. 

    

                    ({
    

    64. 

  64. 

    

                        url: "../index/index"

    

    65. 

  65. 

    

                    })
    

    66. 

  66. 

    

                    // #endif
    

    67. 

  67. 

    

                }
    

    68. 

  68. 

    

            }
    

    69. 

  69. 

    

        }
    

    70. 

  70. 

    

    
</script>

    

    71. 

  71. 

    

     
    

    72. 

  72. 

    

    
<style scoped lang="scss">

    

    73. 

  73. 

    

        .content {
    

    74. 

  74. 

    

            padding: 20px;
    

    75. 

  75. 

    

     
    

    76. 

  76. 

    

            .inp {
    

    77. 

  77. 

    

                margin: 10px;
    

    78. 

  78. 

    

            }
    

    79. 

  79. 

    

        }
    

    80. 

  80. 

    

    
</style>

    

    81.

以上代码为先进行获取用户登录凭证code，然后才正式登录。因为开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息。然后使用得到的code，和用户名密码一起作为参数进行真正的登录请求。其中，样式最好内聚在组件内，组件内部使用的样式，尽量在style中添加scoped，编译时会增加组件hash前缀来防止样式污染。

login页面 有请求数据，则需要写请求接口：

    

  1. 

    

    import common from '@/utils/'

    

    2. 

  2. 

    

    import request from '@/utils/'

    

    3. 

  3. 

    

     
    

    4. 

  4. 

    

    // 登录
    

    5. 

  5. 

    

    export async function login(payload) {
    

    6. 

  6. 

    

        return await request({
    

    7. 

  7. 

    

            url: common.BASE_URL + "/app/mock/229799/http://login",
    

    8. 

  8. 

    

            method: "POST",
    

    9. 

  9. 

    

            params: ,
    

    10. 

  10. 

    

            loadding: ,
    

    11. 

  11. 

    

            loaddingText: 
    

    12. 

  12. 

    

        })
    

    13. 

  13. 

    

    }
    

    14.

到此，直接点击工具栏上的运行-->运行到小程序模拟器-->微信开发者工具，结果如下图所示：

相关文章