wechat app issues

wechat-app-issues

I have known for a long time that the pitfall of mini programs is very deep. After more than a month of practice, I found that this pitfall is indeed well-deserved...

However, the small program developed was launched as scheduled, which is still worth celebrating! ! ! Haha, record the points that make you pause.

1. Pitfalls encountered in developing WeChat mini programs

• 1. {{}} cannot execute methods and can only handle simple operations such as "+ - * /". For example, when traversing a list, the amount of each item needs to be formatted. It can only be pre-formatted in js and then setData Once (╯□╰)
• 2. You can only pass, you can only pass, you can only update the view through setData(), pitfall...
• 3. We stipulate that the page path can only be five levels. Please try to avoid multi-level interactions.
• 4. Page A-->Page B, page B returns to A, how to trigger the refresh of A without increasing the page level. The solution that comes to mind for the time being: write A's initialization data logic in the onshow event of page A.
• 5. undefined is treated as a string if(xxx == "undefined") [Iterative optimization in later versions]
• 6. When encountering strange problems (such as styles, etc.), restart the tool first, and it will never work after repeated attempts.
• 7. Local web fonts are not supported (online fonts need to be used). After testing, it was found that some Android devices cannot display properly. After much trouble, I discovered that the server that originally needed to store the fonts needed to support cross-domain. Damn it, no errors are reported when debugging on the mobile phone. I almost gave up on web fonts. I've been stuck for a long time, it's a trap...
• 8. If local resources cannot be obtained through CSS, you can use network images, or base64, or use the <image/> tag.
• 9. Page.data cannot be directly operated [Avoid directly assigning and modifying Page.data, please use Page.setData to synchronize the data to the page for rendering]
• 10. Use type="digit" for the numeric keyboard
• 11. What happens if you have used https but it reports that you cannot establish a secure connection with the server [You need to configure nginx to configure the encryption standard of https to tls1.2 and above]
• 12. wx.setStorage(OBJECT) [Currently, each mini program is limited to 5M]
• 13. Data monitoring [WeChat backend: actual number of visits/yesterday overview/cumulative number of visited users/TOP visited pages]
• 14. WeChat debugging artifact, ngrok, see ngrok
• 15. Add click effect to view [need to turn on hover effect]:

    < view hover hover-class =" item-hover " >

• 16. User authorization debugging method [Development Tools-》Clear mobile phone authorization data (Cache-Clear mobile phone authorization data)]
• 17. When the mini program is loaded for the first time on the Android phone, on the home page, the onshow method will be loaded twice inexplicably, but it will not be loaded on the iPhone. Since it needs to be triggered in onshow to obtain user information, the system will load onshow twice. An error is reported in the background. . .
• 18. Disable page drop-down: Set "disableScroll": true.
• 19. getAppConfig:fail will appear under Android and userInfo cannot be obtained. WeChat problem, download the latest WeChat installation package
• 20. The background cannot accept POST data, but can receive GET request parameters.

    url: url,
    data: data,
    method: "POST",
    dataType: "json",
    header: {
      'content-type': 'application/x-www-form-urlencoded' //==> 此处若为application/json则服务端无法获取POST的参数
    }

• 21. After the user refuses authorization when starting the mini program for the first time, the authorization pop-up box cannot be evoked next time, and the last user's choice will be remembered by default. No solution has been found yet, and WeChat has no relevant analysis. 【2017-01-10】 WeChat updated the API (wx.authorize(OBJECT)) to support evoking authorization pop-up boxes【2017-07-05】
• 22. To jump to a page with a tabbar, you must use wx.switchTab(). This is asked in various groups almost every day! ! !
• 22. When binding developers/experiencers, remember to confirm the invitation on your mobile phone. (A lot of people asked)

• 23. The WeChat background has updated the request legal domain name. You can directly go to WeChat Development Tools-->Project-->Configuration Information-->Refresh, and it will take effect immediately.
• 24. The official mini program does not provide a Java version login information decryption example. You can use this demo Java version decryption demo.
• 25. When using wx:for to traverse, it is best to add wx:key="{{item.id}}". If you clearly know that the list is static, or you do not need to pay attention to its order, you can choose to ignore it. However, if the traversed array will change, the data sequence may change.

