小程序官网: https://www.weitimes.com 小程序地址 https://www.wpstorm.cn 联系微信: hackdxd WordPress多端开源小程序,这是丸子团队在发布丸子社区小程序之后，首次打造一款免费简洁的开源小程序。 要维持丸子社区小程序的升级，又要开发一款支持微信和 QQ的小程序前端，真的挺不容易的。 但是，我们还是坚持了下来，希望能够帮助到想要基于 WordPress 程序创建小程序的用户。 这次的开源小程序功能不多，界面清新，简洁。 开源小程序功能： 文章资源实时同步 支持视频在线播放 支持海报生成 支持分享朋友圈 支持搜索关键词文章 支持文章点赞 / 收藏 / 评论 支持查看个人点赞 / 收藏 / 评论文章列 没有太复杂的功能，除了简洁还是简洁，除了清新还是清新，重要的是，如此优雅的小程序，加载性能好，适用性强。 小程序演示截图: [图片] [图片] 我们已经把开源小程序发布到了WordPress小程序主题资源平台上，如果你对小程序有兴趣。 可以访问 WordPress小程序主题资源平台下载: https://www.wpstorm.cn 我们已经把这款开源小程序发布到了开源平台上，如果你对这款小程序有兴趣，可以上以下两个平台下载: 地址; 如何下载开源小程序？ 复制以上地址在你的浏览器打开，选择下载即可,了解详情（ 记得给我们的开源小程序 Star 哦 _）。 GitHub地址:https://github.com/dchijack/Travel-Mini-Program GiTee地址：https://gitee.com/izol/Travel-Mini-Program 丸子WodPress小程序付费版本(丸子社区/丸子资讯) 强大的后台功能以及简化的小程序设置，几乎不需要更改小程序源码，只要在网站后台简单的配置信息，就能拥有一个漂亮又功能强大的社区小程序。 在线体验扫码： wseywt.jpg 基本功能 网站小程序数据实时同步更新； 首页推荐文章展示； 文章/动态/点赞/评论/收藏/转发； 文章海报生成； 评论跟随； 强大的广告功能； 支持文章内容转换语音朗诵， 采用百度语音/讯飞语音技术，支持用户自行选择平台； 社区功能 小程序端发表社区话题，发布文章; 小程序文章链接分享，可自动获取分享链接的内容，支持的分享链接包括:微信公众号、抖音、微博、B站文章内容; 小程序视频链接分享，可自动获取分享视频地址，支持的分享视频包括：微博视频、抖音、VueVideo及特定的腾讯视频链接； 支持用户关注，可以互相关注，随时可以了解你喜欢的人发布的内容; 积分功能：支持阅读、评论、发布及签到积分，可以设定每天最高可增加积分额度; 新增功能 微信小程序扫码登录网站，专属小程序在线扫码 基于位置信息的动态发布及文章推荐，可以让你快速找到附近的人。 丸子社区新版做了整体UI界面优化 圈子 新增了仿微信视频号功能 新增了发文章功能 新增了解析接口调整 新增了支持拼多多带货一键发布 小程序演示截图: wsVr1H.png wsVfN8.png wsVI3Q.png 一款UI设计精美的自媒体小程序目前支持四端两款模板，完全后台一键式配置，直接使用，基本不懂编程的小白都可以使用。 在线体验扫码NO1： wsmp01.jpg 在线体验扫码NO2： wsmn0I.jpg 基础功能 增加自定义文章类型-公众号推文 支持创建焦点幻灯片图文显示 支持腾讯视频 / 微博视频解析 支持积分功能，签到打卡积分 支持多端积分付费阅读文章 支持 QQ 小程序消息模板通知 支持百度小程序消息模板通知 支持微信小程序关联公众号文章 支持网站后台下载小程序 小程序演示模板NO1: wsVTjs.png wsVbBq.png 小程序演示模板NO2: wsVz34.png wsZpv9.png wsZPD1.png

