从0开始制作微信小程序

目录

前言

正文

需要事先准备的

需要事先掌握的

什么是uniapp

平台应用的分类方式

什么是TypeScript

创建项目

项目文件作用

源码地址

尾声


 

  • 🔭 Hi,I’m Pleasure1234
  • 🌱 I’m currently learning Vue.js,SpringBoot,Computer Security and so on.
  • 👯 I’m studying in University of Nottingham Ningbo China
  • 📫 You can reach me by url below:
  • My Blog Website: https://blog.yiming1234.cn 
  • My CSDN Blog: https://yiming1234.blog.csdn.net
  • My Email:Pleasure@yiming1234.cn
  • My Github:Pleasurecruise (自由的世界人) · GitHub
  • It's my pleasure to see you follow me!

原文地址:从0开始制作微信小程序 - Pleasure的博客

下面是正文内容:


前言

放暑假了,闲着也是闲着,开始捣鼓微信小程序,逐渐实现跨平台的统一...

由于数据类型的统一需要用到TypeScript,可能又要了解新的语言了...[捂脸]

正文

需要事先准备的

①编程软件和环境:微信开发者工具,VScode或者WebStorm或者HBuilderX等编辑软件都可以

因为要使用Vue3所以要事先准备NodeJS环境这边就直接跳过了

微信开发者工具下载地址:https://servicewechat.com/wxa-dev-logic/download_redirect?type=win32_x64&from=mpwiki&download_version=1062405010&version_type=1

然后在设置=>安全中打开服务的端口

HBuilderX下载地址:https://qiniu-ecdn.dcloud.net.cn/download/HBuilderX.4.15.2024050802.zip

HX使用文档:HBuilderX 文档

HX专门用来快速的创建编译运行发布开发uniapp项目

②一个appid,用于编译小程序(有些人不知道怎么获取特别说明一下)

首先打开微信公众平台:微信公众平台(注意不是微信开发者平台)

然后选择下方的小程序:小程序(不要和公众号的appid搞混了)

如果你没有上线小程序的打算的话也可以在右边选择申请一个测试号

然后在首页扫码登录之后,在设置=>账号信息中,可以看到小程序的appid。

在HBuilderX中点击manifest.json文件进行更改

或者直接在项目根目录的manifest.json文件中进行更改

需要事先掌握的

什么是uniapp

uniapp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台

正因为使用的是Vue3而且是前端应用,所以在过渡的时候相对还是比较容易的。

平台应用的分类方式

按照设备类型,应用可以分为Web应用,移动应用,桌面应用。而小程序则是属于移动应用中的跨平台应用,有别于常用原生语言开发的app。

什么是TypeScript

TypeScript 是一种编程语言,可以看作是“加强版”的 JavaScript。它在 JavaScript 的基础上增加了类型系统,也就是说你可以在写代码的时候明确地告诉计算机某个变量是什么类型,比如是数字、字符串还是数组。这样,计算机就能在你写代码的时候帮你检查一些错误,而不是等到运行的时候才发现。

创建项目

如果你是想从0开始编写一个uniapp项目,可以通过下面两种方式:

①一种就是通过npm命令行来进行创建

官方文档链接:uni-app官网

npx degit dcloudio/uni-preset-vue#vite-ts uni-app-vue3-ts

可能会因为网络(墙)原因创建失败,可以自行点击下面的链接下载启动模版

登录 - Gitee.com

创建完成后,然后进行pnpm install

然后再输入下面的指令编译成想要的小程序类型,这里是微信小程序

pnpm dev:mp-weixin

编译完成之后,然后在微信开发者工具中进行导入

选择项目文件夹下dist/dev/mp-weixin文件夹进行打开即可,会自动识别到填写的appid

②另一种就是通过HBuilderX一键创建

这里需要事先安装微信开发者工具,设置完微信开发者工具的路径之后

HBuilderX会自动调用电脑中的微信开发者工具来运行这个微信小程序

P.S. !!

当然,每次对项目的代码进行编写修改更新之后,都需要对整个项目重新进行编译。这就无法实时的看到项目的输出与反馈从而进行调整,这就需要在代码编辑器中安装不同的插件从而实现项目的实时编译,以及数据类型的注释等操作。不同的代码编辑器中有不同的插件,这里就不特别进行说明了。

项目文件作用

大概解释一下一个Vue3+TypeScript的前端uniapp小程序项目中,不同文件及文件夹所起到的作用。

初始工程目录结构解析

