SpringCloud研发微信公众平台-前端环境搭建

拼搏现实的明天。 2022-10-13 12:45 63阅读 0赞

# SpringCloud研发微信公众平台-前端环境搭建 #

本次课程前端技术栈采用 uni-app + uview 框架进行研发。

研发工具采用HBuilderx工具

## 研发工具下载 ##

[HBuilderx工具][HBuilderx] 官方下载地址，这里推荐下载App开发版，下载对应的平台版本即可。

## 工程创建 ##

打开安装好的编译器HBuilderx。  
![image][]  
创建完成后，项目目录如下

![image][image 1]

## 项目本地运行 ##

### 微信小程序方式运行 ###

在编辑器中，选择运行–运行到小程序模拟器–微信开发者工具

![image][image 2]

这个过程第一次时间较长，如出现一下页面，则项目运行成功。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DlMQHhCl-1625614844704)(http://pub.julywhj.cn/run-ok.png)\]

### H5 方式运行 ###

上面我们将代码运行在微信小程序中，接下来我们将代码打包成H5,然后将H5页面挂载在微信公众号上。首先我们进行项目打包操作；

![image][image 3]

输入标题和项目名称

![image][image 4]

点击发行，会进行自动操作，打包完成后，如下图，拷贝h5目录下文件，并上传服务器。

![image][image 5]

上传服务器`/root/h5/`目录下，可以自定定义

![image][image 6]

#### 配置服务器nginx ####

下面贴出nginx配置

user  root;
    worker_processes  1;
    
    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    http {
    
        ssl_session_cache   shared:SSL:10m;
        ssl_session_timeout 10m;
    
    	server {
     	   	 listen 80;
       		 server_name julywhj.cn;
       		 rewrite ^(.*)$ https://${server_name}$1 permanent;
    	       }
    
    	server {
    		listen			443 ssl;
    		server_name		julywhj.cn;
    		ssl_certificate     	/etc/ssl/https/julywhj.cn.pem;
        	ssl_certificate_key 	/etc/ssl/https/julywhj.cn.key;
        	ssl_protocols       	TLSv1 TLSv1.1 TLSv1.2;
        	ssl_ciphers         	HIGH:!aNULL:!MD5;
    
    		location / {
    			root /root/h5;
    			index /index.html;
    			include /etc/nginx/mime.types;
                default_type application/octet-stream;
    		}
    
    		location /wstools.html {
    			root /root/workspace;
    			index /wstools.html;
    			include /etc/nginx/mime.types;
                default_type application/octet-stream;
    		}
    	}
    }

以上配置包含https服务配置。  
配置好后我们重新加载下nginx配置文件，使用`nginx -s reload`

在浏览器中打开输入的域名信息，我们可以看到如下页面。

![image][image 7]

这里我们h5部署成功。

## 集成微信公众号 ##

将我们部署好的链接，配置在微信公众号菜单项即可。

{
        "button": [
            {
                "type": "click", 
                "name": "今日歌曲", 
                "key": "V1001_TODAY_MUSIC"
            }, 
            {
                "name": "菜单", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "H5DEMO", 
                        "url": "https://julywhj.cn/"
                    }
                ]
            }
        ]
    }

通过我们自定义的h5菜单链接，点击进入。  
![image][image 8]

![image][image 9]

我们看到，我们开发的h5端代码可以正常在微信公众号中运行。

更多内容请查看 [Julywhj的博客][Julywhj]期待您的光顾。

[HBuilderx]: https://www.dcloud.io/hbuilderx.html
[image]: /images/20221005/de82bd0dfdfe42d29e43a0866302fea9.png
[image 1]: /images/20221005/9c3b9f857b124378b6da6d192e7c4548.png
[image 2]: /images/20221005/455dd0cf69ea4c049722d5a2434a47b8.png
[image 3]: /images/20221005/57e3db4da809493ead617d7770768a2e.png
[image 4]: /images/20221005/40deb50a967f4983bd28d3a86b505013.png
[image 5]: /images/20221005/aee72880f41e485fa1f1737f43a250cf.png
[image 6]: /images/20221005/ff5f87e95e4e457bb859173a39056d2b.png
[image 7]: /images/20221005/5a26a4e18ea343b994c1db2363639f02.png
[image 8]: /images/20221005/a68b9f255d7846c5b87c086c09cb21fa.png
[image 9]: /images/20221005/c08380ffe1c443dc90beab140e4945e4.png
[Julywhj]: https://bs.julywhj.cn/#/