1.小程序简介微信小程序简介文档相关开发文档：https://developers.weixin.qq.com/mi

微信小程序简介

文档相关

开发文档：developers.weixin.qq.com/miniprogram…
微信公众平台：mp.weixin.qq.com/

开发者工具

下载地址：developers.weixin.qq.com/miniprogram…

使用

必选项处理

appID获取

微信公众平台进行appID获取

小程序代码构成

参考地址：developers.weixin.qq.com/miniprogram…

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

小程序基本结构

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

小程序基本操作

配置信息

*   全局配置 -> <https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html>

    ```json
    {
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/index",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true
    }
    ```

*   页面配置

    ```json
    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }
    ```

全局生命周期函数

```js
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
```

页面生命周期函数

developers.weixin.qq.com/miniprogram…

```js
 onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  }
```

组件生命周期

developers.weixin.qq.com/miniprogram…

这里注意一点就是组件的生命周期外边包一个lifetimes东东

```js
Component({
  lifetimes:{
    created() {
      console.log('created,组件实例刚刚被创建好时， created 生命周期被触发')
    },
    attached() {
      console.log('组件实力进入页面节点树时候进行执行');
    },
    detached() {
      console.log('在组件实例被从页面节点树移除时执行');
    }
  }
})
```

界面跳转

新界面打开=>developers.weixin.qq.com/miniprogram…

    ```js
    调用 API wx.navigateTo
    使用组件 <navigator open-type="navigateTo"/>
    ```

页面重定向

    ```js
    调用 API wx.redirectTo
    使用组件 <navigator open-type="redirectTo"/>
    ```

页面返回

        调用 API wx.navigateBack
        使用组件<navigator open-type="navigateBack">
        用户按左上角返回按钮

Tab切换

    ```javascript
    调用 API wx.switchTab
    使用组件 <navigator open-type="switchTab"/>
    用户切换 Tab
    ```

重启动

    ```js
    调用 API wx.reLaunch
    使用组件 <navigator open-type="reLaunch"/>
    ```

数据绑定

数据绑定其实还是大胡子语法

```html
<view>{{message}}</view>
```

```js
Page({
  data:{
    message:"hello world"
  }
})
```

条件渲染

和正常vue语法相比，多了一个wx:前缀 html <view wx:if="{{isShow}}">条件判断显示</view>

    Page({
    	data:{
    		isShow:false
    	}
    })

列表渲染

和正常vue语法相比，多了一个wx:前缀，另外for-index,for-item的写法 html <view wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.name}} </view>

```js
Page({
  data: {
    list:[
      {name:'a'},
      {name:'b'}
    ]
  }
})
```

小程序中事件

1.事件绑定的基本语法

写法	含义
`bindtap="handler"`	绑定点击事件，事件会继续向上冒泡
`catchtap="handler"`	绑定点击事件，事件不会继续冒泡（阻止冒泡）

<!-- WXML -->
<button bindtap="onTapBtn">点击我</button>

// JS (Page 页面的 methods 中)
Page({
  onTapBtn() {
    console.log("按钮被点击了");
  }
});

2.常见的事件类型

事件名	描述
`tap`	点击事件
`longpress` / `longtap`	长按事件
`input`	输入事件（`<input>`、`<textarea>`）
`focus` / `blur`	聚焦 / 失焦事件
`change`	值变化事件（如 `<picker>`）
`submit` / `reset`	表单提交 / 重置事件
`scroll`	页面滚动事件
`touchstart` / `touchmove` / `touchend`	触摸事件
`load` / `error`	图片或视频加载事件

3.`bind` 和 `catch` 的区别

特性	`bind`	`catch`
冒泡	会继续向上冒泡	阻止事件冒泡
适用场景	默认行为	阻止事件进一步处理

示例

<view catchtap="onParentTap">
  <button bindtap="onChildTap">点我</button>
</view>

点击按钮时，onChildTap 被触发，但不会触发 onParentTap，因为 catchtap 阻止了冒泡。

4.获取事件对象和自定义数据

1. 获取事件对象 `event`

事件回调函数会自动获得一个 event 对象，包含触发事件的详细信息。

onTapBtn(event) {
  console.log(event); // 可以查看触发事件的详细信息
  console.log(event.currentTarget.dataset); // 获取 data-* 属性
}

2. 使用 `data-` 传递自定义参数

<!-- WXML -->
<button bindtap="onTapBtn" data-id="{{item.id}}" data-name="{{item.name}}">
  {{item.name}}
</button>

// JS
onTapBtn(event) {
  const id = event.currentTarget.dataset.id;
  const name = event.currentTarget.dataset.name;
  console.log("点击了 ID：", id, "名称：", name);
}

1.小程序简介