前端学习—使用uni-app搭建微信小程序&基础知识

卑微的后端人为了做毕设开始学前端了，老天保佑，祝愿我的毕设能顺利完成！
01-uni-app介绍_哔哩哔哩_bilibili

目录

一、脚手架搭建项目-使用powershell

（一）全局安装

（二）创建项目

（三）启动项目，编译至微信小程序平台

二、sass的使用

（一）安装

（二）标签上添加lang属性scss

三、基础语法

（一）数据展示

（二）数据循环v-for

（三）条件编译v-show、v-if

（四）计算属性computed

1.使用格式：

2.计算属性的加工功能：

3.计算属性的过滤功能：

四、事件

（一）事件的使用

（二）事件传参

五、组件

（一）组件的简单使用

（二）组件传参

1.父组件向子组件传参

2.子组件向父组件传递数据

3.全局数据传递

（三）组件插槽 slot

六、生命周期

（一）应用生命周期（常用）

（二）页面生命周期（常用）

（三）组件生命周期（常用）

（四）完整的生命周期相关文档

1.uni-app生命周期

2.Vue生命周期

3.微信小程序生命周期

---

一、脚手架搭建项目-使用powershell

（一）全局安装

 npm install -g @vue/cli

如果出现连接超时，可以先输入以下指令，再进行全局安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果更不幸，出现CERT_HAS_EXPIRED证书过期，可以输入以下指令之后，再重新进行上面的步骤

npm cache clean --force
npm config set strict-ssl false

（二）创建项目

 vue create -p dcloudio/uni-preset-vue colorize-front

如果出现连接超时，可以先从github（可以使用镜像网站GitHub: Let’s build from here · GitHub）上拉取dcloudio/uni-preset-vue到本地，再进行创建

git clone https://github.com/dcloudio/uni-preset-vue.git

 vue create -p C:\Users\saynoon\uni-preset-vue colorize-front

（三）启动项目，编译至微信小程序平台

 cd colorize-front
 npm run dev:mp-weixin

在编译项目时，又又又报错了：You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()]，愚蠢的我查了一天没看到别人遇到这个问题，最后还是依赖gpt解决了

解决方式：

在根目录下找到vue.config.js（没有就自己新建一个），添加配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin()
    ]
  }
}

好好好，搞了两天终于把项目搭起来了

二、sass的使用

（一）安装

npm install node-scss scss-loader

出现以下报错：

npm ERR! code 1
npm ERR! path D:\graduate\colorize-front\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: E:\nodejs\node.exe D:\graduate\colorize-front\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'E:\\nodejs\\node.exe',
npm ERR! gyp verb cli   'D:\\graduate\\colorize-front\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@8.4.1
npm ERR! gyp info using node@19.8.1 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - executable path is "C:\Users\saynoon\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\python.exe"
npm ERR! gyp verb find Python - executing "C:\Users\saynoon\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\python.exe" to get version
npm ERR! gyp verb find Python - version is "3.9.13"
npm ERR! gyp info find Python using Python version 3.9.13 found at "C:\Users\saynoon\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\python.exe"
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 19.8.1
npm ERR! gyp verb command install [ '19.8.1' ]
npm ERR! gyp verb install input version string "19.8.1"
npm ERR! gyp verb install installing version: 19.8.1
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 19.8.1
npm ERR! gyp verb build dir attempting to create "build" dir: D:\graduate\colorize-front\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? Yes
npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp verb find VS looking for Visual Studio 2015
npm ERR! gyp verb find VS - not found
npm ERR! gyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:75:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:363:14)
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:71:14
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:384:16
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:427:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:512:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1098:16)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:304:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19045
npm ERR! gyp ERR! command "E:\\nodejs\\node.exe" "D:\\graduate\\colorize-front\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\graduate\colorize-front\node_modules\node-sass
npm ERR! gyp ERR! node -v v19.8.1
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\saynoon\AppData\Local\npm-cache\_logs\2024-01-30T03_03_06_937Z-debug-0.log

node-sass 避坑大全, 以及npm安装心得_npm node-sass-CSDN博客，看完这篇博客之后去匹配了一下版本并使用了cnpm进行安装，继续报错...看的我一愣一愣的

 in ./src/pages/index2/index2.vue?vue&type=style&index=0&lang=scss&

Syntax Error: HookWebpackError: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
-- inner error --
Error: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
Generated code for D:\graduate\colorize-front\node_modules\css-loader\dist\cjs.js??clonedRuleSet-22[0].rules[0].use[1]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\stylePostLoader.js!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\index.js??clonedRuleSet-22[0].rules[0].use[2]!D:\graduate\colorize-front\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-22[0].rules[0].use[3]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\dist\cjs.js??clonedRuleSet-22[0].rules[0].use[4]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\index.js??clonedRuleSet-22[0].rules[0].use[5]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\index.js??vue-loader-options!D:\graduate\colorize-front\node_modules\@dcloudio\webpack-uni-mp-loader\lib\style.js!D:\graduate\colorize-front\src\pages\index2\index2.vue?vue&type=style&index=0&lang=scss&
1 | throw new Error("Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):\nError: Node Sass version 8.0.0 is incompatible with ^4.0.0.\n    at getSassImplementation (D:\\graduate\\colorize-front\\node_modules\\@dcloudio\\vue-cli-plugin-uni\\packages\\sass-loader\\dist\\getSassImplementation.js:46:13)\n    at Object.loader (D:\\graduate\\colorize-front\\node_modules\\@dcloudio\\vue-cli-plugin-uni\\packages\\sass-loader\\dist\\index.js:42:61)");

