uniapp使用教程（包括下载、初次使用以及使用中的一些细节总结）

亦凉 2023-01-02 14:25 91阅读 0赞

记录，以防后面忘记

感觉uniapp就是vue的语法结构、小程序的api和标签 这两者混合起来使用

1、下载，参考之前的博文[https://blog.csdn.net/mao871863224/article/details/109328749][https_blog.csdn.net_mao871863224_article_details_109328749]

2、开始使用：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]

（1）一般在pages.json里面进行页面的全局配置（参照官方文档[https://uniapp.dcloud.io/collocation/pages][https_uniapp.dcloud.io_collocation_pages]）  
pages.json

这里面配置的主要内容包括：所有页面路径、全局的外观、底部tabBar、生产环境入口配置

{ 
    	"pages": [{ 
    			"path": "pages/index/index",
    			"style": { 
    				// 页面级的配置文件
    				"navigationBarTitleText": "我的学习"
    			}
    		},
    		{ 
    			"path": "pages/my_test/my_test",
    			// 设置该页面独有的样式
    			"style": { 
    				// 页面级的配置文件
    				"navigationBarTitleText": "我的test",
    				"navigationBarBackgroundColor": "#2C405A",
    				"navigationBarTextStyle": "white",
    				// 设置h5下拉刷新的图标颜色，这对小程序中的样式没有任何影响
    				//除了h5,其他端也可以设置独有的样式
    				"h5": { 
    					"pullToRefresh": { 
    						"color": "#007AFF"
    					}
    				}
    			}
    		}, { 
    			"path": "pages/detail/detail",
    			"style": { 
    				"navigationBarTitleText": "详情页",
    				"enablePullDownRefresh": false
    			}
    
    		}
    	],
    	// 配置全局外观
    	"globalStyle": { 
    		// 配置导航栏标题颜色，仅支持black/white
    		"navigationBarTextStyle": "black",
    		// 配置标题文字内容
    		"navigationBarTitleText": "我的学习",
    		// 配置导航栏背景色
    		"navigationBarBackgroundColor": "#7FFF00",
    		"backgroundColor": "#7FFF00",
    		"enablePullDownRefresh": true,
    		"backgroundTextStyle": "light"
    	},
    	"easycom": { 
    		"autoscan": true,
    		"custom": { 
    			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
    		}
    	},
    	// 设置底部导航栏
    	"tabBar": { 
    		"list": [{ 
    				"text": "首页",
    				"pagePath": "pages/index/index",
    				"iconPath": "",
    				"selectedIconPath": ""
    			},
    			{ 
    				"text": "测试",
    				"pagePath": "pages/my_test/my_test",
    				"iconPath": "",
    				"selectedIconPath": ""
    			}
    		],
    		"color": "#000000",
    		"selectedColor": "#007AFF",
    		// 背景色
    		"backgroundColor": "#16AB60",
    		"borderStyle": "white"
    		// 仅支持微信小程序
    		// "position": "top"
    	},
    	// 用于生产环境配置，不需要在pages里面去自己配置,配置启动模式
    	"condition": { 
    		"current": 0,
    		"list": [{ 
    			"name": "详情页",
    			"path": "pages/detail/detail",
    			"query": "id=80"
    		}]
    	}
    }

记录一个技巧，路径其实不需要手动去一个一个写，在pages新建页面的时候直接点击新建页面，就会直接创建一个包含框架的新页面，并且会自动在pages.json中写入路径

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]  
（2）配置好了就可以开始画页面了

这里只记录我觉得该记录的点

1）使用标签基本上和小程序一样

2）样式使用scss/less需要去控制台给你报错的链接里面直接去下载就行，下载好即可使用

3）可以使用@import引入外部样式文件

4）uni.scss文件里面是全局样式，页面中的样式可以直接使用里面的变量  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]

5）尺寸单位使用rpx

6）数据的声明跟vue一样，写在data里面，记得写return，数据绑定完全使用vue的方式，使用\{ \{\}\}或者v-bind或者在属性前面简写：

