小程序开发总结02 - 开发技巧和第三方插件的使用

小程序开发总结02 - 开发技巧和第三方插件的使用

1. 使用Promise处理异步接口

es6的Promise让异步接口的处理变得轻松,在旧版本的小程序中并不原生支持Promise,需要引入第三方库,例如:https://github.com/stefanpenner/es6-promise,然而在新版的小程序中已经原生支持了Promise,直接使用即可。

// 从服务端获取用户登录信息,此处仅作演示,实际使用需要本地存储,避免频繁调用线上接口
const getUserInfo = () => {
    return new Promise((resolve, reject) => {
        wx.request({
            url: 'https://xxxxx/login',
            data: {},
            success: (res) => {
            	resolve(res);
            },
            fail: () => {
            	reject();
            }
        })
    })
}

同步处理后续命令

getUserInfo().then((res)=>{
	let userInfo = res;
});

2. 富文本的显示

小程序中经常需要展示资讯类信息,解析富文本有两种有效的方式:官方的rich-text富文本组件和wxParse组件。

01.jpg

rich-text

rich-text富文本组件是小程序1.4.0版本后推出的,可以通过js脚本把html解析成一定格式的nodes,然后在 rich-text 中显示。详细教程见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html,但是这个组件存在一下一些问题:

  1. 对图片的显示很不友好
  2. 支持的node类型有限,例如不支持解析wxml
  3. 需要手动解析html文本为node对象,成本较高

因此,更推荐第二种渲染富文本的方式——wxParse组件

wxParse组件(推荐)

wxParse是专门用于微信小程序的富文本解析组件,它支持Html及markdown等转wxml可视化,github地址:https://github.com/icindy/wxParse,github中已有详细的教程,此处简单总结下配置流程:

02.jpg

1 - 复制wxParse库文件到项目目录

2 - 项目中引入wxParse库文件,wxParse.wxmlwxParse.jswxParse.wxss

3 - 页面js文件中处理富文本WxParse.wxParse(bindName, type, data, target, imagePadding),如此处为:WxParse.wxParse('article', 'html', res.data.msg.sContent, this, 5)

参数说明: bindName:绑定的数据名(必填) type:html或md(必填) . data:传入的具体数据(必填) . target:Page对象,一般为this(必填) imagePadding:当图片自适应时的左右padding(默认为0,可选)

4 - 页面渲染

   <view><template is="wxParse" data="{{wxParseData:article.nodes}}" /></view>

3. 图标字体的使用

微信小程序开发,可以像web开发使用字体图标,但是只是支持Unicode字体

1. 选择图标

图标可以直接使用fontawesomeionicons的字体库,但是由于小程序有2M的大小限制,此处强烈建议使用iconfont等平台自选图标打包得到ttf字体文件

2. 图标格式转换 ttf => base64

https://transfonter.org平台进行转换,转换完后进行下载

03.png

3. 引入样式文件

打开下载得到的包中的stylesheet.css文件,获得类似以下代码,存入新的wxss文件iconfont.wxss

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,xxxxx==) format('truetype');
    font-weight: normal;
    font-style: normal;
}

4. 使用字体图标

@import "../../lib/style/font/iconfont.wxss";
.page:after {
    font-family: 'iconfont';
    content: '\e636';
}

如果直接使用base64图片.text:after{ content: url("data:image/png;base64,xxxxx"); position: absolute; top: 0rpx; left: 0rpx; }

4. 使用WeUI,统一UI样式

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含buttoncelldialogprogresstoastarticleactionsheeticon 等各式元素,github地址:https://github.com/Tencent/weui-wxss,内含详细使用教程,简单来说,样式文件中引入 dist/style/weui.wxss 即可

5. 接入腾讯视频插件

github地址:https://github.com/tvfe/txv-miniprogram-plugin

1. 申请插件使用权限

详见微信官方说明文档 https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html,申请完成后如下图:

04.png

2. 引入插件代码

app.json中引入

{  
	"plugins": {
		"tencentvideo": {
			"version": "1.0.5",
			"provider": "wxa75efa648b60994b"
		}
	}
}

3. 配置插件标签 txv-video

在对应的page的配置json中配置

{
	"usingComponents": {
		"txv-video": "plugin://tencentvideo/video"
	}
}

4. page中使用

require插件

const txvContext = requirePlugin("tencentvideo");

获取vid

Page({
    data: {
        vid: ''
    },
    onLoad(options){
    	...
        // 获取视频vid
        wx.request({
            url: 'https://apps.game.qq.com/XXX',
            data: data,
            success: (res) => {
            	this.setData({
                    vid: res.sVID
            	});
            }
        });
    }
});

渲染,注意使用 wx:if 控制渲染,避免出现渲染空vid出错

<txv-video 
    wx:if="vid.length>0"
    vid="{{vid}}"
    playerid="txv1" 
    autoplay="{{true}}" 
 ></txv-video>

6. 使用 moment.js 处理日期 & 汉化

07.jpg

中文文档:http://momentjs.cn/docs/

H5使用moment.js可以方便的处理日期,小程序中同样可以使用moment.js

首先在utils文件夹中复制moment.js库文件

08.png

为了更好的支持中文的显示,需要对原始的文件进行改造,在return _moment;前加入中文字典