烦死了...还是安装dart-sass（也就是sass）吧，咱也不知道后面会不会出问题

cnpm install sass sass-loader

（二）标签上添加lang属性scss

<template>
	<view class="content">
		<view class="sass">sass</view>
	</view>
</template>

<script>

</script>

<style lang="scss">
	.content{
		.sass{
			background-color: red;
		}
	}
</style>

三、基础语法

（一）数据展示

1.在js的data函数中定义数据，可以是字符串、数字、布尔值，也可以是对象

2.在template中通过{{数据}}来展示；注意：{{后、}}前不可有空格

在标签的属性上通过 :data-index="数据"使用 注意：在属性上使用定义的数据，在属性前必须加上:，不加符号时无法识别为变量

（二）数据循环v-for

使用格式：

<view v-for="(item) in 数组名称" :key="item.唯一属性">
			{{item.任意属性}}
</view>

或者

<view v-for="(item,index) in 数组名称" :key="item.唯一属性">
			{{item.任意属性}}
</view>

item是从数组中取出的各个元素（命名随意，不是一定需要命名为item），index是各个元素的索引；如果没有唯一的属性，则key可以赋值为index

（三）条件编译v-show、v-if

v-show是通过样式实现的，适用于需要频繁做切换显示的标签。

v-if隐藏标签是通过删除标签实现的，适用于无需频繁做切换显示的标签。

使用格式：

<view v-if="true">1</view>
<view v-if="变量名">2</view>
<view v-show="true">3</view>
<view v-show="变量名">4</view>

（四）计算属性computed

1.使用格式：

在computed中写函数对数据进行处理，函数可以直接作为普通数据使用。

<template>
	<view class="content">
		<view>{{函数名}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				变量
			}
		},
		computed:{
			函数名(){
				return 变量处理
			}
		}
	}
</script>

2.计算属性的加工功能：

<template>
	<view class="content">
		<view>{{countMoney}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 1,
			}
		},
		computed:{
			countMoney(){
				return "number:" + this.number
			}
		}
	}
</script>

3.计算属性的过滤功能：

对数组进行过滤处理时，不建议使用v-for和v-if结合使用；最好使用计算属性获得新数组

<template>
	<view class="content">
		<view v-for="(item,index) in filterList" :key="item.id">
			{{item.type}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:0,
						type:"aaa"
					},
					{
						id:1,
						type:"bbb"
					}
				]
			}
		},
		computed:{
			filterList(){
				return this.list.filter(v=>v.id>0)
			}
		}
	}
</script>

四、事件

（一）事件的使用

1.在template需要绑定的标签中，注册事件 @事件="事件名称"

2.在js的methods中定义事件回调

<template>
	<view class="content">
		<view @click="handleClick">点击a</view>
	</view>
</template>

<script>
	export default {
		methods:{
			handleClick(){
				console.log("加油鹿小葵！")
			}
		}
	}
</script>

<style></style>

（二）事件传参

1.直接通过函数传参

2.通过自定义属性传参

需要在事件函数中传$event，然后在event.currentTarget.dataset取得对应的值

自定义属性data-名称   对应 event.currentTarget.dataset.名称

<template>
	<view class="content">
		<view @click="handleClick1(1)">点击1</view>
		<view @click="handleClick1('a')">点击a</view>
        <!-- 自定义属性 -->
		<view data-i="hello" @click="handleClick2('b',$event)">点击哈哈哈哈</view>
	</view>
</template>

<script>
	export default {
		methods:{
			handleClick1(e){
				console.log("加油鹿小葵！" + e)
			},
            handleClick2(e, event){
				console.log(e);
				console.log(event);
				console.log(event.currentTarget.dataset.i)
			}
		}
	}
</script>

<style>

</style>

五、组件

（一）组件的简单使用

使用步骤：定义->引入->注册->使用

1.组件的定义：

在src目录下新建文件夹components用来存放组件，在该目录下新建组件

<template>
    <image class="img-border" src="https://img-blog.csdnimg.cn/direct/a486118ffeda4cc2b447e174317f026b.bmp"></image>
</template>

<style>
.img-border{
    border-radius: 50%;
}
</style>

2.组件的引入：

在页面中引入组件

import 组件名 from '组件路径'

3.组件的注册：

在页面的实例中，新增属性components，把组件放入

4.组件的使用：

在页面中标签中，直接使用组件 <组件名></组件名>

注意：uni-app中，组件名使用中划线的格式

在页面中的使用（以上的步骤2-4）

<template>
	<view>
		<img-border></img-border>
	</view>
	
</template>

