微信小程序详细开发教程

谁践踏了优雅 2023-06-21 13:24 11阅读 0赞

全栈开发之路怎么能少得了小程序开发呢，下面我将详细介绍一个微信小程序从开发的部署的全过程；

**一、在开始之前，先解释以下几个误区；**

1.微信小程序个人号是可以开发并发布的；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70][]

2.微信小程序发布的体验版和正式发布版本必须要https协议，也就是说必须要有ssl证书；

3.微信小程序没有说必须要购买腾讯云服务器，不管是用阿里云还是其他服务器均可，只要是一台公网可以访问的服务器即可；

4.微信小程序编码开发不一定非得用微信开发者工具，但是调试和发布必须要使用微信开发者工具；

5.开发时尽量阅读微信小程序文档解决问题 [地址][Link 1]

**二、下面开始正式开始小程序的开发搭建流程；**

1.先去注册一个邮箱，不管是网易邮箱或者qq邮箱均可，只要能收到验证的邮箱即可；[注册地址][Link 2]

2.登录进入小程序后台管理 [地址][Link 3]

3.利用后台的地址生成小程序初始代码 在后台右上角；

![20191212222532307.png][]

4.下载微信开发者工具，并导入项目；[下载地址][Link 4]

5.微信小程序导入后，可通过微信开发者工具、webstorm等均可进行开发

**三、微信小程序如何部署**

1.开发者工具左上角有个推送按钮，会提示输入版本号，输入完成后如果推送成功则表示文件大小合理，因为微信小程序的最大是不能超过2M;

2.配置https

（1）申请https证书；阿里云购买的域名可以进入域名页面免费申请一次证书，使用期为1年；也可以自己购买证书，不过学习阶段可能没有多大必要；

（2）nginx代理，在nginx.conf中添加如下配置，注意的就是cert.pem和cert.key都是是放在nginx.conf的同级目录cert中；

server {
            listen 443;
            server_name xx.fwerf.cn;
            ssl on;
            ssl_certificate   cert/cert.pem;
            ssl_certificate_key  cert/cert.key;
            ssl_session_timeout 5m;
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
            ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
            ssl_prefer_server_ciphers on;
            location / {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_set_header X-NginX-Proxy true;
    
                proxy_pass http://127.0.0.1:9009/;
                proxy_redirect off;
            }
        }

3.完成第2步后，就是要在小程序的后台配置安全域名访问，这点很重要，我就是踩了这个坑在开发的时候总是找不到问题在哪里。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70 1][]

配置安全域名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70 2][]

4.完成上述配置后即可在版本管理里面提交发布

![20191212224615864.png][]

5.至此即完成了微信小程序的发布；下面是开发的一个demo供大家参考，欢迎大家留言评论；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212221821748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy,size_16,color_FFFFFF,t_70
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/
[Link 2]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[Link 3]: https://mp.weixin.qq.com/
[20191212222532307.png]: https://img-blog.csdnimg.cn/20191212222532307.png
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191212224217928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191212224356367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy,size_16,color_FFFFFF,t_70
[20191212224615864.png]: https://img-blog.csdnimg.cn/20191212224615864.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191212224852849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbl9DaGFuZGVy,size_16,color_FFFFFF,t_70