├── .husky                     # Git Hooks
├── .vscode                    # VS Code 插件 + 设置
├── dist                       # 打包文件夹(可删除重新打包)
├── src                        # 源代码
│   ├── components             # 全局组件
│   ├── composables            # 组合式函数
│   ├── pages                  # 主包页面
│       ├── index               # 首页
│       ├── category            # 分类页
│       ├── cart                # 购物车
│       ├── my                  # 我的
│       └── login               # 登录页
│   ├── services               # 所有请求服务
│   ├── static                 # 存放应用引用的本地静态资源
│       ├── images              # 普通图片
│       └── tabs                # tabBar 图片
│   ├── stores                 # 全局 pinia store
│       ├── modules             # 模块
│       └── index.ts            # store 入口
│   ├── styles                 # 全局样式
│       └── fonts.scss          # 字体图标
│   ├── types                  # 类型声明文件
│       └── component.d.ts      # 全局组件类型声明
│   ├── utils                  # 全局方法
│   ├── App.vue                # 入口页面
│   ├── main.ts                # Vue初始化入口文件
│   ├── pages.json             # 配置页面路由等页面类信息
│   ├── manifest.json          # 配置appid等打包信息
│   └── uni.scss               # uni-app 内置的常用样式变量
├── .editorconfig              # editorconfig 配置
├── .eslintrc.cjs              # eslint 配置
├── .prettierrc.json           # prettier 配置
├── .gitignore                 # git 忽略文件
├── index.html                 # H5 端首页
├── package.json               # package.json 依赖
├── tsconfig.json              # typescript 配置
└── vite.config.ts             # vite 配置

源码地址

小程序由于作为一种应用模式,既需要有前端的展示型项目又需要有后端的接口型项目,所以如果要完整的从无到有去开发一款非工具类型的小程序(比如商城,论坛,系统等,而不是计算器之类的工具),工作量显然是不“小”的,更何况是在刚起步的情况下。

如果你只是想体验一下小程序的开发流程的,可以选择看一下下面的这个仓库,具体的使用说明已经在README中提到了,仓库还在持续更新中......

GitHub - Pleasurecruise/yiming-shop

尾声

后续会尝试稍微深入了解TypeScript以及之中的一些细节。

题外话:看起来还是后端轻松,只需要保证接口的可用性以及请求后返回数据的正确性就可以了。不需要去头疼不同平台之间的适配......

最后,祝各位六一儿童节快乐,,,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/337893.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一、大模型推理

https://github.com/hiyouga/LLaMA-Factory/blob/main/README_zh.md https://github.com/hiyouga/LLaMA-Factory/blob/main/examples/README_zh.md 安装 v7.1 https://github.com/hiyouga/LLaMA-Factory/releases/tag/v0.7.1 git clone --depth 1 https://github.com/hiyoug…

TS38.300中的切换流程(很一般)

本文根据3GPP R18 TS 38.300第9.2.3节整理 切换(Handover)是移动终端(UE)进入RRC_CONNECTED状态后在不同服务小区(Cell)之间保持与网络联系唯一手段,期间首先通过控制面(C-Plane)进行无线测量、切换协商及触发等;为此3GPP在TS38.300中定义如下。 RAN系统…

【六一儿童节】的科技奇幻旅程:解锁【机器学习】与【人工智能】的无限创意

目录 一、机器学习与人工智能简介 二、六一儿童节的特殊意义 三、项目概述:智能绘画助手 四、技术栈和工具 五、数据准备 六、模型训练 1. 数据预处理 2. 构建和训练模型 七、智能绘画助手的实现 1. 搭建Flask应用 2. 客户端界面 八、扩展功能与优化 1…

【算法】贪心算法——柠檬水找零

题解:柠檬水找零(贪心算法) 目录 1.题目2.题解3.参考代码4.证明5.总结 1.题目 题目链接:LINK 2.题解 分情况讨论 贪心算法 当顾客为5元时,收下当顾客为10元时,收下10元并找回5元当顾客为20元时,收下20元并找回10…

Fastjson 反序列化漏洞[1.2.24-rce]

漏洞复现环境搭建请参考 http://t.csdnimg.cn/vSaaw kali切换jdk版本请参考 Kali安装JAVA8和切换JDK版本的详细过程_kali安装jdk8-CSDN博客 漏洞原理 Fastjson提供的com.sun.rowset.JdbcRowSetImpl类下的dataSourceName方法支持传入一个RMI/LDAP源,支持远程调用。…

基础—SQL—DQL(数据查询语言)聚合函数

一、引言 一般情况下,我们在进行分组查询的时候,一般配合着聚合函数来进行操作,所以先了解和学习聚合函数再学习和操作分组查询。 二、DQL—聚合函数 1、介绍 聚合函数指的是讲一列数据作为一个整体,进行纵向的计算。 2、常见…

