个人开发小程序,win10使用不合法https访问的全部流程记录

本文仅针对个人开发小程序使用,本机开发测试,不需要买服务,域名。

注意事项:

1,nginx的环境变量和nginx.conf文件配置

2,去掉小程序中不合法的域名的校验

以下是正文:

1,申请微信小程序权限。。。

2,下载nginx,我下载的是windows-1.12.2版本, 官网:http://nginx.org/en/download.html

个人开发小程序,win10使用不合法https访问的全部流程记录_第1张图片


3,配置nginx反向代理访问tomcat:https://blog.csdn.net/wild46cat/article/details/52840125

个人开发小程序,win10使用不合法https访问的全部流程记录_第2张图片

在nginx目录下,有nginx.exe的地方,使用Shift健加鼠标右击,选择在此打开命令行

输入start nginx 启动nginx,在网页中输入localhost:8989,加上自己的接口链接,就可以看到数据了

个人开发小程序,win10使用不合法https访问的全部流程记录_第3张图片


4,再配置https请参考:https://blog.csdn.net/leedaning/article/details/71125559

个人开发小程序,win10使用不合法https访问的全部流程记录_第4张图片

在命令行输入nginx -s stop关闭nginx,再重新开启start nginx

直接找个项目启动,使用https的链接访问接口,就可以使用了。

(经测试发现重启nginx无效,所有就使用这种关闭再开启的方式)

个人开发小程序,win10使用不合法https访问的全部流程记录_第5张图片

我把两个配置整合了一下,下面是完整的nginx.conf文件配置:

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;
    fastcgi_buffers 8 128k;

    server {
        listen       8989;
        server_name  localhost:8080;

        location / {
                    root   html;
            index  index.html index.htm;
            proxy_pass http://127.0.0.1:8080/;
        }
    }

# HTTPS server
#
    server {
        listen   443 ssl;
    #这里的域名要和hosts中配置的相同
        server_name    wx.kikyou.cn;
        ssl_certificate       D:/weixin/nginx/ssl/service.crt;
        ssl_certificate_key    D:/weixin/nginx/ssl/service.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        server_name_in_redirect off;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        location / {
            proxy_pass http://127.0.0.1:8989/;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

}

本地的hosts文件内容:直接加在文件最后面,其中的wx.kikyou.cn需要对应第二段server中的server_name wx.kikyou.cn; 

10.73.120.2 axineczihslb1
10.73.120.3    axineczappmocalb1
10.73.120.4    axinweb
127.0.0.1  wx.kikyou.cn


5,打开小程序开发工具,创建一个测试小程序,登录小程序

个人开发小程序,win10使用不合法https访问的全部流程记录_第6张图片

在kikyou处加一个触发事件,去访问接口

【注意】访问接口前,需要把https校验去掉,否则无法访问,因为这样的https不是合法的。

点击详情,勾选不校验安全域名这一项,如果找不到详情,请点击界面--工具栏,就可以看到了。

个人开发小程序,win10使用不合法https访问的全部流程记录_第7张图片

userManage.js

var url = "https://wx.kikyou.cn/system/user/info";

Page({
    data: {
        hidden: true,
                list: [],
        scrollTop: 0,
                scrollHeight: 0
    },
    onLoad: function () {
        console.log("成功跳转页面");
        //  这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
        var that = this;
        wx.getSystemInfo({
                success: function (res) {
            that.setData({
                    scrollHeight: res.windowHeight
    });
            wx.request({
                    url: url,
                    data: {
                id: 1
            },
            success: function (res) {
                console.info(res);
                var list = res.data.data;
                console.info(list);
                that.setData({
                        list: list
        });
                // page++;
                that.setData({
                        hidden: true
        });
                console.log(that.data)
            }
    });
        }
});
    }
})

UserManage.wxml
<view class="container">
  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
    class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
    <view class="item" wx:for="{{list}}">
      <view class="text">
        <text class="title">{{item}}
        
      
    
  scroll-view>
  <view class="body-view">
    <loading hidden="{{hidden}}" bindchange="loadingChange">
    加载中...
    
  
返回结果:

个人开发小程序,win10使用不合法https访问的全部流程记录_第8张图片

完成了✿✿ヽ(°▽°)ノ✿

第一次接触小程序和前端,希望自己以后能有更多更优质的分享(#^.^#)


你可能感兴趣的:(小程序)