Yilong WeChat 애플릿 프레임워크 구성 요소 예제 코드
- 高洛峰원래의
- 2017-03-16 13:34:362012검색
저는 온라인 여행 업계에 종사하다 보니 OTA 업계 동향에 더 관심이 가는데요. 얼마 전 eLong의 WeChat 미니 프로그램을 조사하고 경험한 적이 있지만 아키텍처 구성 요소에는 몇 가지 결함이 있습니다. 미니 프로그램은 여전히 훌륭하므로 오늘은 Yilong WeChat 미니 프로그램 프레임워크 구성 요소를 간략하게 살펴보겠습니다.
우선 Yilong WeChat 애플릿의 프레임워크 구성 요소를 분석을 위해 다음 네 부분으로 나눕니다.
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
프레임워크 사용 지침
프레임워크는 쉬운 제어 및 확장을 위해 모든 WeChat 기본 API를 래핑합니다.
[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: 'https://xxx.xxx.xxx/api/getserverdate/',
params: [], //参数列表
method: 'GET',
noLoading: true,
mockData: function() { //模拟数据
return new Date();
},
dataTransform: function(data) { //适配处理
return data;
}
})
};
[AppleScript] 일반 텍스트 보기 복사 코드
//index.js
var service = require('service/demo'); //框架约定，所有的后端接口，要注册到对应的service文件中
var serverDate = service.GetTime( /*service可配置参数列表，这里传入相对应的参数*/ ).then(function(date) {
that.setData({
serverDate: date
});
});
Applet The 쿠키 메커니즘은 지원되지 않습니다. 기존 백엔드 쿠키 처리(변경 없음)와 호환되도록 하려면 프레임워크에서 시뮬레이션한 쿠키 메커니즘을 사용할 수 있습니다.
[AppleScript] 일반 텍스트 보기 복사 코드
//index.js
var COOKIE = require('./cookie.js');
var expire = new Date().getTime() + res.expire * 1000;
COOKIE.set(key, value, expire);
[AppleScript] 일반 텍스트 보기 복사 코드
//service.js //... headers["Cookie"] = Cookie.getAll(); //用户cookie将随http请求发送至服务器 //...
페이지( ) 기능은 페이지를 등록하는데 사용됩니다. 페이지의 초기 데이터, 라이프 사이클 함수, 이벤트 처리 함수 등을 지정하는 객체 매개변수를 허용합니다. 프레임워크는 Page를 다시 작성했습니다. 편리합니다. 확장 기능을 사용하면 원래 비즈니스 코드를 래퍼로 래핑하기만 하면 됩니다.
[AppleScript] 일반 텍스트 보기 복사 코드
//微信小程序原生页面注册形式
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 수신, 프레임워크는 전역 이벤트 수신 메커니즘을 지원합니다
[AppleScript] 일반 텍스트 보기 복사 코드
//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);
이벤트 메커니즘, 페이지 간 점프로 데이터를 전송할 수 있으며, 프레임워크는 페이지 간 데이터 전송을 지원하며 점프도 가능합니다. through 인터페이스에서 반환된 이벤트 객체는 사용자 정의 이벤트를 수신합니다.
[AppleScript] 일반 텍스트 보기 복사 코드
//index页面
var event = api.Navigate.go({
url: '../list/index',
params: {
name: 'billy'
}
});
event.on("listok", function(params) {
console.log(params);
});
[AppleScript] 일반 텍스트 보기 복사 코드
//http页面
Page({
onLoad: function(data) {
if (data.name === 'billy') {
this.fireEvent("listok", 'hello ' + data.name);
}
}
});구성 요소 사용 지침
내장 구성 요소
프레임워크는 페이지생성자 메서드를 다시 작성하고 경고, 선택기, setLoading은 내부적으로 기본 wx.showModal 및 wx.showToast를 각각 캡슐화합니다. 캡슐화는 호출 매개변수를 비즈니스 용도로 구조화하고 편리하게 만듭니다. 사용할 때 페이지 구조를 도입할 필요가 없으며 직접 호출하면 됩니다. ; 선택기는 먼저 페이지 프리젠테이션 계층 구조에 도입되어야 하며 구성 요구사항에 따라 구성 항목을 전송해야 합니다.
[AppleScript] 일반 텍스트 보기 복사 코드
//setLoading
this.setLoading(true);//ture/false
//picker 引入表现层结构
<!--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: '弹框对话框，参数配置详见文档说明',
cancelText: '取消',
bindconfirm: function() {
console.log('确定');
},
bindcancel: function() {
console.log('取消');
}
});독립 페이지 구성 요소
독립 페이지 구성 요소는 실제로 완전한 페이지 단위(js, wxml, wxss로 구성)는 사용이 매우 간단합니다. 관련 js 메소드를 도입하고 개방형 구성요소를 호출하기만 하면 됩니다(데이터 교환 처리를 위해 콜백을 전달할 수 있음). --구현 원칙은 구성 요소에서 제공하는 js 메서드가 새 페이지(api.Navigate.go)를 열고 등록된 이벤트동작데이터
[AppleScript]를 통해 상호 작용하는 것입니다. 복사 코드 보기
//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数据，onLoad、onReady、onShow生命周期事件，fireEvent、showLoading等页面级方法)，其实现原理是将组件的所有成员方法和成员属性和依附页面进行合并，并解决了重名冲突，使用者不用关系处理细节，只管像注册一个页面一样注册组件。--需要注意的是页面级别组件不可再次使用Page构造方法。
1、引入组件表现层结构
[AppleScript] 纯文本查看 复制代码
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<!--当前页面数据-->
</view>
<!--引入组件页面结构-->
<include src="../../components/base.wxml" />
</view>2、引入组件样式表
[AppleScript] 纯文本查看 复制代码
/**引入组件样式表**/
@import "filter/index.wxss";
page { background: #f4f4f4; }3、注册页面时注入组件
[AppleScript] 纯文本查看 复制代码
/**
* 集成组件dome
*/
var dirname = 'pages/internalComponent',
overwrite = require('../../utils/overwrite.js');
(function(require, Page) {
/*引入组件js*/
var filter = require('./filter/index');
Page({
/**
* 默认数据
* @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[AppleScript] 纯文本查看 复制代码
//页面级组件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
},
/**
* 监听组件加载
* @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) {
}
}위 내용은 Yilong WeChat 애플릿 프레임워크 구성 요소 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!