一、uni-app简介

---

官网：https://uniapp.dcloud.io/

PC端；移动端：（APP，WebApp）；纯原生：（IOS,Android ） 应用商店；H5

Hybrid 模式（混合）：(现在手机的99%都是这个模式)

1. uni-app是一个使用Vue.js开发所有前端应用的框架，支持Vue语法 + 小程序标签/API

2. 跨终端： 开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用（华为、小米、vivo、OPPO）等多平台。

3. DCloud 国产

4. 支持平台:

二、快速上手

---

2.1 开发工具

下载地址: https://www.dcloud.io/hbuilderx.html

三、开发微信小程序

---

3.1 相关配置

1. Uni-app项目运行至小程序开发工具需要提前设置小程序开发工具的安装路径

2. 同时设置小程序开发工具拒绝访问问题

第一次使用需设置小程序开发工具的安装路径，否则无法打开开发工具

在小程序的开发工具中，设置/安全设置 开启端口：

四、语法介绍

---

4.1 官网使用指南

1. 框架： 配置信息，框架接口(页面，页面生命周期等)

2. 组件： 同小程序组件一样,用于布局

3. API： 用于实现指定的功能

a) 全局对象uni

b) 组成: ECMAScript的jsAPI + uni扩展api组成

c) 示例: uni.request || uni.setStorage

入口文件：main.js

App.vue

会分别编译成 app.js 和app.wxss

pages.json 相当于 app.json

manifest.json配置：

既支持小程序的生命周期钩子函数，也支持vue的钩子函数

4.2 温馨提示

---

1. Uni-app的组件同原生小程序一样

2. Uni-app支持Vue语法

3. 学好Vue + 原生小程序之后可快速上手uni-app

pages.json 自动生成：

五、插件安装

---

5.1 内置插件安装

stylus特点：

预处理语言：less sass webpack==> css

@color:#fff
.test{
    color: @color;
    .title{#嵌套写法
        font-size:17px;
    }
}

1. 省略大括号 ；缩进替代

2. 省略键值对的分号和冒号；空格代替

3. 支持样式缩进、嵌套

.test
    colo rred
    .title
        font-size 17px

六、跨域处理

---

小程序：是不存在跨域！！不需要做兼容性处理。

6.1 方式一:vue.config.js配置

6.2 方式二:mainfest.json配置

在mainfest.json中，针对H5进行跨域设置：

// 设置vue脚手架一些相关配置
module.exports={
    devServer:{
        proxy:{
            '/api':{
                target:'http://localhost:3000',
                ws:true,
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}

网易严选项目开发

二、首页

2.1 效果图

iconfont:https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.39

无需下载直接引入方式：复制代码 新建 /static/iconfont/iconfont.styl 粘贴代码；

在App.vue 的<style>标签里引入该CSS ：

@import url("/static/iconfont/iconfont.styl");

在pages/index/index.vue中布局

css的定位属性position:absolute是什么意思？

position是“位置”、“放置方式”的意思，absolute是“绝对的”的意思，那么position:absolute指的是绝对定位的意思。

如果某元素添加了position:absolute属性，会把该元素设置为绝对定位，该元素会变成一个有框的空间，具体定义是这样的：

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

简单理解就是：绝对定位的元素的位置相对于最近的已定位祖先元素（父元素），如果元素没有已定位的祖先元素（父元素），那么它的位置相对于最初的包含块。

滑动导航栏一直报错

import base from './base'//接收url域名

// getIndexData 我自己记的
export default (url,data={},method='GET')=>{
    return new Promise ((resolve,reject)=>{
        uni.request({
             url:base.host+url, //小程序请求，
            //url,//h5请求地址
            data,
            method,
            success: (res) => {
                resolve = (res.data);
            },
            fail:(err)=>{
                reject(err)
            }
        });
    })
}

import base from './base.js'

// /getIndexData 老师的

export default (url,data={},method='GET')=>{
    return  new Promise((resolve,reject)=>{
        uni.request({
            url:base.host+url, //小程序
            // url,//H5
            data,
            method,
            success(res) {
                resolve(res.data);
            },
            fail(err) {
                reject(err);
            }
        })
    })
}