Preface: this period of time has been responsible for the company’s small program development, summed up some small program development experience, convenient for their own later access to also convenient colleagues less pit. At the bottom of the article skills class small program recognition small program TWO-DIMENSIONAL code function, small program gaussian blur, are their own pit. Welcome to exchange.

First, framework classes

1. Which should I choose, Template import or Component constructor import?

Template is recommended for demonstration purposes only. Component is recommended for more logic. Since template does not have its own JS file, separate operations on list items are involved in the list. It is recommended that list items be written as Component.

Example code: page file

<! --Wxml--> <! Import SRC ="goodlist.wxml"/> <! <template is="statement- goodList "data="{{goodList}}"/>Copy the code

2. Use of WXS files

Wxs is used more as a filter, and.wxs files can be referenced by other.wxs files or tags in WXML. . WXS modules reference other WXS file modules, you can use the require function.

Sample code page file – similar to filter effect

<! --wxml--> <! < WXS SRC =".. /.. /assets/wxs/phonenum.wxs" module="phone" /> <! <text class='statement- cellphone'>{{phone. Phone (addressinfo.phone)}}</text>Copy the code

3. Life cycle

 /** * life cycle function - listen for page hiding */
  onHide: function () {
    // Forward - to jump to another page
  },
  
/** * life cycle function - listen for page unload */
onUnload: function () {
  // Back - click to return to the current page
}
Copy the code

Using these two life cycles can solve the problem of preventing users from switching pages quickly (A->B). The asynchronous data on page A is not returned when the page is switched to page B. As A result, the data on page A is returned when the page is switched to page B, and the text displayed on the navigation bar is the title of the navigation bar. (I.e. the navigation bar title of page A is Hello, and the navigation bar title of page B is World. When A->B is used quickly, the navigation bar title of page B shows Hello, not World.)

Reference links: Lifecycle onHide and onUnload in applets

2. Communication

If data is a car, the channel or method of transmission is the road on which the car travels. So, data-driven frameworks, we need to learn how to build this “road” so that the “car” can travel at high speed.

1. The page communicates with components

1-1. The page passes content to the component

Page is the property name of the page

Components is the external property name of the component, received with the Properties object

page

<! -- Wxml --><components-a components="{{page}}"></components-a>
<! -- Js -->Page({data: {Page: 'father pages'}})Copy the code

component

Father pages

<! -- Wxml --><! -- Js -->Component({/** * Component properties */ properties: {components: {// attribute name type: String}}, /** * Component methods: {onTap: Function () {let page = this.data.com console.log(page) // I am father pages}}})Copy the code

1-2. Components pass content to the page

This. TriggerEvent (‘myevent’, myEventDetail) triggers the myevent event and passes the content. OnMyEventshi is used on the page to listen for incoming data.

page

<! -- Wxml --><components-a bind:myevent="onMyEvent"></components-a>
<! -- Js -->OnMyEvent: function (e) {console.log(' receive a message from a component :', e.mail) // 'I am a component'}})Copy the code

component

<! -- Wxml --><! -- In custom component "component-a" -->
<button bindtap="onTap">Click on the</button>
<! -- Js -->Component({ properties: {} methods: { onTap: Function (){var myEventDetail = 'I am a component' this.triggerEvent('myevent', myEventDetail)}}})Copy the code

2. Components communicate with components

Two unrelated components: passing data through a global variable or a local cache

Two associated components (under the same parent page) : pass data as component => page => component using the method above.

3. Communication between pages

3-1. Use the global variable app.globalData

3-2. Use local cache wx.setStoragesync

3-3. Url

// A page - pass data
// The url in wx.switchTab cannot pass parameters.
wx.navigateTo({
  url: '.. /pageD/pageD? name=raymond&gender=male'
})


// B page - receive data
// Through the option of onLoad<! -- JS --> ... Page({onLoad: function(option){
    console.log(option.name + 'is' + option.gender) // raymond is male
    this.setData({
      option: option
    })
  }
})
Copy the code

3-4. Data management of the page at the next level (data operation by obtaining page objects)

The essence of this method is to obtain the object prototype of other pages, and then modify the data managed by the current object through the prototype method setData.

The following is an example:

// pageE.js
Page({
  data: {
    index: 1}})Copy the code

After jumping to the next page F, suppose there is an operation in F that needs to modify the data in E, use the following method:

// pageF.js. Page({changeIndexInE: function(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: 0})}})Copy the code

This method can manipulate the data of the pages in the page stack, and can make the next level of the page face the data management of the superior page group.

Reference link: Fan – data transfer between pages

4. Communication between pages and templates

page

<! -- Wxml --><template is="msgItem" data="{{... item}}"/>
  
<! -- JS -->
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})
Copy the code

In addition to variables, event method objects can be passed into a template. Click events in a template, for example, can be passed to elements that use the template.

Third, skills

1. Index is a variable. Modify the value of the array

According to the documentation, the format ‘array[0].text’:’changed data’ is used. However, the index values that need to be changed in practical applications are often dynamic, so modify them as follows:

Sample code:

// Change the dynamic value of an array - the array object is prepared in advance
// index is a variable, value is a variable
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})
Copy the code

2. Other methods of encapsulation (if there is a better method, welcome to communicate)

  • Applets identify applets QR code function

  • Save images to albums (button-opeansetting)

  • Gaussian blur of small program

  • Solve small program mask layer scroll through

That’s all, that’s all I’ve learned so far about small program projects. Feel helpful to your development can like collection a wave, if I write wrong, I hope to point out. If you have better ideas or suggestions, feel free to share them with me. We progress together and grow together. Thanks [bow].

To communicate with

  • Personal Github warehouse, if you are interested, you can star.
  • If you have good ideas, please subscribe to wechat official number yhzg_gz(click copy and paste the official number in wechat). The pursuit of code quality and efficient programming is our common goal.

Ps: improve yourself, meet people with different goals.