<script>
// 引入自定义组件
	import imgBorder from "@/components/img-border/img-border";
	export default {
		//注册组件
		components:{
			imgBorder
		}
	}
</script>

<style lang="scss">

</style>

（二）组件传参

1.父组件向子组件传参

（1）子组件中，声明接收的父组件传值，然后在标签中使用

<template>
    <image class="img-border" :src="src"></image>
</template>

<script>
export default{
    //声明接受的父组件传值
    props:{
        src:String
    }
}
</script>

<style>
.img-border{
    border-radius: 50%;
}
</style>

（2）父组件传值给子组件

<template>
	<view>
		<img-border :src="src1"></img-border>
		<img-border :src="src2"></img-border>
	</view>
	
</template>

<script>
// 引入自定义组件
	import imgBorder from "@/components/img-border/img-border";
	export default {
		//注册组件
		components:{
			imgBorder
		},
		data() {
			return{
				src1:"https://img-blog.csdnimg.cn/direct/a486118ffeda4cc2b447e174317f026b.bmp",
				src2:"https://img-blog.csdnimg.cn/direct/4becfd7d213d412f90b8cdf06309c957.bmp"
			}
		}
	}
</script>

<style lang="scss">

</style>

2.子组件向父组件传递数据

（1）子组件通过触发事件传递

<template>
    <image @click="handleClick" class="img-border" :src="src"></image>
</template>

<script>
export default{
    //声明接受的父组件传值
    props:{
        src:String
    },

    methods:{
        //点击事件，向父组件传递数据
        handleClick(){
            //this.$emit(事件名称,传递的数据);
            this.$emit("srcChange",this.src);
        }
    }
}
</script>

<style>
.img-border{
    border-radius: 50%;
}
</style>

（2）父组件通过监听事件接收

<template>
	<view>
		<view>子组件传递的数据：{{src}}</view>
		<img-border @srcChange="handleSrcChange" :src="src1"></img-border>
		<img-border @srcChange="handleSrcChange" :src="src2"></img-border>
	</view>
	
</template>

<script>
// 引入自定义组件
	import imgBorder from "@/components/img-border/img-border";
	export default {
		//注册组件
		components:{
			imgBorder
		},
		data() {
			return{
				src:"",
				src1:"https://img-blog.csdnimg.cn/direct/a486118ffeda4cc2b447e174317f026b.bmp",
				src2:"https://img-blog.csdnimg.cn/direct/4becfd7d213d412f90b8cdf06309c957.bmp"
			}
		},
		methods:{
			handleSrcChange(e){
				this.src = e;
			}
		}
	}
</script>

<style lang="scss">

</style>

3.全局数据传递

常用的有以下两种方式

（1）通过Vue原型

在main.js中定义

import Vue from 'vue'

Vue.prototype.变量名=值

在页面中，通过this.变量名 即可获取到

（2）通过globalData（微信小程序特有的）

在App.vue中定义

<script>
	export default {
		globalData:{
            变量名：变量值
        }
	}
</script>

在页面中，通过getApp().globalData.变量名 即可获取到

（三）组件插槽 slot

标签其实也是数据的一种，父组件想实现动态地向子组件传递标签，可以使用插槽slot

1.在子组件中使用slot占位

<template>
    <view>
        <view class="title">标题</view>
        <slot></slot>
    </view>
</template>

<script></script>

2.在父组件中使用子组件时，传递标签

<template>
    <view class="content">
        <my-form>
            <!-- 传递标签 -->
            <view class="text">插槽</view>
        </my-form>
    </view>
</template>

<script>
    import myForm from '@/components/my-form';
    export default{
        components:{
            myForm
        }
    }
</script>

<style></style>

六、生命周期

uni-app框架的生命周期结合了vue和微信小程序的生命周期。

微信小程序三种对象：整个应用、页面对象、组件对象；

（一）应用生命周期（常用）

在App.Vue中，onLaunch页面加载完毕；onShow应用在前台显示；onHide应用被隐藏

<script>
	export default {
		// onLaunch页面加载完毕；onShow应用在前台显示；onHide应用被隐藏
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

（二）页面生命周期（常用）

用onLoad、onShow分别表示页面加载完毕时、页面显示时

<script>
    export default{
		onLoad(){
			console.log("页面加载完毕");
		},
        onShow(){
			console.log("页面展示了");
		}
    }
</script>

（三）组件生命周期（常用）

用mounted表示组件挂载完毕

<script>
    export default{
        mounted(){
            console.log("组件挂载完毕");
        }
    }
</script>

（四）完整的生命周期相关文档

1.uni-app生命周期

应用生命周期：App.vue/App.uvue | uni-app官网 (dcloud.net.cn)

页面生命周期：页面 | uni-app官网 (dcloud.net.cn)

2.Vue生命周期

生命周期钩子 | Vue.js (vuejs.org)

3.微信小程序生命周期

应用生命周期：小程序框架 / 逻辑层 / 注册小程序 (qq.com)

页面生命周期：小程序框架 / 逻辑层 / 注册页面 (qq.com)

组件生命周期：自定义组件 / 组件生命周期 (qq.com)