1.准备工作

准备工作

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

  1. 创建项目
    1. 选择文件
    2. 新建
    3. 项目
  2. 填写项目基本信息
    1. 选择uni-app
    2. 填写项目名称 uni_zy
    3. 选择浏览地址
    4. 选择模板 uni-ui项目
    5. 创建
  3. 创建成功

方法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等内容

  1. 填写小程序appid
    1. manifest.json
    2. 微信小程序配置
    3. 填写微信开发者中的appid
  2. 配置 微信开发者工具 的安装路径
    1. 工具
    2. 设置
    3. settings.json
    4. 运行配置
    5. 输入微信开发者工具路径
  3. 开启服务端口
    1. 打开微信开发者
    2. 设置
    3. 安全设置
    4. 打开服务端口
  4. 运行
    1. 打开HBuilderX
    2. 运行
    3. 运行到小程序模拟器
  5. 打开微信开发者
    2. 设置
    3. 安全设置
    4. 打开服务端口
  6. 运行
    1. 打开HBuilderX
    2. 运行
    3. 运行到小程序模拟器
    4. 微信开发者工具
  • 36
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值