mpvue骨架屏vue骨架屏原生微信小程序wxml骨架屏分享笔记

mpvue 小程序骨架屏

可查看这篇文章《小程序骨架屏》

原生微信小程序 wxml 骨架屏

可参考作者腾讯的 git 项目：《skeleton》

vue 骨架屏

vue-skeleton-webpack-plugin 骨架屏框架，多种样式

方法一：（SPA 中单个 Skeleton）

可参考这个文章《vue-cli 构建的项目如何加入骨架屏 skeleton》

方法二：（SPA 中多个 Skeleton）

这里和方法一相同的创建和 build 里创建流程一样。主要修改的里面的代码：

src 下创建 2 种骨架屏展示，然后可根据不同路由页面，进行显示其他一种，下面实现路由分配

/build/webpack.skeleton.conf.js 修改为：

'use strict';

const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

function resolve(dir) {return path.join(__dirname, dir)
}

let skeletonWebpackConfig = merge(baseWebpackConfig, {
  target: 'node',
  devtool: false,
  entry: {app: resolve('../src/entry-skeleton.js')
  },
  output: Object.assign({}, baseWebpackConfig.output, {libraryTarget: 'commonjs2'}),
  externals: nodeExternals({whitelist: /\.css$/}),
  plugins: []})

// important: enable extract-text-webpack-plugin
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
}),

module.exports = skeletonWebpackConfig

/build/webpack.dev.conf.js 和 /build/webpack.prod.conf.js 修改为

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')




// inject skeleton content(DOM & CSS) into HTML
new SkeletonWebpackPlugin({webpackConfig: require('./webpack.skeleton.conf'),
  quiet: true,
  minimize: true,
  router: {
    mode: 'hash',
    routes: [
      {
        path: '/page1',
        skeletonId: 'skeleton1'
        },
        {
          path: '/',
          skeletonId: 'skeleton2'
        },
    ]
  }
}),

由上可看到，SPA 中多个骨架屏，可根据路由进行渲染不同的骨架模块。

如果遇到 v -for/wx:for，列表的，如果动态数据，个人建议是可以写个默认数据，因为骨架屏是需要数据才能有标签，再增加 class 的。可以判断当前的数组是否为空，再渲染默认数据，如果数组真没数据时，于把默认数据去除，显示暂无数据页面。

如果帮助到您，给个赞或收藏吧！！！！！！！！！！！！