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

原创

CS逍遥剑仙

修改于 2018-06-23 02:26:17

2.9K1

修改于 2018-06-23 02:26:17

文章被收录于专栏：禅林阆苑禅林阆苑

小程序开发总结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组件。

rich-text

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

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

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

wxParse组件（推荐）

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

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

2 - 项目中引入wxParse库文件，wxParse.wxml、wxParse.js、wxParse.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. 选择图标

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

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

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

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 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、 dialog、 progress、 toast、 article、 actionsheet、 icon 等各式元素，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，申请完成后如下图：

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 处理日期 & 汉化

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

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

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

为了更好的支持中文的显示，需要对原始的文件进行改造，在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');