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

前言

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

3、上传微信小程序到微信小程序后台

（1）.检查AppID，核对是否和小程序后台的一样，不一样就修改一下

（2）.把以下去掉勾，微信小程序在刚刚调试阶段的时候，可能有些域名会不合法，去掉为了避免不必要的麻烦

（3）.上传微信小程序到微信小程序后台

这里是因为之前提交过一次，所以有更新类型的选项。

（4）、上传后，到小程序后台查看上传版本
审核成功后，可以选择不先进行线上发布，选择体验版进行体验，点击体验版会有一个体验二维码，该二维码只能微信小程序后台中已添加的体验者使用和查看

如何添加体验者

如图操作

4、线上发布

审核成功后，需要再到小程序的后台来进行人工线上发布，发布成功后会到线上版本那一栏

五、资料大集合

入门微信小程序开发视频：
https://www.imooc.com/learn/974.

从零开始：微信小程序新手入门宝典（里面有的知识较老）
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1989.

微信小程序解决方案专辑
http://www.wxapp-union.com/special/solution.html.

微信小程序Demo：小程序增删改，登录，注册，图片上传
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=13040.
学习小程序的网站推荐
http://www.wxapp-union.com/portal.php.

¹

---

1. 编写不易，如果有帮助到的话，可以关注，点赞和收藏哦~ ↩︎