首屏 一般情况下，在首屏数据未拿到之前，为了提升用户的体验，会在页面上展示一个loading的图层，类似下面这个 [图片] 其中除了菊花图以外网上还流传这各种各样的loading动画，在PC端上几乎要统一江湖了，不过最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏" 概念 A skeleton screen is essentially a blank version of a page into which information is gradually loaded. 在H5中，骨架屏其实已经不是什么新奇的概念了，网上也有各种方案生成对应的骨架屏，包括我们经常使用的知乎、饿了么、美团等APP都有应用骨架屏这个概念 图片来源网络，侵删 [图片] 方案 先从H5生成骨架屏方案开始说起，总的来说H5生成骨架屏的方案有2种 完全靠手写HTML和CSS方式给每个页面定制一套骨架屏 利用预渲染的方式生成静态骨架屏 第一套方案，毫无疑问是最简单最直白的方式，缺点也很明显，假如页面布局有修改的话，那么除了修改业务代码之外还需要额外修改骨架屏，增加了维护的成本。 第二套方案，一定程度上改善了第一套方案带来的维护成本增加的缺点，主要还是使用工具预渲染页面，获取到DOM节点和样式，保留页面结构，覆盖样式，生成灰色块盖在原有文本、图片或者是canvas等节点上面，最后将生成的HTML和CSS打包出来，就是一个带有骨架屏的页面。最后再利用webpack工具将生成的骨架屏插入到HTML里面，详细的话可以看看饿了么的分享，这里就不多描述了。 调研了下H5生成骨架屏的方案，对于小程序生成骨架屏的方案也有了一个大致的想法，主要有2个难点需要实现 预渲染 获取节点 预渲染 再说回饿了么提供的骨架屏的方案，使用 puppeteer 渲染页面（或者使用服务端渲染，vue或者react都有提供相应的方案），拿到DOM节点和样式，这里有一点需要注意的是，页面的渲染是需要初始化的数据，数据的来源可以是初始化的data（vue）或者mock数据，当然小程序是无法直接使用 puppeteer 来做预渲染（有另外的方案可以实现），需要利用小程序初始化的 data + template 渲染之后得到一个初始化结构作为骨架屏的结构 [代码]//index.js Page({ data: { motto: 'Hello World', userInfo: { avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132', nickName: 'jay' }, lists: [ 'aslkdnoakjbsnfkajbfk', 'qwrwfhbfdvndgndghndeghsdfh', 'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh', ], showSkeleton: true }, onLoad: function () { const that = this; setTimeout(() => { that.setData({ showSkeleton: false }) }, 3000) } }) //index.wxml <view class="container"> <view class="userinfo"> <block> <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text> </block> </view> <view style="margin: 20px 0"> <view wx:for="{{lists}}" class="lists"> <icon type="success" size="20" class="list skeleton-radius"/> <text class="skeleton-rect">{{item}}</text> </view> </view> <view class="usermotto"> <text class="user-motto skeleton-rect">{{motto}}</text> </view> <view style="margin-top: 200px;"> aaaaaaaaaaa </view> </view> [代码] 有了上面的 data + template 之后，就有了一个初始化的页面结构，接下来就需要拿到节点信息 节点 小程序基础库1.4.0之后小程序基础库提供了一组新的API，可用于获取节点信息，具体API戳这里。 跟H5方式一样，根据class或者id获取节点信息，不同的是只能获取到当前的节点信息，无法获取到其父或者子节点信息，所以只能手动给需要渲染骨架屏的节点添加相应的class或者id [代码]<view class="container"> <view class="userinfo"> <block> <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text> </block> </view> <view style="margin: 20px 0"> <view wx:for="{{lists}}" class="lists"> <icon type="success" size="20" class="list skeleton-radius"/> <text class="skeleton-rect">{{item}}</text> </view> </view> <view class="usermotto"> <text class="user-motto skeleton-rect">{{motto}}</text> </view> <view style="margin-top: 200px;"> aaaaaaaaaaa </view> </view> [代码] 约定2个特殊的class作为获取节点信息的标记[代码]skeleton-rect[代码]和[代码]skeleton-radius[代码]，在页面中获取相应的[代码]top[代码]、[代码]left[代码]、[代码]width[代码]、[代码]height[代码]进行骨架屏的绘制 结果 [图片] 具体的调用方式和源码，请看 github ，最后求start 总结 上文有说到小程序也可以使用 page-skeleton-webpack-plugin 方式一样生成骨架屏，最重要的一点就是需要将小程序跑在chrome上面，后面的流程就一样了，至于怎么将小程序跑在chrome上面呢？可以利用 wept ，缺点就是目前作者已经停止维护这个工具了，不支持新版小程序的API。 说回来我这个生成骨架屏的方案，其实跟 page-skeleton-webpack-plugin 有点相似，不同的是，page-skeleton-webpack-plugin 采用离线渲染的方式生成静态骨架屏插入路由中，而我采用运行时先渲染页面默认结构，然后根据默认结构再绘制骨架屏。从性能角度出发确实不如 page-skeleton-webpack-plugin，但是也差不了多少了，主要还是小程序并没有提供类似服务端渲染的方案。目前从使用上来讲，还是有点小麻烦，需要默认数据撑开页面结构，需要给相应的节点添加class，后面有时间再研究下有没有更好的方案吧~~~