在VSCode中开发一个uni-app项目

创建项目

使用命令行工具(例如 vue-cli)来创建一个新的 uni-app 项目。

创建以JavaScript开发的工程

javascript 复制代码
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
//或者
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

创建以TypeScript开发的工程

javascript 复制代码
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

创建好之后,在执行

javascript 复制代码
npm install

配置VSCode

在VSCode中使用需要安装一些插件来辅助开发

  • uni-helper:主要是增加代码提示功能
  • uni-create-view:主要是帮助我们快速创建uniapp视图和组件,创建视图页面时将自动添加 pages.json 中

创建页面时也可以自行创建,然后在pages.json中手动配置路由。

在运行时,需要先在小程序的manifest.json文件中配置appid

appid在微信公众平台中查看

项目运行调试

先执行dev:mp-weixin

执行完成后,项目中会出现dist文件夹,之后打开微信开发者工具,点击导入,选中该项目下dist文件夹中的mp-weixin,导入成功后,输入微信公众平台中查看的appid即可创建,成功运行在微信开发者工具中。


路由配置

小程序的主包是有限制大小的,太大就不能运行,所以在创建路由页面的时候需要尽量的创建子包,进行分包创建,避免这个问题。

javascript 复制代码
{
    "pages": [
        {
            "path": "pages/home/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/my/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "subPackages": [
        {
            "root": "games",
            "pages": [
                {
                    "path": "pages/game1/index",
                    "style": {
                        "navigationBarTitleText": "小游戏"
                    }
                },
                {
                    "path": "pages/game2/index",
                    "style": {
                        "navigationBarTitleText": "小游戏"
                    }
                }
            ]
        }
    ]
}

当页面路由配置好之后,在跳转其他页面展示的是该页面的路径而不是页面内容时,可以尝试清除缓存

相关推荐
古月居GYH2 小时前
【数据分析】如何在PyCharm中高效配置和使用SQL
ide·sql·pycharm
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
这是个栗子8 小时前
【问题解决】VSCode终端中看不到Git-Bash
ide·git·vscode
岁月玲珑12 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
木头没有瓜16 小时前
vscode离线安装插件
ide·vue.js·vscode
耶啵奶膘17 小时前
uniapp——地图路线绘制map
uni-app
shadouqi18 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
lls23318 小时前
恢复idea文件目录
ide
走,带你去玩19 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app