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

相关推荐
阿凤2131 分钟前
uniapp运行到app端怎么打开文件
android·前端·javascript·uni-app
00后程序员张2 小时前
完整教程:如何将iOS应用程序提交到App Store审核和上架
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张2 小时前
iOS应用性能优化全解析:卡顿、耗电、启动与瘦身
android·ios·性能优化·小程序·uni-app·iphone·webview
大力水手~5 小时前
小程序模仿iphone苹果手机滑动选时间
智能手机·小程序
杰建云1675 小时前
小程序如何做裂变?
小程序·小程序制作
Front思6 小时前
解决 uniapp Dart Sass 2.0.0 弃用警告
前端·uni-app·sass
Evavava啊6 小时前
iOS微信小程序WebView中按钮背景渐变显示问题解决方案
ios·微信小程序·h5·渲染
阳光雨滴6 小时前
微信小程序使用canvas自定义富文本内容做图片分享
微信小程序·小程序
杰建云1676 小时前
小程序如何做活动?
小程序·小程序制作
这是个栗子6 小时前
【微信小程序问题解决】微信小程序全局 navigationBarTitleText 不起作用
微信小程序·小程序·导航栏