uniapp学习第一天1、认识uniapp 定义：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发

1、认识uniapp

定义：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
原理：将 Vue 代码通过 webpack 翻译成其他平台的代码

2、开发uniapp的工具

vue-cli + vscode + 微信开发者
HBuilderX + 微信开发者工具

3、新建项目

    // 使用vue-cli创建uniapp项目
    npm install -g @vue/cli
    
    //生成骨架代码
    vue create -p dcloudio/uni-preset-vue hm-yougo-90

4、项目结构

┌─ pages            页面文件目录
│  └─ index
│     └─index.vue   index页面组件 相当于 index.js+index.wxml+index.wxss
│ 
├─ static           存放静态资源的目录。注意：静态资源只能存放于此
│ 
├─ main.js          Vue 入口文件
├─ App.vue          相当于小程序原生框架里的 app.js 和 app.wxss 的组合
│
├─ manifest.json    加强版project.config.json(应用名,appid,logo,版本等信息)
└─ pages.json       相当于小程序原生框架里的全局配置和页面配置的组合

5、用uniapp开发微信小程序需要先配置AppID

1、在 manifest.json 中的 mp-weixin 属性下，配置 appid：

{
    "mp-weixin": {
        "appid": "xxxxxxxxxxxxxxx"
    }
}

6、运行项目

uni-app 项目分别以网页的形式、以及小程序的形式运行

网页方式运行

    // 执行npm命令运行
    npm run serve
    npm run dev:h5

小程序方式运行

// 1、使用npm构建（确保设置appid）
npm run dev:mp-weixin

// 2、在微信开发者工具中**导入** uni-app 项目下的 `dist/dev/mp-weixin`

7、安装sass

为项目添加sass支持，使用sass编写样式代码

注意：暂不支持最新版本 sass-loader，因此要将版本调整为较老版本："sass-loader": "8.0.2"，sass版本改为：1.63.6

npm i  sass-loader@8.0.2 sass@1.63.6 -D

8、安装uni-ui组件库

uni-ui组件库实现界面。点击查看组件文档

    // 在vue.config.js中配置
    module.exports = {
        transpileDependencies:['@dcloudio/uni-ui']
    }
    
    // 在pages.json中添加
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    }

9、托管代码

在码云上新建一个代码仓库
删除项目中的git文件夹
git init 初始化
git add . git commit -m '项目初始化' 将初始化代码文件存放至本地仓库
将代码仓库的地址映射成本地项目的origin别名：
```
git remote add origin git@gitee.com:lzwan/hmlg.git
```
方便后期推送代码至master分支仓库
```
git push -u origin "master"
```

10、温泉优购项目

配置出底部标签式导航栏效果

// 修改 `pages.json`，编写 tabBar 相关配置
{
    ...
    "tabBar": {
        "color": "#000000",
        "selectedColor": "#C00000",
            "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "static/tabs/icon_home@3x.png",
                "selectedIconPath": "static/tabs/icon_home_active@3x.png"
            },
            {
                "pagePath": "pages/category/category",
                "text": "分类",
                "iconPath": "static/tabs/icon_category@3x.png",
                "selectedIconPath": "static/tabs/icon_category_active@3x.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "static/tabs/icon_cart@3x.png",
                "selectedIconPath": "static/tabs/icon_cart_active@3x.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/tabs/icon_user@3x.png",
                "selectedIconPath": "static/tabs/icon_user_active@3x.png"
            }
        ]
    }
}

20、网络请求

使用 flyio 作为 uni-app 的网络请求库，兼容多平台，功能可媲美axios。

// 在 src 目录下创建 utils 目录，并添加 request.js
import FlyIO from 'flyio/dist/npm/wx'

// 创建新的 FlyIO 实例
const http = new FlyIO()

// 设置超时(服务器性能偏差)
http.config.timeout = 30000;

// 设置请求基地址
http.config.baseURL = 'https://www.uinav.com/api/public/v1'

// 请求拦截器
http.interceptors.request.use((request) => {
    uni.showLoading({
        title: "加载中...",
        mask: true
    })
    return request
})

// 响应拦截器
http.interceptors.response.use((response) => {
    // 显示加载框
    uni.hideLoading()
  
    // 只取返回的数据字段
    return response.data
}, (err) => {
    uni.hideLoading()
    return Promise.reject(err)
})

// 导出
export default http

// 在 main.js 中将 request.js 模块导出的 flyio 实例，挂载到 Vue.prototype
// 导入 request.js 模块
import http from '@/utils/request'

// 挂载到 Vue.prototype
Vue.prototype.$http = http

挂载完毕之后，就可以在项目中通过this.$http.get()请求数据了。