uniapp项目准备工作

news2025/1/15 8:00:19

1.封装请求

export const baseUrl = ''
function getHeaders () {
    let token = uni.getStorageSync('token')
    let header = {
        "access-token":token,// 'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json; charset=UTF-8'
    }
	return header
}
function reLogin(){
	// 获取当前的url地址
	window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx77807363720bae59&redirect_uri=http://ck.kml169.com/wsite&response_type=code&scope=SCOPE&state=STATE#wechat_redirect';
}
export default{
    get(url,param){
        return new Promise((resolve,reject) =>{
            uni.request({
                method:'GET',
                url: baseUrl+url,
                data: param,
                header:getHeaders()
            }).then(res=>{
                switch (res.data.code) {
                  case 200:
                    resolve(res.data)
                    break
                  case 10000:
                    resolve(res[1])
                    break
                  // case 401:
                  //   resolve(res[1])
                  //   break
                  default:
                      resolve(res[1].data)
                }    
            }).catch(
                (response) => {
                    reject(response)
                }
            )
        })
    },
    
    post(url,param){
        return new Promise((resolve,reject) =>{
            uni.request({
                method:'POST',
                url: baseUrl+url,
                data: param,
                header:getHeaders()
            }).then(res=>{
				// console.log(res)
				switch (res[1].data.code) {
				  case 0:
				    resolve(res[1].data)
				    break
				  case 10000:
				  // reLogin()
				    resolve(res[1])
				    break
				  // case 401:
				  //   resolve(res[1])
				  //   break
				  default:
				    resolve(res[1].data)
				}       
            }).catch(
                (response) => {
                    reject(response)
                }
            )
        })        
    },
}

2.main.js引入或者页面中引入

import request from './utils/request.js'
import request from '../../utils/request.js'

3.请求模板

init() {
				request.get('/api/getHaoKanVideo', {
					page:0,
					size:2
				}).then(res => {
					if (res.code == 200) {
					}
				})
			}


submit(ref) {
				console.log(ref, '55555')
				this.$refs[ref].validate().then(res => {
					console.log('success', this.activeFormData);

					request.post('/community_api/Complaint/create',
						this.activeFormData
					).then(res => {
						if (res.code == 0) {
							console.log(res.data, 'res.data')

							setTimeout(() => {
								uni.navigateTo({
									//保留当前页面,跳转到应用内的某个页面
									url: '/pagesA/complaintSuggestions/myComplaintSuggestions'
								})
							}, 2000)
							uni.showModal({
								content: '投诉成功,请等待系统审核'
							});
						} else if (res.code == 100) {
							uni.showModal({
								content: "请勿重复投诉"
							});
						}
					})

				}).catch(err => {
					console.log('err', err);
				})
			},

4.配置

5.源码视图配置,代理配置

"h5" : {
        "router" : {
            "base" : "/future/",
            "mode" : "hash"
        },
        "devServer" : {
            "proxy" : {
                "/community_api" : {
                    // "target" : "http://www.zhsq.com",
                    "target" : "http://ck.kml169.com",
                    "changeOrigin" : true, //是否跨域
                    "secure" : false, // 设置支持https协议的代理
                    "pathRewrite" : {
                        "^/community_api" : "/community_api"
                    }
                }
            }
        },
        "sdkConfigs" : {
            "maps" : {
                "qqmap" : {
                    "key" : "MLSBZ-E623T-LTCXS-VROZI-YYG5K-RQBL3"
                }
            }
        },
        "title" : "村口未来城"
    }

6.uview-ui 组件库引入

npm i uview-ui

在mian.js中插入

import uView from 'uview-ui';
Vue.use(uView);

 在app.vue中引入基础样式

<style lang="scss">
@import "uview-ui/index.scss";
</style>

 pages.json中配置按需引入

