This is my third article on getting Started

Inside any great big piece of software is a great little program. Like it, check it out

setData

  • Frequent use of setData can cause js blocking problems, even stalling or crashing (Never tried crashing); So how can we improve performance with good posture?
      1. Try to set the contents of the setData together setData, do not have multiple functions or use setData at the same time;
      1. If you update a value in an object, you should not update the whole object, just update the corresponding value, for example

        This.setdata ({' userinfo.headimg ': 'updated content '});
      1. If the data is listed, you need to change one value to true, and you should not update all the data, only one value should be updated, for example

        this.setData({[`list[${index}].show`]: true});
      1. The page does not need to render data, try not to write in js inside the data, you can define a global parameter can be or this. Timer and other global variables;
      1. SetData should not exceed 1 MB ata time, which will cause the setting to fail. It is recommended that the paging data be set using a two-dimensional array, for example
    // 1. Store data in a two-dimensional array
let feedList = [[array]];
// 2. Maintain a page variable value and load the data page++ once
let page = 1
// 3. Each scroll to the bottom of the page updates the data through the data path
onReachBottom:() = >{
    fetchNewData().then((newVal) = >{
        this.setData({
            ['feedList[' + (page - 1) + '] ']: newVal,
        })
    }
}
// 4. Finally our data is in the format [[array1],[array2]] and then traverses the rendered data through wx:for
Copy the code

relativeToViewport

  • We will find a lot of times, the list shows are all graphic display, and the back-end and does not provide a thumbnail images, this leads to a browser request more pictures will be very consumption HTTP requests, and the browser also has a number of requests limit, such as chrome limits the disposable up to six, serious can also affect our business interface request, then we useIntersectionObserverIt’s wonderful
    • solution
    1. Create an object instance firstwx.createIntersectionObserver();
    2. Use the data list to iterate over the elements that are listening to the page render.
    3. Condition judgment, dynamic setting state display picture, if return scrolling filter does not need in setData, reduce JS work task;

Js code

     data: {
         list: [ // Create your own test data
          {id: 0.url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
          {id: 1.url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
          {id: 2.url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}},],onReady() {
        let list = this.data.list;
        list.forEach((item,index) = >{ // Iterate over the location of the listening element on the page
          wx.createIntersectionObserver().relativeToViewport({bottom: 0}).observe(`.img-${index}`.res= >{
              if (res.intersectionRatio > 0 && !list[index].show){
                // intersectionRatio is greater than 0, indicating that the element appears in the view
                // console.log(item, 'list', res)
                  this.setData({
                      [`list[${index}].show`] :true})})})},Copy the code

WXML code

   <view>
    <block wx:for="{{list}}" mode="aspectFill" wx:key="index">
      <view class="test-img img-{{index}}">
        <image class="image" wx:if="{{item.show}}" src="{{item.url}}"></image>
      </view>
    </block>
  </view>
Copy the code

WXSS code

.test-img{
  width: 600rpx;
  height: 400rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.image{
  width: 100%;
}
Copy the code

onPageScroll

  • This listens for page scroll events and outputs how far the top scroll off the page, in px; Do not write or output this event if it is not necessary, it is very performance consuming. If it is necessary, we should learn to write throttling or shockproof events, and reduce setData too quickly. The following code is online copy, combined with their own business transformation can be
/ / image stabilization
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout ! = =null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait); }}// Processing function
function handle() {    
    console.log(Math.random()); 
}
// Roll events
window.addEventListener('scroll', debounce(handle, 1000));

// Throttle code (timer) :
var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if(! timer) { timer =setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null; }, delay); }}}function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));
Copy the code

The code of the subcontract

  • The single subcontracting of small programs can only be up to 2M, so we can’t write all our business code in the main package. As a result, we can’t submit the code, and it will also lead to slow opening of small programs and poor experience.
  • In order to solve this problem, wechat provides a small program with a total code package supporting a maximum of 16M, and also supports our subcontracting function, so that we can develop more powerful functions, subcontracting is divided intoOrdinary subcontractandIndependent of the subcontractWhat is their relationship? How is it different?
    • Subcontracting: Subcontracting is a common subcontracting can save the main package code, start the subcontracting page, the main package will be downloaded, the general subcontracting can use the main package JS file, template, WXSS, custom components, plug-ins and so on
    • Independent subcontracting: Independent subcontracting can run without relying on the main package, and it does not need to download the main package, which can greatly improve the startup speed of the subcontracting page. It cannot use js, components, WXSS, plug-ins, etc., of the main package
    • Preloading: after subcontracting, if you want to open the main package, the jump does not appearLoading moduleCan be used to pre-load, so that you can do seamless jump, enhance the user experience, jump as smooth as the main package to the main package page.Please check wechat document for more subcontracting explanation
{
  "pages": [
    "pages/index"."pages/logs"]."subpackages": [{"root": "moduleA"./ / the subcontract
      "pages": [
        "pages/rabbit"."pages/squirrel"] {},"root": "moduleB".// Independent subcontracting
      "pages": [
        "pages/pear"."pages/pineapple"]."independent": true // Sign of independent subcontracting}]."preloadRule": { // Preload
    "pages/index": {
      "network": "all"."packages": ["moduleA"] // Subcontract that requires preloading
    },
    "pages/logs": {
      "packages": ["moduleB"] // Subcontract that requires preloading}}}Copy the code

The end of the

This writing first here, more rich and useful content, please wait for the next ~

All finished, don’t forget to give a like before go ~, creation is not easy, thank you oh