壳牌小程序笔记

壳牌加油站

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'],

子传父

组件通信-插槽

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

匿名（最简单的）

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

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

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

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

具名