机遇屋-uniapp开发实战

uniapp开发实战

作者：ych

### 介绍
uniapp是DCloud公司推出的一款跨平台开发框架。 其具有“一次开发，多端部署”的特点，可以方便地实现对于不同平台的应用开发和发布。 目前，uniapp框架已经支持了常见的移动平台，包括iOS、Android、H5、以及各种小程序平台等。 uniapp采用了一种独特的技术实现方式，同时支持多个平台上的应用开发。
### 安装
[开发工具](https://www.dcloud.io/hbuilderx.html "开发工具")

[开发node环境](https://nodejs.org/zh-cn "开发node环境")

### 使用插件
宣称uniapp下最好[插件uview](https://uviewui.com/components/install.html "插件")
npm下[安装](https://uviewui.com/components/npmSetting.html "安装")

uview[多语言](https://uviewui.com/guide/i18n.html "多语言")

[uni-ui](https://ext.dcloud.net.cn/plugin?id=55 "uni-ui")

### uni.request封装使用
先在目录下创建 utils 和 common 这2个文件夹，utils 是存放工具类的，common 用来放置常用方法的。
utils 中创建 requset.js
```
import operate from '../common/operate.js'
// vuex 的使用  详情参考官网 https://uniapp.dcloud.io/vue-vuex
import store from '../store/index.js'

export default class Request {
    http(param) {
        // 请求参数
        var url = param.url,
            method = param.method,
            header = {},
            data = param.data || {},
            token = param.token || "",
            hideLoading = param.hideLoading || false;

//拼接完整请求地址
        var requestUrl = operate.api + url;
       //拼接完整请求地址（根据环境切换）
       // var requestUrl = operate.api() + url;

//请求方式:GET或POST(POST需配置
        // header: {'content-type' : "application/x-www-form-urlencoded"},)
        if (method) {
            method = method.toUpperCase(); //小写改为大写
            if (method == "POST") {
                header = {
                    'content-type': "application/x-www-form-urlencoded"
                };
            } else {
                header = {
                    'content-type': "application/json"
                };
            }
        }

//加载圈
        if (!hideLoading) {
            uni.showLoading({
                title: '加载中...'
            });
        }

// 返回promise
        return new Promise((resolve, reject) => {
            // 请求
            uni.request({
                url: requestUrl,
                data: data,
                method: method,
                header: header,
                success: (res) => {
                    // 判断 请求api 格式是否正确
                    if (res.statusCode && res.statusCode != 200) {
                        uni.showToast({
                            title: "api错误" + res.errMsg,
                            icon: 'none'
                        });
                        return;
                    }
                    // 将结果抛出
                    resolve(res.data)
                },
                //请求失败
                fail: (e) => {
                    uni.showToast({
                        title: "" + e.data.msg,
                        icon: 'none'
                    });
                    resolve(e.data);
                },
                //请求完成
                complete() {
                    //隐藏加载
                    if (!hideLoading) {
                        uni.hideLoading();
                    }
                    resolve();
                    return;
                }
            })
        })
    }
}
```
在common 中分别创建 operate.js
```
export default {
    //接口
    api: "http://192.168.208.126:8080",
}
```

[更多](https://juejin.cn/post/7023983465892675614 "更多")

### api请求及调用
api文件夹创建user.js
```
import Request from '@/utils/requset.js'
import operate from '@/common/operate.js'
let request = new Request().http

// 按需引入的 请求头
export const getUserInfo= function(data) {
    return request({
    url: "order/user ",
        method: "POST",
    data: data,
    token: operate.isToken()
    })
}
```
vue页面调用
```
//引入
import {
    getUserInfo
} from '@/api/user.js'

//放入生命周期
init() {
    //用户信息
    getUserInfo().then((res) => {
    console.log(res);
    })
},
```

#### 生成订单号
```
// 生成订单号的逻辑
function generateOrderNo() {
  // 获取当前时间戳
  const timestamp = Date.now();

// 生成随机数（可以根据实际情况调整位数）
  const randomNum = Math.floor(Math.random() * 10000);

// 将时间戳和随机数拼接，可以根据实际情况自定义拼接规则
  const orderNo = `${timestamp}${randomNum}`;

return orderNo;
}
```

### 更多学习
[api](https://uniapp.dcloud.net.cn/api/ "api")

评论区

先去登录

uniapp开发实战

相关推荐

评论区