The HTTP request
Uni. request secondary encapsulation
H5 cross-domain problem
npm run dev:mp-weixin
npm run dev:h5
Crater: When the applets interface returns a field value of NULL, null is rendered as a string on the page
H5 side seems to have no problem, interface access is very smooth, look at wechat small program side, how a pile of null page. When you open network, the field returns NULL, why is it rendered as null string?
Solutions are as follows:
Optimization: make async more elegant (mimics node async return format [error, RES])
Optimization: anti-shake problem (the form is submitted several times, the form field rule verification,scroll monitoring)
When you don’t understand what stabilization is, click on your ‘Gold digger’ avatar ->’ Write a Post ‘-> start writing your blog. You will find the effect of autosave. Open network and take a closer look. You’ll send an updateDraft request to save your blog to the draft box
Downstairs code get is a senior east front-end sister’s blog, a wave of analysis
Copy the Vue – the router (uni – simple – the router)
Specific plug-ins can be moved to address: p1-jj.byteimg.com/tos-cn-i-t2…
This allows you to manipulate the Router as elegantly as vue, page-level route exclusive guard (beforeEnter), global route guard (beforeEach, afterEach), basic push, replace, and so on.
Page refresh vuex clears problems
Vuex persistence: Vuex-persistedstate with MP-storage (support uni multi-terminal storage shim). Vuex log can be printed in the development environment. Vuex can be used for localStorage, sessionStorage, cookies, etc.
I chose localStorage in the project.
And at this point we’re thinking, well, if I only want to persist some of the keys in the store, I don’t want to persist some of the keys in the store.
Here’s my solution.
Login (wechat built-in browser login free, wechat small program login free, conventional verification code login)
Regular verification code login
JWT check can be done. The token is cached locally.
Wechat built-in browser is login free
(Go directly to wechat SDK, redirect to change code to get openId. Teleporting links: mp.weixin.qq.com/wiki?t=reso…)
Wechat small program free (Alipay small program similar, authCode)
Uni. Login code. At the first login, the code+ Mobile + ICODE is thrown to the back end, and the back end saves the openId into the library. When you log in again, the code is thrown to the backend, which compares the openId of the current user with the openId in the table. If the openId is the same, the login is not required; otherwise, the login is inevitable and the normal login process continues.
Payment (Alipay H5 payment, wechat Mini program payment, wechat built-in browser payment)
Tips: Payment difficulties are at the back end. Just eat the melon in silence
Alipay H5 payment
// Sample code (basic form submission)
const div = document.createElement(“div”);
div.innerHTML = res;
document.body.appendChild(div);
document.forms[0].submit();
Wechat mini program payment
Uni.requestpayment () check various wechat payment fields (e.g. NonceStr, paySign, etc.).
Wechat built-in browser payment
Go WeChat SDK, various WeChat payment slip attestation can shift (such as nonceStr, paySign) link: pay.weixin.qq.com/wiki/doc/ap…).
Component packaging
Props pass parameters (format validation, value validate, etc.), and slot slots (most frequently used are scope slots). The customized components in the project include: payment keyboard component, filter filter component (with adsorption top), etc.
By encapsulating these components, have we ever thought that the scope of requirements that we are currently encapsulating is only the scope of the project, how can we meet 90 percent or more of the business requirements like ANTD and Element? At this time can move some Ali big guy’s blog: juejin.cn/post/684490…
Scroll through
- When scrolling is not present in the Modal layer, you can simply disable TouchMove for modal display.
- When the Modal layer has scrolling, page{position:fixed; top:0; height:100%; overflow:hidden; } The modal layer uses scrollview, which solves the scrollthrough problem.
Problems of authorization of wechat applets (chooseLocation authorization of map location, getRunData authorization of wechat steps, getUserInfo of wechat personal information)
For example: When you enter the mini program for the first time and the button manually triggers getUserInfo, wechat authorization will pop up. If you refuse to grant permission by clicking “Cancel”, this interaction will be very unfriendly.
Solution: getSetting to obtain user authorization, if user authorization is closed, showModal guides the user to manually enable wechat authorization. If the user clicks “OK” in Modal, he directly goes to retrieve openSetting (open the setting interface and guide the user to open authorization). If the user clicks “cancel” of Modal, showModal of getSetting prompts the user to manually enable authorization when entering the applet next time.
debugging
H5 side: vconsole plug-in can let you real computer simulation is to view the log, convenient to find problems in time, and solve.
Small program end: each factory’s real machine debugging has been very perfect. Wechat applet has also been updated with automated testing (Node version) to facilitate testing.
Final battle: Release applets, release H5
H5 release: Still follow Jenkins release, same as regular Vue, React Web side project.
Small program release: self-check => review => release (may go through NNN times… Did not pass the audit, mind to steady ha)