小程序云开发实战总结|快速上手&场景实战（二）

解析器组件封装

解析器为开源wxparse，原作者已经不再维护，github地址：wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

1. 将项目中的wxParse文件引入到项目根目录中
   
2. 封装一个文本解析组件
   
3. 在组件的wxml文件中引入

<import src="/wxParse/wxParse.wxml" />
复制代码

1. 在组件的wxss文件中引入

@import "/wxParse/wxParse.wxss";
复制代码

1. 在组件的js文件中引入

import wxParse from "../../wxParse/wxParse.js";
复制代码

1. 定义组件属性，根据wxparse提供的参数项，定义我们解析器组件所需要的属性

properties: {
    bindName: {
      type: String
    },
    type: {
      type: String,
      value: "html"
    },
    data: {
      type: String
    },
    imagePadding: {
      type: Number,
      value: 0
    }
  },
复制代码

• bindName绑定的数据名(必填)
• type可以为html或者md(必填)
• data为传入的具体数据(必填)
• target为Page对象,一般为this(必填)
• magePadding为当图片自适应是左右的单一padding(默认为0,可选)

1. 封装一个解析方法，根据我们设定的组件属性进行解析，并在其中将解析好的内容即nodes响应式设置为数据value

build() {
      let { bindName, type, data, imagePadding } = this.properties;
      wxParse.wxParse(bindName, type, data, this, imagePadding)
      this.setData({
        value: this.data[bindName].nodes
      })
    },
复制代码

1. 在组件的wxml中使用数据渲染组件template

<template is="wxParse" data="{{wxParseData:value}}" />
复制代码

解析器组件使用

封装好解析器组件后，其与正常组件的引入使用方式相同

正如下面，我们只需要在拿到我们的html或者md字符串后调用this.selectComponent('#preContent').build()，这种无脑传入我们的插值数据即可完成渲染，非常好用。

<pre-build id="preContent" bindName="{{title}}" data="{{content}}"/>
复制代码

多种数据解析问题

如果你的应用需要出现不同种类的文本解析情况，那么就需要考虑这个问题，比如我需要解析出：资讯详情，新闻详情，百科详情，三种详情，那么会不会就有人去app.json初始化三个详情页，我猜肯定会有人这么干，下面我来提供我的思路

页面传参进行工厂化处理

下面是我们的路由跳转传参函数，将数据获取的id作为一个参数，将要获取数据的数据集合作为一个参数即cont

goCont:function(e) {
    let data = e.currentTarget.dataset
        wx.navigateTo({
            url: '../cont/cont?id=' + data.id+'&port='+data.cont
        })
    },
复制代码

在onload生命周期中获取到路由参数进行调用即可自由得获取任何数据集合中得内容

let { id, port } = options
wx.cloud.database().collection(port).where({_id:id})
复制代码

自定义tabbar与headbar

不同的场景有不同的需求，我们需要自己封装tabbar或headbar来达到我们的效果

tabbar封装与使用

官方文档给出了tabbar封装说明：自定义 tabBar | 微信开放文档 (qq.com)，下面我具体说一下我的封装和使用步骤

1. 在官方文档中下载封装的tab项目示例，得到custom-tab-bar文件
   
2. 将文件存放在自己项目的根目录中
   
3. 在app.json更改tab配置

"custom": true,
复制代码

1. 在app.json中配置全局组件

"usingComponents": {
        "x-tabbar": "./custom-tab-bar/index"
},
复制代码

headbar的封装与使用

head组件的封装和普通组件的封装方法相同，只不过因为有右上角胶囊的存在，所以是要计算不同机型的高度来进行适配

大概的步骤就是：

1. 在需要使用headbar的页面组件进行json配置

"navigationStyle": "custom"
复制代码

1. 引入head组件

"usingComponents": {
    "Header": "/components/headBar/headBar"
  },
复制代码

1. 应用

<Header  backHomeFlag customTitle="详情"></Header>
复制代码

具体demo大家可以参考项目组件目录中的headBar组件文件与我之前总结的headbar封装和使用方法：微信小程序head组件的封装与使用 - 掘金 (juejin.cn)

换肤

项目有跟随季节换肤的功能，跟随季节的改变更换主题颜色与资源，当然这里我是手动更改了月份。

全局变量的使用

这个需求肯定是需要存储season作为全局变量，在每个组件内进行使用

1. 在app.js中预设全局变量

globalData: {
        season: 'spring'
    },
复制代码

1. 在初始化的生命周期中进行季节判断与赋值

const app = getApp()
app.globalData.season = 'spring'
复制代码

具体实现步骤

1. 在onload生命周期中获取全局变量并设置季节值

const app = getApp();
this.setData({
    season: app.globalData.season
})
复制代码

1. 预设好class，比如spring-text，autumn-text
   
2. 插值进行类的变换实现换肤效果

<text bindtap="read" class="{{season}}-text">点击阅读</text>
复制代码

封装一个获取季节的全局方法

每个页面都需要进行季节值的获取与设置，那我们不如使用util来封装一个工具函数

1. 在utils文件目录下的util文件，声明一个获取季节的方法

const setSeason = (that) => {
    const app = getApp();
    that.setData({
        season: app.globalData.season
    })
}
复制代码

1. 将这个方法暴露出去

module.exports = {
    setSeason
}
复制代码

1. 在我们所需要的页面进行调用

let util = require('../../utils/util.js')
let that = this
util.setSeason(that)
复制代码

非常好用！！！

icon的更换

由于tab组件的特殊性，其icon需要在data里进行配置，而如果我们通过if else判断季节，再使用setData做出改变的话很不优雅，所以我们可以采用模板字符串的形式，即可完成tabbar的icon更迭。

list: [{
            selectedIconPath: `../images/tabicon/${season}-home-active.png`,
            iconPath: `../images/tabicon/spring-home.png`,
            pagePath: "../home/home",
            text: "首页"
        }]
复制代码

如果我们使用if和响应式替换的话，看起来就很冗余

if(season === "spring") {
    this.setData({
         list:[{
            selectedIconPath: "../images/tabicon/spring-home-active.png",
            iconPath: "../images/tabicon/spring-home.png",
            pagePath: "../home/home",
            text: "首页"
        }]
    })
}else {
  // ...........
}
复制代码

首屏渲染

谈起首屏渲染肯定是应用优化中重要的部分，而小程序开发者工具中自动生成骨架屏的工具大大地减少了开发者的工作，只需要几步就可以生成对应页面的骨架屏文件，具体实战步骤可以参考我的这篇文章微信小程序实战之骨架屏的应用与实现 - 掘金 (juejin.cn)里面详细概述了微信小程序骨架屏的使用方法和使用注意事项

触底加载与下拉刷新

因为涉及到卡片列表所以触底加载和下拉刷新的实现是必要的，通过灵活使用limit()和skip()来进行集合特定区间内数据记录的获取，来达到我们的目的，具体实战步骤可以参考我的这篇文章小程序触底加载与下拉刷新功能的设计与实现 - 掘金 (juejin.cn)里面详细讲解了我在这个项目中实现触底加载和下拉刷新的过程。

部署上线

大概的上线流程如下

1. 在开发者工具中上传我们的代码
2. 检查我们调用的api，比如我用到了位置信息，那么我们就需要去公众平台的开发部分的接口管理部分进行一个接口申请
3. 申请用户协议
4. 提交审核（不进行上面的步骤就会被驳回，我当时被驳回了好几次）
5. 通过后即可部署上线使用