微信小程序学习笔记(6) -- 本地生活项目

短命女 2023-02-20 14:00 92阅读 0赞

### 文章目录 ###

*  本地生活项目
 *   *  项目效果图
     *  外观和标签栏的配置
     *   *  window
         *  tabBar
         *  目标
         *  具体代码:
     *  公共样式
     *   *  设置tabBar的样式:
     *  首页布局
     *   *  知识点
         *   *  image
         *  目标
         *  代码
     *  小程序中发送HTTP请求
     *  首页数据加载及数据绑定
     *  页面间跳转
     *  列表页分类信息加载
     *  第一页的商铺信息的加载
     *  上拉加载更多onReachBottom
     *  下拉刷新
     *  详细页:
     *  源码地址:

# 本地生活项目 #

## 项目效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]

## 外观和标签栏的配置 ##

### window ###

用于设置小程序的状态栏、导航条、标题、窗口背景色。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色，如 <code>#000000</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>string</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持 <code>black</code> / <code>white</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>string</td> 
   <td></td> 
   <td>导航栏标题文字内容</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>navigationStyle</td> 
   <td>string</td> 
   <td>default</td> 
   <td>导航栏样式，仅支持以下值： <code>default</code> 默认样式 <code>custom</code> 自定义导航栏，只保留右上角胶囊按钮。参见注 2。</td> 
   <td>微信客户端 6.6.0</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>string</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 <code>dark</code> / <code>light</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundColorTop</td> 
   <td>string</td> 
   <td>#ffffff</td> 
   <td>顶部窗口的背景色，仅 iOS 支持</td> 
   <td>微信客户端 6.5.16</td> 
  </tr> 
  <tr> 
   <td>backgroundColorBottom</td> 
   <td>string</td> 
   <td>#ffffff</td> 
   <td>底部窗口的背景色，仅 iOS 支持</td> 
   <td>微信客户端 6.5.16</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>是否开启全局的下拉刷新。 详见 <a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onpulldownrefresh" rel="nofollow">Page.onPullDownRefresh</a></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 <a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onreachbottom" rel="nofollow">Page.onReachBottom</a></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>pageOrientation</td> 
   <td>string</td> 
   <td>portrait</td> 
   <td>屏幕旋转设置，支持 <code>auto</code> / <code>portrait</code> / <code>landscape</code> 详见 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html" rel="nofollow">响应显示区域变化</a></td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.4.0</a> (auto) / <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.5.0</a> (landsca</td> 
  </tr> 
 </tbody> 
</table>

### tabBar ###

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>默认值</th> 
   <th>描述</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 上的文字默认颜色，仅支持十六进制颜色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 上的文字选中时的颜色，仅支持十六进制颜色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 的背景色，仅支持十六进制颜色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>string</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabbar 上边框的颜色， 仅支持 <code>black</code> / <code>white</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 的列表，详见 <code>list</code> 属性说明，最少 2 个、最多 5 个 tab</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>string</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>tabBar 的位置，仅支持 <code>bottom</code> / <code>top</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>custom</td> 
   <td>boolean</td> 
   <td>否</td> 
   <td>false</td> 
   <td>自定义 tabBar，见<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html" rel="nofollow">详情</a></td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.5.0</a></td> 
  </tr> 
 </tbody> 
</table>

其中 list 接受一个数组，**只能配置最少 2 个、最多 5 个 tab**。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>string</td> 
   <td>是</td> 
   <td>页面路径，必须在 pages 中先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>string</td> 
   <td>是</td> 
   <td>tab 上按钮文字</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 <strong>当 position 为 top 时，不显示 icon。</strong></td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 <strong>当 position 为 top 时，不显示 icon。</strong></td> 
  </tr> 
 </tbody> 
</table>

### 目标 ###

建3个tab的tabBar  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 10]

### 具体代码: ###

核心代码:

app.json

