知识

当前微信小程序依然比较火热,因为不需要单独安装APP即可以使用,并且有着庞大的微信用户群体,所以在推广和运营方面还是比较方便的。不仅企业、政府等组织可以参与微信小程序

您当前位置>主页 > 知识 > 小程序 >

微信小程序详细开发流程,有这篇就够了

发表时间:2020-06-02 21:48

文章来源:admin

浏览次数:

当前微信小程序依然比较火热,因为不需要单独安装APP即可以使用,并且有着庞大的微信用户群体,所以在推广和运营方面还是比较方便的。不仅企业、政府等组织可以参与微信小程序的开发、使用,个人也是可以的,下面针对小程序的开发流程以及上线部署,做个详细的介绍。

0、一切开始前的准备

一个未注册过任何微信公众账号的邮箱,如果暂时没有,可以随便找个邮件服务商注册一个,主要是为了激活小程序使用。

1、申请小程序开发账号

进入微信公众平台首页(https://mp.weixin.qq.com/),点击右上角的【立即注册】,如图:

微信小程序详细开发流程,有这篇就够了

 

进入到选择注册账号类型页面,这里我们选择【小程序】,如图:

微信小程序详细开发流程,有这篇就够了

 

进入到注册信息页面,在这里我们输入开始前准备好的邮箱:

微信小程序详细开发流程,有这篇就够了

 

点击【注册】按钮,进入到邮箱激活提示页:

微信小程序详细开发流程,有这篇就够了

 

此时我们登陆注册的邮箱,进行小程序账号的激活:

微信小程序详细开发流程,有这篇就够了

 

点击邮件中的链接地址即可,此时自动跳转到小程序注册的信息登记页:

微信小程序详细开发流程,有这篇就够了

 

在这里我们选择【个人】选项,此时会出现主体登记信息:

微信小程序详细开发流程,有这篇就够了

 

在此,我们需要输入真实的用户信息,并且需要用微信扫描添加管理员,弹出一个提示弹层:

微信小程序详细开发流程,有这篇就够了

 

点击【确定】,则会进入到小程序的管理后台,说明小程序的账号已经注册完成。

微信小程序详细开发流程,有这篇就够了

 

在小程序后台,我们需要维护小程序的一些基本信息,比如小程序的名称和logo等信息:

微信小程序详细开发流程,有这篇就够了

 

在小程序的后台,我们需要找到我们的AppID,在下面的小程序开发工具中会用到:

微信小程序详细开发流程,有这篇就够了

 

2、下载开发者工具

进入开发者工具下载页面(
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html),选择适合自己电脑的版本进行下载:

微信小程序详细开发流程,有这篇就够了

 

下载安装后,打开开发者工具,第一次进入需要微信扫码,需要用注册时绑定的微信账号扫描确认:

微信小程序详细开发流程,有这篇就够了

 

扫描成功后,进入到创建项目页面,输入小程序的AppID,并选择一个本地存储代码的路径:

微信小程序详细开发流程,有这篇就够了

 

点击【创建】即进入到开发者工具代码编写页面:

微信小程序详细开发流程,有这篇就够了

 

在这个工具中,可以自由充分发挥前端的开发技能,开发出自己想要的小程序。具体可以参考小程序的开发文档(
https://developers.weixin.qq.com/miniprogram/dev/framework/)。

小程序开发,不可避免的要调用接口,在开发模式下,可以调用本地的接口,但是要上线运营的话,就必须把接口推送到公网环境下,针对小程序的接口,必须要求是https域名,下面我们一起来搞定Http环境搭建。

3、申请Https证书

要想实现Https安全访问,首先要有域名证书,证书有收费的也有免费的,针对个人开发,申请免费的Https证书即可,目前很多云服务厂商都支持申请免费的Https证书,在这里我们使用腾讯云的证书。

进入到腾讯云的证书选购页面(
https://cloud.tencent.com/product/ssl/ssl-types),

微信小程序详细开发流程,有这篇就够了

 

点击【立即选购】,进入到选购页面:

微信小程序详细开发流程,有这篇就够了

 

选择【域名型免费版(DV)】,然后点击【快速免费申请】,进入到证书申请页面:

微信小程序详细开发流程,有这篇就够了

 

在【通用名称】输入完整的域名地址,如:api.**.**.com,点击【下一步】进入身份验证页面:

微信小程序详细开发流程,有这篇就够了

 

保留默认选择【手动DNS验证】,点击【确认申请】:

微信小程序详细开发流程,有这篇就够了

 

此时说明域名证书申请成功,点击【查看证书详情】,进入详情页面:

微信小程序详细开发流程,有这篇就够了

 

此时,我们距离证书申请成功还差最后一步,就是进行域名的解析,在域名解析中添加一条记录:

微信小程序详细开发流程,有这篇就够了

 

域名解析中的信息要根据证书申请中的信息来填写,点击【确定】,此时回到腾讯云证书申请页面,进行域名解析结果的诊断:

微信小程序详细开发流程,有这篇就够了

 

此时说明域名解析正确,此时我们稍等几分钟,证书就会申请下来:

微信小程序详细开发流程,有这篇就够了

 

我们把证书下载下来,发现针对各种部署方式都有支持,此时我们选择nginx方式:

微信小程序详细开发流程,有这篇就够了

 

nginx文件夹中,会有两个文件:

微信小程序详细开发流程,有这篇就够了

 

4、Https搭建

首先要有一台自己的云服务器,在云服务器上安装Nginx,参考文章【云服务器Linux安装Nginx】,把上一步申请下来的Https证书的文件上传到云服务器的一个目录下,修改nginx的配置,使得nginx支持Https:

vi /usr/local/nginx/conf/nginx.conf

在配置文件中增加如下server配置:

    server {
        listen 443 ssl;
        server_name api.**.**.com;  # 申请证书的完整域名
        ssl_certificate ****.crt;   # crt 文件绝对路径
        ssl_certificate_key ****.key;  # key文件绝对路径
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
        ssl_prefer_server_ciphers on;

        location /api/ {
            proxy_pass http://localhost:8899;   # 接口本地端口
        }
    }

修改完nginx配置,需要重启下才可以生效:

./sbin/nginx -s reload

操作完如上这些步骤,我们的接口站点就可以使用https访问了:

微信小程序详细开发流程,有这篇就够了

 

5、接口发布

接下来,接口部署,就因人而异了,只要保证端口和nginx中配置的统一即可。

因我接口使用的是java语言,需要安装jdk【可参考文章:云服务器Linux安装jdk】,使用Xshell工具把本地编译好的jar包上传并启动即可。

6、小程序提交审核、发布

接下来是把本地开发好的小程序推送到线上,在开发者工具中集成了代码上传的功能,点击【上传】:

微信小程序详细开发流程,有这篇就够了

 

会弹出本次修改的说明:

微信小程序详细开发流程,有这篇就够了

 

填写相关的信息后点击【上传】按钮,则小程序代码提交成功。

在小程序后台的【版本管理】,可以看到本次提交的信息,此时可以【提交审核】:

微信小程序详细开发流程,有这篇就够了

 

此时就进入了小程序的审核阶段,具体审核时长每次不一样,每次也都不一定能审核成功,如果驳回了只要根据驳回的原因进行修改,修改完后重新上传、提交审核即可。

小程序审核成功后,则可以发布上线了,在小程序管理后台,可以点击发布。

7、可以通过小程序助手进行发布

如果不在电脑旁,可以使用【小程序助手】小程序在手机上进行提交审核、发布等操作,微信还是做的很人性的!

写在最后

好了,到这里,一个小程序开发的基本流程都已经涉及到了:小程序注册、代码开发、接口Https部署、代码上传、代码审核和发布。

相关项目查看更多