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

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

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

研发工具采用HBuilderx工具

研发工具下载

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

工程创建

打开安装好的编译器HBuilderx。

创建完成后，项目目录如下

项目本地运行

微信小程序方式运行

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

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

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

H5 方式运行

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

输入标题和项目名称

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

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

配置服务器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

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

这里我们h5部署成功。

集成微信公众号

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

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

通过我们自定义的h5菜单链接，点击进入。

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

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