小程序模板网

ngrok 服务搭建内网穿透,多张image图片排列有空隙解决方案

发布时间:2018-02-06 15:34 所属栏目:小程序开发教程


我们建议下载的时候最好把文件放在一个比较容易找的地方,如果是我,我会更改一下文件名,而且是英文的。

第二步、解压到相应文件夹 
建议直接解压到d盘根目录,这样你就可以直接cd 进入这个客户端文件夹了,比如我们的客户端,你需要 cd 64bits_client 。(我的放置在F:\exploitTools\newNgrok)

第三步、打开命令行 
如果想用系统自带的命令行,点击开始,输入cmd;如果有git bash,相信我也不用多说了。

第四步、进入刚才的解压包 
执行 ngrok -config=ngrok.cfg -subdomain xxx 80 //(xxx 是你自定义的域名前缀)。

第五步、(补充)想好你的唯一域名 
我还是想提醒一下,确保你的域名前缀唯一,这里的方式有很多,比如你的qq或者你的手机号码,甚至你的微信号,这可以对你的项目起到一定的保护作用。

第六步、(补充)打开你的本地服务器 
比如经常有小伙伴会忘记打开自己的apache或者nginx等等,这会让你浪费很多时间,很不值得。不妨先访问127.0.0.1:80确保访问正常,再开始使用ngrok。

有问题可以进这个相应网站咨询,ngrok.2bdata.com

工具地址:http://files.cnblogs.com/files/tianzhongshan/newNgrok.zip

二:多张image图片排列有空隙解决方案

分享者:云阶月地,原文地址 
上个项目是卖东西的,商品详情传的组图,排上去后发现每张图片下有大概10+rpx的下边距,显得很不好看。查了一下貌似是
小程序的默认样式。没找到解决方案,看到有说用微信编辑器传图的,好像很麻烦就没去试,自己琢磨了两种方法。

原本不做处理的样子: 


  1. .det-pics-w image {
  2. width: 100%;
  3. min-height: 630rpx;
  4. }
  5.  
  6. .det-pics-w {
  7. position: relative;
  8. }

第一种解决方案:flex


  1. .det-pics-w image {
  2. width: 100%;
  3. min-height: 630rpx;
  4. }
  5.  
  6. .det-pics-w {
  7. position: relative;
  8. display: flex;
  9. flex-direction: column;
  10. }

第二种解决方式:margin-top负值


  1. .det-pics-w image {
  2. width: 100%;
  3. min-height: 630rpx;
  4. margin-top: -12rpx;
  5. }
  6.  
  7. .det-pics-w {
  8. position: relative;
  9. }

两种都可以去掉这个间隙。效果如下 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/21629.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询