准备工作
1.下载hbuilderx
https://hx.dcloud.net.cn/Tutorial/install/windows
2.下载微信小程序
3.注册小程序
4.安装node.js18
nodejs是一款可以让JavaScript运行在服务端的开发平台,优秀的包管理器
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
uni-app官方文档
5.安装uniapp
安装uniapp官方链接
新建uni-app项目方法
方法1
- 创建项目
- 选择文件
- 新建
- 项目
- 填写项目基本信息
- 选择uni-app
- 填写项目名称 uni_zy
- 选择浏览地址
- 选择模板 uni-ui项目
- 创建
- 创建成功
方法2
创建uni-app
使用正式版(对应HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-project
小程序端采用vue+JavaScript
后台管理系统采用vue+typescript
使用Vue3/Vite版
创建以 javascript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板)
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project
创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板)
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
视频教程创建命令
npx degit dcloudio/uni-preset-vue#vite shop-wx
shop-wx是项目名称
项目创建步骤
创建:
- 打开cmd,进入项目所在文件夹
- 输入
npx degit dcloudio/uni-preset-vue#vite shop-zy
- 创建完成后进入
cd shop-zy
- 输入
npm install
(安装项目依赖)
如果依赖安装失败,则删除项目shop-zy重新创建
安装依赖报错
解决
nrm ls 可以查看各个仓库
导入
Hbuliderx导入创建的项目(shop-zy)
点击运作,使用微信开发者工具
出现以下问题:
failed to load config from E:\校园二手交易平台\项目源码\小程序\shop-zy\vite.config.js
Error: Cannot find module '@dcloudio\uni-mp-kuaishou\lib\uni.plugin.js'
出现原因:
依赖未安装成功
注意
配置小程序appid等内容
- 填写小程序appid
- manifest.json
- 微信小程序配置
- 填写微信开发者中的appid
- 配置 微信开发者工具 的安装路径
- 工具
- 设置
- settings.json
- 运行配置
- 输入微信开发者工具路径
- 开启服务端口
- 打开微信开发者
- 设置
- 安全设置
- 打开服务端口
- 运行
- 打开HBuilderX
- 运行
- 运行到小程序模拟器
- 打开微信开发者
2. 设置
3. 安全设置
4. 打开服务端口 - 运行
- 打开HBuilderX
- 运行
- 运行到小程序模拟器
- 微信开发者工具