使用uni-app开发微信小程序并实现页面间的跳转

一、下载需要的开发工具

HBuilderX

  • 微信开发者工具

HBuilderX

HBuilderX-高效极客技巧 (dcloud.io)

微信开发者工具

下载 / 开发版更新日志 (qq.com)

二、新建项目

通过vue-cli命令行创建项目

参考:

uni-app官网 (dcloud.net.cn)

2.1全局安装 vue-cli

复制代码
npm install -g @vue/cli

2.2 创建uni-app

创建以 typescript 开发的工程(模板项目存放于 Github,由于国内网络环境问题,可能下载失败,如果下载失败,你可以直接使用下面的压缩包解压就可以了)

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

uni-app.zip - 蓝奏云

2.3用HB打开项目,安装依赖

2.4 设置微信开发工具地址

此处设置你第一步安装微信开发工具的路径,一定不能错

2.5打开微信开发者工具,点击小程序->点击+号创建小程序(注意这步操作只是拿到测试的appid,不需要真的创建,复制号测试appid)

2.6将获得的appid配置到uniapp项目的manifest.json文件中:

2.7 微信开发者工具的设置,找到安全设置,将服务端口打开

2.8回到HBuilderX 点击运行到微信开发者工具就可以了

相关推荐
CC同学呀6 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.9 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
666HZ66612 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十12 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄13 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h1853859224413 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_13 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
说私域13 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务质量提升路径研究
人工智能·小程序·开源
牧杉-惊蛰13 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app