Wechat Small Program - A Preliminary summary (1)

Wechat Small Program — A Preliminary summary (1)

In the New Year, a new company, a new project and a new starting point. I joined the new company on December 10, 2020.At the same time, I received the task of handing over the company’s internal small program project. Thought I’d give it a try and learn a new skill. In line with not very positive attitude, I step by step contact learning to grope. It’s a bit of a mess. Excuse me.

Applets component directory

A page is composed of four files, JS, WXML, WXSS and JSON.

index.js
index.json
index.wxml
index.wxss
Copy the code

Compared to vue2. X, this is like unpacking and adding a JSON file, HMM! That’s it. . On the Js side, I feel that the biggest areas are the assignment of attributes in data, the introduction of life cycles, and components. SetData is used to assign values to properties in data. When assigning values directly to properties in this.data, the view is not updated, but it is printed with changes. The life cycle that we use most often is onLoad, unLoad, onShow. OnShow solved one of my problems, which was navigateto jump to the next page, and then I didn’t know how to trigger the refresh when I saw onShow later.

This JSON, which is really useful, introduces custom components in usingComponents, UI components, etc. And in there you can set the header of the applet page to be custom, which is this thing “navigationStyle”: “custom”. There is also preventing page sliding, which I really do not understand, I feel that in addition to the layer of view, there is also a layer inside the page, which solves the problem that I cannot slide the view on the iPhone (strange), and I add this to the problem that I cannot slide the view later.

{
  "usingComponents": {
    "i-index": ".. /.. /.. /utils/iview/dist/index/index"."i-index-item": ".. /.. /.. /utils/iview/dist/index-item/index"."van-dropdown-menu": "@vant/weapp/dropdown-menu/index"."van-dropdown-item": "@vant/weapp/dropdown-item/index"."van-index-bar": "@vant/weapp/index-bar/index"."van-index-anchor": "@vant/weapp/index-anchor/index"."van-cell": "@vant/weapp/cell/index"."van-cell-group": "@vant/weapp/cell-group/index"."van-popup": "@vant/weapp/popup/index"."van-search": "@vant/weapp/search/index"."van-icon": "@vant/weapp/icon/index"."mp-loading": "/miniprogram_npm/weui-miniprogram/loading/loading"."mp-navigation-bar": "/miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
  },
  "navigationStyle": "custom"."disableScroll":true
}
Copy the code

I have nothing to say about this WXSS, the project I took over on the way is native, not using less and SCSS, but just writing style for the time being, Flex, flex along the way, how happy I am.

Applet assignment method:

data: {
	filterValue: null.filterArr: [a, b],
	filterObj: {
    a: ' '
  },
	filter: [{a: ' '}}]// Assign to filterValue
function setValue(value) {
  this.setData({
    filterValue: value
  })
}
// Assign the index of filterArr to 0
function setValue(value) {
  const filterArr = `filterArr[${index}] `
  this.setData({
    [filterArr]: value
  })
}
// Assign the a attribute to filterObj
function setValue(value) {
  const filterObj = `filterArr.a`
  const filterObj = `filterArr.${a}`
  this.setData({
    [filterObj]: value
  })
}
// Assign the attribute a to filter subscript 0
function setValue(value) {
  const filter = `filter[${index}].a`
  const filter = `filter[${index}].${a}`
  this.setData({
    [filterObj]: value
  })
}
// If the array is changed in a method, it must be reassigned, for example:
function setValue() {
	this.data.filter.forEach(item= > {
		item.c = ' '
  })
  this.setData({
		filter: this.data.filter
  })
}

Copy the code

So basically you construct the path, you wrap it in brackets, and then you assign it to setData. Properties of reference types also need to be assigned by setData after the this.data assignment or operation, otherwise the view cannot be updated.

Applets tag

Unlike vue2. X, WXML in a component of an applet can only be contained with one tag, so it is possible to build a page structure with multiple tags. Like this

index.wxml

<navigation-bar></navigation-bar>// The header of the applet: home, return button, title, capsule in the upper right corner, etc<view class="header"></view>
<view class="content"></view>
<view class="bottom"></view>
Copy the code

As far as the current level of understanding comes, it is just a new contact, and I haven’t had a good understanding of the official documents, so what I said is just my personal understanding. I hope the bosses can point out my mistakes and let me correct them. As far as I can see, the tags of applets are not very different from those on the Web. In my understanding, the div tag is replaced by the View tag, the image IMG tag is mostly replaced by the image tag, and the SPAN may be replaced by the text tag. There are still a lot of contact, and then slowly understand in the summary.

div ---> view
img ---> image
span --> text
Copy the code

Applet syntax

With a VUE base, start to see the small program code is not so difficult to accept, most look at the basic syntax can be compared with VUE, to understand and use. Similar:

A list rendering is the most efficient way to learn basic syntax.

Wx :for wx:if wx:elif wx:else Dynamically bind CLSS, dynamically set the inline style

/ / data structures: filter: [{list: [{} a: "', selected: false]}]<view wx:for={{filter}} wx:for-index="index" wx:key="index" wx:for-item="item">
	<block wx:if={{item.list.length}}>
  	<view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" 2x:item="list">
    	<view calss="content {{list.selected ? 'selected' : ''}}" 
            style="padding: {{list.selected ? 10 : 0}}px"
            >{{list.a || ''}} - {{list.selected ? 'wahaha ':' hahaha '}}</view>
    </view>
  </block>
  <block wx:elif></block>
  <block wx:else></block>
</view>
Copy the code

Applets template

Applets reference templates, for example 🌰, which are hard to describe. The data needs to be passed in the data, but the binding method does not need to be directly bound. I didn’t use the template reference, so I won’t say. It’s kind of like a reference method.

<template is="{{ drink ? 'milk' : 'wator' }}" data="{{ drinkMilk,drinkWater }}" />
<template name="milk">
  <view class="ADgainai" data-cups="{{xxx}}" bind:tap="drink">
    {{ drinkMilk }}
  </view>
</template>
<template name="wator">
  <view class="nongfushanquan" data-cups="{{xxx}}" bind:tap="drink">
		{{ drinkWater }}
  </view>
</template>
Copy the code

Event bindings, data-xxx, event bubblings, event capture, store, parent/child component values, page-to-page values, navigate, sweep, safe-area-bottom, etc. Release and automate tests, and so on.

Eat the steamed stuffed bun one by one, drink the soy milk one by one, cheers My life.

Wechat Small Program — A Preliminary summary (1)