위챗 애플릿(Taro) 수동 매장과 자동 매장의 실현
그러나 전단 직업의 발전에 있어 전통적인 수동 매장점은 번거롭고 지루한 일이며 간소화되고 간소화될 수 있다.
1. 수동 매점
수동으로 매장하는 것은 모든 곳에서 필요한 곳에 매장점을 보고하는 코드를 추가하는 것이다.코드의 읽기 체험에 영향을 주고 흩어진 매장 코드는 관리하기 불편하다.
페이지 pv를 예로 들면, 우리는 이전에 모든 페이지에 pv를 올렸다.
// src/manual/home/index.tsx
import tracking from "./tracking";
// pageSn 「 」， 11664
const pageSn = 11111;
export default () => {
// useDidShow Taro Hook， componentDidShow ， 。
useDidShow(() => {
// sendPv pv
sendPv(pageSn);
});
return <View> </View>;
};
2. 자동 매점
자동 매장점은 전자동 매장점과 반자동 매장점으로 나눌 수 있다.전자동 매점은 필요하든 안 필요하든 모든 점을 묻는 것이다.앞머리는 틀림없이 좋아졌을 것이다. "앞으로 제품을 묻어도 나를 찾지 않겠어."하지만 데이터 학우들은 울음을 터뜨렸다.
예를 들어 텐센트와 타로팀은 공동으로 텐센트에는 자동화 매장지가 있다를 내놓았는데 접속이 매우 간단하다.예를 들어 proxy 페이지를true로 설정하면'모든 페이지를 업로드하는browse,leave,share 등 이벤트', autoTrack을true로 설정하면'모든 요소의tap,change,longpress,confirm 이벤트'를 자동으로 업로드할 수 있다.
데이터의 양과 유효성을 보면'전매'는'불매'와 같다. 왜냐하면'전매'는 한편으로는 데이터 저장량에 대한 요구가 높고 다른 한편으로는 데이터 세척을 담당하는 학생들에게 대량의 업무를 가져다 줄 수 있기 때문이다.
그래서 그 속에서 균형을 잡고 반자동 매장점에 중심을 두었다.
1. 페이지 노출(pv)
페이지 노출(pv), 이상적인 에스컬레이션 방식은 다음과 같습니다.
하나의 통일된 장소(예를 들어 tracking Conf.ts)에서 매설할 페이지의 식별자(즉 pageSn)를 설정합니다
페이지가 표시되면 자동으로 에스컬레이션이 필요한지 판단하고 (tracking Conf.ts 프로필에 있는지 여부) 에스컬레이션을 직접 수행합니다.
구체적 실현
(1) 매점 필드를 통일적으로 설정하고 pageSn은 매점 시스템에 있는 페이지의 식별자를 나타낸다
// trackingConf.ts
export default {
"auto/home/index": {
pageSn: 11111,
},
};
(2)usePv hook을 봉인하여 페이지 전시 시 현재 페이지 pageSn을 가져와 pv를 묻을지 말지, 원하면 pv를 발송합니다
// usePv.ts
// path， Taro getCurrentInstance
export const getPath = () => {
const path = Taro.getCurrentInstance().router?.path || "";
// /， '/auto/home/index' 'auto/home/index'
return path.match(/^\/*/) ? path.replace(/^\/*/, "") : path;
};
// pageSn、 pv、 pv
// getExtra
const usePv = ({
getExtra,
}: {
getExtra?: () => any;
} = {}) => {
//
useDidShow(() => {
const currentPath = getPath();
// trackingConf pageSn
const pageSn = trackingConf[currentPath]?.pageSn;
console.log(" pageSn", currentPath, pageSn);
if (pageSn) {
const extra = getExtra?.();
// sendPv pv
extra ? sendPv(pageSn, extra) : sendPv(pageSn);
}
});
};
import React from "react";
import { View } from "@tarojs/components";
import usePv from "./usePv";
function WrapPage(Comp) {
return function MyPage(props) {
usePv();
return (
<View>
<Comp {...props} />
</View>
);
};
}
export default WrapPage;
// src/auto/home/index.tsx
const Index = WrapPage(() => {
return <View> </View>;
});
질문 코너
아기들이 궁금해서 물어볼지도 몰라요.
(1) WrapPage에 usePv()가 이렇게 봉인되어 있는데, 에스컬레이션 사용자 정의 필드를 어떻게 지원해야 합니까?
예를 들어 제품은 src/auto/home/index를 희망합니다.tsx 이 페이지에 pv를 보고할 때, 현재 페이지의 URL 조회 매개 변수인params를 추가로 보고합니다.
간단합니다. 바로 이 페이지는 WrapPage로 감싸지 말고 params를 받아서 usePv 함수를 호출합니다.
// src/auto/home/index.tsx
const Index = () => {
usePv({
getExtra: () => {
const params = Taro.getCurrentInstance().router?.params;
return { params };
},
});
return <View> </View>;
});
Taro 프로젝트에서 원생 프로그램과 마찬가지로 앱에서 원생 페이지를 통일적으로 차단할 수도 있지만, 이렇게 하면 위의'일부 페이지는 추가 파라미터를 계산하여 보고해야 한다'는 것은 해결하기 어렵다.
2. 페이지 공유
위챗 애플릿에는 다음과 같은 두 가지 공유가 있습니다.
useShareAppMessage를 예로 들면 다음과 같습니다.
(1) 여전히 trackingConf.ts 통일 프로필에서 공유 매점의 표지 필드 elesn(및 추가 매개 변수) 추가
// trackingConf.ts
export default {
"auto/home/index": {
pageSn: 11111,
shareMessage: { eleSn: 2222, destination: 0 }, // shareMessage eleSn、 destination
}
};
// ，
export const useShareAppMessage = (
callback: (payload: ShareAppMessageObject) => ShareAppMessageReturn
) => {
let newCallback = (payload: ShareAppMessageObject) => {
const result = callback(payload)
const currentPath = getPath(); // getPath ， 「1、 （pv）」 getPath
// trackingConf pageSn、shareMessage
const { pageSn, shareMessage } = trackingConf[currentPath]
const { eleSn, ...extra } = shareMessage || {}
let page_el_sn = eleSn
const { imageUrl: image_url, path: share_url } = result
const { from: from_ele } = payload
const reportInfo = {
from_ele,
share_to: 'friend', // 'friend'
image_url,
share_url,
...extra
}
console.log('...useShareAppMessage tracking', { pageSn, page_el_sn, reportInfo })
sendImpr(pageSn, page_el_sn, reportInfo) // sendImpr ，
return result
}
Taro.useShareAppMessage(newCallback)
}
질문 코너
궁금한 아기들이 물어볼 수도 있습니다. 페이지는 친구/모멘트를 공유하는 장소를 늘려야 합니다. 0 설정(위의tracking Conf.ts 파일을 수정하지 않아도 됩니다)?
앞에서 말한 "pv전자동매점"과 유사하게 제품과 데이터를 건지는 방식만 약속해도 된다. 예를 들어 필자와 제품은 다음과 같이 약속했다.
페이지마다 친구/모멘트를 공유하고 elesn은 44444입니다. 그리고 제품은 페이지Sn을 통해 어느 페이지인지 판단하고share_to 판단은 친구/모멘트를 공유하고 친구를 공유하는 장면에 대해from_ele는 오른쪽 상단을 통해 공유할지 아니면 페이지의 단추를 눌러서 공유할지 판단합니다.
이렇게 하면 페이지 공유도 자동으로 매장될 수 있다.
3. 원소 매장 지점
원소가 자동으로 매장된 조사 연구는 저항에 부딪혀 아직 땅에 떨어지지 않았다.다음 글은 주로 서로 다른 사고방식이 직면한 문제를 이야기하고 좋은 건의가 있으면 평론 구역의 소통을 환영한다.
우리 원소 매장점은 비교적 높은 주파수에는 노출, 클릭 사건, 중저주파에는 스크롤, 정지 등 사건이 있다.
수동 매점 방식은 원소가 지정한 이벤트가 촉발될 때sendImpr에 매점 (페이지의 유일한 식별자 페이지 Sn, 원소의 유일한 식별자 elesn 포함) 을 수동으로 실행하는 것입니다.
그럼 이 코너는 좀 덜 할 수 있을까요?비즈니스에 대한 무침입 방식은 다음과 같습니다.
Component 지정 이벤트 트리거에 hook->를 추가하여 매장지 업로드 여부 판단 ->조건 충족 시 업로드
문제는 다음과 같습니다.
(1) 요소 이벤트 콜백 차단
작은 프로그램 Component에서 수신한 옵션을 차단하고 이동할 수 있습니다.methods, 사용자 정의 함수라면 함수가 호출될 때 첫 번째 매개 변수 (e라고 가정) 의 type 가tap 같은 이벤트인지 판단합니다.이때 e 등 정보에 따라 매장지 신고 조건을 충족시킬지 여부를 결정할 수 있다.
네이티브 애플릿의 구현은 다음과 같습니다.
// App.js
App({
onLaunch() {
let old = Component
Component = function(config) {
// config
const newConf = proxyConfig(config)
old(newConf)
}
}
})
const proxyConfig = function(conf) {
const methods = conf.methods
// （ ）
let diyMethods = Object.entries(methods).filter(function (method) {
let methodName = method[0]
return ![
"onLoad",
"onShow",
"onReady",
"onHide",
"onUnload",
"onPullDownRefresh",
"onReachBottom",
"onPageScroll",
"onShareAppMessage",
"onResize",
"onTabItemTap",
"observer",
].includes(methodName);
})
diyMethods.forEach(function(method) {
const [methodName, methodFn] = method
// conf methods
methods[methodName] = function (...args) {
const e = args && args[0]
if (e && e.type === 'tap') {
console.log('...tapping', methodName, args) // ，
}
methodFn.call(this,...args)
}
});
// conf
return conf
}
// myProxy.js
module.exports = (function() {
let OriginPage = Page
let OriginComponent = Component
return (Page = function(conf) {
conf.forEach(function(e) {
let [methodName, methodFn] = e
if (typeof methodFn === 'function') {
conf[methodName] = function(...args) {
// ， conf
methodFn.call(this, ...args)
}
}
})
return OriginPage(conf)
})(
(Component = function(conf) {
const methods = conf.methods
methods.forEach(function(e) {
// ， conf
})
OriginComponent(conf)
})
)
})()
(2) 요소 고유 식별자를 자동으로 생성하는 방법
현재 매장 시스템에서 신청한 elesn을 통해 유일한 표지 요소를 사용하고 있으며, 자동 표지를 원한다면 다음과 같이 세분화할 수 있다.
3. 총결산
본고는 위챗 소프로그램(Taro)이 수동 매장점에서 자동 매장점까지의 사고방식을 개술하였다.그리고 페이지 매점(pv, 공유)과 요소 매점에 따라 실현 방식을 분석했다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
위챗 프로그램 개발에서 직면한 몇 가지 사소한 문제를 깊이 있게 분석하다로컬 그림이 표시되지 않으면 개발 도구가 실행되는 것은 문제없지만, 실제 디버깅은 표시되지 않습니다 자세히 관찰한 결과 경로는 문제없다. 문제는 사진 이름이 중국어가 될 수 없다는 것이다. 이를 자모+숫자로 바꾸면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
