微信小程序

1.注册下载开发工具

注册

在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。

下载

在https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 中找到适合自己点电脑的开发工具
建议

• 微信小程序自带开发者工具，集开发预览调试发布于一身的完整环境。
• 但是由于编码的体验不算好，因此建议使用vs code+微信小程序编辑工具来实现编码
  vs code负责敲代码，微信编辑工具负责预览

框架

小程序框架提供了自己的视图层描述语言wxml和 wxss，以及Javascript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

2配置

1.全局配置pages字段

用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
在app.json的pages下直接写入 “pages/dome1/dome1” 点击ctrl+s 保存即可添加新的页面文件。

如果默认显示添加这个文件，只需要把添加的信息写在最前面即可。

或者在编译处点击添加编译模式，添加当前路径并选择即可默认显示选择页面。

2.全局配置window字段

定义小程序所有页面的顶部背景颜色，文字颜色定义等。
详情进入
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window查看

    "backgroundTextStyle":"dark",  //下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#ccc",// 导航栏背景颜色
    "navigationBarTitleText": "my", //导航栏标题文字内容
    "navigationBarTextStyle":"black",// 导航栏标题颜色，仅支持 black / white
    "enablePullDownRefresh":true, //是否开启全局的下拉刷新。
	"backgroundColor": "#000" //下拉窗口的背景色

3.全局配置tabbar字段

进入https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar 查看
首先新建tab文件

再同级大括号中

  "tabBar": {
   "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [ 
      {
      "pagePath":"pages/index/index",
      "text": "首页",
      "iconPath": "icon/_shou.png",
      "selectedIconPath": "icon/shou.png"
    },
    {
      "pagePath":"pages/imgs/imgs",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    },
    {
      "pagePath":"pages/search/search",
      "text": "搜索",
      "iconPath": "icon/_search.png",
      "selectedIconPath": "icon/search.png"
    },
    {
      "pagePath":"pages/my/my",
      "text": "我的",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    }
  ]
  },

tabBar 指底部的 导航配置属性
color 未选择时 底部导航文字的颜色
selectedColor 选择时 底部导航文字的颜色
borderStyle 底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上 边框会出现默认的浅灰色线条）
list 导航配置数组
selectedIconPath 选中时 图标路径
iconPath 未选择时 图标路径
pagePath 页面访问地址
text 导航图标下方文字

4.页面配置文件

这里的 page.json其实用来表示页面目录下的 page.json这类和小程序页面相关的配置。开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。
页面的配置只能设置app.json 中部分window配置项的内容，页面中配置项会覆盖app.j5on 的window中相同的配置项。
详细可见https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
5.sitemap 配置
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象。
详细可见
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

3.模板语法

1.数据绑定

可以在文件下的js文件中的data下设置需要使用的变量

Page({
  data: {
      msg:"这是新的区域",
      num:10
  },
})

在页面中使用的时候，使用{{}}即可使用。

<text>{{msg}}</text>

在标签中使用数据

<view data-num="{{num}}">标签中使用变量</view>

2.运算

可以直接进行计算，也可以字符串拼接，也可以使用三元运算。
{{1+1}}
{{“1”+ 1}}
{{6%2 == 0?‘偶数’ : ‘奇数’}}

3.列表渲染

1.列表循环

• wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”
• wx:key绑定一个普通的字符串的时候那么这个字符串名称肯定是循环数组中的对象的唯一属性
• wx :key ="this"就表示你的数组是一个普通的数组this表示是循环项*this表示是循环项
• .默认情况下我们不写wx : for-item=“item” wx :for-index="index"小程序也会把循环项的名称和索引的名称 item和 index只有一层循环的话(wx :for-item=“item” wx :for-index=“index”)可以省略

