一、uni-app简介

---

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

PC端移动端APPWebApp纯原生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);
            }
        })
    })
}