First, image display problem
1, the cache last picture problem
Last week, a friend tested a bug, the first screen list data returned the url of the normal picture, the page also displayed normally. As shown in figure:
But on a real phone, the image on the previous screen will still be displayed, not the default image. (Despair….)
There is a paragraph like this on the official website:
/ / processing picture second rendering, cache pictures last time if (url. IndexOf (" https:// ") = = 1) {url} `} {url = ` https://$Copy the codeAnd then, magically, it worked. (I am still confused) who knows the reason, please leave a message. (Seeking knowledge…) Supplement: As mentioned above, the bottom pocket design of an image is actually to change the normal display image to absolute positioning, and then add another image label before the image label to display the default image. You may wonder why not directly in JS judgment? Due to the reasons of the company, we will have many invalid pictures, but they are a complete and normal URL with HTTP protocol. In this case, the page will be blank and the UI interface is not very friendly. That’s why it’s designed that way.
wxml
wxss
Second, about environmental variables
At development time, you may need to differentiate the environment or look at the appid of the applet, which is available through __wxConfig. (Where is the document? I don’t know.)
- -Lily: We’ll develop it
- Trial: Trial
- Release: official release
Third, about small program migration, share path reset
Requirement: Because of the migration of principals, our company has changed the applets, so we need to change the applets from the old principals to the new applets. During the replacement, if you open the page shared by the old applet again, you are prompted to switch to the new applet by default. For this requirement, because there are many shared pages, it is not possible to write in the sharing method of each page, and I prefer to operate in app.js in a unified way. Therefore, I went to the official documents of the small program and found a life cycle method under the API: wx.getenteroptionssync ().
No more talking, straight to the code!
Set global Settings in the onShow method of app.js
OnShow: function () {// Call the lifecycle method let enterOption = wx.getenterOptionssync (); Let {path, query} = enterOption; let {path, query} = enterOption; Let url = jointUrl(path, query); let { envVersion, accountInfo } = __wxConfig; const { appId: appletAppId } = accountInfo ?? {}; If (appletAppId == YJYZ_AppId) {// Global configuration jumps to new applet wx.showModal({title: 'upgraded ', content: 'Please access via new applet ', showCancel: False, success(res) {if (res.confirm) {// _appId wx.navigateToMiniProgram({appID: _appId, path: Url, envVersion,})}}}) return} // User login authentication let token = wx.getStoragesync ('access_token'); let cityData = wx.getStorageSync("cityData"); if (token) { this.globalData.authorization = token; this.globalData.userInfo = wx.getStorageSync('userInfo'); } if (cityData) { this.globalData.cityData = cityData; } this.getTabbarData(); this.clearCacheStorage(); },Copy the codeFour, multi-line text “full text” function
In ordinary business requirements, there are often multi-line text “full text” function requirements, but I have not found a good solution. Recently, I have seen good posts in the community, combined with the specific business, I often change. See another article for details
portal
5. Ci issue
Usually we release small program experience version, are the use of developer tools, but wechat official also provides a convenient editing release tool CI. When we need to add some development functions, if we use the developer tool, we just need to check the corresponding options on the developer tool, and then we can publish successfully. Using CI requires additional command configuration.
1. NPM construction
Steps to use NPM on developer tools. However, no special configuration is required to use CI. According to the operation and maintenance colleagues, every build is a new process, the code is re-executed, the dependencies are re-executed, the build is re-executed, and the upload is re-executed.
2. Enhanced compilation
Applet developer tools do not support ES6 + by default. If you want to support es6+, go to Developer Tools > Details > Local Settings and check enhanced Build. The current new version should be a core build, and the documentation is not correct.
CI Command lines to be added: –enable-es7 true
3. The problem of uploading and publishing more than 2M
In the last requirement iteration, operation and maintenance colleagues used CI to release, and there was a hint of more than 2M, but I used developer tools to release without this problem. The error message is as follows:
20002 'Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: 80051, errmsg: source size 2092KB exceed max limit 2MB"}'\ (node:9065) UnhandledPromiseRejectionWarning: Error: Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: 80051, errmsg: source size 2092KB exceed max limit 2MB"}\ at Object.upload (/ opt/node - v10.15.3 / lib/node_modules/miniprogram - ci/dist/upload/upload. Js: rising 90) \ at process _tickCallback (internal/process/next_tick.js:68:7)\ (node:9065) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)\ (node:9065) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.Copy the codeThere is a similar problem found in the community, it is ci package calculation error, no compression caused. So the compression command was added: –enable-minify true. A new error has been reported as follows:
20002 'Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: -80054, errmsg: ./component/list-condition-search/list-condition-search.wxml:125:3: expect end-tag `input`., near `view`"}'\ (node:16627) UnhandledPromiseRejectionWarning: Error: Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: -80054, errmsg: ./component/list-condition-search/list-condition-search.wxml:125:3: expect end-tag `input`., Near ` view ` "} \ at the Object. The upload (/ opt/node - v10.15.3 / lib/node_modules/miniprogram - ci/dist/upload/upload. Js: rising 90) \ the at process._tickCallback (internal/process/next_tick.js:68:7)\ (node:16627) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)\ (node:16627) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.Copy the codeBut, to be sure, the WXML code I don’t have is fine, so I suspect something is wrong with the compression. By viewing the wechat development tool, the compression is checked by default, as shown in the picture:
MAC
windows:
Compare the compilation Settings on the official website
–enable-minify true compresses all code, whereas the developer tool compresses JS and WXSS only, so add these three lines:
--enable-autoPrefixWXSS true \
--enable-minifyWXSS true \
--enable-minifyJS true \
Copy the codeAfter the test, the upload is successful.
Complete reference commands:
miniprogram-ci \ upload \ --pp ./ \ --pkp /opt/yjyz/workload-ci/miniprogram_pk/${BUSINESS_LINE}/private.${WX_APP_ID}.key \ --appid ${WX_APP_ID} \ --uv ${TAG} \ -r 1 \ --enable-es6 true \ --enable-es7 true \ --enable-autoPrefixWXSS true \ --enable-minifyWXSS true \ --enable-minifyJS trueCopy the code