首页 > 其他分享> 文章详细

uni-app项目实战

2021-06-10 19:31:21 阅读：169 来源： 互联网

标签：实战 request app iconfont res uni data

uni-app项目实战

前言
一、封装自己的异步请求
- 封装思路
- 步骤
二、uni-app解决跨域问题
三、uni-app
总结

前言

仿网易云音乐网站写的一个小demo，用node.js写的服务，之前文章介绍过uni-app的基本使用了，所以今天直接介绍写项目的记录

一、封装自己的异步请求

注：封装后可以对所有的请求做一个拦截及域名维护，下面只做简单封装，后续文章会详细介绍promise。

封装思路

基于原生的promise
挂在到Vue原型上
通过this.request的方式来使用

步骤

1、根目录新建utils一般用来存放全局工具类，写在request.js里

export default (params)=> {
	uni.showLoading({
		title:"数据加载中..."
	})
	return new Promise((resolve,reject)=> {
		wx.request({
			...params,
			success(res) {
				resolve(res)
			},
			fail(err) {
				reject(err)
			},
			complete() {
				uni.hideLoading();
			}
		})
	})
}

2、挂在到Vue原型上，这样所有的页面都可以调用这个方法

import request from './utils/request.js'
Vue.prototype.request = request;

3、页面中直接调用

onLoad() {
		this.request({
			url: '',
			data: {},
			...
		}).then(res=> {
			console.log(res)
		})
},

二、uni-app解决跨域问题

有时需要调用接口时，提示跨域问题不要怕，下面两步轻松解决

1、打开manifest.json文件，选择源码视图，在里面添加proxy代理

"devServer": {
       "proxy": {
           "/api": {		             
				"target":"http://dpc.dapeis.net",
                "changeOrigin": true,//是否跨域
                "secure": false,// 设置支持https协议的代理
			 	"pathRewrite":{"^/api":"/"}
           }
       }
}

2、回到当前页面，修改请求路径

this.request({
	url:'/api/image/v3/homepage/vertical',
	data: {
		limit: 50,
		order:'hot',
	}
}).then(res=> {
	console.log(res)
})

这样请求webpack会解析为请求http://dpc.dapeis.net/image/v3/homepage/vertical

三、uni-app

1.引入iconfont

方法如下：

首先选择字体图标，下载字体文件。
把 iconfont.ttf文件拷贝到 static 下。
复制Unicode只要.ttf的那个url ，粘贴到 iconfont.css 文件，如下

在这里插入图片描述

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('//at.alicdn.com/t/font_2602797_r0f1rwcswhk.ttf?t=1623222780652') format('truetype');
}

在项目app.vue中引用公共css

@import "./static/iconfont/iconfont.css"

2.安装scss插件

npm install sass-loader node-sass

node-sass安装失败及解决方法
在 HbuilderX 工具 -> 插件安装 ->前往插件市场找到 scss/sass编译 -> 安装
在 style 中添加 lang 属性，就可以使用scss语法啦

<style lang="scss">
@mixin chennfontclolr($chencolor888,$chenfosize,$chenw){
 color: $chencolor888;
 font:{
  size:$chenfosize;
  weight:$chenw ;
 }
}
</style>

3、组件

组件是在dcloudio插件市场找的uni-app，官方文档示例也不是很全，需要自己摸索哦。

npm i @dcloudio/uni-ui

4、登陆页

login() {
	this.request({
		url:'/api/login',
		data: {
			name:this.name, 
			password:this.pwd
		}
	}).then(res=> {
		if(res.data.code != 200) {
			Toast({
				message: '登录失败，请重试！',
				duration: 5000
			});
			return;
		}
		localStorage.setItem("user", JSON.stringify(res.data.i));
		this.$store.commit("localuser", res.data.i)
		this.$store.dispatch('getlike');
		this.$router.back()
	})
}

微信小程序端运行效果
在这里插入图片描述

5、首页

使用了分段器等组件，微信小程序运行效果如下
在这里插入图片描述

总结

后续demo完善后会上传git，等我补链接哦，未完待续…

标签：实战,request,app,iconfont,res,uni,data
来源： https://blog.csdn.net/s_x111/article/details/117748909

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uni-app项目实战