" backgroundTextStyle ": "light", background text : light | dark
" navigationBarBackgroundColor ": "#000", navigation bar background color
" navigationBarTitleText ": "BLACK", navigation bar title
" navigationBarTextStyle ": "white" navigation bar text color : white | black

Configuration of tabBar bottom bar

  "tabBar": {
    "color": "#484848",
    "selectedColor": "#109fef",
    "list": [{
      "pagePath": "pages/base/base",
      "text": "语法",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-h.png"
    }]
  },

color text default color
selectedColor text selected color
list page list:

        pagePath page address
        text text iconPath
        icon address
        selectedIconPath selected icon address

2. Page.json

" usingComponents ": {} using components

" navigationBarTitleText ": "Basic Grammar" title

" enablePullDownRefresh ": true allows pull-down refresh

" backgroundColor ": "#eee" background color

" backgroundTextStyle ": "dark" background text color

5. Mini Program Built-in Components

<view> logical visual division (div)

<text> text (span)

user-select="true" long press by user to select

<image> image component

src image address
mode mode:

scaleToFill : do not maintain the aspect ratio, zoom
aspectFit : Keep aspect ratio, long side first
aspectFill : Keep aspect ratio, short side first
widthFix : Width unchanged, height automatic
heightFix : the height remains unchanged, and the width is automatic
left right top bottom center : display part

<input>

value value

placeholder hint text

password="true" password box

type pops up different keyboards:

text text input keyboard
numberNumber input keyboard
idcard ID card input keyboard
digit Numeric keyboard with decimal point
safe-password password safe input keyboard guide
nickname nickname input keyboard

The case of the lower right corner of the confirm-type keyboard

The button in the lower right corner of send is "Send"
The button in the lower right corner of search is "Search"
The button in the lower right corner of next is "Next"
The button in the lower right corner of go is "Go"
done The button in the lower right corner is "Complete"

<button> button

typecolor type

primary green
defaultwhite _
warn red

size="mini" small button in the row

<switch> switch

colorcolor _

type="checkbox" selection box

<picker> select

header-text header text

mode：

times event
date date
regionProvincial area

<icon> icon

type：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size ="100" unit is px

<scroll-view> scrolling area

scroll-x horizontal

scroll- yvertical

<swiper> <swiper-item> Slideshow

indicator-dots = "true" whether to display prompt points

autoplay = "true" automatically play

circular = "true" link sliding

6. Template syntax

conditional rendering

wx:if ="{ {condition}}"

Multiple Conditional Rendering

wx:elif ="{ {multiple conditions}}"
wx:else

text rendering

{ {}}

placeholder=" { { msg }} " attribute rendering

list rendering

<view wx:for="{
   
   {list}}" wx:key="index">{
   
   {index}}.{
   
   {item}}</view>

custom list rendering

Multiple layers of for loop definition name

<view wx:for="{
   
   {list}}" 
        wx:for-item="myitem" wx:for-index="myindex" 
        wx:key="myindex"
>
{
   
   {myindex}}.{
   
   {myitem}}
</view>

Note: The key value is automatically destructured. eg: If you want to use item.docid as the key, just wx:key="docid"

<template> template

definition:

<template name="user">
<view>用户名：{
   
   {name}}</view>
</template>

Import: only template can be imported

<import src="..."></import>

use:

<template is="user" data="{
   
   {name:'mewow'}}"></template>

<include> Import

<include src="..."></include>

It is equivalent to copying the content of src to the current location, and cannot import template

7. Events

event method

bindTap click

bindconfimconfirm _

bindchange form value changes

bindinput form input

common event

Call method:

<button bindTap="showMsg">事件</button>

Custom method:

showMsg(){}

event parameter

Define parameters:

<button bindtap="showMsg" data-msg="小程序">小程序</button>

Get the parameters in the method:

showMsg(e){
  let msg=e.currentTarget.dataset.msg;
  wx.showToast({
    title: 'hello '+msg,
    icon:"loading"
  })
}

8. Form two-way binding

form:

<input type="text" value="{
   
   {msg}}" bindinput="changeHd"/>

Define methods to update views and data:

changeHd(e){
  let msg=e.detail.value;
  this.setData({msg})
}

Nine, data and update

data data in the js method: this.data.msg

In wxml use: { {msg}}

Update data and view: this.setData({key1:value1,key2:value2})

Note: this points to, the wx object of this in wx.xxx api is not the current page

10. WeChat API

Page parameters

data store data

onload() when the page is loading

onPullDownRefresh pull down refresh callback function

onReachBottom bottoming callback function

wx.xxx

wx.stopPullDownRefresh(); stop pull down refresh

wx.showToast({}) light prompt

wx.request({url,method,success(){}}) network request:

The default request address needs to be configured in the backend
The default request address requires https

Summary of super detailed knowledge points of WeChat applet

1. Features of WeChat Mini Programs

2. Preparation for use

1. Register a developer account

2. Download the WeChat developer tools

3. WeChat development documents

3. Project structure

4. Configuration file

1、app.json

pages Store the pages of the project

window The window of the project