A preliminary exploration of the pits collected during the development of WeChat applets from the world of iOS (continuous update...)

A preliminary exploration of the pits collected during the development of WeChat applets from the world of iOS (continuous update...)

Preface

As a diligent and simple future iOS developer, forced to be curious about new things, he raised his hand without hesitation and joined the development of a small program project in the team.

1. let s declare:

  • I have a little understanding of the front-end, and I have no in-depth understanding of WeChat applet development. This is just a summary of the project experience of the applet to share with you.
  • The WeChat Mini Program is under development, and the embedded methods are still being improved and supplemented. I believe that some pitfalls will be filled in future versions. This article is based on 1.5.3, if there are any omissions in the content, please advise.

Dry goods Dry goods

1. Value

1. setData
1.
setData (.js) (.wxml) 
setTimeout(function () {
   
  })
 }, duration)//duration:  (ms)
 
2. 
// page data data 
 this.data.testData = testData 
// 
 that.setData({
    testData: testData,
 })
 
3.
// this `Cannot read property 'data' of undefined` 
  var that = this
  this.setData({
     testData: that.data.testData2,
  })
// setData that.setData({}) 
{// 
  that.setData({
     testData: that.data.testData2,
  })
}
 
2. Small program code transfer parameters

Pass the page path path and the agreed parameter (test) into the request to generate the small program code to the backend, and it can be similar to the navigator jump method. onLoad: function (options) { var t = options.test }

3. The function does not support functions with default parameters. Parameters with parameters must be passed, and each of them must be passed. If it is a callback closure, no operation must be provided. For example...
 network.js 
// 
function getCommunityDetail(communityId, success, fail) {
  this.get(url.base + url.communityDetail + communityId,
    function (res) {
      success(res)
    },
    function (res) {
      fail(res)
    })
}

 (communityInfo.js)  
network.getCommunityDetail(options.communityId,
      function(success) {
     //Does something...
      },
      function(fail) {
    // 
      })
 
4. dataset

dataset: Used to transfer data in the component. Note: It sets the format requirements of the variable name and value variable name. (The document description is as follows)

    xxx.wxml 
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
    (xxx.js)
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1//`-`  
    event.currentTarget.dataset.alphabeta === 2// 
  }
})
 

2. Components

wx tip: Do not use textarea, map, canvas, video components in scroll-view. so, they are destined to be unstable. But here will not be expanded one by one.

1. scroll-view
  • Css nested assembly disposed above the scroll-view property in z-indexno effect on the real machine.

  • Andrews end bug: scroll-view nested slide laterally swiper-item does not respond, in which case css attributes may be provided in scroll-view overflow : auto;but this in turn led to a cosmetic problem, is its horizontal scrollbar run out, this Set again

// scroll-view 
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
 
2. canvas
  • Due to the non-hidden nature of canvas, there are some obstacles to directly generating images, but it is not impossible. Here is an idea. (Demand scenario: Click the button to generate a canvas drawn by the downloaded picture and text, and synthesize it into a picture, then preview the picture) Idea: Place the canvas outside the range of the screen, and destroy the canvas after the picture is generated and saved ( wx:if: Use this method to destroy). However, there are a few pitfalls that make you have to change such requirements: 1: Since the drawing method drawImage does not provide a callback function, you cannot know when the drawing is completed (this callback will be added in a future version), for the need to distinguish Picture-level drawing operations are particularly bad. (If picture B is on picture A, you need to draw picture A successfully) 2: Due to performance issues (preferably tested on a real Android machine), although the delay is adjusted for a long time to allow the drawing operation to execute, the drawing will fail for a long time A blank picture may be generated, resulting in a bad user experience. 3: Especially in the case of multi-image synthesis, the above problems are particularly prominent. Requirement changes: Change the click to directly generate a composite picture to jump to another page to display and generate. Of course you may want to ask, isn t it ok to let the background return to the synthesized picture directly? This is indeed the case, and this will be changed in a later version.

  • The drawImage needs to be or is . It should be noted that the URL of the downloaded image must be a path for security verification, and the https used by the image tag must be verified by WeChat signature. Self-signed is not acceptable. For example, the Qiniu cloud used in this project will appear. A bug like this: the image loading will become very slow or even unable to load, but the preview image will still be displayed.

  • By the way, the image cropping method clip will be added in a future version.

3. button
  • Button can not directly set the background image Solution: The buttonnested imagein and put buttonthe opacityset to 0, but pay special attention here: To buttonthe css property positionto absoluteset its absolute position, or can not respond to clicks.
4. textarea

The default input maximum input length of the textarea tag is 140. Can set its css propertiesmaxlength

5. swiper
  1. When setting the height, the height of each item must be assigned again to prevent the content display height from being inconsistent (the display is normal on the simulator, and the content display on the real machine is biased).
  2. Solution swiper-itemalternative content due to high degree of inconsistency caused no content item display section: Overload switching data item.

Three. util

1. Requrie does not support absolute paths, you must use relative paths to import

This bug is really maddening.

2. If you need to configure the page information of the specified page, you can directly configure the corresponding properties in the .json file, instead of writing the format for configuring all page information in app.json (see below)
 app.json `window` `pages` 
{
"pages": [
   //register pages
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "CommunityUnion",
    "navigationBarTextStyle": "black"
  }
}
 
 .json 
{
   "backgroundTextStyle": "light",
   "navigationBarBackgroundColor": "#fff",
   "navigationBarTitleText": " ", 
   "navigationBarTextStyle": "green"
}
 
3. Set the page background color
// page .wss 
page {
  background-color: "#f4f5f7";
}
 

.Json disposed corresponding to the page background-colorattributes are not modify the background color of the page, but the color of the page modified window, i.e. window color page appears when the pull-down.

Afterword

In the process of developing small programs, people feel that there is not much freedom in development, and the space left for developers is not large enough. The good news is that the WeChat small programs have been improving and improving. You will be very happy in the community (nan) (Shou) I found that most of the official WeChat replies received were: xx features are considered to be added in future versions...

(Received)