• 26. The convenience of mini program development page is rpx, so it is recommended to use iPhone 6 size for the design draft. For flex layout, please refer to this article
• 27. WeChat applet will monitor file changes by default and then refresh automatically. But the disadvantage is that it is fully refreshed every time instead of hot replacement of modules, which will affect the development speed. Especially for developers who like frequent Command + S, you will find that your mini program is constantly refreshing. @MinJieLiu
• 28. The WeChat mini program has supported the web-view component since the basic library 1.6.4 , that is, the mini program supports the ability to embed web pages. However, when using it, it was found that the web page cannot be displayed in the developer tools, but the mobile preview can be [upgraded] The latest version of WeChat client]. The reason is that the basic library used does not support web-view component, which can be solved by selecting the latest basic library. as follows:

• 29. Communication between H5 and mini programs is not supported and cannot be communicated through local storage or other means. If you absolutely need to carry parameters, you can try to carry them in web-view url, but it is not recommended. H5 can be authorized using the official account. Web-view open capabilities (webpages need to embed jssdk): JSSDK interfaces supported in webpages:
• 30. web-view currently does not support WeChat payment.
• 31. In the mini program, catch part of try...catch statement uses throw to throw an error, which cannot be caught by the outer try...catch .

2. Related configurations before mini program development

• 1. Login--->Administrator scans the QR code-->Settings-->Development settings-->Generate AppSecrect
• 2. Server configuration login--->Administrator scans the QR code-->Settings-->Development settings-->Server domain name-->Scan the QR code
• 3. Bind developer user identity-->Developer-->Up to 10 QR code developers
• 4. Bind the user identity of the experiencer-->Experiencer-->Scan the QR code to 20 experiencers

3. Mini program release

Publishing can only be done with an administrator account. The steps are as follows:

• Exit the developer account in the development tools
• The administrator scans the QR code to log in to the developer tools, upload-->set the WeChat background as a trial version-->review-->publish

Note: The review time is variable, 2-6 days

4. Collection of reasons for failure to pass the review

• 1. The introduction to the mini program does not introduce the functions of the mini program.
• 2. The category is inconsistent with the content provided on the page
• 3. The services and content provided by the mini program must be formal and cannot be submitted as test content or submitted as test content multiple times.
• 4. If it contains audio and video content, please add the relevant corresponding categories.
• 5. The pictures and text on the homepage overlap each other, so it is recommended to optimize them.
• 6. The search box can only be selected after a few clicks. There is no response when clicking on the page comments. The resolution and size of the page pictures are distorted.
• 7. Some pictures show that they were compressed and the physical examination was not good.
• 8. Mini programs with an account system must support WeChat authorized login in addition to their own login methods.
• 9. For services that must be logged in to use, please provide a test account
• 10. There is online trading of virtual items. The iOS system requires IAP. The mini program does not pay for the time being. Please pay attention to the follow-up.
• 11. The core content of the page corresponding to the mini program service category must be consistent with that category.
• 12. It must be ensured that users can use the service category on this page and must not hide or make multiple jumps.
• 13. Do not display or recommend third-party mini programs. Example: Mini program navigation, mini program link promotion, mini program rankings, etc. cannot be done.
• 14. There are inducement behaviors in the page content of mini programs, including but not limited to inducement to share, inducement to add, inducement to follow public accounts, inducement to download, etc. Programs that require users to share, add, follow or download before they can operate, contain Mini programs that express or imply copywriting, pictures, buttons, overlays, pop-up windows, etc. that users share, mini programs that induce users to share and spread through the temptation of benefits, mini programs that use exaggerated words to coerce or induce users to share, force or induce Any mini programs added by users will be rejected;
• 15. Prohibit the automatic playback of multimedia such as videos, music, and voices.
• 16. If the mini program has an account system, it must provide a "log out" account option that can be used normally and is easy to find.
• 17. Mini program content cannot include gambling, quizzes and draws.
• 18. Test content cannot exist in the page content of the mini program; examples: fortune telling, lottery, horoscope, etc.

Common rejection situations on other WeChat mini program platforms

5. Documentation and Community

