纯小白入门微信小程序开发

最新推荐文章于 2025-02-22 20:59:27 发布

小舟同学

最新推荐文章于 2025-02-22 20:59:27 发布

阅读量2.4k

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_44021875/article/details/111247707

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

入门微信小程序开发

前言
一、微信小程序的申请注册
二、微信小程序的内容设置
三、微信开发者工具的下载
四、微信小程序前端框架的搭建/开发/上传/发布
五、资料大集合

前言

前些日子，公司让我部署一下微信小程序，自己之前从来没有研究过微信小程序，所以一开始不知道如何部署，可以说是一个纯正小白了！于是我就先去百度大概了解一下微信小程序，然后后面又看官方文档，心里就不再那么恐惧了。之前有了解过微信公众号的开发，后面才知道原来微信官方有专门的一键生成的应用，不是编程的人也可以轻松学会微信公众号。
但微信小程序有所不同了，它目前还是比较麻烦的，官方是没有模板的，是属于有着自己的后台的，所以微信小程序的内容需要自己设计和开发。一系列操作完成之后是利用小程序后台进行发布。
简要说明它的一个步骤：
1.在https://mp.weixin.qq.com/.申请注册微信小程序

2.申请成功后，在小程序后台设置微信小程序内容

3.内容设置完成后，利用微信开发工具进行微信小程序开发

4.开发成功后，利用微信开发工具将代码上传到微信小程序后台

5.上传成功后，在小程序后台进行提交小程序审核

6.审核成功后，在小程序后台进行提交小程序上线

7.上线成功后，就可以在微信相关搜索栏看见啦（一般需要等几分钟）

以下，将详细介绍我了解小程序的过程!

一、微信小程序的申请注册

1.打开微信公众平台官网首页（mp.weixin.qq.com），点击小程序进入
在这里插入图片描述
2.点击进去后，鼠标下滑看到此内容，可以认真看一下接入流程，大概的一个微信小程序内容设置就这些

3.进行微信小程序信息登记，注册成功后返回首页https://mp.weixin.qq.com/登录
（注：关于小程序注册的账号类型可以参考微信官方说的具体区别）
在这里插入图片描述

二、微信小程序的内容设置

首先，到微信公众平台官网首页进行小程序后台的登录，然后进行内容设置

1.基本信息设置

找到微信小程序后台的设置选项，点击得到以下画面
在这里插入图片描述

2.开发设置

找到开发–>开发工具–>选择选项卡为开发设置进行服务器域名和业务域名的配置
在这里插入图片描述

关于微信小程序中服务器域名和业务域名的区别

（1）服务器域名：就是去请求后端数据的域名
就是企业在申请域名时对应绑定的服务器，比如XX公司在阿里云上申请了一个域名，那么阿里云会要求关于绑定的服务器是哪一个，然后这个服务器的HTTPS访问路径就是这个域名。

微信小程序不支持HTTP协议，而Tomcat的默认地址是HTTP协议的，如果要改成HTTPS访问的协议，需要自行修改！
有关Tomcat配置 https SSL证书可以参考该文章：https://www.cnblogs.com/cx-code/p/10059109.html.

（2）业务域名：是小程序框架里其他H5地址的URL的域名或者网页里面的iframe的域名
校验直接这样填写就OK
在这里插入图片描述

业务域名配置成功最容易忽略的2点：
A、新备案的域名必须超过24个小时后才可以填写到业务域名下
B、校验文件必须放置服务器启动的根目录下，就像这样https://服务器域名/hwcLEi6Ok1.txt能访问成功才可以配置不出错
在这里插入图片描述

三、微信开发者工具的下载

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html.

个人觉得稳定版的好些！根据需要选择下载后一路安装直到成功即可
在这里插入图片描述

四、微信小程序前端框架的搭建/开发/上传/发布

1、搭建（新建）微信小程序框架

使用云服务和不使用云服务的区别

云服务：
现微信官方推出了云开发，对于云开发的话我认为前端开发工程师比较适合这个，主要就是方便了前端开发工程师，如果想要具体了解云开发的概念的话，可以看看该作者文章，非常详细。
链接：https://blog.youkuaiyun.com/weixin_42949808/article/details/107287606.
不使用云服务：
微信小程序的结构简单些，便于理解，没有包含云服务那么多复杂的东西，个人觉得不是专门的前端开发工程师，只是部署的话，那么采用这个就足够了

以下采用的是不使用云服务的小程序结构：
（1）、创建小程序
1.1 前往微信小程序后台–>设置—>鼠标下滑可以看到账户信息,复制AppID
在这里插入图片描述
1.2 到微信开发者工具创建小程序
注意：一定要选择不使用云服务这一选项

1.3 创建成功后，微信小程序应出现的结构

微信小程序代码结构说明

在这里插入图片描述

2、开发微信小程序

小程序代码开发框架类型

a.微信官方组件
b.其他前端框架或者页面
c.利用第三方工具生成（一般是收费的）

微信小程序开发框架选择

本公司前端小姐姐采用的是b方式，用的是普通的HTML页面设计小程序，然后再利用微信开发者工具中建立好的微信小程序框架进行H5地址引用，于是小程序就算搭建好了
注意：微信小程序后台要已经配置了服务器地址，因为HTML写的页面是打包放在服务器上的Tomcat目录上的，只是利用了微信小程序框架进行了H5地址引用
简单如下操作：
在这里插入图片描述
该配置参考的链接是：https://blog.youkuaiyun.com/jlq_diligence/article/details/84129034.