_moment.defineLocale('zh-cn', {    
    months : '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),    
    monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),    
    weekdays : '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),    
    weekdaysShort : '周日_周一_周二_周三_周四_周五_周六'.split('_'),    
    weekdaysMin : '日_一_二_三_四_五_六'.split('_'),    
    longDateFormat : {    
        LT : 'Ah点mm分',    
        LTS : 'Ah点m分s秒',    
        L : 'YYYY-MM-DD',    
        LL : 'YYYY年MMMD日',    
        LLL : 'YYYY年MMMD日Ah点mm分',    
        LLLL : 'YYYY年MMMD日ddddAh点mm分',    
        l : 'YYYY-MM-DD',    
        ll : 'YYYY年MMMD日',    
        lll : 'YYYY年MMMD日Ah点mm分',    
        llll : 'YYYY年MMMD日ddddAh点mm分'    
    },    
    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,    
    meridiemHour: function (hour, meridiem) {    
        if (hour === 12) {    
            hour = 0;    
        }    
        if (meridiem === '凌晨' || meridiem === '早上' ||    
                meridiem === '上午') {    
            return hour;    
        } else if (meridiem === '下午' || meridiem === '晚上') {    
            return hour + 12;    
        } else {    
            // '中午'    
            return hour >= 11 ? hour : hour + 12;    
        }    
    },    
    meridiem : function (hour, minute, isLower) {    
        var hm = hour * 100 + minute;    
        if (hm < 600) {    
            return '凌晨';    
        } else if (hm < 900) {    
            return '早上';    
        } else if (hm < 1130) {    
            return '上午';    
        } else if (hm < 1230) {    
            return '中午';    
        } else if (hm < 1800) {    
            return '下午';    
        } else {    
            return '晚上';    
        }    
    },    
    calendar : {    
        sameDay : function () {    
            return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT';    
        },    
        nextDay : function () {    
            return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT';    
        },    
        lastDay : function () {    
            return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT';    
        },    
        nextWeek : function () {    
            var startOfWeek, prefix;    
            startOfWeek = moment().startOf('week');    
            prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';    
            return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';    
        },    
        lastWeek : function () {    
            var startOfWeek, prefix;    
            startOfWeek = moment().startOf('week');    
            prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';    
            return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';    
        },    
        sameElse : 'LL'    
    },    
    ordinalParse: /\d{1,2}(日|月|周)/,    
    ordinal : function (number, period) {    
        switch (period) {    
        case 'd':    
        case 'D':    
        case 'DDD':    
            return number + '日';    
        case 'M':    
            return number + '月';    
        case 'w':    
        case 'W':    
            return number + '周';    
        default:    
            return number;    
        }    
    },    
    relativeTime : {    
        future : '%s内',    
        past : '%s前',    
        s : '几秒',    
        m : '1分钟',    
        mm : '%d分钟',    
        h : '1小时',    
        hh : '%d小时',    
        d : '1天',    
        dd : '%d天',    
        M : '1个月',    
        MM : '%d个月',    
        y : '1年',    
        yy : '%d年'    
    },    
    week : {    
        dow : 1, // Monday is the first day of the week.    
        doy : 4  // The week that contains Jan 4th is the first week of the year.    
    }    
});

完成汉化后即可在页面中使用

// 引入moment.js
const moment = require('../../utils/moment.js');

// 使用,更多用法见文档
let startTime = xxxxx
const time = moment.unix(startTime).format('MMMDo HH:mm');
sign

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

1 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理

最近一直很多事情,博客停下来好久没写了,整理下思路,把最近研究的基于Metronic的Bootstrap开发框架进行经验的总结出来和大家分享下,同时也记录自己对...

2565
来自专栏用户3211691的专栏

前端面试题1(HTML篇)

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

431
来自专栏PPV课数据科学社区

【学习】15款经典图表软件推荐 创建最漂亮的图表

以下列出的图表,图形和数据可视化的最佳软件,从创建基本的2D图表到产生复杂的数据集的数据可视化,这些PHP,Javascript、Flash的图表,对于任何一个...

2573
来自专栏sunseekers

入门微信小程序 (一)

小程序已经快两岁的,我才入坑,刚刚入坑那会我使劲和我朋友抱怨,太难了,学不动,不想学,不学了。硬着头皮死磕一遍文档,然后觉得也没有我想象中那么难。或许是因为语言...

692
来自专栏日常学python

今天说说反爬虫与反反爬虫

这是我的第五篇原创文章 喜欢爬虫的伙伴都知道,在爬网站的内容的时候并不是一爬就可以了,有时候就会遇到一些网站的反爬虫,折回让你爬不到数据,给你返回一些404,4...

3827
来自专栏企鹅号快讯

微信升级,小程序曝光能力大大提升,未来将血染小程序蓝海

“为了帮助用户更便捷地使用小程序,微信在主界面新增了小程序任务栏的功能。小程序菜单进行了升级,并提供小程序间快速切换的功能。同时,我们开放了小游戏开发文档和开发...

18210
来自专栏岑志军的专栏

ReactNative-综合案例(01)

1013
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十二节)1.评论功能实现2.评论加载

37012
来自专栏HaHack

comment.js:一个纯JS实现的静态站点评论系统

1384
来自专栏张戈的专栏

分享张戈博客自用的php网址在线转换二维码的API源码

最新补充:博客已分享性能最好的 js 生成二维码方案==>传送门 去年张戈博客曾分享过一篇与二维码 API 有关的文章:《分享几个可用的二维码 API,以及给博...

2653

扫码关注云+社区