8周年記念活動ページ作成まとめ

ハロ、皆さんこんにちは、132です。今日は馬洗会の8回目の誕生日です。そして、誕生日のイベントページを祝うために、昨日2時までネットで残業しました！

とてもシンプルなアドレス、シンプルなカット、そしていくつかのインターフェイスのリクエストで完了するように見えますが、実際には多くのことを含んでいます！

式をクリックすると、現在のカーソルにプレーンテキスト[text]が追加され、カーソルの位置を変えずに再びフォーカスが当たります。

antdか何かを使っているなら、内部で処理できるはずですが、私はネイティブなので、自分で書かなければなりませんでした。

const content = (str: string) => {
 var tc = document.getElementById("input");
 var len = tc.value.length;
 let pos = len;
 tc.focus();
 if (typeof document.selection != "undefined") {
 document.selection.createRange().text = str;
 } else {
 pos = tc.selectionStart + str.length;
 tc.value =
 tc.value.substr(0, tc.selectionStart) +
 str +
 tc.value.substring(tc.selectionStart, len);
 }
 tc.setSelectionRange(pos, pos);
 setValue(tc.value);
 };

おそらく、フォーカスを合わせた後、カーソルが端か手前に移動し、setSelectionRangeで位置を変えるような処理が必要なのでしょう。

export function openApp() {
 const originUrl = "iting://open?msg_type=14&url=http://..com/web-support/api/layout/8-years";
 const itingurl = encodeURIComponent(originUrl);
 let pathUrl = "open_xm=" + itingurl + "&android_schema=" + itingurl;
 setTimeout(() => {
 window.location.href = "http://..com/down?" + pathUrl;
 }, 2000);
}

もちろん、ユーザーがApp Storeをインストールしていない場合、この方法は機能しません。

コメントボックスカーソル

export function post(url, data) {
 return new Promise((resolve, reject) => {
 fetch(url, {
 method: "POST",
 body: JSON.stringify(data),
 headers: {
 "Content-type": "application/json; charset=UTF-8",
 },
 credentials: "include"
 })
 .then((res) => res.json())
 .then((data) => {
 resolve(data);
 })
 .catch((e) => {
 reject(e);
 });
 });
}
export function get(url) {
 return new Promise((resolve, reject) => {
 fetch(url, {
 credentials: "include"
 })
 .then((res) => res.json())
 .then((data) => {
 resolve(data);
 })
 .catch((e) => {
 reject(e);
 });
 });
}

クレデンシャル・フィールドはクッキーの問題をいくつか解決することができることに注意してください。

単純なfetchのカプセル化

デフォルトでは、iosのビデオは直接フルスクリーンを呼び出します。

<video
 src="1.mp4"
 controls
 poster="/1.png"
 controlsList="nodownload"
 webkit-playsinline="true"
 x5-playsinline="true"
 x-webkit-airplay="allow"
 playsInline
></video> 

モバイル適応の問題

I've never written an event page before, and to be honest I have no idea about mobile adaptation, so this time I used the px scheme But I found .................. because the design is cut out of the pictureしかし、デザインが切り取られているため、pxの解決策ではイメージを引き伸ばすことができず、あらゆるズレが生じることがわかりました！

リサイズできるようにするために、サイズを計算するjsロジックをたくさん書きました。

 const video = document.querySelector(".video") as any;
 const v = document.querySelector("video") as any;
 const w = document.body.clientWidth;
 video.style.width = w - 20 + "px";
 video.style.height = (445 / 700) * video.clientWidth + "px";
 v.style.width = video.clientWidth - 20 + "px";
 v.style.height = v.clientWidth/16*9 + "px";
 // リストのスタイルを変更する
 const items = document.querySelectorAll(".item") as any;
 for (let i = 0; i < items.length; i++) {
 const item = items[i];
 item.style.width = w / 2 - 17 + "px";
 item.style.height = (309 / 340) * item.clientWidth + "px";
 }

おかしいと思いませんか。でも、これはどうしようもないことで、デザインや携帯電話の解像度にも関係しているのです

私は、指数関数的に伸びるremが、イベントページにとって最良のソリューションであることを認めざるを得ません！

以前はタオバオのflexiable.jsソリューションがありましたが、肥大化していて、完全にシンプルに実装することができました：

(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;
	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}
	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	refreshRem();
	win.addEventListener("resize", function() {
		clearTimeout(tid); 
		tid = setTimeout(refreshRem, 300);
	}, false);
	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { 
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);
	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);

フレックスレイアウトを使わない理由は聞かないでください。フレックスレイアウトは柔軟性のあるレイアウトで、イベントページは明らかに柔軟性に欠けます！

そう、昨日の残業が必要だったんです。

 <script src="https://..com/wap/js/lib/.js" async></script>

そして、次の2つのリクエストを送ることに集中します。

import {get,post} from '../api/index'
const wx = window.wx || {}
let count = 0;
export const wxInit = () => {
 const thirdpartyId = 17;
 const host = "https://..com";
 return get(`${host}/xthirdparty-toolkit-web//jssdk/config/${thirdpartyId}?signatureUrl=${encodeURIComponent(window.location.href.split('#')[0])}&_=${+new Date()}`,
 );
};
function share(sData) {
 const thirdpartyId =17;
 return wxInit(thirdpartyId, sData.link).then((data) => {
 const config = {
 debug: false,
 appId: data.appId,
 timestamp: data.timestamp,
 nonceStr: data.nonceStr,
 signature: data.signature,
 jsApiList: [
 "checkJsApi",
 "onMenuShareTimeline",
 "onMenuShareAppMessage",
 "onMenuShareQQ",
 "onMenuShare",
 "hideMenuItems",
 "showMenuItems",
 "hideAllNonBaseMenuItem",
 "showAllNonBaseMenuItem",
 "chooseWXPay",
 ],
 };
 wx.config(config);
 return new Promise((resolve) => {
 wx.ready(() => {
 console.log(sData)
 if (sData) {
 //  
 wx.onMenuShareTimeline(sData);
 //  
 wx.onMenuShareAppMessage(sData);
 // MSN
 wx.onMenuShareQQ(sData);
 // 
 wx.onMenuShare(sData);
 wx.showAllNonBaseMenuItem();
 }
 resolve(0);
 });
 });
 });
}
export async function WxShare(sData) {
 const state = await _WxShare(sData);
 if (state == 2) {
 share(sData);
 }
 return state;
}
export const wxConfig = (thirdpartyId) => {
 return get(`https://..com/x-thirdparty-web/Jssdk/config?signatureUrl=${encodeURIComponent(...split('#')[0])}&_=${+new Date()}&thirdpartyId=${thirdpartyId}`
 );
};

上記は最小限のコードで、ポイントはencodeURIComponent(window.location.href.split('#')[0])は2つのレイヤーの処理を通過する必要があるということです。

まとめ

上記で共有したコードは再利用可能であり、各自のビジネスシナリオに応じて、独自の

残業で疲れたので、少し横になります。