What is an applet?

"No need to download", "At your fingertips", "Just use and go", no need to download and install, no need to worry about installing too many applications; in other words, mini programs are all kinds of mobile apps that are parasitic in WeChat, they don't need to be downloaded , Does not take up more mobile phone memory, you can close it when it is used up, no need to delete.

Advantages of Mini Programs

Closed platform, easy to get started
Cross-platform operation
Easy to use

Mini Program Page

js: page logic
json: page configuration
wxml: page structure == HTML
wxss: page style == CSS

Mini Program Unit

Insert picture description here

concerned department
- pt logical resolution (visual unit, related to screen size)
- px physical resolution (pixels)
- ppi: pixels per inch
Mini program unit conversion relationship
- 1px=1rpx=0.5pt under iphone6 (rpx will be converted under different devices, but px will not);

Navigation bar configuration

inside app.json

	{
    
    
	  "window": {
    
    
	    "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色，
	    "navigationBarTextStyle": "black",//导航栏标题颜色
	    "navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
	    "backgroundColor": "#eeeeee", //tab 的背景色，仅支持十六进制颜色
	    "backgroundTextStyle": "light"//下拉 loading 的样式，仅支持 dark / light
	  }
	}

//页面添加导航栏   

	 "pages":[
	 //哪个放在第一位就默认先显示哪个
	    "pages/user/user",
	    "pages/index/index",
	    "pages/logs/logs"
	  ],

  "tabBar": {
    
    
  	{
    
    	//首页在第一位 排序会把首页放在第一位
        "pagePath": "pages/index/index",
        "text": "首页"
      }，
    "list": [
      {
    
    
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

Template application

wxml

<template name='a'>
    <view>
      12
      我的摸板
    </view>
</template>
<view>
  azzzaaaaa
</view>
在templates 里面创建一个a.wxml 在引入到 自己需要的文件中

<import src="../templates/a.wxml"></import>
<template is="a"></template>
<!-- 摸板之外的显示 -->
<include src="../templates/a.wxml"></include>

Create a new page

App.json
add a user to pages and you will find that there will be an extra user file in the left folder, including (user.js, user.wxml, user.wxss, user.json)

Network data request

	wx.request({
    
    
	  url: 'https://jsonplaceholder.typicode.com/todos/2', 
	  data: {
    
    
	    x: '',
	    y: ''
	  },
	  header: {
    
    
	    'content-type': 'application/json' // 默认值
	  },
	  success (res) {
    
    
	    console.log(res.data)
	  }
	})

Route jump

wx.switchTap: Jump to the tabBar page and close all other non-tabBar pages
wx.navigateTo: Keep the current page and jump to a page in the app. But you cannot jump to the tabbar page. Use wx.navigateBack to return to the original page. The page stack in the applet is up to ten levels.
wx.redirectTo: Close the current page and jump to a page in the app. But it is not allowed to jump to the tabbar page.
wx.reLaunch: Close all pages and open to a page in the app

Custom component

Create a custom component
Find the folder components and create a folder name, right-click and click Component, and then write a name at will, it will automatically generate json, wxss, wxml, js
Use custom components
to fill in the required files

需要显示的wxml文件夹 中的json文件

{
    
    
  "usingComponents": {
    
    
    "my-component": "/components/my-componnets/index" //
  }			|						|
}			|						|	
		名字 可随意起				   路径


需要显示wxml文件

<view>
  <my-component></my-component> 
</view>

Component parameter transfer

The basic communication methods between components are as follows.

WXML data binding: used to set data from the parent component to the specified property of the child component
Event: Used to pass data from the child component to the parent component, and can pass any data.
If the above two methods are not enough to meet the needs, the parent component can also obtain the child component instance object through the this.selectComponent method, so that it can directly access any data and methods of the component.

WXML data binding


显示的wxml
<view>
  <my-component myname='aaa'></my-component>
</view>


组件wxml文件

<text>my-componnets/index.wxml</text>
{
    
    {
    
    myname}}


组件js文件
/*
 * 组件的属性列表
  */
  properties: {
    
    
      myname: {
    
    
          type: "string",
          value: "默认值"
          observer: (newValue, oldValue）=> {
    
    
			console.log(newValue, oldValue)
		}
      }
  },

event

显示的wxml

<view>
    <my-component myname='aaa' bind:myevent = 'myevent'></my-component>
    //监听 myevent事件
</view>

显示wxml文件夹的js
Page({
    
    
  myevent(e) {
    
    
    console.log(e。detail) //参数
  },
}


组件wxml 

<button bindtap="changValue">点击</button>


子组件js

  methods: {
    
    
    changValue() {
    
    
      this.triggerEvent("myevent", "参数")
    }
  }

slot slot

Anonymous slot

<!-- 组件模板 -->

<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>


<!-- 引用组件的页面模板 -->
<view>

  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

Named slot

Component js
can contain slot nodes in the wxml of the component, which is used to carry the wxml structure provided by the component user.
By default, there can only be one slot in the wxml of a component. When you need to use multiple slots, you can declare to enable it in the component js.

 Component({
    
    
  options: {
    
    
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    
     /* ... */ },
  methods: {
    
     /* ... */ }
})

At this time, multiple slots can be used in the wxml of this component, distinguished by different names.

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <slot name="after"></slot>
</view>

When in use, use the slot attribute to insert nodes into different slots.

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view

Getting started to developing WeChat applet