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.cssSourceMapfunction 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-pluginskeletonWebpackConfig.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 HTMLnew 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的。可以判断当前的数组是否为空，再渲染默认数据，如果数组真没数据时，于把默认数据去除，显示暂无数据页面。
如果帮助到您，给个赞或收藏吧！！！！！！！！！！！！