微信小程序小二云音乐

！多图警告

基础知识

前提：需要注册一个微信小程序

微信官方文档[：](微信开放文档 (qq.com))

1.小程序相关

1.1 数据绑定

（1）：data中初始化数据

（2）：修改数据；this.set.data

（a）修改数据的行为始终是同步的

（3）：vue

（a）data中初始化数据数据

（b）修改数据：this.key=value

（c）数据流：单向数据流：modle——>view，实现了双向数据绑定：v-model

（3）：React

（a）：state中初始化数据

（b）：修改数据：this.setState（）

原理参考[：数据劫持](Vue如何实现数据劫持？ - 知乎 (zhihu.com))

1.2事件绑定

(1):事件分类

（a）：冒泡事件：

    定义：冒泡事件：当一个组件上的事件本触发后，该事件会向父节点传递。
    
    列表[：](    微信官方文档[：]([微信开放文档 (qq.com)](https://developers.weixin.qq.com/miniprogram/dev/framework/)))
    
（b）：非冒泡事件：
    定义：当一个组件上的事件本触发后，该事件不会向父节点传递
    
    非冒泡事件：表单事件和自定义事件通常是非冒泡事件
    
（c）：扩展内容
    事件的3个阶段：
        1.捕获：从外向内 
        2.执行目标阶段 
        3.冒泡：从内向外
 （d）演示：（如下）

wxml让子在父母里面：


<view class="indexContainer">

<image class="avatarUrl" src="/static/images/nvsheng.jpg"> </image>

<text class="usernName">{{msg}}</text>

<view class="goStudy" bindtap="handleParent">

<text bindtap="handleChild">hello world</text>

</view>

</view>

在js里面写下代码：

handleParent(){

console.log('parent')

},

handleChild() {

console.log('child')

},

调试结果（先孩子再父母）：

1.3绑定事件

（1）：bind绑定：事件绑定不会阻止冒泡事件向上冒泡

（2）：catch绑定：事件绑定可以阻止冒泡事件向上冒泡

将上面的bind改成catch

1.4向事件对象传参

2.生命周期

2.1 onload

（1）：页面加载时触发。一个页面只会调用一次，可以在onload的参数中获取打开当前页面路径中的参数

（2）：参数

2.2 onshow

(1):页面显示/切入前台是触发

(2):会执行多次

2.3 onReady

（1）：页面初次渲染完成是触发，一个页面只会调用一次，代表页面已经装备妥当

2.4 onHide

(1):页面隐藏/切入后台时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

2.6 onUnload

(1):页面卸载时触发。

2.7 官方图示说明&官网地址

link[：](生命周期 | 微信开放文档 (qq.com))

3.API

3.1 API使用说明

（1）：小程序提供了很多实用方法弓开发者使用

（2）：小程序全局对象是：wx

（3）：所有的API都是保存在wx对象中

3.2常用API

(1):界面交互

（a）：显示消息提升框： wx.showToast(Object object)

（b）：显示消息加载框：wx.showLoading(Object object)

（c）：关闭消息提示框： wx.hideToast(Object object)

（d）：关闭消息加载框： wx.hideLoading(Object object）

（2）：路由跳转

（a）：wx.switchTab(Object object)

（b）：wx.redirectTo(Object object)

（c）：wx.navigateTo(Object object)

3.3 快速查找技巧

（a）：实现一种 布局： 组件

（b）：实现一个 功能： API（配置及限制较多）

（c）：实现一个 配置或者某一个 页面语法： 框架和指南

4.获取用户基本信息

wx.getUserInfo(Object object)

4.1 用户首次登录

button open-type='getUserinfo'

4.2 用户已经登录过

wx.getUserinfo

4.3 条件渲染

wx:if
    在框架中，使用 `wx:if=""` 来判断是否需要渲染该代码块：

    也可以用 `wx:elif` 和 `wx:else` 来添加一个 else 块：

5.轮播图实现

5.1 swiper

(1):滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

（a）：作用：用于为整个应用进行选项设置

（b）：配图：

代码示意：

<!-- 轮播区域 -->

<swiper class="banners" indicator-dots="true" indicator-color="ivory" indicator-active-color="#d43c33">

<swiper-item>

<image src="/static/images/gewen.jpg"></image>

</swiper-item>

<swiper-item>

<image src="/static/images/nvsheng.jpg"></image>

</swiper-item>

</swiper>

</view>

微信小程序 day2

微信小程序 小二云音乐