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

相关推荐
00后程序员张1 小时前
使用Instruments工具深入分析iOS应用性能与启动时间优化
android·macos·ios·小程序·uni-app·cocoa·iphone
古韵2 小时前
小程序上传进度条,还要自己监听 onProgressUpdate 吗?
前端·javascript·uni-app
程序喵大人3 小时前
【C++进阶】STL容器与迭代器 - 10 把容器、迭代器和数据流串成一个小程序
开发语言·c++·容器·小程序·迭代器·stl
不如摸鱼去1 天前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
anyup1 天前
uni-app 没有根组件?仅需几行代码实现全局 Toast 和 Modal
前端·架构·uni-app
2501_916007471 天前
Python实现HTTPS爬虫的完整指南:使用requests、BeautifulSoup、Selenium和Scrapy
爬虫·python·ios·小程序·https·uni-app·iphone
FungLeo1 天前
Taro 开发小程序, 把 @ 配成 src 路径别名,webpack / tsconfig / scss 三处同步的正确姿势
webpack·小程序·taro
万亿少女的梦1681 天前
基于微信小程序、Express与MongoDB的校园失物招领系统设计
mongodb·微信小程序·node.js·express·系统设计
AI_AGENT_DEV_AI1 天前
原生 APP(iOS / Android)的开发与上线
uni-app
灵枢时代1 天前
小程序在生鲜配送行业,如何设计夜间预约和次日达的订单处理流程?
数据结构·人工智能·小程序