Page({
    data: {
        list: [
            { name: '小明', age: 19, hobby: '敲代码' },
            { name: '小红', age: 20, hobby: '唱歌' },
            { name: '小王', age: 19, hobby: '翻墙' },
        ],
 })


<view>
    <view 
    wx:for ='{{list}}'
    wx:for-item = 'item'
    wx:for-index = 'index'
    wx:key="*this"
    >
   {{index+1}} {{item.name}}--{{item.age}}--{{item.hobby}}
    </view>
</view>
<!-- 简写 -->
<view>
    <view 
    wx:for ='{{list}}'
    wx:key="name"
    >
   {{index+1}} {{item.name}}--{{item.age}}--{{item.hobby}}
    </view>
</view>
  

2.对象循环

Page({
    data: {
        parson: {
            name: '小张',
            occupation: '司机',
            age: 38,
            say: '行车不规范，亲人两行泪！',
        },
    },
})

<!-- 对象循环-->
<view>
    <view wx:for = "{{parson}}" wx:key="index">
        属性名：{{index}}--值:{{item}}  
    </view>

block
1.占位符的标签
2.写代码的时候可以看到这标签存在
3.页面渲染小程序会把它移除掉

    <block wx:for = "{{parson}}" wx:key="index">
        属性名：{{index}}--值:{{item}}  
    </block>

4.条件渲染

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

隐藏标签：hidden

<view hidden>hidden</view>

1当标签不是频繁的切换显示优先使用wx:if
2当标签频繁的切换显示的时候优先使用hidden

4.事件绑定

1.input绑定事件

<view> 
  <input type="text" bindinput='inp'/>
</view>

//在js中

    inp(e) {
        console.log('事件绑定成功！')
    },

Input输入的时候就会打出’事件绑定成功！

2.input双向绑定

<view> 
  <input type="text" bindinput='inp'/>
  <text>
      {{num}}
  </text>
</view>

在js中

    data: {
        num: 0,
    },
    inp(e) {
        this.setData({
            num: e.detail.value,
        })
    },

3.点击事件

使用bindtap可以对标签进行点击事件的绑定。
使用bindtap不能直接传参，需要自定义传参。

    <button bindtap='btap' data-changenum='1'>+</button>
    <button bindtap='btap' data-changenum='-1'>-</button>
    <text>
        {{num}}
</text>

在js中

    btap(e) {
        var opar = e.currentTarget.dataset.changenum * 1
        this.setData({
            num: this.data.num + opar,
        })
    },

4常用事件

阻止冒泡catchtap
常用事件 ： tap touchstart touchmove touchend
longtap(长按 会触发tap)
longpress(长按 不会触发tap)
animationstart animationend

5.单位rpx以及less的使用

rpx (responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。

1.样式导入

1 引入的代码是通过@import 来引入
2路径只能写相对路径

2.小程序中使用less

1.在vscode中下载插件

2.配置
点击左下角的设置按钮，然后再点击settings按钮，

最后点击左上角的Open settings(JSON)按钮，拉到最底部添加如下代码：

"less.compile": {
"outExt": ".wxss"
}

然后吧wxss后缀改为less即可。

6.常见的组件

常见的有view,text,rich-text, button,image , navigator,icon, swiper ,radio, checkbox。等

1.text标签 相当于span，

1.1只能嵌套text,只有这个标签可以长按复制，可以对回车进行编码。
1.2长按文字复制selectable对文本内容进行解码decode

7.模板template

1.import

import可以在该文件中使用目标文件定义的template
在当前页面中

<view>
    <import src="logTemps.wxml" />
    <import/>
<template is='{{nowIndex}}' />
</view>

在同级创建logTemps.wxml页面

<template name='1'>
    <text class='page'>这是第一个页面，哈哈哈！！</text>
</template>

<template name='2'>
    <text class='page2'>这是第二个页面！！！</text>
</template>

<template name='3'>
    <text class='page3'>页面3--> 嚄噢哦嚄嚄嚄！</text>
</template>

2.include

include 可以将目标文件除了 外的整个代码引入

在当前页面中

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

在logTemps.wxml页面中

<text>
    我是includes.
 </text>

8生命周期

1.生命周期

2.全局数据设置与获取

2.1使用
可以在app.js里面设置 globalData

2.2获取
页面顶部引入：const app = getApp()
页面加载时:console.log(app.globalData.userid)

9.路由

跳转1

<navigator url="/pages/test/test">跳转A</navigator> //跳转

open-type属性取值:

navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能 1.1.0
navigateBack 对应 wx.navigateBack 的功能 1.1.0 exit 退出小程序，target="miniProgram"时生效 2.1.0

hover-class

跳转时传参，并展示选中状态
hover-class=‘hoverClass’

跳转2

按钮式跳转（bindtap）的方法名可自定义跳转以及传参

 wx.navigateTo({
      url: '/pages/test/test?id=100&user=xiaoming',
      success: function (e) {
        console.log(e.errMsg);
      }
   })

wx.redirectTo 与navigator(open-type=‘redirect’)相同, 操作与上相同
wx.navigateBack 此Api用于返回, 从当前页面返回到上级页面(根据如下参数)
wx.navigateBack({
delta: 1 // 值为1, 则是返回上一级, 值为2就返回上两级…
})
使用

    onLoad: function (options) {
        console.log(options)
    },

10.组件化使用

1.在小程序项目中添加一个components文件夹，里面存放自定义的组件.
2.然后在components目录下新建一个customComponent文件夹，文件夹可以命名为自定义组件名字相关，用来存放自定义的组件。在这个文件夹右键，选择新建组件，输入组件名，一个自定义组件由 json, wxml, wxss, js4个文件组成，此时将自动生成这四个文件。
3 在需要的页面的json中引入

{
    "component": true,
    "usingComponents": {
        "mydiv": "/components/orderItem/order-item"
    }
}

3.然后就可以在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。

<mydiv></mydiv>

插槽

在父页面中写数据

    <mydiv>
        你好
    </mydiv>

在子页面中显示

<slot><slot/>

组件传值

父传子

父组件中

<mydiv arr="{{arr}}"></mydiv>

在子组件的js中接受

    properties: {
        arr: {
            type: String,
        },
    },

用 this.data.arr获取到这个值了

子穿父

在子组件的js中

   giveFather() {
            this.triggerEvent('myevent', { sonParam: '你好' })
        },

父组件页面接受

    <mydiv bind:myevent='myevent'></mydiv>

父组件js中使用此方法获得属性

   myevent() {
        console.log(e.detail.sonParam)
    },

组件的生命周期