{
	"easycom": {
		// npm安装的方式不需要前面的"@/",下载安装的方式需要"@/"
		// npm安装方式
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
		// 下载安装方式
		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1459105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Label Studio运行报错】ModuleNotFoundError: No module named ‘google.rpc‘

报错截图&#xff1a; 解决方法&#xff1a; 新建虚拟环境&#xff0c;安装google相关包 pip install google-cloud-core google-cloud-storage把虚拟环境中site-packages下google文件夹拷贝到当前环境的对应位置下。去官网下载最新的sqlite3&#xff0c;复制到AppData\Loca…

adobe软件提示This non-genuine Adobe app will be disabled soon【软件版本】

因为电脑上级路由器装了小飞机&#xff0c;导致本机电脑ps等adobe的系列软件出现了 This non-genuine Adobe app will be disabled soon&#xff0c;烦人的狠&#xff0c;之前有写过一篇通过更改host的教程&#xff0c;现在已经失效了&#xff0c;今天为大家分享一个用软件来屏…

【嵌入式学习】IO进程线程day02.20

一、思维导图 二、习题 #include <myhead.h> int main(int argc, const char *argv[]) {FILE *fpNULL;FILE *fqNULL;pid_t pidfork();if(pid>0){//在父进程中打开复制文件if((fpfopen("./text.txt","r"))NULL){perror("fopen error");…

职业资格高级执法考试试题及答案,分享几个实用搜题和学习工具 #知识分享#微信

作为当代大学生&#xff0c;我们常常面临着繁重的学业压力和众多的学习任务。在这个信息爆炸的时代&#xff0c;如何高效地进行搜题和学习成了我们迫切需要解决的问题。幸运的是&#xff0c;随着科技的不断进步&#xff0c;我们拥有了许多方便、实用的日常搜题和学习软件。 1.…

解决kkFileView4.4.0版本pdf、word不能预览问题

这里使用的是http下载流url预览&#xff0c;遇到的问题。 官方使用指南&#xff1a;kkFileView - 在线文件预览 1 前端测试代码 1.1 官方示例代码 1.2 本人测试代码 注意&#xff1a;要给预览文件的url进行编码encodeURIComponent(Base64.encode(previewUrl))。 <!DOCTYP…

Spring两大核心思想:IOC和AOP

目录 IOC:控制反转 Ioc概念 Ioc的优点 Spring Ioc AOP:面向切面编程 AOP的优点 Spring AOP 1.添加依赖 2.核心概念 3.通知的类型 4.切点表达式 5.公共切点 pointCut 6.切面优先级 Order 7.使用自定义注解完成AOP的开发 Spring AOP实现有几种方式&#xff1f; S…

Jakarta Bean Validation

Validation 官网 https://beanvalidation.org/ 常见注解 Bean Validation中定义的注解&#xff1a; 注解详细信息Null被注释的元素必须为 nullNotNull被注释的元素必须不为 nullAssertTrue被注释的元素必须为 trueAssertFalse被注释的元素必须为 falseMin(value)被注释的元素…

阿里云幻兽帕鲁服务器,游戏服务端版本升级怎么操作?

用阿里云一键部署的幻兽帕鲁服务器&#xff0c;想要更新游戏服务端版本&#xff0c;现在非常简单。之前还需要通过输入一行命令来更新&#xff0c;而现在可以直接通过面板上的选型来操作。 打开阿里云的计算巢&#xff0c;找到你的这台服务实例&#xff0c;点击进入&#xff0…

【编程题】跳石板

跳石板 分析后可知 要在众多解中寻找最优解 因此用动态规划 比如&#xff1a; 4-6只需跳一步&#xff0c;而6-8也只需一步&#xff0c;因此在刚才跳了一步的基础上再加1 8到10一步&#xff0c;8到12一步&#xff0c;9到12一步&#xff0c;8-10-12两步&#xff0c;因此到12位置…

Stable Diffusion 绘画入门教程(webui)

文章目录 一、前言二、做出的效果三、SD使用流程1、大模型2、关键字3、调参数 一、前言 随着mj和sd绘画软件发布之后&#xff0c;AI绘画开始爆火&#xff0c;很多小伙伴已经挖掘出很多的玩法&#xff0c;哪怕最基础的AI美女、AI壁纸、真人漫改等等都赚的盆满钵满&#xff0c;当…

Nginx 配置详解

官网&#xff1a;http://www.nginx.org/ 序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。从2004年发布至今&#xff0c;凭借开源的力量&#xff0c;已经接近成熟与完善。 Nginx功能丰富&#xff0c;可作为HTTP服务器&#xff0c;也可作为反向代理服务…

Satoshivm一文科普,手把手教你交互(bitget 钱包)

什么是 SatoshiVM&#xff1f; SatoshiVM 是一种去中心化的第 2 层解决方案&#xff0c;创新地将比特币网络的强大安全性和价值稳定性与以太坊虚拟机 (EVM) 的高级可编程性和灵活性相结合。 SatoshiVM 是区块链领域的一个突出功能&#xff0c;支持使用原生 BTC 作为 Gas&#x…

防火墙——计算机网络

前述基于密码的安全机制不能有效解决以下安全问题&#xff1a; 用户入侵&#xff1a; 利用系统漏洞进行未授权登录&#xff1b; 授权用户非法获取更高级别权限等。 软件入侵&#xff1a; 通过网络传播病毒、蠕虫和特洛伊木马。 拒绝服务攻击等。 解决方法&#xff1a; 防火墙&a…

Leetcode刷题笔记题解(C++):203. 移除链表元素

思路&#xff1a;不同的情况出现了&#xff0c;就是第一个节点要是为等于val的节点&#xff0c;可以新建一个节点&#xff0c;并next指向head&#xff0c;这样就可以遍历新的链表来删除节点 /*** Definition for singly-linked list.* struct ListNode {* int val;* L…

数据库应用:kylin 部署 达梦数据库DM8

目录 一、实验 1.环境 2.部署前规划 3.部署达梦数据库DM8 4.创建数据库及数据库事例管理 5.达梦数据库的基本操作 二、问题 1.xhost命令报错 2.执行安装程序DMInstall.bin 报错 3.解压安装程序报错 4.安装程序找不到文件 5.图像化界面打不开 6.安装内存太小 7.打开…

提升竞争力!攻读在职硕士为职业发展加冕——社科院与杜兰大学金融管理硕士

在现如今竞争激烈的职场环境中&#xff0c;不断提升自身的竞争力是每个职场人士都面临的重要任务。攻读在职硕士学位成为越来越多人实现个人职业发展目标的首选方式之一。特别是社科院与杜兰大学合作开设的金融管理硕士项目&#xff0c;为那些希望在金融行业取得突破的职业人士…

vue3实现瀑布流布局组件

先看效果图 直接上代码 utils.js // 用于模拟接口请求 export const getRemoteData (data 获取数据, time 2000) > {return new Promise((resolve) > {setTimeout(() > {console.log(模拟获取接口数据, data)resolve(data)}, time)}) }// 获取数组随机项 export…

npm ERR! code CERT_HAS_EXPIRED:解决证书过期问题

转载&#xff1a;npm ERR! code CERT_HAS_EXPIRED&#xff1a;解决证书过期问题_npm err! code cert_has_expired npm err! errno cert-CSDN博客 npm config set registry http://registry.cnpmjs.org npm config set registry http://registry.npm.taobao.org

【洛谷题解】P1303 A*B Problem

题目链接&#xff1a;A*B Problem - 洛谷 题目难度&#xff1a;普及- 涉及知识点&#xff1a;高精度 题意&#xff1a; 分析&#xff1a;直接套用模版即可 AC代码&#xff1a; #include<bits/stdc.h> using namespace std; char n[1000000],m[1000000]; int a[1000…

《C++ Primer Plus》《4、复合类型》

文章目录 前言&#xff1a;1 数组1.1数组的初始化规则1.2 C11的数组初始化方法 2 字符串2.1 拼接字符串常量2.2在数组中使用字符串2.3 字符串输入2.4 每次读取一行字符串输入2.5 混合输入字符串和数字 3 string类简介3.1 C11字符串初始化3.2 赋值、拼接、附加3.3 string类的其他…