小程序-开发日志

项目的commit历史：

Github @buuoltwo

项目先手准备

1. 小程序开发指南

WXML语法
 => div
 => span
 => img
 覆盖在原生组件之上的标签

2. 项目结构

   
   
   

   微信截图_20200930150210.png

3. 其他阅读：
   强烈推介的几个微信小程序开发小技巧，简单又实用

约定：星星，旗子，水滴与赞
⭐标注为踩坑总结；
标注为封装优化，完成一个大标题如pages/home之后再掉过头来实现。
标注为搁置，暂时不打算实现；
心得写在这里：
-做静态布局的o时候如有psd, 对图片大小，量到多少写多少rpx。
-先写静态布局，很多个block复制出来看看再结合js中的数组进行列表渲染
-知道想要更多个性化配置的时候要去找对应的api

---

全局配置

目标

1. 修改window的底色
2. tabBar运用iconfont-Symbol引入

参考：

• 自定义tabBar
• 自定义组件
• 小程序tabbar这套方案全搞定！

⭐自定义tabBar

1. 配置信息app.json：
   • 添加custom: true字段，
   • 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
   • PS:注意usingComponents的书写和全局开启的意思
2. 提供根目录入口，即严格书写结构目录 custom-tab-bar

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写自定义组件，该自定义组件完全接管tabBar的渲染
   参考自定义tabBar代码段
   思路为，自定义组件使用列表渲染，需要维护selected：index，以及一个数组list，数组元素为若干tabBar对象。
   维护data嘛，WXML需要在列表循环item中自定义属性data-index，data-path，绑定bindtap事件。
   在bindtap绑定的方法上，1. 维护selected 2. 路由跳转,可以是wx.switchTab()方法；
   最后，为保证跳转后selected高亮，在跳转后的page或者components的onshow / show 方法中调用page实例的方法this.getTabBar()，再维护一次selected状态。

【搁置】tabBar使用的图片。在小程序中使用iconfont:
mini-program-iconfont-cli
小程序使用svg

---

首页

目标

pages/home的目标有：轮播，列表， 轮播不跳转，每日不跳转，列表跳转详情

设计稿

轮播swiper

1. 调用接口：接口必须在开发白名单；
2. 静态布局: 文字使用绝对定位，页数使用右浮；
3. 列表渲染

前置：

1. page的生命周期函数onload发起 wx.request()

2. 接口约定

   
   
   

   接口
3. 做静态布局的时候如有psd, 对图片大小，量到多少写多少rpx。

⭐开发：

1. 本地开发跨域，需要勾选不校验合法域名。
2. 维护banners数组需要调用Page实例的this.setData()方法，而不是直接对this.banners变量操作(油门刹车和车速的例子)
3. 注意sucess属性如果不用箭头函数，此时this是undefined，需要_self拿到外层的this。
4. 轮播默认swiper-item拥有样式，发现图片样式有问题，将item以及图片都添加样式

//page/home/home
//page实例的生命周期
  onLoad: function (options) {
    wx.request({
      url: 'http://iwenwiki.com:3002/api/banner',
      success: res => {
        console.log(res)
        // this.banners = res.data.data
        this.setData({
          banners: res.data.data
        })
      }
    })
  },

image0.png

image1.png

列表

1. 我把图片的宽高直接告诉好了..
2. 最粗浅的实现(⭐静态grid + ⭐单行省略; 接口数据||列表渲染 => or 动态获取)
3. 对列表使用loading
4. 运用模板，在很多地方都需要list，抽象。

静态布局：

//1.
width: 210rpx;
height: 140rpx;

//2.1
  
    title
    
    description
    2233阅读
  
// ---------------------------------------
  
    title
    
    description
    2233阅读
  
// ---------------------------------------
  
    title
    
    description
    2233阅读
  
// ---------------------------------------

//2. 1
父 {
display: grid;
grid: 行 行 行 / 列 列
}
子 {
grid-area: 第几行 / 第几列 / 第几行 / 第几列
}

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


