由于身处于在线旅游行业，对OTA的行业动态都比较关心一些，前阵子研究体验了一下艺龙的微信小程序，虽然有些美中不足，但是小程序的架构组件还是非常好的，所以今天我们就来简单看看艺龙微信小程序框架组件。
首先，我们将艺龙微信小程序的框架组件分为以下四个部分来分析：
1.局部组件
2.独立组件
3.集成组件
4.网络请求
先看三张的动态效果图：
总体而言，其目录结构如下：
[AppleScript] 纯文本查看
├── README.MD
├── app.js
├── app.json
├── app.wxss
├── components
├── image
├── pages
├── service
└── utils
├── api.js
├── COOKIE.js
├── data-center.js
├── overwrite.js
├── page-events.js
├── path.js
├── promise.js
└── service.js框架使用说明
[AppleScript] 纯文本查看
//index.js
var api = require("./utils/api.js")();
api.login({
success: function(res) {
console.log(res);
}
});[AppleScript] 纯文本查看
//index.js
var api = require("./utils/api.js")();
api.login({
success: function(res) {
console.log(res);
}
});[AppleScript] 纯文本查看
//demo.js
var Service = require("../utils/service.js");
module.exports = {
GetTime: Service({
url: &＃39;https://xxx.xxx.xxx/api/getserverdate/&＃39;,
params: [], //参数列表
method: &＃39;GET&＃39;,
noLoading: true,
mockData: function() { //模拟数据
return new Date();
},
dataTransform: function(data) { //适配处理
return data;
}
})
};[AppleScript] 纯文本查看
//index.js
var service = require(&＃39;service/demo&＃39;); //框架约定，所有的后端接口，要注册到对应的service文件中
var serverDate = service.GetTime( /*service可配置参数列表，这里传入相对应的参数*/ ).then(function(date) {
that.setData({
serverDate: date
});
});[AppleScript] 纯文本查看
//index.js
var COOKIE = require(&＃39;./COOKIE.js&＃39;);
var expire = new Date().getTime() + res.expire * 1000;
COOKIE.set(key, value, expire);
[AppleScript] 纯文本查看
//service.js
//...
headers["COOKIE"] = COOKIE.getAll(); //用户COOKIE将随http请求发送至服务器
//...
[AppleScript] 纯文本查看
//微信小程序原生页面注册形式
Page({
data: {},
onLoad: function() {}
});
//框架重写注册形式
var dirname = &＃39;pages/index&＃39;,
overwrite = require(&＃39;../../utils/overwrite.js&＃39;);
(function(require, Page) { //重写require、Page
Page({
data: {},
onLoad: function() {}
});
})(overwrite.require(require, dirname), overwrite.Page);[AppleScript] 纯文本查看
//index.js
var dirname = &＃39;pages/index&＃39;,
overwrite = require(&＃39;../../utils/overwrite.js&＃39;);
(function(require, Page) {
//获取应用实例
var app = getApp();
var service = require(&＃39;service/demo&＃39;);
Page({
data: {
indate: &＃39;&＃39;,
indateText: &＃39;&＃39;
},
onLoad: function() {
this.listenerGlobalData(&＃39;indate&＃39;, function(indate) {
this.data.indate = indate
this.data.indateText = new Date(indate).format(&＃39;MM-dd&＃39;)
}.bind(this));
}
})
})(overwrite.require(require, dirname), overwrite.Page);[AppleScript] 纯文本查看
//index页面
var event = api.Navigate.go({
url: &＃39;../list/index&＃39;,
params: {
name: &＃39;billy&＃39;
}
});
event.on("listok", function(params) {
console.log(params);
});[AppleScript] 纯文本查看
//http页面
Page({
onLoad: function(data) {
if (data.name === &＃39;billy&＃39;) {
this.fireEvent("listok", &＃39;hello &＃39; + data.name);
}
}
});组件使用说明
框架重写Page构造方法，内置了一些常用的组件，例如 alert、picker、setLoading，其中 alert 和 setLoading 内部分别封装了原生的 wx.showModal 、wx.showToast，封装使得调用参数结构化，方便业务使用，使用时不用引入页面结构，直接调用即可；picker则需要首先引入到页面中表现层结构，按照配置要求传递配置项。
[AppleScript] 纯文本查看
//setLoading
this.setLoading(true);//ture/false
//picker 引入表现层结构
{{current}}
//picker 使用
overwrite.picker({
content: "选择排序",
init: this.data.sortIndex,
data: this.data.sortList,
bindtap: function(id, index) {
if (that.data.sort != id) {
that.setData({
sortIndex: index,
current: this.data.sortList[index].text
});
}
},
bindcancel: function() {
console.log(&＃39;cancel&＃39;)
}
});
//alert
overwrite.alert({
content: &＃39;弹框对话框，参数配置详见文档说明&＃39;,
cancelText: &＃39;取消&＃39;,
bindconfirm: function() {
console.log(&＃39;确定&＃39;);
},
bindcancel: function() {
console.log(&＃39;取消&＃39;);
}
});
独立页面组件其实就是一个完整的页面单元（js、wxml、wxss组成），使用很简单，通过引入相关js方法，调用打开组件即可（可传递callback用于数据交换处理）。--其实现原理是组件提供的js方法将会打开一个新页面（api.Navigate.go），并通过注册事件的形式交互行为数据
[AppleScript] 纯文本查看
//index.js
var dirname = &＃39;pages/externalComponent&＃39;,
overwrite = require(&＃39;../../utils/overwrite.js&＃39;);
require(&＃39;../../utils/dateFormat.js&＃39;);
(function(require, Page) {
//获取应用实例
var app = getApp();
var CalendarPlugin = require(&＃39;components/calendar/index&＃39;);
Page({
data: {
date: {
indate: new Date().format(&＃39;yyyy-MM-dd&＃39;),
outdate: new Date(+new Date + 3600000 * 24).format(&＃39;yyyy-MM-dd&＃39;)
}
},
openCalendar: function() {
var that = this;
CalendarPlugin({
begin: that.data.date.indate,
end: that.data.date.outdate
}, function(res) {
that.data.date.indate = res.start.format(&＃39;yyyy-MM-dd&＃39;);
that.data.date.outdate = res.end.format(&＃39;yyyy-MM-dd&＃39;);
that.setData({
date: that.data.date
})
})
},
onLoad: function(data) {
}
})
})(overwrite.require(require, dirname), overwrite.Page);框架重写Page构造器，支持构建页面时配置一个或多个页面级组件，所谓页面级组件就是该组件的注册形式和页面一致(支持data数据，onLoad、onReady、onShow生命周期事件，fireEvent、showLoading等页面级方法)，其实现原理是将组件的所有成员方法和成员属性和依附页面进行合并，并解决了重名冲突，使用者不用关系处理细节，只管像注册一个页面一样注册组件。--需要注意的是页面级别组件不可再次使用Page构造方法。
1、引入组件表现层结构
[AppleScript] 纯文本查看
2、引入组件样式表
[AppleScript] 纯文本查看
/**引入组件样式表**/
@import "filter/index.wxss";
page { background: #f4f4f4; }3、注册页面时注入组件
[AppleScript] 纯文本查看
/**
* 集成组件dome
*/
var dirname = &＃39;pages/internalComponent&＃39;,
overwrite = require(&＃39;../../utils/overwrite.js&＃39;);
(function(require, Page) {
/*引入组件js*/
var filter = require(&＃39;./filter/index&＃39;);
Page({
/**
* 默认数据
* @type {Object}
*/
data: {...},
onLoad: function(options) {},
}, [{//注入组件
component: filter,
instanceName: &＃39;typeFilter&＃39;,
props: {
style: { top: &＃39;44px&＃39; }
},
events: {
onChange: &＃39;filterChangedCallBack&＃39;,
onOpen: &＃39;filterOpenedCallBack&＃39;,
onClose: &＃39;filterClosedCallBack&＃39;
}
}, {
component: filter,
instanceName: &＃39;categoryFilter&＃39;,
props: {
style: { top: &＃39;44px&＃39; }
},
events: {
onChange: &＃39;filterChangedCallBack&＃39;,
onOpen: &＃39;filterOpenedCallBack&＃39;,
onClose: &＃39;filterClosedCallBack&＃39;
}
}])
})(overwrite.require(require, dirname), overwrite.Page)页面级组件由*.js、*.wxml、*.wxss组成，分别由注册页面引入，其中js部分不可再次使用Page构造
[AppleScript] 纯文本查看
├── index.js
├── index.wxml
└── index.wxss[AppleScript] 纯文本查看
//页面级组件js声明
/**
* 筛选器
*/
var dirname = &＃39;pages/internalComponent/filter&＃39;,
api = require(&＃39;../../../utils/api.js&＃39;)(dirname)
var bgAnimation = api.createAnimation({
duration: 200
}),
cOntentAnimation= api.createAnimation({
duration: 200
});
module.exports = {
data: {
items: [],
selectedId: &＃39;&＃39;,
bgAnimation: {},
contentAnimation: {},
isOpen: false
},
/**
* 监听组件加载
* @param {Object} props
*/
onLoad: function(props) {
this.setData({
style: props.style
})
},
/**
* 初始化
* @param {Array} items
* @param {String | Number} selectedIndex
*/
init: function(items, selectedIndex) {},
/**
* 选中
* @param {Object} e
*/
select: function(e) {
}
}以上就是艺龙微信小程序框架组件实例代码的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号