Base point
1 > applet body

app . js
app . json: public configuration class, which can configure global messages
app . wxss: common style sheets

2 > single page body

js: page logic
wxml: similar to HTML, page DOM
json: page configuration file
wxss: page style sheets

3 > app . JSON overview

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html# Global configuration
This file is used to configure the global configuration of the applet. See the API documentation for details, mainly including all page paths of the applet, the settings of the bottom Tab, and network connections,
Development mode, etc

Component list

https://developers.weixin.qq.com/miniprogram/dev/component/ Common include
Cemera, map, canvas and other open data: open information, including user nickname, avatar, gender, city, etc

API list
boolean wx.canIUse(string schema): determines whether the current API is available
keyword
wx : for

Bind an array, under which {{index}} is the subscript variable name of the current item. The default of the current item is item, custom subscript name and object name < view
wx: for = "{array}}" wx: for index = "idx" wx: for item = "itemName" > you can use wx:
Nested Wx in for: for

wx : if

Conditional rendering: to judge whether to render this code block, you can use Wx: elif and Wx: else to judge if else

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

block

Block is used to include. After judgment, it will work on all in the block

 <block wx:if="{{'show'==show}}">
        <view class="title">
          <view class="title-img">
            <image class="" src='/images/card-scan.png'></image>
          </view>
</block>
<block wx:elif="{{'scan'==show}}">
        <view class="scan_code">
        </view>
</block>
<block wx:else>

</block>

Define template

Use the template tag to define the template. The scope of the template is the data defined in data and the template defined in the template definition file

<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

//Template usage: 
<template is="msgItem" data="{{...item}}" />
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

event

Common events touchstart / touchmove / touchcancel / touchend
tap (leave immediately after touching) / longpress (leave after more than 350ms)
Transitionend / animation iteration / animation touchforcechange

You can bind events to components (for example, bindtap)

Click me!
The wxs function responds to events. The wxs function contains two parameters, event and ownerInstance

<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}">Click me!</view>
function tapName(event, ownerInstance) {
  console.log('tap wechat', JSON.stringify(event))
}
module.exports = {
  tapName: tapName

bind event binding does not prevent bubbling events from bubbling up
catch event binding can prevent bubbling events from bubbling upward

Common usage
1 > data binding
{{ message }}
Page({
data: {
message: 'Hello MINA!'
}
})

2 > component properties

<view id="item-{{id}}"></view>
Page({
  data: {
    id: 0
  }
})

3 > control attributes, i.e. if using

<view wx:if="{{condition}}"></view>
Page({
  data: {
    condition: true
  }
})

Simple operation in 4 > {}}

<view hidden="{{flag ? true : false}}">Hidden</view>
<view>{{a + b}} + {{c}} + d</view>
<view wx:if="{{length > 5}}"></view>
<view>{{"hello" + name}}</view>
<view>{{object.key}} {{array[0]}}</view>

5 > top navigation bar name

wx.setNavigationBarTitle({
  title: 'There's a business card'
})

6 > top navigation bar style

wx.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#35477D',
  animation: {
    duration: 400,
    timingFunc: 'easeIn'
  }
})

7 > call function to prevent bubbling
– > catchtap='showscanfun'

8 > sweep

wx.scanCode({
      success(res) {
        console.log(res)
      }
    });

9 > forward

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html

10 > wechat applet to generate QR code

– > reference https://github.com/black-ant/weapp-qrcode

11 > query data

  findUserBase: function () {
    const db = wx.cloud.database();
    // After entering the query, the objects pointed to by this are different
    let that = this;
    db.collection('database').where({
    }).get({
      success(res) {
        // Output [{"title": "The Catcher in the Rye",...}]
        console.log("Query data :test");
        console.log(res);
        that.data.userarray = res.data;
        //Distinguish between setDate and this data .  Userarray, which refreshes the view
        that.setData({
          userarray: that.data.userarray,
        });
      }
    });
  }

Customize navigation bar

– > https://blog.csdn.net/weixin_38323736/article/details/78723853

//page
  <view class="buttom">
    <import src="/pages/template/template.wxml" />
    <template is="tabBar" data="{{tabBar:bindData.tabBar}}" />
  </view>


//Page js
//test.js
//Get application instance
var app = getApp()
var template = require('../template/template.js');

Page({
  data: {
  },
  onLoad: function() {
    console.log('onLoad test');
    template.tabbar("tabBar", 0, this) //0 indicates the first tabbar
  }
});


//Template.js
//Initialization data
function tabbarinit() {
  return [{
      "current": 0,
      "pagePath": "/pages/card/card",
      "icon": "/imgs/home.png",
      "tabtype": "left",
      "icon": "icon-demo17  ",
      "text": "homepage"
    },
    {
      "current": 0,
      "pagePath": "/pages/cardlist/cardlist",
      "tabtype": "center",
      "icon": "icon-mingpianjia",
      "text": "Business card holder"

    },
    {
      "current": 0,
      "pagePath": "/pages/msg/msg",
      "tabtype": "right",
      "icon": "icon-xiaoxi",
      "text": "news"
    }
  ]

}
//tabbar main entrance
function tabbarmain(bindName = "tabdata", id, target) {
  var that = target;
  var bindData = {};
  var otabbar = tabbarinit();
  otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath'] //Change current icon
  otabbar[id]['current'] = 1;
  bindData[bindName] = otabbar
  that.setData({
    bindData
  });
}

module.exports = {
  tabbar: tabbarmain
}


<template name="tabBar">
  <view class="tabBar">
    <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
      <view  class="tabBar-item {{item.tabtype}}">
        <navigator open-type="redirect" url="{{item.pagePath}}">
          <view class="icon-view">
            <text class="iconfont {{item.icon}}"></text>
          </view>
          <view class="tab-text {{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
        </navigator>
      </view>
    </block>
  </view>
</template>