{ 
      "pages":[
        "pages/index/index",
        "pages/message/message",
        "pages/profile/profile"
      ],
      "window":{ 
        "navigationBarBackgroundColor": "#3a4891",
        "navigationBarTextStyle":"white",
        "navigationBarTitleText": "本地生活",
        "backgroundColor": "#bcc0c9",
        "backgroundTextStyle":"light",
        "enablePullDownRefresh": false
      },
      "tabBar":{ 
        "list":[
          { 
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "assets/home.png",
            "selectedIconPath":"assets/home-active.png"
          },
          { 
            "pagePath": "pages/message/message",
            "text": "消息",
            "iconPath": "assets/message.png",
            "selectedIconPath":"assets/message-active.png"
          },
          { 
            "pagePath": "pages/profile/profile",
            "text": "我的",
            "iconPath": "assets/profile.png",
            "selectedIconPath":"assets/profile-active.png"
          }
        ]
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

<view class="container">
      首页
    </view>

<text>pages/message/message.wxml</text>

<text>pages/profile/profile.wxml</text>

## 公共样式 ##

### 设置tabBar的样式: ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 11]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 12]

app.json全部代码

{ 
      "pages":[
        "pages/index/index",
        "pages/message/message",
        "pages/profile/profile"
      ],
      "window":{ 
        "navigationBarBackgroundColor": "#3a4891",
        "navigationBarTextStyle":"white",
        "navigationBarTitleText": "本地生活",
        "backgroundColor": "#bcc0c9",
        "backgroundTextStyle":"light",
        "enablePullDownRefresh": false
      },
      "tabBar":{ 
         "color": "#999",
         "selectedColor": "#444",
         "backgroundColor": "#fff",
         "borderStyle": "black",
        "list":[
          { 
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "assets/home.png",
            "selectedIconPath":"assets/home-active.png"
          },
          { 
            "pagePath": "pages/message/message",
            "text": "消息",
            "iconPath": "assets/message.png",
            "selectedIconPath":"assets/message-active.png"
          },
          { 
            "pagePath": "pages/profile/profile",
            "text": "我的",
            "iconPath": "assets/profile.png",
            "selectedIconPath":"assets/profile-active.png"
          }
        ]
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

## 首页布局 ##

### 知识点 ###

#### image ####

> 基础库 1.0.0 开始支持，低版本需做[兼容处理][Link 1]。

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，[2.3.0][Link 1] 起支持云文件ID。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>图片资源地址</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>string</td> 
   <td>scaleToFill</td> 
   <td>否</td> 
   <td>图片裁剪、缩放的模式</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>webp</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>默认不解析 webP 格式，只支持网络资源</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.9.0</a></td> 
  </tr> 
  <tr> 
   <td>lazy-load</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>图片懒加载，在即将进入一定范围（上下三屏）时才开始加载</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td>show-menu-by-longpress</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>开启长按图片显示识别小程序码菜单</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.7.0</a></td> 
  </tr> 
  <tr> 
   <td>binderror</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>当错误发生时触发，event.detail = {errMsg}</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>bindload</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>当图片载入完毕时触发，event.detail = {height, width}</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**mode 的合法值**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scaleToFill</td> 
   <td>缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>aspectFit</td> 
   <td>缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>aspectFill</td> 
   <td>缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>widthFix</td> 
   <td>缩放模式，宽度不变，高度自动变化，保持原图宽高比不变</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>heightFix</td> 
   <td>缩放模式，高度不变，宽度自动变化，保持原图宽高比不变</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.10.3</a></td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>裁剪模式，不缩放图片，只显示图片的顶部区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>裁剪模式，不缩放图片，只显示图片的底部区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>裁剪模式，不缩放图片，只显示图片的中间区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>裁剪模式，不缩放图片，只显示图片的左边区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>裁剪模式，不缩放图片，只显示图片的右边区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>top left</td> 
   <td>裁剪模式，不缩放图片，只显示图片的左上边区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>top right</td> 
   <td>裁剪模式，不缩放图片，只显示图片的右上边区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>bottom left</td> 
   <td>裁剪模式，不缩放图片，只显示图片的左下边区域</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>bottom right</td> 
   <td>裁剪模式，不缩放图片，只显示图片的右下边区域</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 目标 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 13]

### 代码 ###

<swiper class="slides">
      <swiper-item>
          <image src="/assets/banner/banner-01.png" mode="aspectFill"></image>
      </swiper-item>
        <swiper-item>
          <image src="/assets/banner/banner-02.png" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <view class="grids">
       <view class="item">
          <image src="/assets/grid/grid-01.png" />
          <text>美食</text>
       </view>
       <view class="item">
          <image src="/assets/grid/grid-02.png" />
          <text>美食</text>
       </view>
       <view class="item">
          <image src="/assets/grid/grid-03.png" />
          <text>美食</text>
       </view>
       <view class="item">
           <image src="/assets/grid/grid-04.png" />
          <text>美食</text>
       </view>
       <view class="item">
           <image src="/assets/grid/grid-05.png" />
          <text>美食</text>
       </view>
       <view class="item">
           <image src="/assets/grid/grid-06.png" />
          <text>美食</text>
       </view>
       <view class="item">
          <image src="/assets/grid/grid-07.png" />
          <text>美食</text>
       </view>
       <view class="item">
           <image src="/assets/grid/grid-08.png" />
          <text>美食</text>
       </view>
       <view class="item">
           <image src="/assets/grid/grid-09.png" />
          <text>美食</text>
       </view>
    </view>
    
    <view class="links">
       <image src="/assets/link-01.png"></image>
       <image src="/assets/link-02.png"></image>
    </view>

/**index.wxss**/
    .slides {
      height: 380rpx;
    }
    .slides image{
      width: 100%;
      height: 100%;
    }
    .grids{
       display: flex;
       flex-wrap: wrap;   
       background-color: #fff;
       border-left: 1rpx solid #eee;
       border-bottom: 1rpx solid #eee;
       color: #888;
    }
    .grids .item{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.333333%;
      height: 250rpx;
      border-right: 1rpx solid #eee;
      border-top: 1rpx solid #eee;
      box-sizing: border-box;
    }
    .grids .item image{
      width: 70rpx;
      height: 70rpx;
    }
    .grids .item text{
      margin-top: 20rpx;
      color: #888;
      font-size: 28rpx;
    }
    .links{
      display: flex;
    }
    .links image{
        height: 200rpx;
    }

效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 14]

## 小程序中发送HTTP请求 ##

如果是测试环境:

在详情中设置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 15]

如果是正式环境

1.请求的地址必须在管理后台添加白名单

2.域名必须备案，服务端必须采用HTTPS

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({ 
     
      /** * 页面的初始数据 */
      data: { 
    
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
          wx.request({ 
            //这里的地址没有跨域的概念
            url: 'https://api.douban.com/v2/movie/coming_soon',
            header: { 
              'Content-Type': 'json'
            },
            success: function(res){ 
                console.log(res)
            }
            //发送异步请求 不再是 WEB 那套 ajax
            //2.没有跨域
            //3.请求的地址必须在管理后台添加白名单
            //4.域名必须备案，服务端必须采用HTTPS
          })
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

## 首页数据加载及数据绑定 ##

封装http请求:

在utils的文件夹下:新建fetch.js

module.exports = (url, data) => { 
       return new Promise((resolve, reject) => { 
        wx.request({ 
          url: `https://locally.uieee.com/${ url}`,
          success: resolve,
          fail: reject
        })
       })
    }

index.js导入fetch，并使用

//index.js
    //获取应用实例
    const app = getApp()
    const fetch = require('../../utils/fetch')
    Page({
     
      /**
       * 页面的初始数据
       */
      data: {
         slides: [],
         categories: []
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
          wx.request({
            //这里的地址没有跨域的概念
            url: 'https://api.douban.com/v2/movie/coming_soon',
            header: {
              'Content-Type': 'json'
            },
            success: function(res){
                console.log(res)
            }
            //发送异步请求 不再是 WEB 那套 ajax
            //2.没有跨域
            //3.请求的地址必须在管理后台添加白名单
            //4.域名必须备案，服务端必须采用HTTPS
          })
    
          // wx.request({
          //   url: 'https://locally.uieee.com/slides',
          //   success: res => {
          //     this.setData({slides: res.data});
          //   }
          // })
    
          fetch('slides').then(res => {
            this.setData({ slides: res.data})
          })
    
          // wx.request({
          //   url: 'https://locally.uieee.com/categories',
          //   success: res => {
          //      this.setData({ categories : res.data })
          //   }
          // })
    
          
          fetch('slides').then(res => {
            this.setData({ categories: res.data})
          })
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

## 页面间跳转 ##

注意点:

*  tab页跳转到另一个tab页，需要使用navigator的open-type=“switchTab”
    
    例如:
    
        <view class="grids">  
           <navigator class="item" url="/pages/message/message" open-type="switchTab">
              <image src="/assets/grid/grid-02.png" />
              <text>美食</text>
           </navigator>
        </view>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 16]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 17]

*  普通跳转 ，注意修改navigator的高宽百分比，不然会空白

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 18]

添加了navigator

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 19]

## 列表页分类信息加载 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 20]

注意点， 设置分类导航栏的名字的顺序，一定在onReady函数执行完之后。

list.js

/**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(2)
        console.log(options)
        //这里不能确定一定是在 onReady过后执行
        fetch(`categories/${options.cat}`).then(res => {
           console.log(res.data)
           //设置导航条
          //  wx.setNavigationBarTitle({
          //    title: res.data.name
          //  })
           this.setData({ category: res.data})
        })
      },
    
    onReady: function () {
          console.log(1)
          if(this.data.category.name）{
            wx.setNavigationBarTitle({
              title: res.data.name
            })
          }     
      },

## 第一页的商铺信息的加载 ##

关键代码:

优化封装的fetch.js,让其可以携带参数

module.exports = (url, data) => { 
       return new Promise((resolve, reject) => { 
        wx.request({ 
          url: `https://locally.uieee.com/${ url}`,
          data: data,
          success: resolve,
          fail: reject
        })
       })
    }

正确使用promise.2个请求，有前后顺序的正确写法:

/** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        console.log(2)
        console.log(options)
        //这里不能确定一定是在 onReady过后执行
        fetch(`categories/${ options.cat}`).then(res => { 
           console.log(res.data)
           //设置导航条
          // wx.setNavigationBarTitle({ 
          // title: res.data.name
          // })
           this.setData({  category: res.data})
          
             //加载完分类信息过后再去加载商铺信息
            return  fetch(`categories/${ this.data.category.id}shops`,{ _page；1，_limit: 10}) 
        })
        .then(res => { 
           this.setData({  shops: res.data })
        })
    
      
      },

## 上拉加载更多onReachBottom ##

[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 21]

list.json

值越小，越迟钝，看具体需求

{ 
      "onReachBottomDistance": 20
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 22]  
list.js

// pages/list/list.js
    const fetch = require('../../utils/fetch')
    
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        //当前加载的分类
        category:{ },
        //子分类下的全部店铺
        shops: [],
        pageIndex:0,
        pageSize:20,
        hasMore: true
      },
    
      loadMore(){ 
        if(!this.data.hasMore) return;
        //从data中取出 pageIndex 和 pageSize
        let {  pageIndex, pageSize } = this.data
        const params = { _page: ++pageIndex, _limit: pageSize}
        fetch(`categories/${ this.data.category.id}/shops`, params) 
        .then(res => { 
          const totalCount = parseInt(res.header['X-Total-Count'])
          const hasMore = pageIndex * pageSize < totalCount
            const shops = this.data.shops.concat(res.data)
            this.setData({  shops, pageIndex, hasMore})
         })
      }
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        console.log(2)
        console.log(options)
        //这里不能确定一定是在 onReady过后执行
        fetch(`categories/${ options.cat}`).then(res => { 
           console.log(res.data)
           //设置导航条
          // wx.setNavigationBarTitle({ 
          // title: res.data.name
          // })
           this.setData({  category: res.data})
          
             //加载完分类信息过后再去加载商铺信息
            this.loadMore();
        })
        
    
      
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
          console.log(1)
          if(this.data.category.name）{ 
            wx.setNavigationBarTitle({ 
              title: res.data.name
            })
          }     
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
           //需要判断是否正在加载，否则会有多次触发问题
          console.log('到底了，别啦了');
          this.loadMore();
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

## 下拉刷新 ##

启动下拉刷新

![在这里插入图片描述][2020062723491224.png]

list.json

{ 
      "enablePullDownRefresh": true,
      "onReachBottomDistance": 20
    }

停止下拉刷新

[https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.stopPullDownRefresh.html][https_developers.weixin.qq.com_miniprogram_dev_api_ui_pull-down-refresh_wx.stopPullDownRefresh.html]

> wx.stopPullDownRefresh(Object object)

// pages/list/list.js
    const fetch = require('../../utils/fetch')
    
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        //当前加载的分类
        category:{ },
        //子分类下的全部店铺
        shops: [],
        pageIndex:0,
        pageSize:20,
        hasMore: true
      },
    
      loadMore(){ 
        if(!this.data.hasMore) return;
        //从data中取出 pageIndex 和 pageSize
        let {  pageIndex, pageSize } = this.data
        const params = { _page: ++pageIndex, _limit: pageSize}
        return fetch(`categories/${ this.data.category.id}/shops`, params) 
        .then(res => { 
          const totalCount = parseInt(res.header['X-Total-Count'])
          const hasMore = pageIndex * pageSize < totalCount
            const shops = this.data.shops.concat(res.data)
            this.setData({  shops, pageIndex, hasMore})
         })
      }
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        console.log(2)
        console.log(options)
        //这里不能确定一定是在 onReady过后执行
        fetch(`categories/${ options.cat}`).then(res => { 
           console.log(res.data)
           //设置导航条
          // wx.setNavigationBarTitle({ 
          // title: res.data.name
          // })
           this.setData({  category: res.data})
          
             //加载完分类信息过后再去加载商铺信息
            this.loadMore();
        })
        
    
      
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
          console.log(1)
          if(this.data.category.name）{ 
            wx.setNavigationBarTitle({ 
              title: res.data.name
            })
          }     
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
          //重新加载
          this.setData({ shops:[],pageIndex:0, hasMore:false});
          this.loadMore()
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
           //需要判断是否正在加载，否则会有多次触发问题
          console.log('到底了，别啦了');
          this.loadMore().then(() => wx.stopPullDownRefresh());
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

## 详细页: ##

注意点:

使用wxs行内脚本设置过滤器。但是不支持es6

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 23]  
预览图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 24]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 25]  
效果:

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G96kqQ69-1593272623869)(本地生活项目.assets/1593266711073.png)\]][img-G96kqQ69-1593272623869_.assets_1593266711073.png]

## 源码地址: ##

感谢大神: [https://github.com/zce/weapp-locally][https_github.com_zce_weapp-locally]

--------------------

完

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627234404977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627234414639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200627234424150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200627234435905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200627234447284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020062723445880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200627234510902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200627234520293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200627234539465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/202006272345534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200627234603486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200627234616733.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200627234625704.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200627234647264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200627234701882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200627234712522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200627234735579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200627234744604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200627234757204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200627234805996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200627234816225.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20200627234830583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20200627234842152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[2020062723491224.png]: https://img-blog.csdnimg.cn/2020062723491224.png
[https_developers.weixin.qq.com_miniprogram_dev_api_ui_pull-down-refresh_wx.stopPullDownRefresh.html]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.stopPullDownRefresh.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20200627235027748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20200627235038729.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/20200627235048295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[img-G96kqQ69-1593272623869_.assets_1593266711073.png]: https://img-blog.csdnimg.cn/20200627235103581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[https_github.com_zce_weapp-locally]: https://github.com/zce/weapp-locally