uniapp 小程序0到1教程

先说明一下,uni-app的文档很乱

一、注册微信小程序

如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 "立即注册" 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 "小程序" 即可。

接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。

激活邮箱之后,选择主体类型为 "个人类型",并按要求登记主体信息。主体信息提交后不可修改,该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体,在后续开通其他业务功能时不得变更或修改。

二、微信开发者工具

下载微信web开发者工具,根据自己的操作系统下载对应的安装包进行安装即可。

三、开始构建项目了

我这里使用的是使用Vue3/Vite版

  • npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
  • 上面不行的话点击这个链接 ,获取模板 gitee,机器验证

用VS Code打开我们所创建的项目

1.首先下载有关依赖

typescript 复制代码
yarn 或者 npm i 

2.运行

typescript 复制代码
# 运行到 h5   
npm run dev:h5  
# 运行到 app   
npm run dev:app  
# 运行到 微信小程序  
npm run dev:mp-weixin  

注意:

  • H5 是可以在 vscode 上执行, 至于微信小程序, 请看下面操作

  • 微信小程序

  • 首先执行 npm run dev:mp-weixin

  • 执行完毕如下

  • 在项目dist文件夹的dev的会多出一个文件mp-weixin,目录结构即为小程序的结构

  • 然后我们打开微信开发者工具, 导入项目

  • 导入成功之后

    然后我们就要看uni-app文档了!

下面是我自己开发的小程序,可以看一看,有问题评论探讨一下~

相关推荐
裴嘉靖1 小时前
uni-app 打包后 PDF 无法生成问题完整解决方案
pdf·uni-app
2501_933907212 小时前
上海本凡科技的微信小程序公司主要提供哪些服务?
科技·微信小程序·小程序
码农客栈2 小时前
小程序学习(十七)之获取前台分类数据并渲染
小程序
2601_949804922 小时前
【全开源】AJAX家政上门服务系统小程序自营+多商家(高级授权)+独立端
小程序
h7ml2 小时前
查券返利机器人图像识别:OpenCV 模板匹配对抗淘宝小程序动态化骨架屏
opencv·小程序·机器人
低代码布道师2 小时前
教培管家第14讲:家长端——打造合规且顺畅的登录门户
低代码·小程序·云开发
说私域2 小时前
私域流量生态重构:链动2+1模式S2B2C商城小程序的流量整合与价值创造
人工智能·小程序·流量运营·私域运营
说私域2 小时前
AI智能名片S2B2C商城小程序赋能下线上向线下导流的机制与效果研究——基于线下专属优惠券的视角
人工智能·小程序·流量运营·私域运营
2501_915921432 小时前
不用 Xcode 上架 iOS,拆分流程多工具协作完成 iOS 应用的发布准备与提交流程
android·macos·ios·小程序·uni-app·iphone·xcode
CHU7290353 小时前
探索一番赏盲盒小程序:解锁多元互动体验新场景
小程序·php