GiantPandaCV | FasterTransformer Decoding 源码分析(六)-CrossAttention介绍

本文来源公众号“GiantPandaCV”,仅用于学术分享,侵权删,干货满满。 原文链接:FasterTransformer Decoding 源码分析(六)-CrossAttention介绍 GiantPandaCV | FasterTransformer Decoding 源码分析(一)-整体框架介绍-CSDN博客 …

HttpSecurity 是如何组装过滤器链的

有小伙伴们问到这个问题,简单写篇文章和大伙聊一下。 一 SecurityFilterChain 首先大伙都知道,Spring Security 里边的一堆功能都是通过 Filter 来实现的,无论是认证、RememberMe Login、会话管理、CSRF 处理等等,各种功能都是通…

数字信号处理实验四:IIR数字滤波器设计及软件实现

一、实验目的 1. 掌握MATLAB中进行IIR模拟滤波器的设计的相关函数的应用; 2. 掌握MATLAB的工具箱中提供的常用IIR数字滤波器的设计函数的应用; 3.掌握MATLAB的工具箱中提供的模拟滤波器转数字滤波器的相关的设计函数的应用。 二、实验内容 本实验为…

微软远程连接工具:Microsoft Remote Desktop for Mac 中文版

Microsoft Remote Desktop 是一款由微软开发的远程桌面连接软件,它允许用户从远程地点连接到远程计算机或虚拟机,并在远程计算机上使用桌面应用程序和文件。 下载地址:https://www.macz.com/mac/5458.html?idOTI2NjQ5Jl8mMjcuMTg2LjEyNi4yMz…

AI网络爬虫:无限下拉滚动页面的另类爬取方法

现在很多网页都是无限下拉滚动的。可以拉动到底部,然后保存网页为mhtml格式文件。 接着,在ChatGPT中输入提示词: 你是一个Python编程高手,要完成一个关于爬取网页内容的Python脚本的任务,下面是具体步骤: …

vs - 在win10中安装vs2013update5

文章目录 vs - 在win10中安装vs2013update5概述笔记直接安装vs2013-update5报错先安装vs2013原版安装 vs2013 update5测试备注END vs - 在win10中安装vs2013update5 概述 用VS2019写的程序,在早期windows(e.g. win7, win8.1)上安装时,需要UCRT。 UCRT是…

unity2020打包webGL时卡进程问题

我使用的2020.3.0f1c1,打包发布WEB版的时候会一直卡到asm2wasm.exe这个进程里,而且CPU占用率90%以上。 即使是打包一个新建项目的空场景也是同样的问题,我尝试过一直卡在这里会如何,结果还真打包成功了。只是打包一个空场景需要20…

latex bib引参考文献

1.bib内容 2.sn-mathphys-num是官方的参考文献格式 3.不用导cite包,文中这么写 4.end document前ckwx是自己命名的bib的名字

【自动化运维】不要相信人,把所有的东西都交给机器去处理

不积跬步,无以至千里;不积小流,无以成江海。 大家好,我是闲鹤,十多年开发、架构经验,先后在华为、迅雷服役过,也在高校从事教学3年;目前已创业了7年多,主要从事物联网/车…

【运维项目经历|023】Docker自动化部署与监控项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的问题 问题1:项目周期是多久? 问题2:服务器部署架构方式及数量配置…

【SpringMVC】_SpringMVC实现用户登录

目录 1、需求分析 2、接口定义 2.1 校验接口 请求参数 响应数据 2.2 查询登录用户接口 请求参数 响应数据 4、服务器代码 5、前端代码 5.1 登录页面login.html 5.2 首页页面index.html 6、运行测试 1、需求分析 用户输入账号与密码,后端校验密码是否正确&a…

FineBi导出Excel后台版实现

就是不通过浏览器,在后台运行的导出 参考文档在:仪表板查看接口- FineBI帮助文档 FineBI帮助文档 我这里是将这个帮助文档中导出的excel文件写到服务器某个地方后,对excel进行其他操作后再下载。由于原有接口耦合了HttpServletRequest req, HttpServletResponse res对象,…

可变参数

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中,还可以定义可变参数。可变参数也称不定长参数,即传入函数中的实际参数可以是任意多个。 定义可变参数时&#xf…

SRS视频服务器应用研究

1.SRS尝试从源码编译启动 1.1.安装ubuntu 下载镜像文件 使用VMWare安装,过程中出现蓝屏,后将VM的软件版本从15.5升级到17,就正常了。 1.2.更新ubuntu依赖 1.3.下载源码 官方推荐下载develop 切换到用户目录,开始安装 安装后 突然…