壳牌加油站

uni-app-基础-day01

概览

为什么要学uni-app？

现在很多中小型公司，都有自己的小程序项目，然后开发小程序就会用到uni-app。

uni-app没有诞生之前，怎么写小程序

使用原生微信小程序这个框架去开发？
- 只能发布成为微信小程序
支付宝
抖音

如果我写一套代码，然后可以变成各个平台的小程序。 —》混合开发模式

什么时候用uni-app

开发一个管理端的项目（X）
我要开发一个纯的h5项目（考虑）
- 原因是uni-app没有**vue-router（**有些功能不好实现）
我要开发一个微信小程序项目（绝对用）
- 我熟悉vue的语法，至少vue的语法比原生微信小程序好用
我要开发一个微信小程序项目而且可以运行到浏览器上（h5）
- 绝对要用

怎么学习uni-app

原生js的知识
- 定义变量作用域 this ，面向对象，
css + 标签语言
vue的基本知识要回【会用】
- 写个管理端的页面
- 写个h5的页面
会看文档
- 小程序的知识【前面三天】

环境搭建【掌握】

安装ide（hbx）

找到官网，下载.zip文件。一定要解压，双击.exe文件。注意：

下载依赖的时候一直卡着，或者报网络错误
- 以管理员的方式运行hbx
开发的时候我可以同时编译成小程序、h5
- 尽量不要多开，只开一端。你可以一天中，一直让其运行在h5。这一天完了之后，再运行到小程序看一看。

创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-US73nVk2-1687444119367)(img\1.创建项目.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z3JHznVx-1687444119369)(img\2.创建项目.png)]

运行项目（多端）

将项目运行到浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J41X3kmx-1687444119371)(img\3.运行到浏览器.png)]

运行过程中可能会有插件下载，运行成功之后有一个地址：（http://localhost:8080）, 使用浏览器访问该网址即可

将项目运行到小程序

运行 —》运行到小程序
第一次需要你配置微信开发者工具目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6OibCTba-1687444119373)(img\5.配置微信开发者工具目录.png)]
需要你开启微信开发者工具服务端口
- 设置—》安全设置 —》服务端口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-psXwDCEX-1687444119376)(img\6.开启开发者工具服务.png)]

目录结构

角色：应用页面组件

App.vue 代表整个应用
- 这里面没有template，即使你写了template也不会生效
pages: 页面就放在这里
- uni-app怎么才算一个页面：一定要注册在pages.json下的pages
components：组件，一定要注意，组件不能注册到pages.json下
pages.json
- 项目的配置文件：可以配置项目的路由，配置项目的窗口
- 官方链接
index.html: 给h5用的

main.js: 入口文件

当你运行项目的时候，首先就会执行次文件（有点类似于webpack的入口，或者vue项目的main.js）

核心功能：创建一个Vue实例，并挂载

import App from './App'


// 引入Vue
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'

// new一个vue的应用
const app = new Vue({
  ...App
})
// 挂载应用
app.$mount()

manifest.json 配置文件
- 配置app的图表
- 配置微信小程序的appid
unpackage: 编译之后的代码

条件编译

main.js下有一些奇怪的代码

// #ifndef VUE3

// #endif

这个代码是条件编译，uni-app是一套代码编译成多个平台，所以很多时候要考虑兼容问题。就有以下场景：

有一段代码：我想它在H5平台下生效，在其他平台不生效？
有一段代码：我希望它仅仅在微信小程序下生效

这些场景就需要条件编译来做

练习：头部在微信小程序中有，在h5中没有

想办法找到去掉头部的配置（一段配置）
让这段配置在H5里面生效，其他平台不生效

"globalStyle": {
		// #ifdef H5
		"navigationStyle": "custom",
		// #endif
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},

页面

命名规范

index.vue
index-xx.vue

创建页面

就是一个.vue文件，一般放在pages里面。

template -》 wxml
script -> js
style -> wxss

页面配置

{
    "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app"
        }
}

page.json pages里面进行页面的个性化配置。此处的style会编译到页面.json中去。

页面的生命周期

官网链接

创建
更新
卸载
其他

页面也是一个.vue文件，所以created 这一套生命周期也是可以用的。但是不建议大家在页面里面使用vue这一套生命周期。

组件化开发

组件的命名规范

son test （不规范的，easycom不起作用）
Son/Son.vue SubSon/SubSon.vue 【规范】
sub-son/sub-son.vue 【规范】

创建组件

创建普通组件（vue项目，创建一个组件，引入注册使用）

全局组件

创建一个组件
要将次组件注册成为全局组件

其他地方使用次组件，直接使用即可

import Child from './components/Child.vue'
Vue.component('child', Child)

创建满足easycom的组件【新规范】：你只要按照uni-app这个规范创建组件，就会省略掉引入、注册，直接使用。

组件一定要在：components
组件一定要用一个文件夹包起来
组件的名字一定要和上一步的文件夹名一致

组件的生命周期（vue）

就是vue的那一套

created
mounted
updated
…

页面的生命周期在这里是不适用的！

事件绑定

原生微信小程序绑定事件

冒泡的控制

可以冒泡
- bindtap bind:tap
不可以冒泡
- catch

事件绑定（wxml）

<view bind:tap="函数名" data-name="xfdsdf" ></view>

// 事件传参 (页面.js)
函数名(e) {
   // 参数在e里面 
}

不需要传参

<button @click="sendData">给父组件数据</button>



methods: {
    sendData(e) {
        // e就是事件对象
    }
}

需要传参（不需要事件对象）

<button @click="sendData('1w'， '一条烟')">给父组件数据</button>



methods: {
    sendData(money， smoke) {

    }
}

需要传参（需要事件对象）

<button @click="sendData('1w'， '一条烟'， $event)">给父组件数据</button>


