This article is the third in a series of "WordPress Development WeChat Mini Programs". This article records the process of developing version 1.2 of the "DeveWork +" mini program. It is recommended to read the first article and the second article before reading this article.
If you have not read this applet, you can enter the experience through the applet code below. Note that when you read the article, the version you scanned into may not be version 1.2.
The update content of the "DeveWork +" applet v1.2 mainly focuses on optimization points to improve the user experience and fix remaining bugs. As in the previous article, except for the last chapter in this article, each chapter is a change point, and the developer tool update history of WeChat applet is used to adopt A (Add), F (Fix), U (Update) as subtitle beginning.
A: Added "About and Feedback" page
The new content of the "DeveWork +" applet v1.2 is basically this "About and Feedback" page. At present, it can be accessed through two entries: the article content footer and the reading record page footer. The content of the page is mainly to introduce applets, provide feedback entry and contact information. Feedback entrance wanted a small program "Support Session" component, but the default style is really hard to read, and finally the use of button assembly by setting open-type="contact"into the dialogue of customer service. Interested in welcome to hook up through the customer service session, but generally I would not go to see haha, it is recommended to use contact methods such as email.
A: Copy the URL function of the article to guide the external browser to read
Some readers may be confused about the content of the articles in the "DeveWork +" applet, and all the links involved are not pointless. This pot must be memorized by a small program-WeChat small program is a natural closed system. Also because of the constraints of the personal applet, the comment content will not be displayed. In this version, a function of copying the URL of an article is added to guide users to read the original text and its comments in an external browser.
It is to use wx.getClipboardDatathis interface, because the code is not much to complain technical content of the show.
A: Enable PullDownRefresh on some pages
PullDownRefreshThat is, pull up and reload. This version is enabled on some pages PullDownRefreshand has the following two pits:
1) If the background is white pull-down, you need to be app.jsonthe windowobject backgroundTextStyleto dark, or can not display the loading animation.
2) scroll-viewComponents and onPullDownRefreshcannot be used at the same time in the applet .
F: Fix some bugs of wxParse
This version fixes the bugs of wxParse mainly at the style level, and some content has been submitted to wxParse developers for PR.
1) Some inline elements do not have corresponding inline styles. Such as dellabel.
2) preLabel optimization. Most of the articles in this site have a large section of code, which has not been very good to display on the small program version. The reason is that wxParse deletes line breaks in the code by default.
3) The lilabel circle style and line height style are unified.
U: Several optimization points to improve user experience
This version is mainly to improve the user experience, so it is optimized at the following points:
1) The Loading style of the drop-down loading article has been modified. Abandon the default loading component, and use the same loading effect as the website, written directly in CSS3.
2) Added pop-up prompt for failed data loading. wx.request()Such network request events may encounter loading failures, and it is necessary to prompt the user at this time. Jeff's processing method adds a pop-up window, and then is called in the fail event.
// https://devework.com/wordpress-weapp-3.html
// 网络加载失败提示
function netWorkErrorAlert(){
wx.showModal({
title: '文章加载失败',
content: '请求失败，可能是网络故障，请稍后再试。',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('netWorkErrorAlert 用户点击确定')
}
}
})
}
// 实际过程本人是用promise 的catch 状态，这里仅演示原生语法
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
success: function(res) {
console.log(res.data)
}
fail: function(res) {
// netWorkErrorAlert 函数我是放到了util 里面
util.netWorkErrorAlert();
}
})
3) Optimization of the "no more articles" scenario. It is now possible to not send requests in the "no more articles" scenario.
4) The display when the reading record page is empty. Added an icon state.
F: The scroll-view component bindscrolltolower event is executed multiple times
This is also a pit of WeChat Mini Program. The scroll-view component on the homepage of the applet is bindscrolltolowerbound to the loadMore()function. On the development tool, each pull-down load is normal, but on the real machine, it is found that each time the pull-down, the loadMore()function will be repeated two or three times. It was originally loaded 6 articles at a time, actually loaded 24 articles!
Jeff's solution is to use a timer. In the loadMore()function function, if the loadMore()time difference between the last time the function was run and the current time is within 300ms, it proves to be a bug caused by a small program that was repeatedly executed. function.
// https://devework.com/wordpress-weapp-3.html
// 需要在page 的data 对象中设置默认值
data: {
lastLoadTime: 0 //上一次load的时间
},
// 下拉加载绑定的函数
loadMore: function (e) {
// 300ms 内多次下拉的话仅算一次
//获取点击当前时间
var curTime = e.timeStamp;
//上一次加载的时间
var lastTime = this.data.lastLoadTime;
console.log(lastTime, curTime, curTime - lastTime);
if (curTime - lastTime < 300) {
console.log("不正常的加载间隔时间");
return;
}
... //其他代码略
this.setData({
lastLoadTime: curTime
});
... //其他代码略
}In this way, the scrollscrolltolower event of the scroll-view component can only be executed once each time.
Another mention is that the scroll-view component found that sometimes the page sometimes jitters when the page is pulled down and loaded. There is no solution for this temporarily.
U: The feature article page has a new layout style
In order to distinguish it from the article list style on the home page, a new layout style is enabled on the feature article page: left picture right title + release time and other information collection. San Liangxia get layout using flex, but instead encountered a problem on the CSS - text-align:justify;the webkit-line-clampquestion of a common cause. As shown below:
I have never used it in the usual development based on compatibility considerations text-align:justify;(the applet itself supports justify). When this attribute is webkit-line-clampshared with multi-line truncation, it will cause the above problem. The solution is to change text-align:left;.
End of sentence
The above is the main update content of version 1.2. The review of version 1.2 is fast, and it will be passed the next night.
There are also two things incidentally here:
1) Many people have requested source code through their contact information . Under the unified description, no open source code is planned at this stage. Jeff hates all kinds of reach-out parties, especially those who directly send a blank text with a title similar to "send a code over" mail-I immediately deleted this kind of mail. Be open and honest: For small program codes, those who are capable, please refer to this series of articles or other materials to write their own; those who are not capable can consider paid cooperation, just sauce.
2) Recently found the first part of this series ["WordPress website based on REST API to develop" WeChat applet "combat
"] ( https: //devework.com/wordpres ... ) was criticized . . How can I say that plagiarism can't be concluded in this way, but the article title and even the full text ideas are large paragraphs and large paragraphs, and the sentence has been slightly changed. For this kind of "copying xi" method, it is not uncommon since I started to write a blog. For the time being, I will send two words: Ha ha. If the magistrate is fortunate enough to see that article, please do n’t think that my article was copied by others ~
This site's "WeChat Mini Program" series of articles: https://devework.com/tag/weapp