使用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 点击运行到微信开发者工具就可以了

相关推荐
计算机徐师兄3 分钟前
Java基于SpringBoot的运动健康小程序【附源码、文档说明】
spring boot·小程序·运动健康·java运动健康小程序·运动健康小程序·java运动健康微信小程序·运动健康微信小程序
Xpower 176 分钟前
OpenClaw实战:从零开发电商小程序(2)
人工智能·语言模型·小程序·gateway
2501_933907219 小时前
宁波小程序开发服务与技术团队专业支持
科技·微信小程序·小程序
sheji341618 小时前
【开题答辩全过程】以 基于微信小程序的少儿编程学习平台为例,包含答辩的问题和答案
学习·微信小程序·小程序
const_qiu20 小时前
微信小程序自动化测试100%通过率实践
微信小程序·小程序
Greg_Zhong1 天前
小程序中登出/切换/重置页面状态的使用
小程序
你的眼睛會笑1 天前
uni-app 实战:使用 lime-painter 实现页面内容一键生成海报并下载
uni-app
一字白首1 天前
微信小程序进阶实战:从 UI 组件库到全局状态管理全解DAY05
ui·微信小程序·小程序
一只程序熊1 天前
uniapp 高德地图 打开选择地址报错,也没有展示出附近的位置
android·uni-app
海石2 天前
微信小程序开发02:原始人也能看懂的着色器与视频处理
前端·微信小程序·视频编码