On a community address developers.weixin.qq.com/community/h first…

1. CSS style issues

After the positioning of the button at the bottom of the page style is written, width is given 100%, but the scroll bar will appear blank under the button of more than 100% under different models. I gave 130% to the page. Their own problems, how to write the page can always use positioning, with the type of heart control. And it’s because I gave the background container instead of page, which is fine. Or adaptation problem, has not been solved, to obtain the phone model to judge.

2. Naming method

(1) The first letter of both words “SingleLady” is capitalized

The first letter of the first word is a lowercase method name, parameter name, member variable, local variable

Single_lady uses “_” to connect test method names, constants, enumeration names

(4) string name single-lady with “-” link file name

3. Rewrite the style of input

caret-color: #FFE413; Used to change the color of the input box cursor.

outline-style: none ; Unclick the outer border

border: 0px; Cancel the border

The font – size: 25 px; Set the font size inside

Padding to change the width and height

Input type=”text” placeholder=” default input”

/* The glow effect after clicking */

input:focus{ border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); Box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}Copy the code

4. Rewrite the original checkbox style in wechat small program

First rewrite the source class style (for your own use)

Wx-checkbox-input {width: 34rpx; height: 34rpx; border-radius: 50%; border: none; Wx-checkbox-input. wx-checkbox-input. wx-checkbox-input. checked {background: #FE2C55; Wx-checkbox-input. wx-checkbox-input. wx-checkbox-input. checked::before {width: 28rpx; height: 28rpx; line-height: 28rpx; text-align: center; font-size: 22rpx; color: #fff; background: transparent; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); }Copy the code

5. Set the word spacing

letter-spacing:5rpx; Space between words

6. Background-image Does not display the background image.

It is not valid for applet to import background-image directly into local background image in CSS style file

There are three ways to solve this problem:

1. Change path to absolute path that can be accessed directly (never tried)

background-image: url("http://pic20.photophoto.cn/20110902/0034034471873095_b.jpg");
Copy the code

2. Directly replace the style background image with the image tag

3. Write styles directly on the label. I think this is the best one!

<view class="header" style="background-image: url('/static/image/bg.jpg')"></view>
Copy the code

7. Wechat applet binding event

You can bind events in two ways, bind and catch to prevent events from bubbling.

1. Screen events

Tap is the click event

Longtap is a long press event

Touchstart is the touchstart event

Touchend Ends the touch event

The input event

BindInput binds the input event, listens for the onchange event on the keyboard, writes one to return a value

Bindblur Value after losing focus

8. Checkbox Check value

<radio-group class="radio" bindchange="choose" > <label for="checkbox" Value ="1"></ label> </radio-group> choose(e){this.setData({choose: e.daile.value) // save his value})},Copy the code

9. Mobile phone check and ID card number check

Verification of ID card number

</input> </input>Copy the code
idVer(e) { const idValue = e.detail.value this.setData({ idCard: idValue }) const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ if (reg.test(this.data.idCard) === false) { Wx.showtoast ({title: 'id number error', icon: 'error'})} else {}},Copy the code

Mobile phone number verification

<input placeholder=" bindblur="phoneNum" maxLength ="11" type="number">Copy the code
PhoneNum (e) {enclosing setData ({phoneNumber, e.d etail. Value}) const reg = / ^ 1 [3 4 5 7 | | | | 8] [0-9] {9} $/ / / / ^ 1 [0-9] {10} $/ check 1 beginning If (reg.test(this.data.phonenumber) === false) {wx.showtoast ({title: 'phoneNumber error', icon: 'error'})} else {}},Copy the code

10. Switch between multiple levels of button selection

They are independent of each other.

www.yangbike.com/archives/16…

page

<view class="talent-content-box1"> <text class="talent-tai"> </text> <view class="content-list"> <view wx:for="{{platform}}" wx:key="index" class="btn-box"> <text class="{{item.checked ==1? 'hover-yellow' : 'text-button'}}" data-index="{{index}}" bindtap="platBut" wx:key="{{index}}">{{item.name}}</text> </view> </view> </view> <view class="talent-content-box2"> <text class="talent-ye"> </text> <view class="content-list-two"> <view wx:for="{{industry}}" wx:key="index"> <text class="{{item.checked ==1? 'hover-yellow' : 'text-button'}}" data-index="{{index}}" bindtap="changeBut" wx:key="{{index}}">{{item.name}}</text> </view> </view> </view>Copy the code

style

/* 下 载 */. Talent-content-box1 {margin-top: 85rpx; margin-left: 4rpx; } .content-list { width: 100%; margin-top: 34rpx; display: flex; flex-wrap: wrap; } .talent-tai { font-size: 30rpx; color: #E7E8E9; } .btn-box { margin-right: 20rpx; } .text-button { display: inline-block; height: 55rpx; margin-left: 9rpx; Opacity: 0.24; background: #FFFFFF; color: #76777D; line-height: 55rpx; border-radius: 7rpx; padding: 0 28rpx; margin-bottom: 29rpx; margin-right: 25rpx; } /* 专 业 */. Talent-content-box2 {margin-top: 90rpx; margin-left: 4rpx; } .talent-ye { font-size: 30rpx; color: #E7E8E9; } .content-list-two { width: 100%; margin-top: 34rpx; display: flex; flex-wrap: wrap; }Copy the code

logic

data: { platform: '', industry: '}, / / industry information platBut (options) {/ / console log (options. The currentTarget. Dataset. The index, 999) let that = this; / var/button index index = options. The currentTarget. Dataset. The index; Var item = that.data.platform[index]; // Check item.checked =! item.checked; // Update that.setData({platform: that.data.platform}); }, // Get platform info hover-yellow text-button changeBut(options) {let that = this; / var/button index index = options. The currentTarget. Dataset. The index; Var item = that.data.industry[index]; var item = that.data.industry[index]; // Check item.checked =! item.checked; SetData ({industry: that.data.industry}); },Copy the code

Requested data back

11. Switch between radio buttons

The principle is to give the button a data-current value, in JS to determine whether its value is the same, to switch styles

Switch button

h5

<view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? }}" data-current="0" bindtap="swichNav" </view> <view class="swiper-tab-list {{currentTab==1? 'on' : ' '}} "data - the current =" 1 "bindtap =" swichNav "audit results < / view > > < / view >Copy the code

css

.swiper-tab {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 80rpx;
  background: #fff;
  margin-bottom: 12rpx;
}

.swiper-tab-list {
  font-size: 28rpx;
  color: #333;
  position: relative;
  width: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.on {
  color: #47c390;
}
Copy the code

js

/** * swichNav: function(e) {console.log(e.target.dataset. Current) var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } },Copy the code

12. Determine an empty object

JSON.stringify(data)==="{}"
Copy the code

To see if it’s equal to an empty object.

—- can also be traversed to judge.

13. Wechat conditional rendering

Wx :if=”{{conditional statement}}”

Wx :else=”” Remove the remaining conditions above, such as male and female

14. Multiple if else nesting

15. && and | |

The essence of js && and | |

Performs and sum or operations on Boolean values.

In javascript:

The following will be treated as false: “”, false, 0, null, undefined, NaN, all the others are true. Note: the string “false” is also treated as true, in the uncast case it is a string and belongs to an object, so it is true.

So:

A | | b: if a is true, then the b, whether true or false, returns true. So instead of saying b, I’m just saying A, so I’m going to return A.

If a is false, then b, if b is true, returns true, if b is false, returns false, which is essentially returning B.

A &&b: if a is false, then b will return false whether it is true or false, so we don’t need to check b.

If a is true, then b is evaluated, just like before, whether b is true or false, return B.

16. Child pages wear parent page values

This of the child page points to the parent page. Store values directly in the parent page’s data.

www.cnblogs.com/ldlx-mars/p…

17. Page splicing data

Address? “Name =” + variable

Options in the onLoad subpage comes that data

18. Image adaptive model

Mode: widthFix; Can only be used in small programs.

19. Wechat changed the default input style

Blog.csdn.net/littlelittl…

Blog.csdn.net/qq_37026273…

20. Modify radio and CheckBox styles

Developers.weixin.qq.com/community/d…

checkbox

checkbox .wx-checkbox-input{ border-radius:50%; width:20px; height:20px; } checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border-color:#F0302F ! important; background:#F0302F ! important; } checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:15px; color:#fff; background:transparent; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); }Copy the code

radio

radio .wx-radio-input{ border-radius:50%; width:20px; height:20px; } radio .wx-radio-input.wx-radio-input-checked{ border-color:#F0302F ! important; background:#F0302F ! important; } radio .wx-radio-input.wx-radio-input-checked::before{ border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:15px; color:#fff; background:transparent; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); }Copy the code