vue小程序开发（一） uni-app基本学习_vue开发小程序

脚手架搭建项目

1. 全局安装

npm install -g @vue/cli
1

2. 创建项目

vue create -p dcloudio/uni-preset-vue my-project
1

3. 启动项目(微信小程序)

npm run dev:mp-weixin
1

4. 微信小程序开发者工具导入项目

​ 根目录

​ 进入目录 再导入

建立完成

目录结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

新建页面

pages.json

用来注册页面，排在第一的页面是首页

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        
        //新增页面
		{
			"path": "pages/index2/index",
			"style": {
                //页面名，呈现在小程序上方
				"navigationBarTitleText": "2"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}

	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

样式和sass

• 支持小程序的rpx 和 h5的vm，vh

• 内置有sass的配置了 ，只需要安装对应的依赖即可

  npm install sass-loader node-sass
  1

  sass版本和Node版本对应关系

  

  如果出现版本报错，移步：

  https://blog.csdn.net/xiakekeali/article/details/112766575

• vue组件中，在style 标签上加入属性 <style lang = 'scss'>即可

index2/index.vue

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

<script>
	export default {

	}
</script>

<style lang="scss">

	.rpx{
		/* rpx 小程序中的单位 750rpx = 屏幕的宽度 */
		width :750rpx;
		height: 100rpx;
		background-color:aqua;
	}

	.vw{
		/* vm h5单位 100vw = 屏幕的宽度 100vh = 屏幕的高度 */
		width:50vw;
		height: 50vh;
		background-color: tan;
	}

	.content{
		.sass{
			background-color:red;
			color:$uni-color-primary;
		}
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

效果图

基本语法

数据展示

• 在js的data中定义数据
• 在template中通过{{}}来显示
  • 在标签的属性上通过 :data-index=‘数据’ 来使用

<!-- 使用数据 -->
<view>{{msg}}</view>
<view>{{money}}</view>
<view>{{isRich}}</view>
<view>{{person}}</view>
<view>{{person.name}}</view>
<view>{{person.skill}}</view>

<!-- 标签上通过属性的方式使用数据 -->
<view :data-color="color">color</view>


<script>
    export default {
        data(){
            return{
                //存放数据
                msg:"黑马程序员",
                //数字
                money:100,
                //boolean类型
                isRich:false,

                //对象
                person:{
                    name:"孙悟空",
                    skill:"72变"
                },
                //颜色
                color:"auqa",

                //数组
                list:[
                    {
                        id:0,
                        text:"苹果"
                    }
                    ,
                    {
                        id:1,
                        text:"
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/782709