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，等我补链接哦，未完待续…