• 1.Official documents
• 2. Official Q&A
• 3. Official community
• 4. Mini program access guide
• 5. Common FAQs about mini programs

6. code

• 1. Encapsulate the WeChat initiation request interface. If the login fails, the login request will be automatically initiated by default.

 /**
 * 发起的是 HTTPS 请求
 * @pram url: 请求地址,协议必须为https
 * @pram data 请求参数请求参数
 * @param success 请求成功回调
 * @param fail 请求失败回调
 * @param complete 请求完成（成功或者失败）回调
 */
function request ( url , data , success , fail , complete ) {
  var _url = url ,
      _data = data ,
      _success = success ,
      _fail = fail ,
      _complete = complete ;

  wx . request ( {
    url : url ,
    data : data ,
    method : "POST" ,
    dataType : "json" ,
    header : {
      'content-type' : 'application/x-www-form-urlencoded' ,
      'Client-Agent' : getSystemInfo ( ) ,
      'WX-SESSION-ID' : wx . getStorageSync ( constant [ 'WX-SESSION-ID' ] ) //每次请求带上登录标志
    } ,
    success : function ( res ) {
      if ( res . data . code == "-9999" ) { //会话失效重新登录
        requestLogin ( function ( ) {
          constant [ 'NUM_TRY_LOGIN' ] ++ ;
          //设置请求上限，防止重复提交并死循环
          if ( constant [ 'NUM_TRY_LOGIN' ] < constant [ 'LIMIT_NUM_TRY_LOGIN' ] ) {
            request ( _url , _data , _success , _fail , _complete ) ;
          }
        } ) ;
        return ;
      }
      if ( res . data . code == "0" ) {
         if ( typeof _success == "function" ) {
           _success ( res . data ) ;
         }
      } else {
         wx . showToast ( { title : res . data . msg , icon : 'loading' , duration : 2000 } ) ;
         return ;
      }
    } ,
    fail : function ( res ) {
      if ( typeof _fail == "function" ) {
        _fail ( res ) ;
      }
      if ( typeof _fail == "string" ) { //请求失败的弹框提示
        wx . showToast ( { title : _fail , icon : 'loading' , duration : 2000 } ) ;
      }
    } ,
    complete : function ( res ) {
      if ( typeof _complete == "function" ) {
        _complete ( res ) ;
      }
    }
  } ) ;
}

• 2. Request login interface

 /**
 * 请求登录,获取用户相关信息
 * @param callback
 */
function requestLogin ( callback ) {
  var _callback = callback ;
  wx . login ( {
      success : function ( event ) {
        // 获取到请求码，继续请求用户的基本信息
        if ( event . code ) {
          var code = event . code ;
          wx . getUserInfo ( {
              success : function ( res ) {
                var data = {
                  code : code ,
                  encryptedData : res . encryptedData ,
                  iv : res . iv ,
                  signature : res . signature ,
                  rawData : res . rawData
                }
                var url = domain + "/wx_xxx" ; //请求登录地址
                request ( url , data ,
                  function ( res ) { //success
                    if ( res . code == "0" ) {
                       //此处可以将服务端返回的登录状态保存起来
                       wx . setStorageSync ( constant [ 'WX-SESSION-ID' ] , res . object . sessionId ) ;
                       if ( typeof _callback == "function" ) {
                         _callback ( ) ;
                       }
                    }
                  } ,
                  function ( res ) { //fail
                    wx . showToast ( { title : '请求登录失败' , icon : 'loading' , duration : 2000 } ) ;
                  }
                ) ;
              } ,
              fail : function ( res ) {
                //用户拒绝授权
                if ( res . errMsg == "getUserInfo:cancel" || res . errMsg == "getUserInfo:fail auth deny" ) {
                  wx . redirectTo ( { //跳转至未授权页面
                    url : '../xxx-page/xxx-page'
                  } ) ;
                }
              }
          } )
        } else {
          wx . showToast ( { title : '微信登录失败' , icon : 'loading' , duration : 2000 } ) ;
        }
      } ,
      fail : function ( res ) {
        wx . showToast ( { title : '微信登陆失败！' , icon : 'loading' , duration : 2000 } ) ;
      }
  } ) ;
}