一行溢出省略，不许折行{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
多行溢出省略，父高=行高*3倍 {
//  grid-area: 2/2/3/3;
  height: 120rpx;
  line-height: 40rpx;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.list {
  display: grid;
  grid: auto auto auto / 210rpx 1fr;
  margin-top: 10px;
  border-bottom: 1px solid rgba(0,0,0, .2);
}
.list .list-title {
  grid-area: 1/1/2/3;
}
.list .list-image {
  grid-area: 2/1/4/2;
}
.list image {
  width:210rpx;
  height: 140rpx;
}
.list .list-description {
  grid-area: 2/2/3/3;
}
.list .list-reading {
  grid-area: 3/2/4/3;
  margin-left: auto;
}
.list text {
  margin-right: 10rpx;
  color: orangered;
}

接口2

多行省略，只好设计高度为行高三倍作弊。

---

动态获取：

//2.2
     onLoad: function (options) {
    wx.request({
      url: 'http://iwenwiki.com:3002/api/banner',
      // MORE CODE ..
      }
    })
    wx.request({
      url: 'http://iwenwiki.com:3002/api/indexlist',
      success: res => {
        console.log(res.data.data)
        this.setData({
          list: res.data.data
        })
      }
    })

//2.3
  
    {{item.title}}
    
    {{item.desc}}
    {{item.readNum}}阅读
  

3. 使用loading

• 分析：在微信开放文档中搜索Loading；
• 可以使用weui组件库；也可以调用原生的API，进去看看；
• 小程序的API有点东西。界面和路由，以及网络，广告，等等都有明确的文档。那就选用wx.showloading()看起来不错。
  
  

  image.png

image.png

---

列表跳转详情：

1. 路由:⭐页面跳转，传值的两种实现；
2. 接口约定
3. 新页面page/indexDetail

image.png

a. 在某些页面跳转中，url对应的params对象需要传值。⭐它有两种实现：

• 常用的是靠DOM上的事件，调用api，使用data-*自定义属性保存item上的数据。
• 第二种是靠路由相关的标签，调用或者它们的属性，在遍历中可以直接在item上拿到数据。
  
  

  image.png

// home.js
 /**
   * 页面的原型方法
   */
  taphref(e){
    // console.log(e)
    let data = e.currentTarget.dataset
    wx.navigateTo({
      // url: '/pages/about/about',
      url: '/pages/indexDetail/indexDetail?itemId=' + data.id
    })
  },

js其中的itemId数据，就是打开页面的onload方法中能够轻易得到的options形参。

b. 官网中wx.navigateTo()还有许多向打开页面传递数据的办法，一时不知怎么回事。

https://developers.weixin.qq.com/community/develop/article/doc/000664ed6d88b061d2daf19685b413

c. 在打开的页面中，书写页面实例的生命周期：onload方法对接口发起请求。

//pages/indexDetail/indexDetail.js
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options)
    wx.request({
      url: 'http://iwenwiki.com:3002/api/indexlist/detail?id=' + options.itemId,
      success: res => {
        console.log(res)
        this.setData({
          indexDetails: res.data[0]
        })
      }
    })

  },

静态布局

1. page/indexDetail还要跳一跳才能进去改样式，太麻烦了，有什么解决办法吗？有的，新增编译模式即可。这个方法我是在一段视频课中找到的，试着google了很多，但始终无法精准描述我的问题。

image.png

2. 文本样式：两边对齐，行首缩进

   
   
   

   image.png

3. 图片的样式：这是一篇文章的头部，我只是给它加个父容器，父容器限定高度并且设置溢出overflow:hidden。

   
   
   

   image.png

---

优化

目标

1. 使用模板，独立列表部分的逻辑
2. 原生api的wx.request进行封装

模板

为什么使用模板

当前代码段重复使用，哪里使用哪里调用

参考 框架-WXML语法-模板：微信开放文档

⭐什么是模板

1. 定义模板，拥有name

2. 使用模板，运用is属性