uni-app(快速上手)
uniapp框架
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
HBuildX的安装
uniapp的开发必须使用HBuildX，uniapp编写的编写的代码程序需要HBuildX进行编译运行。
下载地址：https://www.dcloud.io/hbuilderx.html
根据使用操作系统，下载对应的安装包，下载后解压，点击图标启动HBuildX编辑器
注意先要注册登录，安装插件
生成项目包
根据情况选择项目类型和版本
创建好之后可以运行到浏览器
项目包目录结构
uniapp中使用的是vue单文件组件
项目实现
1、UNI-UI组件库
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
uni-ui不包括基础组件，它是基础组件的补充。
2、底部菜单栏
①新建页面
根据需求创建多个页面
②配置tabbar底部菜单
news/pages.json
"tabBar": {
"color": "#333",
"selectedColor": "#f66",
"backgroundColor": "#f5f5f5",
"borderStyle": "black",
"list": [
{
"iconPath": "./static/tabBar/shouye.png",
"selectedIconPath": "./static/tabBar/shouye1.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"iconPath": "./static/tabBar/caidan.png",
"selectedIconPath": "./static/tabBar/caidan1.png",
"pagePath": "pages/menu/menu",
"text": "食谱"
},
{
"iconPath": "./static/tabBar/gouwuche.png",
"selectedIconPath": "./static/tabBar/gouwuche1.png",
"pagePath": "pages/order/order",
"text": "订单"
},
{
"iconPath": "./static/tabBar/user.png",
"selectedIconPath": "./static/tabBar/user1.png",
"pagePath": "pages/user/user",
"text": "我的"
}
]
},请求发送
在uniapp发送请求，和在使用微信小程序的发送请求的语法基本类似。将wx前缀修改uni前缀
发送请求语法
// ureq 快捷
uni.request({
// url: 'https://m.douyu.com/api/home/mix',
// 请求地址修改为proxy代理识别地址
url:'/douyu/api/home/mix',
method: 'GET',
success: res => {
console.log(res)
this.videoList = res.data.data
},
fail: () => {},
complete: () => {}
})跨域配置
vite.config.js
// 导入vite的配置对象
import {defineConfig} from "vite"
// 在uniapp环境下使用的vite 需要导入Dcloud的插件
import uni from "@dcloudio/vite-plugin-uni";// 将配置导出
export default defineConfig({
// 使用插件
plugins: [
uni()
],
// vite服务器配置
server: {
// 代码配置
proxy: {
// 源地址：https://m.douyu.com/api/home/mix
// 识别信息
'/douyu': {
// 源地址 域名或者 接口的公共部分
target: 'https://m.douyu.com',
// 是否改变域名
changeOrigin: true,
// 路径重写
rewrite: path => {
// 将识别标识再替换到 组合成完整的接口地址
return path.replace(/^\/douyu/, '')
}
},可以使用方法进行封装实现