<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>weipoo</title>
  
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://yoursite.com/"/>
  <updated>2019-09-10T06:11:23.000Z</updated>
  <id>http://yoursite.com/</id>
  
  <author>
    <name>weipo</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>最强干货系列-小程序调用微信支付问题</title>
    <link href="http://yoursite.com/2019/09/10/%E6%9C%80%E5%BC%BA%E5%B9%B2%E8%B4%A7%E7%B3%BB%E5%88%97-%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%B0%83%E7%94%A8%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98%E9%97%AE%E9%A2%98/"/>
    <id>http://yoursite.com/2019/09/10/最强干货系列-小程序调用微信支付问题/</id>
    <published>2019-09-10T01:51:33.000Z</published>
    <updated>2019-09-10T06:11:23.000Z</updated>
    
    <content type="html"><![CDATA[<p>目前已知的调用微信支付的方式：</p><ol><li>通用的方式就是小程序直接发起微信支付就行；</li><li><p>通过小程序访问某支付域名网站实现目标发起微信支付：<br>小程序使用web-view组件访问目标网站后，目标网站发起微信支付就行。</p><p><strong>注意：</strong>这里有一个最大的坑点，直接通过web-view组件访问是不能发起微信支付的，但是打开调试模式或者不校验合法域名是可以发起的！！等真正上了生产才知道，根本不能发起微信支付！<br><strong>解决办法：</strong><br>让目标网站js中检测到当前环境是小程序后，把发起微信支付的必要参数封装好后通过微信小程序那边的sdk把参数请求封装好后跳转到我们小程序这边的目标页面，就可以通过我们的页面发起微信支付了。</p></li></ol><p><strong>注意事项：</strong></p><p>能够成功调用微信支付，必须得保证下单的appId和付款时候的appId相同（或者属于同一商户号），否则一切白搭！</p><h3 id="针对方式二调用微信支付的解决方案"><a href="#针对方式二调用微信支付的解决方案" class="headerlink" title="针对方式二调用微信支付的解决方案"></a>针对方式二调用微信支付的解决方案</h3><h4 id="需要解决的问题："><a href="#需要解决的问题：" class="headerlink" title="需要解决的问题："></a>需要解决的问题：</h4><p>通过h5访问的形式访问目标支付网站后发起小程序微信支付。</p><h4 id="解决方案："><a href="#解决方案：" class="headerlink" title="解决方案："></a>解决方案：</h4><p>在最终调用统一支付域名下的页面中添加<strong>微信小程序调用微信支付业务代码</strong>（自己写好后给到目标网页，下面会给出示例），代码将会判定当前访问环境是否为小程序，如果判定为小程序访问环境的话，将会把调用微信支付的参数传递到小程序具体支付页面来发起微信支付，该方案适用于所有小程序调用微信支付，也方便后期扩展更多小程序业务。</p><h4 id="解决办法："><a href="#解决办法：" class="headerlink" title="解决办法："></a>解决办法：</h4><ol><li><strong>微信小程序端：</strong>    <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">目录结构</span><br><span class="line">project-name</span><br><span class="line">├── pages</span><br><span class="line">│   ├── index               // demo演示首页</span><br><span class="line">│   ├── web-page            // h5访问通用页</span><br><span class="line">│   ├── wxpay               // 发起微信支付页</span><br><span class="line">├── app.js                  </span><br><span class="line">├── app.json</span><br><span class="line">├── app.wxss   </span><br><span class="line">└── project.config.json     // 小程序配置文件</span><br></pre></td></tr></table></figure></li></ol><p><a href="https://github.com/weipoo/wechat-miniprogram-pay/tree/master/miniprogram-demo" target="_blank" rel="noopener">微信支付小程序源码Demo</a></p><ol start="2"><li><strong>h5端：</strong></li></ol><ul><li><p>将下面的微信小程序调用<a href="https://github.com/weipoo/wechat-miniprogram-pay/blob/master/pay-h5-demo/index.html" target="_blank" rel="noopener">微信支付业务代码</a>放入支付发起页面中;<br><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/wechat_pay/code-01.jpg" alt=""></p></li><li><p>修改微信支付业务代码参数（时间戳、随机串、prepay_id、签名方式、支付签名等）；<br><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/wechat_pay/code-02.jpg" alt=""></p></li><li><p>页面校验一下params参数数据拼接正常就行，后面的小程序这边会做校验；<br><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/wechat_pay/code-03.jpg" alt=""></p></li><li><p>启动index.html页面作为网站；（也可以直接放到你自己的网站上，这里采用python指令本地化启动模拟网站）<br><code>python -m SimpleHTTPServer</code></p></li></ul><p><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/wechat_pay/code-04.png" alt=""></p><h4 id="测试最终结果"><a href="#测试最终结果" class="headerlink" title="测试最终结果"></a>测试最终结果</h4><ol><li><p>在微信小程序中点击访问目标微信支付页面；<br><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/wechat_pay/demo-01.jpg" width="375" height="667"></p></li><li><p>进入微信支付h5页面，校验访问环境是否为微信小程序访问，若是则处理微信支付参数传递跳转微信支付页面；<br><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/wechat_pay/demo-02.jpg" width="375" height="667"></p></li><li><p>来到微信支付页面，执行微信支付。<br><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/wechat_pay/demo-03.jpg" width="375" height="667"></p></li></ol>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;目前已知的调用微信支付的方式：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;通用的方式就是小程序直接发起微信支付就行；&lt;/li&gt;
&lt;li&gt;&lt;p&gt;通过小程序访问某支付域名网站实现目标发起微信支付：&lt;br&gt;小程序使用web-view组件访问目标网站后，目标网站发起微信支付就行。&lt;/p&gt;
&lt;p&gt;&lt;
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>git常用指令（实用性强）</title>
    <link href="http://yoursite.com/2019/09/10/git%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4%EF%BC%88%E5%AE%9E%E7%94%A8%E6%80%A7%E5%BC%BA%EF%BC%89/"/>
    <id>http://yoursite.com/2019/09/10/git常用指令（实用性强）/</id>
    <published>2019-09-10T01:46:58.000Z</published>
    <updated>2019-09-10T06:05:34.000Z</updated>
    
    <content type="html"><![CDATA[<p>克隆仓库代码到本地（文件夹路径下）</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone  + git仓库url</span><br></pre></td></tr></table></figure><p>检查分支</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git branch (当前分支)</span><br><span class="line">git branch -a (查看所有分支)</span><br></pre></td></tr></table></figure><p>切换分支</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git checkout -t + 分支路径（copy git branch -a 的结果就行)</span><br></pre></td></tr></table></figure><p>拉取最新代码</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git pull</span><br></pre></td></tr></table></figure><p>提交修改代码<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m &quot;[*]xxxxxx&quot; (提交信息）</span><br><span class="line">git push</span><br></pre></td></tr></table></figure></p><p>处理冲突</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git stash</span><br><span class="line">git pull</span><br><span class="line">git stash pop</span><br></pre></td></tr></table></figure><p><strong>注意：最好用vscode开发 这个IDEA本身支持git的，结合git指令后很轻松</strong></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;克隆仓库代码到本地（文件夹路径下）&lt;/p&gt;
&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td cl
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>微信小程序心形进度条实现</title>
    <link href="http://yoursite.com/2019/09/09/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BF%83%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1%E5%AE%9E%E7%8E%B0/"/>
    <id>http://yoursite.com/2019/09/09/微信小程序心形进度条实现/</id>
    <published>2019-09-09T08:32:13.000Z</published>
    <updated>2019-09-09T08:51:32.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="1-目录结构"><a href="#1-目录结构" class="headerlink" title="1. 目录结构"></a>1. 目录结构</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">project-name</span><br><span class="line">├── images</span><br><span class="line">│   ├── index               // 图片资源目录</span><br><span class="line">├── pages</span><br><span class="line">│   ├── index               // demo演示页面</span><br><span class="line">├── app.js                  </span><br><span class="line">├── app.json</span><br><span class="line">├── app.wxss   </span><br><span class="line">└── project.config.json     // 小程序配置文件</span><br></pre></td></tr></table></figure><h3 id="2-设计思路："><a href="#2-设计思路：" class="headerlink" title="2. 设计思路："></a>2. 设计思路：</h3><ol><li>进度条完成进度的数值确定（1～100）；</li><li>进度条页面和样式布局；</li><li>处理通用函数，通过调用function并且传递具体百分比数值参数即可实现进度条渲染。</li></ol><h3 id="3-核心代码示例："><a href="#3-核心代码示例：" class="headerlink" title="3.核心代码示例："></a>3.核心代码示例：</h3><p>wxml：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;view class=&quot;progress&quot;&gt;</span><br><span class="line">    &lt;view class=&quot;progress__bg&quot;&gt;&lt;/view&gt;</span><br><span class="line">     &lt;view class=&quot;progress__line&quot; style=&quot;width: &#123;&#123;lineValue&#125;&#125;px;&quot;&gt;&lt;/view&gt;</span><br><span class="line">    &lt;view class=&quot;block__bg&quot; style=&quot;left:&#123;&#123;blockValue&#125;&#125;px;&quot;&gt;</span><br><span class="line">    &lt;image class=&quot;block__img&quot; src=&apos;&#123;&#123;blockSrc&#125;&#125;&apos;&gt;&lt;/image&gt;</span><br><span class="line">&lt;/view&gt;</span><br><span class="line">&lt;/view&gt;</span><br></pre></td></tr></table></figure><p>js:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">setProcessWith(data) &#123;</span><br><span class="line">    let sliderValue = parseInt(data);</span><br><span class="line">    wx.createSelectorQuery().select(`.progress__bg`).boundingClientRect(res =&gt; &#123;</span><br><span class="line">      console.log(res);</span><br><span class="line">      this.setData(&#123;</span><br><span class="line">        lineValue: res ? res.width * (sliderValue / 100) : 0,</span><br><span class="line">        // 减9px == 减去心形图片一半像素</span><br><span class="line">        blockValue: res ? res.width * (sliderValue / 100) - 9 : 0 </span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;).exec();</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure><h3 id="4-效果图："><a href="#4-效果图：" class="headerlink" title="4. 效果图："></a>4. 效果图：</h3><p><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/process_2019_09_09.png" alt=""></p><h3 id="5-gitHub仓库地址："><a href="#5-gitHub仓库地址：" class="headerlink" title="5. gitHub仓库地址："></a>5. gitHub仓库地址：</h3><p><a href="https://github.com/weipoo/heart-process" target="_blank" rel="noopener">心形进度条实现</a></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h3 id=&quot;1-目录结构&quot;&gt;&lt;a href=&quot;#1-目录结构&quot; class=&quot;headerlink&quot; title=&quot;1. 目录结构&quot;&gt;&lt;/a&gt;1. 目录结构&lt;/h3&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;g
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>微信小程序自定义右上角提示组件</title>
    <link href="http://yoursite.com/2019/09/09/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%B3%E4%B8%8A%E8%A7%92%E6%8F%90%E7%A4%BA%E7%BB%84%E4%BB%B6/"/>
    <id>http://yoursite.com/2019/09/09/微信小程序自定义右上角提示组件/</id>
    <published>2019-09-09T08:08:58.000Z</published>
    <updated>2019-09-09T08:23:08.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="1-目录结构"><a href="#1-目录结构" class="headerlink" title="1. 目录结构"></a>1. 目录结构</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">project-name</span><br><span class="line">├── components</span><br><span class="line">│   ├── add-tips            // 提示组件</span><br><span class="line">│   ├── assets              // 资源目录</span><br><span class="line">├── pages</span><br><span class="line">│   ├── index               // demo演示页面</span><br><span class="line">├── app.js                  </span><br><span class="line">├── app.json</span><br><span class="line">├── app.wxss   </span><br><span class="line">└── project.config.json     // 小程序配置文件</span><br></pre></td></tr></table></figure><h3 id="2-引用方式："><a href="#2-引用方式：" class="headerlink" title="2. 引用方式："></a>2. 引用方式：</h3><p>a. 在app.json中配置add-tips组件引用；</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;usingComponents&quot;: &#123;</span><br><span class="line">   &quot;add-tips&quot;: &quot;/components/add-tips/index&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><p>b. 在wxml页面直接引用。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;add-tips&gt;&lt;/add-tips&gt;</span><br></pre></td></tr></table></figure></p><h3 id="3-核心代码示例："><a href="#3-核心代码示例：" class="headerlink" title="3.核心代码示例："></a>3.核心代码示例：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// 判断是否已经显示过</span><br><span class="line">let cacheOne = wx.getStorageSync(STORAGE_KEY_ONE);</span><br><span class="line">const now = +new Date();</span><br><span class="line"></span><br><span class="line">// 校验缓存数据 以及缓存时间是否过期(关闭后缓存一个月 一个月后重新提示用户)</span><br><span class="line">if (cacheOne &amp;&amp; (now - cacheOne &lt; 30 * 24 * 3600000)) return;</span><br><span class="line"></span><br><span class="line">// 处理根据系统信息处理位移箭头位置（重点）</span><br><span class="line">let systemInfo = wx.getSystemInfoSync();</span><br><span class="line">let client = wx.getMenuButtonBoundingClientRect();</span><br><span class="line"></span><br><span class="line">if (systemInfo &amp;&amp; client) &#123;</span><br><span class="line">  this.setData(&#123;</span><br><span class="line">    marRight: systemInfo.screenWidth - client.left - 28</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line">// 没显示过，则进行展示</span><br><span class="line">this.setData(&#123;</span><br><span class="line">  SHOW_TOP: true</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h3 id="4-效果图："><a href="#4-效果图：" class="headerlink" title="4. 效果图："></a>4. 效果图：</h3><p><img src="https://weipo.oss-cn-shanghai.aliyuncs.com/github/images/demo.jpg" alt=""></p><h3 id="5-gitHub仓库地址："><a href="#5-gitHub仓库地址：" class="headerlink" title="5. gitHub仓库地址："></a>5. gitHub仓库地址：</h3><p><a href="https://github.com/weipoo/add-tips" target="_blank" rel="noopener">add-tips组件</a></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h3 id=&quot;1-目录结构&quot;&gt;&lt;a href=&quot;#1-目录结构&quot; class=&quot;headerlink&quot; title=&quot;1. 目录结构&quot;&gt;&lt;/a&gt;1. 目录结构&lt;/h3&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;g
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>MacDown使用总结</title>
    <link href="http://yoursite.com/2018/12/25/Docker%E5%AE%B9%E5%99%A8%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/"/>
    <id>http://yoursite.com/2018/12/25/Docker容器使用总结/</id>
    <published>2018-12-25T07:50:58.000Z</published>
    <updated>2018-12-26T03:55:45.000Z</updated>
    
    <content type="html"><![CDATA[<p><img src="http://weipo.oss-cn-shanghai.aliyuncs.com/flowername03.gif" alt=""></p><p><a href="http://www.baidu.com" target="_blank" rel="noopener">百度一下</a></p><h1 id="一级标题"><a href="#一级标题" class="headerlink" title="一级标题"></a>一级标题</h1><h2 id="二级标题"><a href="#二级标题" class="headerlink" title="二级标题"></a>二级标题</h2><h3 id="三级标题"><a href="#三级标题" class="headerlink" title="三级标题"></a>三级标题</h3><h6 id="最多六级标题"><a href="#最多六级标题" class="headerlink" title="最多六级标题"></a>最多六级标题</h6><ul><li>特点一</li><li>特点二</li><li>特点三</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">这里是文本</span><br></pre></td></tr></table></figure><p>分割实线</p><p>-<br>分割虚线</p><hr><h2 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h2><h5 id="注意（两个”星号“是粗体，一个是斜体）"><a href="#注意（两个”星号“是粗体，一个是斜体）" class="headerlink" title="注意（两个”星号“是粗体，一个是斜体）"></a>注意（两个”星号“是粗体，一个是斜体）</h5><blockquote><p><em>青蛙一叫就回家</em>，<strong>面码</strong>，<em>应该回哪里呢？</em></p></blockquote><h2 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h2><table><thead><tr><th>tables</th><th>Are</th><th>Cool</th></tr></thead><tbody><tr><td>111</td><td>dasd</td><td>萨达。</td></tr></tbody></table>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;&lt;img src=&quot;http://weipo.oss-cn-shanghai.aliyuncs.com/flowername03.gif&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.baidu.com&quot; target=&quot;_blank&quot; rel=&quot;
      
    
    </summary>
    
    
  </entry>
  
</feed>
