-
Notifications
You must be signed in to change notification settings - Fork 0
/
local-search.xml
46 lines (21 loc) · 19.4 KB
/
local-search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>EasyMock搭建</title>
<link href="/2020/04/07/EasyMock%E6%90%AD%E5%BB%BA/"/>
<url>/2020/04/07/EasyMock%E6%90%AD%E5%BB%BA/</url>
<content type="html"><![CDATA[<h4 id="easy-mock-Mac环境搭建"><a href="#easy-mock-Mac环境搭建" class="headerlink" title="easy-mock Mac环境搭建"></a>easy-mock Mac环境搭建</h4><h5 id="本地环境：MacOS-Catalina-10-15-5-19F101"><a href="#本地环境：MacOS-Catalina-10-15-5-19F101" class="headerlink" title="本地环境：MacOS Catalina 10.15.5 (19F101)"></a>本地环境：MacOS Catalina 10.15.5 (19F101)</h5><p>Node.js（v8.x, 不支持 v10.x）& MongoDB（>= v3.4）& Redis（>= v4.0）</p><h4 id="一-安装Mongodb"><a href="#一-安装Mongodb" class="headerlink" title="一. 安装Mongodb"></a>一. 安装Mongodb</h4><p>Mac使用homebrew安装Mongodb</p><pre><code class="hljs mipsasm"><span class="hljs-keyword">brew </span><span class="hljs-keyword">install </span>mongodb</code></pre><p>创建目录</p><pre><code class="hljs awk">sudo mkdir -p <span class="hljs-regexp">/data/</span>db</code></pre><p>启动mongodb</p><pre><code class="hljs ebnf"><span class="hljs-attribute">sudo mongod</span></code></pre><p><img src="https://s1.ax1x.com/2020/08/17/dmED0g.png"></p><h4 id="二-安装redis"><a href="#二-安装redis" class="headerlink" title="二. 安装redis"></a>二. 安装redis</h4><p>使用homebrew 安装redis</p><pre><code class="hljs mipsasm"><span class="hljs-keyword">brew </span><span class="hljs-keyword">install </span>redis</code></pre><p>安装完成后，运行redis</p><pre><code class="hljs axapta">redis-<span class="hljs-keyword">server</span></code></pre><p><img src="https://s1.ax1x.com/2020/08/17/dmEAw4.png"></p><h4 id="三-安装easy-mock"><a href="#三-安装easy-mock" class="headerlink" title="三. 安装easy-mock"></a>三. 安装easy-mock</h4><pre><code class="hljs awk">$ git clone https:<span class="hljs-regexp">//gi</span>thub.com<span class="hljs-regexp">/easy-mock/</span>easy-mock.git$ cd easy-mock && npm install</code></pre><h5 id="启动"><a href="#启动" class="headerlink" title="启动"></a>启动</h5><pre><code class="hljs dockerfile">$ npm <span class="hljs-keyword">run</span><span class="bash"> dev</span><span class="hljs-comment"># 访问 http://127.0.0.1:7300</span></code></pre><h5 id="更多"><a href="#更多" class="headerlink" title="更多"></a>更多</h5><pre><code class="hljs dockerfile"><span class="hljs-comment"># 前端静态资源构建打包</span>$ npm <span class="hljs-keyword">run</span><span class="bash"> build</span><span class="hljs-comment"># 以生产环境方式启动，需要提前执行 build</span>$ npm <span class="hljs-keyword">run</span><span class="bash"> start</span><span class="hljs-comment"># 单元测试</span>$ npm <span class="hljs-keyword">run</span><span class="bash"> <span class="hljs-built_in">test</span></span><span class="hljs-comment"># 语法检测</span>$ npm <span class="hljs-keyword">run</span><span class="bash"> lint</span></code></pre><p>运行成功<br><img src="https://s1.ax1x.com/2020/08/17/dmZAi9.png"></p><p>参考链接：<br>github地址 <a href="https://github.com/easy-mock/easy-mock">https://github.com/easy-mock/easy-mock</a></p>]]></content>
</entry>
<entry>
<title>Shopify搭建</title>
<link href="/2019/12/16/Shopify%E6%90%AD%E5%BB%BA/"/>
<url>/2019/12/16/Shopify%E6%90%AD%E5%BB%BA/</url>
<content type="html"><![CDATA[<h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><p><a href="www.shopify.com">Shopify</a> 是由托比亚斯·卢克创办的加拿大电子商务软件开发商，总部位于加拿大首都渥太华，其提供的服务软件Shopify是一个SaaS领域的购物车系统，适合跨境电商建立独立站，用户支付一定费用即可在其上利用各种主题/模板建立自己的网上商店。</p><h3 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h3><p>模板语言：网站设计者和开发者可以使用模板语言来构建网页，将静态内容和动态内容结合在一起，静态内容在多个页面上是相同的，动态内容在不同页面间变化。 模板语言可以重用定义网页布局的静态元素，同时用 Shopify 商店的数据动态填充页面。 静态元素用 HTML 编写，动态元素用 Liquid 编写。 文件中的 Liquid 元素充当占位符: 当文件中的代码被编译并发送到浏览器时，Liquid 被安装主题的 Shopify 商店中的数据替换。</p><p>Shopify是采用liquid模板 <a href="https://shopify.dev/docs/liquid/getting-started">https://shopify.dev/docs/liquid/getting-started</a> </p><p>创建好主题后可以通过web端后台直接编辑代码，也可以通过Shopify Theme Kit和IDE开发 </p><p>Shopify Theme Kit是Shopify开发主题的命令行开发工具包 </p><h4 id="Mac用户用Homebrew安装"><a href="#Mac用户用Homebrew安装" class="headerlink" title="Mac用户用Homebrew安装"></a>Mac用户用<a href="https://brew.sh/">Homebrew</a>安装</h4><pre><code class="hljs mipsasm"><span class="hljs-keyword">brew </span>tap <span class="hljs-keyword">shopify/shopify</span><span class="hljs-keyword">brew </span><span class="hljs-keyword">install </span>themekit</code></pre><h4 id="获取API访问权限"><a href="#获取API访问权限" class="headerlink" title="获取API访问权限"></a>获取API访问权限</h4><p><img src="https://img-blog.csdnimg.cn/20190715094409916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0Lzg2NjUwNDg=,size_16,color_FFFFFF,t_70" alt="image"></p><p>填写专有应用名称，邮箱地址，并打开模板的读写权限：</p><p><img src="https://img-blog.csdnimg.cn/20190715094734398.png" alt="image"></p><h4 id="创建一个新主题"><a href="#创建一个新主题" class="headerlink" title="创建一个新主题"></a>创建一个新主题</h4><pre><code class="hljs ada">theme <span class="hljs-keyword">new</span> <span class="hljs-comment">--password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]</span></code></pre><h4 id="创建现有的模板下载到本地"><a href="#创建现有的模板下载到本地" class="headerlink" title="创建现有的模板下载到本地"></a>创建现有的模板下载到本地</h4><pre><code class="hljs inform7">theme get -p=<span class="hljs-comment">[your-password]</span> -s=<span class="hljs-comment">[you-store.myshopify.com]</span> -t=<span class="hljs-comment">[your-theme-id]</span></code></pre><p>your-password: API密码<br>you-sore: 你的商店域名<br>your-theme-id: 编辑代码时url的一串数字id</p><h4 id="联机调试主题"><a href="#联机调试主题" class="headerlink" title="联机调试主题"></a>联机调试主题</h4><pre><code class="hljs ebnf"><span class="hljs-attribute">theme watch</span></code></pre><p>命令行启动后，使用本地IDE编辑保存代码后会自动上传更新代码。<br>注意: 使用web端修改代码后不能同步到本地</p><h4 id="Shopify应用"><a href="#Shopify应用" class="headerlink" title="Shopify应用"></a>Shopify应用</h4><p>这里只尝试安装一种应用：评论系统<br>安装Product Reviews<br><a href="https://apps.shopify.com/product-reviews?surface_detail=recommended-for-you&surface_inter_position=1&surface_intra_position=15&surface_type=collection">https://apps.shopify.com/product-reviews?surface_detail=recommended-for-you&surface_inter_position=1&surface_intra_position=15&surface_type=collection</a></p><p>此代码段在你的产品页面上显示评论，并将SEO友好的评论分数添加到你的Google搜索结果中：</p><pre><code class="hljs handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"shopify-product-reviews"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{<span class="hljs-name">product.id</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span></span><span class="hljs-template-variable">{{ <span class="hljs-name">product.metafields.spr.reviews</span> }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></code></pre><p>将代码段粘贴到你的希望出现评论的sections / product-template.liquid文件中。通常，这恰好在product.description标记下面，代码可能看起来像这样：</p><pre><code class="hljs django"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"product-single__description rte"</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"description"</span>></span></span><span class="xml"> </span><span class="hljs-template-variable">{{ product.description }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"shopify-product-reviews"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{product.id}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span></span><span class="hljs-template-variable">{{ product.metafields.spr.reviews }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><span class="hljs-template-tag">{% <span class="hljs-name"><span class="hljs-name">if</span></span> section.settings.show_share_buttons %}</span><span class="xml"> </span><span class="hljs-template-tag">{% <span class="hljs-name"><span class="hljs-name">include</span></span> 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}</span><span class="hljs-template-tag">{% <span class="hljs-name"><span class="hljs-name">endif</span></span> %}</span></code></pre><h3 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h3><p>注册Shopify帐号 <a href="https://www.shopify.cn/#">https://www.shopify.cn/#</a><br>Shopify开发者店铺后台 <a href="https://yourstore.shopify.com/admin">https://yourstore.shopify.com/admin</a><br>Shopify系统入门主题下载地址 <a href="https://github.com/Shopify/skeleton-theme">https://github.com/Shopify/skeleton-theme</a><br>Liquid文档 <a href="https://shopify.github.io/liquid/">https://shopify.github.io/liquid/</a><br><a href="https://liquid.bootcss.com/">https://liquid.bootcss.com/</a><br><a href="http://cheat.markdunkley.com/">http://cheat.markdunkley.com/</a> </p>]]></content>
</entry>
<entry>
<title>前端调试方式</title>
<link href="/2019/05/15/%E5%89%8D%E7%AB%AF%E8%B0%83%E8%AF%95%E6%96%B9%E5%BC%8F/"/>
<url>/2019/05/15/%E5%89%8D%E7%AB%AF%E8%B0%83%E8%AF%95%E6%96%B9%E5%BC%8F/</url>
<content type="html"><![CDATA[<a id="more"></a><h2 id="1、iOS"><a href="#1、iOS" class="headerlink" title="1、iOS"></a>1、iOS</h2><p><strong>运行环境要求</strong><br>Mac + Safari 浏览器<br>iPhone（iOS 6 +） + Safari 浏览器</p><p><strong>调试步骤</strong><br>1.使用数据线将 iPhone 与 Mac 相连<br>2.iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）<br>3.iPhone 使用 Safari 浏览器打开要调试的页面<br>4.Mac 打开 Safari 浏览器调试（菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面）<br>(注：如果你的菜单栏没有“开发”选项，可以到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。)<br>5、在弹出的 Safari Developer Tools 中调试<br><img src="https://s1.ax1x.com/2020/08/16/dEAlqA.jpg"></p><h2 id="2、Android"><a href="#2、Android" class="headerlink" title="2、Android"></a>2、Android</h2><p><strong>运行环境要求</strong><br>Chrome 版本 >= 32<br>Android 版本 4.0 +</p><p>1.安卓手机需要开启usb调试连接pc（具体在“手机设置-开发者选项”中开启）<br>2.电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项<br>3.电脑点击 inspect 按钮</p><p><img src="https://s1.ax1x.com/2020/08/16/dEkUBR.png"><br><img src="https://s1.ax1x.com/2020/08/16/dEkaH1.png"></p><p>图一 是浏览器打开页面<br>图二 是记录是手机助手里的webview。（应用里的webview）</p><h2 id="vConsole"><a href="#vConsole" class="headerlink" title="vConsole"></a>vConsole</h2><p>npm安装</p><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> vconsole</code></pre><pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"path/to/vconsole.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"> <span class="hljs-comment">// init vConsole</span></span><span class="javascript"> <span class="hljs-keyword">var</span> vConsole = <span class="hljs-keyword">new</span> VConsole();</span><span class="javascript"> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Hello world'</span>);</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre><p><a href="https://github.com/Tencent/vConsole">vConsole</a>一个轻量、可拓展、针对手机网页的前端开发者调试面板。<br><img src="https://github.com/Tencent/vConsole/raw/dev/example/snapshot/log_panel.png"></p><h2 id="weinre"><a href="#weinre" class="headerlink" title="weinre"></a>weinre</h2><p><img src="https://s1.ax1x.com/2020/08/16/dEFcT0.png"><br>在你本地创建一个监听服务器，并提供一个JS脚本，需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。</p><ol><li>需要先安装node（安装完后自动安装npm）<br>安装 weinre npm install -g weinre </li><li>开启 weinre weinre –httpPort 8888 –boundHost IP地址</li><li>浏览器打开 localhost:8888 :</li></ol><p>在你所要调试的页面底部添加下面的脚本<br><code> <script src="http://loaclhost:8888/target/target/target-script-min.hs#anonymous"></script></code><br>然后移动端浏览器打开 localhost:8888<br>利用手机打开所要调试的页面（也就是刚才添加了script的那个页面，注意要在pc上开启服务器，然后手机通过输入对应地址来访问页面）<br>点击调试页面里对应的Targets，然后点击Elements工具，就可以进行调试了。</p><h4 id="Weinre还提供了下面的启动参数"><a href="#Weinre还提供了下面的启动参数" class="headerlink" title="Weinre还提供了下面的启动参数:"></a>Weinre还提供了下面的启动参数:</h4><p>–help : 显示Weinre的Help<br>–httpPort [portNumber] : 设置Weinre使用的端口号， 默认是8080<br>–boundHost [hostname| ip address | -all-] : 默认是’localhost’， 这个参数是为了限制可以访问Weinre Server的设备， 设置为-all-或者指定ip， 那么任何设备都可以访问Weinre Server。<br>–verbose [true | false] : 如果想看到更多的关于Weinre运行情况的输出， 那么可以设置这个选项为true， 默认为false；<br>–debug [true | false] : 这个选项与–verbose类似， 会输出更多的信息。默认为false。<br>–readTimeout [seconds] : Server发送信息到Target/Client的超时时间， 默认为5s。<br>–deathTimeout [seconds] : 默认为3倍的readTimeout， 如果页面超过这个时间都没有任何响应， 那么就会断开连接。</p><h2 id="Fiddler"><a href="#Fiddler" class="headerlink" title="Fiddler"></a>Fiddler</h2><p>调试 （适用安卓和iphone）下载 FIddler4 </p><h5 id="状态图标"><a href="#状态图标" class="headerlink" title="状态图标"></a>状态图标</h5><p><img src="https://s1.ax1x.com/2020/08/16/dEFymn.png"></p><p>在工具栏选择Tools-> Fiddler Option -> Connections<br>设置端口8888和勾选Allow remote computers to connect 、 Reuse client connections 、 Reuse server connections<br>如果是HTTPS请求就要选择允许https连接<br><img src="https://s1.ax1x.com/2020/08/16/dEF2kV.png"> </p><p>注意：手机和pc要在同一局域网下，打开手机wifi->代理设置-> 主机IP 端口8888 </p><p>界面左侧是请求文件，<br>右键选择你想浏览的文件 选择save-> Response -> Respones Body… 就可以保存到本地 </p><p>界面右侧是工具 </p><ol><li>Statistic:关于HTTP请求的性能和其他数据分析; </li><li>Inspectors: 提供headers、textview、hexview,Raw等多种方式查看单条http请求的请求报文的信息 </li><li>AutoResponder标签设置:选择Enable automatic reaponses 和Unmatched requests passthrough<br>选择AutoResponder 可将界面左侧的文件拖动到这里<br>在下面的Rule Editor 下面选择 Find a file… 选择本地保存的图片. 最后点击Save 保存下,即可替换成本地文件。<br><img src="https://s1.ax1x.com/2020/08/16/dEFRYT.png"></li></ol><h3 id="导出证书"><a href="#导出证书" class="headerlink" title="导出证书"></a>导出证书</h3><p>在第2步的对话框中，点击右侧的【Actions】,选择【Export Root Certificate to Desktop】,把证书导出到桌面，点击【ok】<br><img src="https://s1.ax1x.com/2020/08/16/dEGrwV.png"></p><h3 id="PC端安装证书"><a href="#PC端安装证书" class="headerlink" title="PC端安装证书"></a>PC端安装证书</h3><p>在桌面上找到第3步导出的证书FiddlerRoot.cer，双击证书，按照提示安装即可</p><h3 id="移动端安装证书"><a href="#移动端安装证书" class="headerlink" title="移动端安装证书"></a>移动端安装证书</h3><p>移动端设置代理后，浏览器打开输入 主机IP:8888 ，点击页面中的“FiddlerRootcertificate”链接，在弹出的对话框中随便设置一个名称确定即可。 </p><h2 id="whistle"><a href="#whistle" class="headerlink" title="whistle"></a>whistle</h2><p>基于Node实现的跨平台web调试代理工具<br>文档链接 <a href="https://wproxy.org/whistle/">https://wproxy.org/whistle/</a></p><h2 id="Charles"><a href="#Charles" class="headerlink" title="Charles"></a>Charles</h2><p>参考地址：<br><a href="https://github.com/riskers/blog/issues/11">https://github.com/riskers/blog/issues/11</a><br><a href="http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html">http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html</a><br><a href="http://blog.csdn.net/freshlover/article/details/42640253">http://blog.csdn.net/freshlover/article/details/42640253</a><br><a href="http://blog.csdn.net/idlear/article/details/50999490">http://blog.csdn.net/idlear/article/details/50999490</a><br><a href="https://github.com/nupthale/weinre">https://github.com/nupthale/weinre</a></p>]]></content>
</entry>
</search>