preface

As a diligent and naive future iOS developer, I was forced to raise my hand to work on a small application project in my team due to my curiosity about new things.

First, a disclaimer:

  • I have a slight understanding of the front end, micro channel small program development is not in-depth understanding, here only as a small program project experience summary to share with you.
  • Wechat mini program is in development, the embedded method is still in continuous improvement and supplement, I believe that some holes will be filled in the future version. This paper is based onThe base library version is 1.5.3, if there are omissions in the content, welcome your advice.

【 Dry goods 】

A value.

1. setData
1.
setData: is the rendering of Data from the logical layer (.js) to the view layer (.wxml). It is an asynchronous operation, so deferred execution may be used to ensure successful assignment:setTimeout(function() {})}, duration) // duration: msCopy the code
2. // In this scope, the assignment succeeds and the page data is not updated. But it doesn't seem necessary to do this without refreshing the page data, because data sources that aren't needed by the view layer don't need to be written to the data, and it might pollute the value. this.data.testData =testData // This is where the assignment is really needed, and the page is rendered after the value is refreshed. that.setData({testData: testData,
 })
Copy the code
3. // To use this in a closure, you must first reference it and declare it outside the scope of the assignment; otherwise, Cannot is declaredread property 'data'Of undefined 'error. var that = this this.setData({testData: that.data.testdata2,}setThe Data operation is still inside a closure, so similarly write that.setData({}). SetData ({setData()) {setData();testData: that.data.testData2,
  })
}
Copy the code
2. Small program code parameter transmission

Page path and convention parameter (test) are passed in the request for generating applets at the back end, which is similar to the navigator jump method. onLoad: function (options) { var t = options.test }

3. Functions with default arguments are not supported. Functions that have arguments must be passed, and each of them must be passed, and null operations must be provided if the closure is a callback. To take one…
(network.js) declaration // to get club detailsfunction getCommunityDetail(communityId, success, fail) {
  this.get(url.base + url.communityDetail + communityId,
    function (res) {
      success(res)
    },
    function(res) {fail (res)})} (communityInfo. Js) used in the local network. The getCommunityDetail (options.com munityId,function(success) {
      // Does something...
      },
      function(fail) {// Although failure handling may not be required here, it is still necessary to provide such a null operation})Copy the code
4. dataset

Dataset: used to dataset in the component Note: its setting variable name and value variable name format requirements. (Documentation below)

(xxx.wxml) <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
    (xxx.js)
Page({
  bindViewTap:function(event) {event. The currentTarget. Dataset. AlphaBeta = = = 1 / / ` - ` turn hump writing event. The currentTarget. The dataset, alphaBeta = = = 2 / / Uppercase will be converted to lowercase}})Copy the code

2. Components

Wx tip: Do not use textarea, map, Canvas, and video components in scroll view. So, they are destined to be unstable. But I’m not going to do that here.

1. scroll-view

  • The above components nested in the CSS property z-index in the Scroll view will not work on the real machine.

  • Bug on Android: Scroll view nested in swiper-item does not respond to horizontal scrolling, so you can set overflow: Auto for the CSS property of scroll View; But this leads to an aesthetic problem, which is that the horizontal scroll bar pops up

// This will cause the entire scroll bar inside the Scroll view to be hidden. ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }Copy the code
2. canvas

  • Since canvas cannot be ‘hidden’, it is a little difficult to directly generate pictures, but it is not impossible. Here is an idea. (Requirement scenario: click the button to generate a canvas composed of downloaded pictures and words and paintings, and synthesize it into a picture, then preview the picture) Idea: Place the Canvas outside the scope of the screen, generate and save the picture, and destroy the canvas (Wx :if: destroy the canvas in this method). However, there are several pits where you have to change this requirement: 1: Since the drawing method drawImage does not provide a callback function, you cannot tell when the drawing is complete (the callback will be added in a future version), which is especially bad for drawing operations that need to distinguish between image levels. (If picture B is on picture A, it is necessary to successfully draw picture A first.) 2: Due to performance problems (it is best to test on android real phone), although the delay is adjusted for A long time so that the drawing operation is executed, drawing failure may occur for A long time and A blank picture may be generated, resulting in poor user experience. 3: Especially in the case of multi-graph synthesis, the above problems are particularly prominent. Requirements changed: Click generate composite image directly instead of jumping to another page to show and generate. Of course, you might want to ask, let the background directly return to the composite image is ok? This is true, and will be changed in a later version.

  • DrawImage must be the project resource image or the file path saved after the image is downloaded. It should be noted here that the downloaded image URL must be the path of security verification, and the HTTPS used by image label must be verified by wechat signature, not self-signature. For example, qiniuyun used in this project has such a bug: Images load very slowly or fail to load, but preview images are still displayed.

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

3. button
  • Button can not directly set the background imagebuttonNested withinimageAnd thebutton 的 opacitySet it to 0, but be careful herebuttonThe CSS propertiespositionSet toabsolute, set its absolute position, otherwise it cannot respond to the click.
4. textarea

The default maximum input length for the Textarea tag is 140. You can set its CSS property maxLength

5. swiper
  1. When setting the height, the height of each item shall be assigned once to prevent inconsistent height display of content (normal display on the simulator, deviation of content display on the real machine).
  2. To solveswiper-itemOptional solution for some items with no content due to highly inconsistent content: Overload data when switching items.

Three util.

1. Requrie does not support absolute paths

This bug is really annoying.

2. If you need to configure the page information of the specified page, you can directly configure the corresponding attributes in the. Json file, instead of writing the format of configuring all page information in the app.json file (as follows).
(app.json) : not only has the 'window' attribute for configuring page information, but also includes the 'Pages' attribute for registering the page. {"pages": [
    // register pages
  ],
  "window": {
    "backgroundTextStyle": "light"."navigationBarBackgroundColor": "#fff"."navigationBarTitleText": "CommunityUnion"."navigationBarTextStyle": "black"}}Copy the code
(page.json) {"backgroundTextStyle": "light"."navigationBarBackgroundColor": "#fff"."navigationBarTitleText": "Page"."navigationBarTextStyle": "green"
}
Copy the code
3. Set the page background color
// set page {background-color:"#f4f5f7";
}
Copy the code

Setting background-color in the corresponding page’s. Json property does not change the page’s background color, but changes the page’s window color, that is, the window color that appears when the page is pulled down.

The latter

Development in the process of the small program is the sense that gives a person to develop without too much freedom, space is not large enough for developers, the good news is that WeChat small program has been in progress and perfect, in the community (nan) you will be very hin xi (shou) to find that most WeChat received official answer is: xx features to consider in future versions to join…

(closed)