uin-app微信小程序开发

熙144

已于 2023-07-05 00:41:12 修改

阅读量5.3k

点赞数

文章标签：微信小程序小程序

于 2023-06-21 19:23:14 首次发布

本文链接：https://blog.csdn.net/weixin_70380078/article/details/131332819

版权

uni-app是一个使用Vue.js开发跨平台应用的框架，支持发布到多个平台。本文介绍了如何搭建uni-app项目，配置底部tab，以及在uni-app中连接数据库，特别以MongoDB为例详细阐述了数据库的安装和配置步骤。

摘要由CSDN通过智能技术生成

一、uni-app 是什么？
uni-app 由 DCloud 公司开发，是一个使用 Vue.js 开发所有前端应用的框架，开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。

二、如何搭建框架

1.创建项目

点击“文件” -> “新建” -> “项目”：

2.运行到浏览器

2.运行到小程序

如果是小程序，则需要配置小程序的安装路径，确保能够打开小程序开发者工具。

进入微信开发者工具，点击 “设置” 按钮，在弹出的窗口选择 “安全” 选项，打开 “服务端口”

二、uni-app 如何配置底部tab

1、配置page.json文件

2.list 相关配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},

		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			}

		}
	    ,{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
          ,{
            "path" : "pages/register/register",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/edit-profile/edit-profile",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/aa/aa",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/details/details",
            "style" :                                                                                    
            {