由于身處于在線旅游行業(yè)，對OTA的行業(yè)動態(tài)都比較關心一些，前陣子研究體驗了一下藝龍的微信小程序，雖然有些美中不足，但是小程序的架構組件還是非常好的，所以今天我們就來簡單看看藝龍微信小程序框架組件。
首先，我們將藝龍微信小程序的框架組件分為以下四個部分來分析：
1.局部組件
2.獨立組件
3.集成組件
4.網(wǎng)絡請求
先看三張的動態(tài)效果圖：
總體而言，其目錄結構如下：
[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
框架使用說明
框架對所有微信原生api進行了一層包裝，以便管控和擴展。
[AppleScript]
純文本查看
復制代碼
//index.js
var api = require("./utils/api.js")();
api.login({
success: function(res) {
console.log(res);
}
});
var api = require("./utils/api.js")();
api.login({
success: function(res) {
console.log(res);
}
});對于后端接口，框架提供service層進項管理，接口返回一個Promise對象。
var Service = require("../utils/service.js");
module.exports = {
GetTime: Service({
url: 'https://xxx.xxx.xxx/api/getserverdate/',
params: [], //參數(shù)列表
method: 'GET',
noLoading: true,
mockData: function() { //模擬數(shù)據(jù)
return new Date();
},
dataTransform: function(data) { //適配處理
return data;
}
})
};
var service = require('service/demo'); //框架約定，所有的后端接口，要注冊到對應的service文件中
var serverDate = service.GetTime( /*service可配置參數(shù)列表，這里傳入相對應的參數(shù)*/ ).then(function(date) {
that.setData({
serverDate: date
});
});小程序不支持cookie機制，若要兼容現(xiàn)有后端cookie處理（不做改動），可使用框架模擬的cookie機制。
var COOKIE = require('./cookie.js');
var expire = new Date().getTime() + res.expire * 1000;
COOKIE.set(key, value, expire);//service.js //... headers["Cookie"] = Cookie.getAll(); //用戶cookie將隨http請求發(fā)送至服務器 //...
Page() 函數(shù)用來注冊一個頁面。接受一個object參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等，框架對Page做了重寫，這樣可以方便的使用擴展能力，使用時僅需將原來的業(yè)務代碼用包裝器包裝一下即可。
//微信小程序原生頁面注冊形式
Page({
data: {},
onLoad: function() {}
});
//框架重寫注冊形式
var __dirname = 'pages/index',
__overwrite = require('../../utils/overwrite.js');
(function(require, Page) { //重寫require、Page
Page({
data: {},
onLoad: function() {}
});
})(__overwrite.require(require, __dirname), __overwrite.Page);globalData監(jiān)聽，框架支持全局事件監(jiān)聽機制
//index.js
var __dirname = 'pages/index',
__overwrite = require('../../utils/overwrite.js');
(function(require, Page) {
//獲取應用實例
var app = getApp();
var service = require('service/demo');
Page({
data: {
indate: '',
indateText: ''
},
onLoad: function() {
this.listenerGlobalData('indate', function(indate) {
this.data.indate = indate
this.data.indateText = new Date(indate).format('MM-dd')
}.bind(this));
}
})
})(__overwrite.require(require, __dirname), __overwrite.Page);事件機制，頁面間跳轉可以傳遞數(shù)據(jù)，框架支持頁面間傳遞數(shù)據(jù)的同時，還可以通過跳轉接口返回的事件對象監(jiān)聽自定義事件。
//index頁面
var event = api.Navigate.go({
url: '../list/index',
params: {
name: 'billy'
}
});
event.on("listok", function(params) {
console.log(params);
});//http頁面
Page({
onLoad: function(data) {
if (data.name === 'billy') {
this.fireEvent("listok", 'hello ' + data.name);
}
}
});組件使用說明
內(nèi)置組件
框架重寫Page構造方法，內(nèi)置了一些常用的組件，例如 alert、picker、setLoading，其中 alert 和 setLoading 內(nèi)部分別封裝了原生的 wx.showModal 、wx.showToast，封裝使得調(diào)用參數(shù)結構化，方便業(yè)務使用，使用時不用引入頁面結構，直接調(diào)用即可；picker則需要首先引入到頁面中表現(xiàn)層結構，按照配置要求傳遞配置項。//setLoading this.setLoading(true);//ture/false //picker 引入表現(xiàn)層結構 <!--index.wxml--> <view class="container"> <view class="userinfo"> <text class="userinfo-nickname">{{current}}</text> </view> <include src="../../components/base.wxml" /> </view> //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('cancel') } }); //alert __overwrite.alert({ content: '彈框對話框，參數(shù)配置詳見文檔說明', cancelText: '取消', bindconfirm: function() { console.log('確定'); }, bindcancel: function() { console.log('取消'); } });
獨立頁面組件
獨立頁面組件其實就是一個完整的頁面單元（js、wxml、wxss組成），使用很簡單，通過引入相關js方法，調(diào)用打開組件即可（可傳遞callback用于數(shù)據(jù)交換處理）。--其實現(xiàn)原理是組件提供的js方法將會打開一個新頁面（api.Navigate.go），并通過注冊事件的形式交互行為數(shù)據(jù)//index.js var __dirname = 'pages/externalComponent', __overwrite = require('../../utils/overwrite.js'); require('../../utils/dateFormat.js'); (function(require, Page) { //獲取應用實例 var app = getApp(); var CalendarPlugin = require('components/calendar/index'); Page({ data: { date: { indate: new Date().format('yyyy-MM-dd'), outdate: new Date(+new Date + 3600000 * 24).format('yyyy-MM-dd') } }, 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('yyyy-MM-dd'); that.data.date.outdate = res.end.format('yyyy-MM-dd'); that.setData({ date: that.data.date }) }) }, onLoad: function(data) { } }) })(__overwrite.require(require, __dirname), __overwrite.Page);
頁面級組件
框架重寫Page構造器，支持構建頁面時配置一個或多個頁面級組件，所謂頁面級組件就是該組件的注冊形式和頁面一致(支持data數(shù)據(jù)，onLoad、onReady、onShow生命周期事件，fireEvent、showLoading等頁面級方法)，其實現(xiàn)原理是將組件的所有成員方法和成員屬性和依附頁面進行合并，并解決了重名沖突，使用者不用關系處理細節(jié)，只管像注冊一個頁面一樣注冊組件。--需要注意的是頁面級別組件不可再次使用Page構造方法。1、引入組件表現(xiàn)層結構<!--index.wxml--> <view class="container"> <view class="userinfo"> <!--當前頁面數(shù)據(jù)--> </view> <!--引入組件頁面結構--> <include src="../../components/base.wxml" /> </view>2、引入組件樣式表
/**引入組件樣式表**/ @import "filter/index.wxss"; page { background: #f4f4f4; }3、注冊頁面時注入組件
/** * 集成組件dome */ var __dirname = 'pages/internalComponent', __overwrite = require('../../utils/overwrite.js'); (function(require, Page) { /*引入組件js*/ var filter = require('./filter/index'); Page({ /** * 默認數(shù)據(jù) * @type {Object} */ data: {...}, onLoad: function(options) {}, }, [{//注入組件 component: filter, instanceName: 'typeFilter', props: { style: { top: '44px' } }, events: { onChange: 'filterChangedCallBack', onOpen: 'filterOpenedCallBack', onClose: 'filterClosedCallBack' } }, { component: filter, instanceName: 'categoryFilter', props: { style: { top: '44px' } }, events: { onChange: 'filterChangedCallBack', onOpen: 'filterOpenedCallBack', onClose: 'filterClosedCallBack' } }]) })(__overwrite.require(require, __dirname), __overwrite.Page)頁面級組件由*.js、*.wxml、*.wxss組成，分別由注冊頁面引入，其中js部分不可再次使用Page構造
[AppleScript]
純文本查看復制代碼├── index.js ├── index.wxml └── index.wxss//頁面級組件js聲明 /** * 篩選器 */ var __dirname = 'pages/internalComponent/filter', api = require('../../../utils/api.js')(__dirname) var bgAnimation = api.createAnimation({ duration: 200 }), contentAnimation = api.createAnimation({ duration: 200 }); module.exports = { data: { items: [], selectedId: '', bgAnimation: {}, contentAnimation: {}, isOpen: false }, /** * 監(jiān)聽組件加載 * @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) { } }忘了上傳源碼，現(xiàn)在補上
XCX-scaffold-master.rar愛盈利（aiyingli.com）移動互聯(lián)網(wǎng)最具影響力的盈利指導網(wǎng)站。定位于服務移動互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動盈利指導。我們的目標是讓盈利目標清晰可見！降低門檻，讓缺乏經(jīng)驗、資金有限的個人和團隊獲得經(jīng)驗和機會，提高熱情，激發(fā)產(chǎn)品。
【轉載說明】 若上述素材出現(xiàn)侵權，請及時聯(lián)系我們刪除及進行處理：[email protected]
