머리말
미니 프로그램의 적용 속도를 향상시키는 것에 대한 기사를 본 적이 있습니다. 이 기사에서는 주로 200~300ms의 짧은 시간을 활용하여 페이지 점프를 실행하기 전에 프로토콜을 요청하는 미니 프로그램을 구현하는 방법에 대해 설명합니다. 페이지를 점프할 때 데이터를 얻어서 페이지에 렌더링하면 해당 데이터가 미니 프로그램 페이지에 미리 로드될 수 있습니다.
이 기술을 통해 사용자의 대기 시간을 단축하고 사용자 경험을 크게 향상시킬 수 있습니다. 해당 글에서는 구현 방법을 제시하지 않고 기술적인 원리만 설명하였으므로, 이 글에서는 모든 사람에게 기술적 구현 방법을 설명하겠습니다.
프레임워크 장점 및 단점
장점:
다음 페이지의 데이터를 미리 로드하여 페이지 로딩 속도를 향상시킵니다. 경량 프로토콜(약 200~300ms 내에 데이터 수신 가능)을 사용하여 쉽게 미니를 만들 수 있습니다. 프로그램 페이지를 연 후 데이터가 즉시 로드되며 빈 페이지가 거의 없습니다.
프로젝트 구조를 파괴하지 않고 동일한 비즈니스의 코드를 하나의 클래스에 유지합니다.
코드의 양이 매우 적고, 원래 비즈니스에 미치는 영향도 거의 없습니다.
미리 로드를 구현한 후 미리 로드를 삭제하고 싶으신가요? 구현된 클래스에서 문자열을 삭제하면 됩니다.
단점:
상황에 따라 setData를 $setData로 바꿔야 합니다.
개발자는 각 상황의 컨텍스트를 매우 명확하게 파악해야 합니다.
프로토콜이 400ms를 초과하는 등 시간이 많이 걸리는 경우 이 최적화 방법을 사용하는 효과는 분명하지 않습니다.
일부 네티즌들은 이 프로젝트가 컴포넌트를 사용하는 작은 프로그램에서는 실행될 수 없다는 점을 발견했습니다. 따라서 컴포넌트를 사용하는 경우 이 프로젝트를 직접 사용해서는 안 됩니다. 하지만 결국 이 프로젝트의 아이디어를 흡수하는 것이 좋습니다. 작업하는 엔지니어에게는 사고가 매우 중요합니다.
여기서는 최종 효과를 보여주지 않겠습니다. 관심 있는 친구들이 직접 시도해 볼 수 있습니다.
(무료 학습 동영상 공유: php 동영상 튜토리얼)
통합 방법
중요 사항: 제가 만든 작은 프로그램은 ES6 표준에 따라 작성되었으며 클래스 확장 및 구조 분해 할당 등을 사용합니다. 이해가 안가는데, ES6를 배워보세요! ! 프로젝트가 ES5를 사용한다면 후속 글을 잘 읽고 프리로딩 기술의 핵심 개념을 이해하면 몇 분 안에 작성할 수 있겠죠~~
우선, 기본 클래스 CommonPage가 필요합니다
애플릿의 모든 페이지 클래스는 이 기본 클래스를 상속하므로 통합 관리가 용이합니다.
예를 들어 아래의 IndexPage 페이지는
// pages/index/index.js
import CommonPage from "../CommonPage";
class IndexPage extends CommonPage {
constructor(...args) {
super(...args);
this.data = {
testStr: 'this is the firstPage'
}
}
onLoad(options) {
}
}
Page(new IndexPage());IndexPage가 첫 번째 페이지이므로 미리 로드할 필요가 없습니다. SecondPage는 두 번째 페이지의 미리 로드 방법을 시뮬레이션해 보겠습니다.
다음에 보는 것은 this.$route() this.$put() this.$take() this.$resolve() this.$reject() 및 $ 기호가 있는 다른 메소드는 모두 기본 클래스 .
1. IndexPage 페이지에 점프 버튼을 추가하세요.
<!--index.wxml-->
<view class="container">
<view bindtap="toSecondPage" hover-class="press-style" class="normal-style" hover-stay-time="100"> 闪电加载第二个页面</view>
<view>300毫秒 闪电加载方式</view>
</view>참고: 여기에 추가된 class="normal-style" hover-stay-time="100"은 클릭 상태가 추가되지 않으면 경험에 큰 영향을 미칩니다.
2. IndexPage 페이지에 사전 로드 전용 점프 메소드를 추가합니다.
toSecondPage = function () {
// this.$route是预加载的页面跳转方式，以wx.navigateTo方式跳转。这个方法是在CommonPage中实现的。
this.$route({path: '../second/second', query: {count: 10, title: '这是第二个页面'}, clazzName: 'SecondPage'});
// 这是小程序原生的普通加载方式
// wx.navigateTo({
// url: '../second/second?count=10&title=这是第二个页面'
// })
}this.$route({path, query, clazzName}); 이 메소드의 매개변수 의미는 다음과 같습니다.
path: 페이지 경로, 절대 경로와 상대 경로를 지원합니다.
쿼리: 전달해야 하는 매개변수입니다. 이것은 객체 유형입니다.
clazzName: 이동해야 하는 페이지의 클래스 이름입니다. 이에 대해서는 나중에 SecondPage를 소개할 때 이야기하겠습니다.
사실, 길이 있는데 clazzName이 왜 필요하냐고 물으실 수도 있습니다. 이 문제에 대해서는 다음 글인 기술원리 소개에서 자세히 다루도록 하겠다.
이 시점에서 ES6 사양을 사용하여 클래스를 구현하는 경우 IndexPage에서 점프 메서드를 this.$route({path, query, clazzName})으로 변경하기만 하면 된다는 것을 알 수 있습니다.
3. SecondPage 페이지에 사전 로드별 초기화 방법을 추가합니다.
// pages/second/second.js
import CommonPage from "../CommonPage";
class SecondPage extends CommonPage {
constructor(...args) {
//super(...args)一定要写，他会将clazzName与下面的data进行合并。
super(...args);
//这个$init(obj)中注入的obj就是页面初始时的data
super.$init({
arr: []
});
}
$onNavigator(query) {
//这里的query是从this.$route中传递来的query
console.log('闪电️加载时接收到的参数', query);
this.$put('second-data', this.initData.bind(this), query);
};
initData = function (query, resolve, reject) {
//这里的query是在this.$put()中传递过来的
//resolve在协议成功时回调
//reject在协议失败时回调
//模拟网络请求
setTimeout(() => {
if (typeof query.count === "string") {
query.count = parseInt(query.count);
}
this.data.arr.splice(0, this.data.arr.length);
for (let i = 0; i < query.count; i++) {
this.data.arr.push({id: i, name: `第${i}个`, age: parseInt(Math.random() * 20 + i)})
}
this.$setData(this.data);
this.$resolve(this.data);//或者 resolve(this.data);只有调用了resolve或者reject方法，才能在this.$take()的then()方法中获取到值。
}, 300);
};
onLoad(options) {
const lightningData = this.$take('second-data');
if (lightningData) {
lightningData.then((data) => {
//成功回调，resolve(data)调用时触发 data就是resolve传递的参数
this.$setData(data);
},(data, error)=>{
//失败回调，reject(data, error)调用时触发，data和error是reject传递的参数。
});
return;
}
this.initData(options);
}
}
//这里注入的clazzName: 'SecondPage'，与this.$route({path, query, clazzName});中的clazzName名称与其一致即可
Page(new SecondPage({clazzName: 'SecondPage'}));아마도 다음 단계일 것입니다.
이 클래스는 새로운 경우 clazzName을 삽입해야 하며 this.$route({path, query, clazzName})의 clazzName 이름은 이와 일치할 수 있습니다.
Preloading 방식인 SecondPage에 새로운 라이프사이클 기능을 주입해야 합니다. this.$route를 실행할 때 this.$route에 전달한 clazzName이 무엇이든 프레임워크는 자동으로 일치하는 클래스를 찾고 해당 클래스의 $onNavigator 메서드를 호출합니다.
$onNavigator에서 this.$put(key, fun, query)를 호출하세요. 매개변수는 각각 key, 비동기 요청 메소드, 비동기 요청 메소드 매개변수입니다.
비동기 요청 메소드에서 this.setData를 this.$setData()로 바꾸고 this.$resolve(data) 또는 this.$reject(data,error)를 사용하여 성공 또는 실패를 콜백합니다.
onLoad에서 this.$take(key).then(success,fail)을 사용하여 각각 해결 및 거부 콜백에 해당하는 비동기 결과를 얻으세요. 미리 로드를 사용하지 않거나 미리 로드에 실패하면 this.$take(key) 메서드가 빈 값을 반환하므로 페이지에 들어갈 때 미리 로드를 사용할지 여부를 확인할 수 있습니다!
이렇게 하면 점프하기 전에 다음 페이지의 프로토콜이 전송되고, 동일한 비즈니스의 코드가 하나의 클래스에 유지되므로 프로젝트 구조가 파괴되지 않습니다!
프리로드 구현에서 마지막으로, 사전 로드를 사용하지 않으려면 새 SecondPage()를 실행할 때 삽입된 clazzName만 삭제하면 됩니다!
관련 추천: 미니 프로그램 개발 튜토리얼
위 내용은 미니 프로그램을 빠르게 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!