本文仅针对个人开发小程序使用,本机开发测试,不需要买服务,域名。
注意事项:
1,nginx的环境变量和nginx.conf文件配置
2,去掉小程序中不合法的域名的校验
以下是正文:
1,申请微信小程序权限。。。
2,下载nginx,我下载的是windows-1.12.2版本, 官网:http://nginx.org/en/download.html
3,配置nginx反向代理访问tomcat:https://blog.csdn.net/wild46cat/article/details/52840125
在nginx目录下,有nginx.exe的地方,使用Shift健加鼠标右击,选择在此打开命令行
输入start nginx 启动nginx,在网页中输入localhost:8989,加上自己的接口链接,就可以看到数据了
4,再配置https请参考:https://blog.csdn.net/leedaning/article/details/71125559
在命令行输入nginx -s stop关闭nginx,再重新开启start nginx
直接找个项目启动,使用https的链接访问接口,就可以使用了。
(经测试发现重启nginx无效,所有就使用这种关闭再开启的方式)
我把两个配置整合了一下,下面是完整的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,打开小程序开发工具,创建一个测试小程序,登录小程序
在kikyou处加一个触发事件,去访问接口
【注意】访问接口前,需要把https校验去掉,否则无法访问,因为这样的https不是合法的。
点击详情,勾选不校验安全域名这一项,如果找不到详情,请点击界面--工具栏,就可以看到了。
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) } }); } }); } })
<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}}</text> <!-- <text class="title">{{item.userName}}</text> <text class="description">{{item.email}}</text> --> </view> </view> </scroll-view> <view class="body-view"> <loading hidden="{{hidden}}" bindchange="loadingChange"> 加载中... </loading> </view> </view>返回结果:
完成了✿✿ヽ(°▽°)ノ✿
第一次接触小程序和前端,希望自己以后能有更多更优质的分享(#^.^#)