7）循环使用vue的：v-for，后面记得加 :key=“index”，标识唯一性

8）点击事件使用vue的，@click，方法定义在methods里面，传参什么的也跟vue一样

9）声明周期函数：  
分为三种：  
1、应用的声明周期，针对于整个项目来说  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]  
2、页面生命周期函数，针对某一个页面来说，这跟小程序很像  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 4]  
10）配置某一个页面的下拉刷新、触底等属性要去pages.json中去单独配置这个页面的对应属性

11）存储数据使用uni.setStorage进行本地缓存，适配不同端

12）选择图片uni.chooseImage等这些方法内不写成箭头函数的时候，需要改this指向才能获取到this上挂载的数据，还有一种办法就是把这些方法写成箭头函数，直接使用this就可以获取到数据（因为箭头函数没有自己的this值，箭头函数中所使用的this来自于函数作用域链，也就是父级执行的上下文，具体的可以自行上网搜索this指向问题）

13）条件编译：实现不同平台不同显示，包括template/script/style里面都可以同理使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 6]

14）跳转页面  
两种方法：  
1、  
注意路径前面有/，并且跳转tabBar页面的时候要加open-type=“switchTab”  
![在这里插入图片描述][20210106162405435.png]  
open-type的值为redirect时，下一页页面左上角没有返回箭头，因为使用这个属性，把上一页页面关闭了，再打开下一个页面  
2、声明式跳转  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 7]

15）调用子组件跟vue使用一致，不赘述，父子组件传值也跟vue一致  
子组件中的created声明周期中初始化数据，mounted中操作dom

不同的是兄弟组件之间传值  
父组件，引入子组件testA、testB  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 8]  
testB组件内容

全局绑定一个监听事件 updateNum  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 9]

testA组件内容

通过这个全局事件改变里面的值，testB里面就会实时监听到，从而实现兄弟组件传值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 10]  
16）调接口获取数据一般写在onLoad里面，因为onShow每次隐藏显示就去调接口，太频繁，onReady页面已经渲染好了再去调接口获取数据有点太慢了，所以onLoad最合适

项目中肯定需要使用第三方组件库，因为现有的这些不够方便我们去使用  
推荐：  
uview： [https://uviewui.com/guide/demo.html][https_uviewui.com_guide_demo.html]  
ThorUI： [https://thorui.cn/doc/docs/introduce.html][https_thorui.cn_doc_docs_introduce.html]

[https_blog.csdn.net_mao871863224_article_details_109328749]: https://blog.csdn.net/mao871863224/article/details/109328749
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: /images/20221119/c38966464d7c48d1bcad45485404f92c.png
[https_uniapp.dcloud.io_collocation_pages]: https://uniapp.dcloud.io/collocation/pages
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]: /images/20221119/d8bbb9b84789462c9bfa197ac58c4c0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]: /images/20221119/f9bfe48be89f4172a5928127d7a60640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]: /images/20221119/1f7d1b0bf0644e24a0ee8c29272042dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 4]: /images/20221119/00b9da08338744de88adc4976d79fff3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 5]: /images/20221119/d7b09de2ef8f4425991acff6fe0fb88b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 6]: /images/20221119/b9bc321a0948484fa5f1fd08f9dcbd9f.png
[20210106162405435.png]: /images/20221119/3daca35daae04451b9482fc2204a9837.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 7]: /images/20221119/07d0d85c5bb74c36a30aee915563681d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 8]: /images/20221119/02dcc8cef29e4f15b0d0fcfb99586b42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 9]: /images/20221119/5464e98ee322409d903186587b704e3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 10]: /images/20221119/4c37677dd511443ab8e717885d7a3ac4.png
[https_uviewui.com_guide_demo.html]: https://uviewui.com/guide/demo.html
[https_thorui.cn_doc_docs_introduce.html]: https://thorui.cn/doc/docs/introduce.html