methods: {
    sendData(money， smoke, e) {
	
    }
}

整体的代码

<template>
	<view>
		<button @click="handle1">不需要传参的绑定</button>
		<button @click="handle2">获取event对象</button>
		<button @click="handle3(12, `abc`)">获取多个参数</button>
		<button @click="handle4(12, `abc`, $event)">获取多个参数+事件对象</button>
	</view>
</template>

<script>
	export default {
		methods: {
			handle1() {
				console.log('不需要参数')
			},
			handle2(e) {
				console.log(e, '事件对象')
			},
			handle3(num, str) {
				console.log(num, str)
			},
			handle4(num,str, e) {
				console.log(num, str, e)
			}
		}
	}
</script>

组件通信-子父传值

父传子

<child name="张三" :age="24"></child>

props: ['name', 'age'],

子传父

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-foyiqT8l-1687444119377)(img\7.子传父.png)]$

组件通信-插槽

vue提供的内容分发的机制。通俗一点：就是父组件把一段html（wxml）传给子组件

匿名（最简单的）

<child>
	<button>按钮</button>    
</child>

父组件给子组件（child）发送了一个button

// 子组件接收父组件发送过来的button
<template>
    <view>
    	// 占位	
    	<slot></slot>
    </view>
</template>

匿名插槽是由名字，名字叫：default。可以不写

具名

在这里插入图片描述

作用域插槽

作用：让插槽内容访问子组件的数据。
在这里插入图片描述

组件通信-跨组件通信

中央事件总线

uni-app中的中央事件总线比vue项目更加简单

发送方
- 拿到bus
- emit
接收方
- 拿到bus
- on

在实际工作中中央事件中线，不怎么用。使你的代码走向未知，代码会非常混乱。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bzSCC3G-1687444119381)(img\11.uni-app的中央事件总线.png)]$

乱传的另外几个方法【掌握】

$once (只订阅一次)

$off

取消某一个事件的所有订阅
```
uni.$off('事件名')
```

取消某一个事件下的某一个订阅

const 函数 = （） => {}

uni.$on('事件名', 函数)

uni.$off('事件名', 函数)

vuex【重点】

vuex的特点

集中式(你的数据在项目中，放入了一个文件夹)的管理整个项目的状态（项目的一些共享的数据）
项目的组件可以无视层级从vuex的仓库中获取数据
数据一旦改变，依赖于这个数据的组件就会更新页面

uni-app中怎么引入vuex【vue一样】

创建一个仓库

store/index.js --》创建一个仓库并导出

import Vuex from 'vuex'
import Vue from 'vue'

// Vue要use一下Vuex
// 给每一个组件注入一个$store
Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		name: '1114班级'
	},
	mutations: {},
	getters: {},
	actions: {},
	modules: {}
})

将这个仓库注入到vue应用中

main.js中注入 new Vue

import store from '@/store'
const app = new Vue({
  ...App,
  // 
  store
})

测试：将数据显示到页面上

{{ name }}  

computed: {
    name() {
        return this.$store.state.name
    }
}

uni-app的api

请求方法

页面跳转【小程序】

页面通信

定位

授权，在manifest.json下mp-weixin

"mp-weixin" : {
        "appid" : "wx3373d91b06ee348f",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
		"permission": {
		    "scope.userLocation": {
		      "desc": "你的位置信息将用于小程序位置接口的效果展示"
		    }
		},
		"requiredPrivateInfos": [
			"getLocation"
		]
    }

扫码

会自己生成一个二维码

可以使用代码生成
借助线上的网址（草料二维码）

使用小程序扫描二维码

使用uniapp提供的api
api调用摄像头，扫描二维码
得到二维码的数据，告诉uniapp

练手

首页

创建一个首页
获取个人信息【选做】

加油

点击首页的一键加油，跳转到加油站页面（新的页面）
- 跳转api： https://uniapp.dcloud.net.cn/api/router.html#
拿到经纬度
- 调用接口：示例： http://129.211.169.131:6368/getShellList?point=106.63043,29.71798
- 得到加油站的列表：渲染到页面上

积分商城

接口： http://129.211.169.131:6368/getFractionShop
点击首页的积分商城，跳转到商城页面
调用一个接口，得到商品数据
然后渲染
要求：下拉刷新做一下

扫码：

会自己创建一个二维码
- 内容：（一段字符串，可以是一个地址）
- 字符串：打印一下
- 地址：打开这个地址
扫码二维码把二维码的信息打印出来即可
扫描出来之后发现是一个地址，请在小程序内部打开这个地址【选做】
- 提示：借助一个组件： web-view，类似于iframe

作业讲解

promise.all的用法如下：【面试官】

Promise.all([p1,p2,p3,p4]).then(res => {
    // 全部的promise都成功之后进入这个then
}).catch(err => {
    // 但凡有一个primise失败都进入catch
})

场景：发起100个请求？99个都成功了！其中给一个失败了，就要进入catch！怎么优化

const p1 = new Promise((resove, reject) => {
            setTimeout(() => {
                resove(1)
            }, 500)
        })

        const p2 = new Promise((resove, reject) => {
            setTimeout(() => {
                resove(2)
            }, 200)
        })

        const p3 = new Promise((resove, reject) => {
            setTimeout(() => {
                reject('500')
            }, 200)
        }).catch(err => {
            return Promise.resolve(err)
        })

        // 2020的新方法【最佳实践】
        Promise.allSettled([p1,p2,p3]).then(res => {
            console.log(res)
        })

        // 2020之前的用法
        Promise.all([p1,p2,p3]).then(res => {
            // [1,2,undefined]
            console.log(res)
        }).catch(err => {
            console.log(err)
        })

思考题

自己手写一个简易版本的发布订阅，uni（emit on）

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash