sbfkcel

sbfkcel 查看完整档案

广州编辑  |  填写毕业院校  |  填写所在公司/组织 vvadd.com 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

sbfkcel 发布了文章 · 1月14日

Towxml 3.0让微信小程序支持LaTex数学公式及yuml流程图

Towxml 是一个让小程序可以解析Markdown、HTML的解析库。能够使小程序完美解析Markdown内容。

根据用户的反馈和小程序提供的API对Towxml进行了完成的重写。陆续间断地经历了近半年,终于迎来了一个新的大版本。

新版本较之前解析速度更快,体积也更小,并且支持无限层级的内容。

同时也根据部分用户的反馈增加了一些新功能。对微信小程序的Markdown及Html内容解析支持更加完善。

项目地址:https://github.com/sbfkcel/towxml

主要增加的有:

  • 支持echarts图表(3.0+)✨
  • 支持LaTex数学公式(3.0+)✨
  • 支持yuml流程图(3.0+)✨
  • 支持按需构建(3.0+)✨

Demo截图

image.png

如何使用?

Towxml 3.0使用有以下几个步骤。

首先,需要构建Towxml

  • 克隆项目到本地

    • git clone https://github.com/sbfkcel/towxml.git
  • 安装构建依赖

    • npm installyarn
  • 编辑配置文件towxml/config.js

    • 根据自行需要,仅保留你需要的功能即可(配置中有详细注释)
  • 运行 npm run buildyarn run build即可
新构建出来的文件会保存在你桌面上的towxml目录,需要将此目录复制到你的小程序项目中去

开始使用

将构建出来的towxml并解压至小程序项目根目录下,即(小程序/towxml

引入库/app.js

//app.js
App({
    // 引入`towxml3.0`解析方法
    towxml:require('/towxml/index')
})

在页面配置文件中引入towxml组件 /pages/index/index.json

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

在页面中插入组件/pages/index/index.wxml

<!--index.wxml-->
<view class="container">
  <towxml nodes="{{article}}"/>
</view>

解析内容并使用/pages/index/index.js

//获取应用实例
const app = getApp();
Page({
    data: {
        isLoading: true,                    // 判断是否尚在加载中
        article: {}                        // 内容数据
    },
    onLoad: function () {
        let result = app.towxml(`# Markdown`,'markdown',{
            base:'https://xxx.com',                // 相对资源的base路径
            theme:'dark',                    // 主题,默认`light`
            events:{                    // 为元素绑定的事件方法
                tap:(e)=>{
                    console.log('tap',e);
                }
            }
        });

        // 更新解析数据
        this.setData({
            article:result,
            isLoading: false
        });
        
    }
})

API

app.towxml(str,type,options)有三个参数

  • str <必选> string,html或markdown字符串
  • type <必选> string,需要解析的内容类型htmlmarkdown
  • options <可选> object,可选参数,可以该选项设置主题绑定事件设置base

FAQ

1. 为什么选择yuml作为流程图?
yuml相对比uml来说有灵活的图形定制方式,且解析速度更快。

2. echarts所有图表都支持吗?
考虑到库体积的问题,Towxml3.0 默认集成的echarts仅支持柱状图折线图饼图,如需其它图表可 自行定制

3. 为什么需要构建,不能直接使用吗?
也可以直接使用,不过可能会存在一些问题,或有一些无用的文件。所以建议还是自行构建出自己想要的版本库。

查看原文

赞 0 收藏 0 评论 0

sbfkcel 发布了文章 · 1月14日

Towxml 3.0让微信小程序支持LaTex数学公式及yuml流程图

Towxml 是一个让小程序可以解析Markdown、HTML的解析库。能够使小程序完美解析Markdown内容。

根据用户的反馈和小程序提供的API对Towxml进行了完成的重写。陆续间断地经历了近半年,终于迎来了一个新的大版本。

新版本较之前解析速度更快,体积也更小,并且支持无限层级的内容。

同时也根据部分用户的反馈增加了一些新功能。对微信小程序的Markdown及Html内容解析支持更加完善。

项目地址:https://github.com/sbfkcel/towxml

主要增加的有:

  • 支持echarts图表(3.0+)✨
  • 支持LaTex数学公式(3.0+)✨
  • 支持yuml流程图(3.0+)✨
  • 支持按需构建(3.0+)✨

Demo截图

image.png

如何使用?

Towxml 3.0使用有以下几个步骤。

首先,需要构建Towxml

  • 克隆项目到本地

    • git clone https://github.com/sbfkcel/towxml.git
  • 安装构建依赖

    • npm installyarn
  • 编辑配置文件towxml/config.js

    • 根据自行需要,仅保留你需要的功能即可(配置中有详细注释)
  • 运行 npm run buildyarn run build即可
新构建出来的文件会保存在你桌面上的towxml目录,需要将此目录复制到你的小程序项目中去

开始使用

将构建出来的towxml并解压至小程序项目根目录下,即(小程序/towxml

引入库/app.js

//app.js
App({
    // 引入`towxml3.0`解析方法
    towxml:require('/towxml/index')
})

在页面配置文件中引入towxml组件 /pages/index/index.json

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

在页面中插入组件/pages/index/index.wxml

<!--index.wxml-->
<view class="container">
  <towxml nodes="{{article}}"/>
</view>

解析内容并使用/pages/index/index.js

//获取应用实例
const app = getApp();
Page({
    data: {
        isLoading: true,                    // 判断是否尚在加载中
        article: {}                        // 内容数据
    },
    onLoad: function () {
        let result = app.towxml(`# Markdown`,'markdown',{
            base:'https://xxx.com',                // 相对资源的base路径
            theme:'dark',                    // 主题,默认`light`
            events:{                    // 为元素绑定的事件方法
                tap:(e)=>{
                    console.log('tap',e);
                }
            }
        });

        // 更新解析数据
        this.setData({
            article:result,
            isLoading: false
        });
        
    }
})

API

app.towxml(str,type,options)有三个参数

  • str <必选> string,html或markdown字符串
  • type <必选> string,需要解析的内容类型htmlmarkdown
  • options <可选> object,可选参数,可以该选项设置主题绑定事件设置base

FAQ

1. 为什么选择yuml作为流程图?
yuml相对比uml来说有灵活的图形定制方式,且解析速度更快。

2. echarts所有图表都支持吗?
考虑到库体积的问题,Towxml3.0 默认集成的echarts仅支持柱状图折线图饼图,如需其它图表可 自行定制

3. 为什么需要构建,不能直接使用吗?
也可以直接使用,不过可能会存在一些问题,或有一些无用的文件。所以建议还是自行构建出自己想要的版本库。

查看原文

赞 0 收藏 0 评论 0

sbfkcel 发布了文章 · 2018-04-24

微信小程序Markdown、HTML解析库(支持wepy)

Towxml

Towxml 是一个可将HTMLMarkdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。

用于解决在微信小程序中MarkdownHTML不能直接渲染的问题。

特色

  • 支持代码语法高亮
  • 支持emoji表情
  • 支持上标、下标、下划线、删除线、表格、视频、图片(几乎所有html元素)……
  • 支持typographer字符替换
  • 多主题动态支持
  • 极致的中文排版优化
  • 前后端支持

截图

以下截图即demo目录编译的效果

68747470733a2f2f63646e2e7261776769742e636f6d2f7362666b63656c2f746f77786d6c2f65646332356539372f646f63732f64656d6f2e706e67

快速上手

1. 克隆TOWXML到小程序根目录

git clone https://github.com/sbfkcel/towxml.git

2. 在小程序app.js中引入库

//app.js
const Towxml = require('/towxml/main');     //引入towxml库
App({
    onLaunch: function () {
    },
    towxml:new Towxml()                     //创建towxml对象,供小程序页面使用
})

3. 在小程序页面文件中引入模版

<!--pages/index.wxml-->

<!--引入towxml模版入口文件,并使用模版-->
<import data-original="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>

4. 在小程序对应的js中请求数据

//pages/index.js

const app = getApp();
Page({
    data: {
        //article将用来存储towxml数据
        article:{}
    },
    onLoad: function () {
        const _ts = this;

        //请求markdown文件,并转换为内容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                //将markdown内容转换为towxml数据
                let data = app.towxml.toJson(res.data,'markdown');

                //设置文档显示主题,默认'light'
                data.theme = 'dark';

                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})

5. 引入对应的WXSS

/**pages/index.wxss**/

/**基础风格样式**/
@import '/towxml/style/main.wxss';


/**如果页面有动态主题切换,则需要将使用到的样式全部引入**/

/**主题配色(浅色样式)**/
@import '/towxml/style/theme/light.wxss';

/**主题配色(深色样式)**/
@import '/towxml/style/theme/dark.wxss';

OK,大功告成~~

API

如果为了追求极致的体验,建议将markdownhtml转换为towxml数据的过程放在服务器上,在小程序中直接请求数据即可。

1. 依赖环境

需要 Node.js 环境。(已经安装请忽略)

2. 安装towxml

npm install towxml

3. 接口使用

const Towxml = require('towxml');
const towxml = new Towxml();

//Markdown转WXML
let wxml = towxml.md2wxml('# Article title');

//html转WXML
let wxml = towxml.html2wxml('<h1>Article title</h1>');

//Markdown转towxml数据
let data = towxml.toJson('# Article title','markdown');

//htm转towxml数据
let data = towxml.toJson('# Article title');

Demo示例

  1. towxml/demo添加为小程序工程
  2. 再克隆towxmldemo目录
  3. 使用小程序开发工具编译即可

License

MIT

查看原文

赞 4 收藏 3 评论 3

sbfkcel 发布了文章 · 2018-04-24

带加载进度的Web图片懒加载组件Lazyload

在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验。

Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏览的区域去自动加载对应的图片(用户还没有浏览的区域图片则不会进行加载)。

Lazyload 允许图片加载之前,指定一张相对较小的封面图。组件会优先加载封面图片,以优化用户浏览感受。当原图加载完成之后则会覆盖封面图片。

除此之外,Lazyload 还能获取到当前图片的加载进度。

效果演示

如何使用?

2.1 Html

  • html set the data-src property.
  • data-cover is not necessary
<img class="img" data-data-original="http://xxx/img1.jpg" data-cover="http://xxx/img1-cover.jpg">
<img class="img" data-data-original="http://xxx/img2.jpg" data-cover="http://xxx/img2-cover.jpg">
<img class="img" data-data-original="http://xxx/img3.jpg" data-cover="http://xxx/img3-cover.jpg">
 
<div class="imgBg" data-data-original="http://xxx/img4.jpg" data-cover="http://xxx/img4-cover.jpg"></div>
<div class="imgBg" data-data-original="http://xxx/img5.jpg" data-cover="http://xxx/img5-cover.jpg"></div>
<div class="imgBg" data-data-original="http://xxx/img6.jpg" data-cover="http://xxx/img6-cover.jpg"></div>

2.2 Import ./dist/Lazyload.js file to the page

<script data-original="http://xxx/dist/Lazyload.js"></script>

or

let Lazyload = require('./dist/Lazyload.js');

2.3 Initialization

//Get elements
var eList = [];
eList.push.apply(eList, document.getElementsByClassName('img'));
eList.push.apply(eList, document.getElementsByClassName('imgBg'));

//Create Lazy
var lazy = new Lazyload({
    obj:eList,          //elements
    range:200           //Extra range
});

// //custom tips
// lazy.tips = function(obj){
//     var e = obj.o,                    //element
//         schedule = obj.schedule;      //load schedule
//     console.log(e,schedule);
// };

//Init
lazy.init();
查看原文

赞 1 收藏 2 评论 0

sbfkcel 关注了用户 · 2018-04-24

厦冰 @xiabingli

君子终日乾乾,夕惕若,厉无咎

关注 15510

sbfkcel 关注了用户 · 2018-04-24

某熊猫桑 @marsgt

承认自己做不到,坦诚自己不够好。

关注 19692

sbfkcel 关注了用户 · 2018-04-24

yuanxiaowa @yuanxiaowa

循规蹈矩太无聊了,要的就是颠覆

关注 23724

sbfkcel 关注了用户 · 2018-04-24

justjavac @justjavac

会写点 js 代码

关注 14479

sbfkcel 关注了用户 · 2018-04-24

StephenTian @stephentian

NO BB,show me the code

关注 13862

认证与成就

  • 获得 5 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • towxml

    微信小程序Markdown、Markdown渲染库。

  • FWS

    一个简单高效的前端自动化构建工具。零配置,即可完成创项目的创建、编译、发布等日常工作流。

  • WechatJumpGameHelper

    使用node.js实现的微信跳一跳辅助工具。

注册于 2018-04-24
个人主页被 282 人浏览