微信小程序_600多个微信小程序源码涵盖各个行业大部分带后台持续更新中

目录过长，放在底部，点击 跳转底部目录
点击访问练习小项目：云音乐Demo
如果需要移动端多端发布可使用泰罗：Taro官网，GitHub-Taro

0、须知的各种网址

• 微信公众平台
• 微信开发者工具
• 小程序开发文档

1、数据绑定

• 和Vue一样，使用{{}}进行数据绑定
• 依然通过Object.defineProperty()实现数据劫持
• 点击访问官网 数据绑定

---

2、事件绑定

点击访问官网 事件系统

2.1、事件分类

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递
   1. 表单事件和自定义事件通常是费冒泡事件

2.2、绑定事件

1. bind绑定：正常冒泡

   1. <view bindtap="tapEvent">点击</view>
      1

2. catch绑定：阻止冒泡

   1. <view catchtap="tapEvent">点击</view>
      1

• 事件流三个阶段

1. 捕获：从外向内
2. 执行
3. 冒泡：从内向外

---

3、路由跳转

点击访问官网 路由

• wx.switchTab
  • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.reLaunch
  • 关闭所有页面，打开到应用内的某个页面
• wx.redirectTo
  • 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
• wx.navigateTo
  • 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
• wx.navigateBack
  • 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

---

4、生命周期

点击访问官网 生命周期

---

5、获取用户基本信息

截至2021年4月28日24时，获取用户信息的接口正式调整变更，可阅读官网 小程序登录、用户信息相关接口调整说明

点击访问官方 开放接口 - 用户信息

---

6、条件渲染

点击访问官网 条件渲染

• wx:if
• wx:elif
• wx:else

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

<block/> 是一个包装元素，不会在页面中做任何渲染，只接受控制属性，可以和条件渲染配合包裹多个组件

---

7、列表渲染

点击访问官网 列表渲染

• wx:for
  • 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
  • 使用 wx:for-item 可以指定数组当前元素的变量名
  • 使用 wx:for-index 可以指定数组当前下标的变量名
• wx:key
  • 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
  • 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

<switch wx:for="{{arr}}" wx:key="id"> {{item.id}} </switch>
1

<block/> 的使用同上

---

8、前后端交互

点击访问官网 网络

1. 语法：wx.request()
2. 注意：
   1. 必须是 https 协议
   2. 一个接口最多配置20个域名
   3. 并发上限是10个

---

9、组件

点击访问官网 自定义组件

---

10、底部Tab栏

点击访问官网 tabBar

---

11、表单

点击访问官网 表单组件

---

12、数据缓存

点击访问官网 数据缓存

• wx.setStorageSync
• wx.setStorage
• wx.getStorageSync
• wx.getStorage
• …

注意：单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。此缓存为永久存储，类似于H5的 localStorage

---

13、消息订阅与发布

参考视频地址：从初始化NPM到安装Pubsub再到组件间通信使用

GitHub-PubSubJS：PubSubJS

1、自定义事件

1. 绑定事件

   1. 事件名：MY_EVENT
   2. 事件回调：aSimpleFunc
   3. 订阅方：Pubsub.subscribe('MY_EVENT', aSimpleFunc)

2. 触发事件

   1. 事件名：MY_EVENT
   2. 提供参数：data
   3. 发布方：Pubsub.publish('MY_EVENT', data)

   注意：订阅消息时记得通过PubSub.unsubscribe('MY_EVENT')取消订阅

---

14、模板使用

点击访问官网：模板

1. 根目录创建 template 文件夹
2. 创建模板 myTem.wxml
   1. 使用 name 属性，作为模板的名字

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
1
2
3
4
5
6

3. 创建模板样式 myTem.wxss

/*略*/
1

4. 在xxx.wxml页面中使用模板
   1. 通过 <import src='PATH'/> 引入模板
   2. 通过 data='{DATA}' 注入数据

<!--先引入-->
<import src='/template/myTem/myTem.wxml'/>
<!--再使用-->
<template is="msgItem" data="{{...item}}"/>
1
2
3
4

5. 在页面的样式文件xxx.wxss中引入模板样式
   1. 通过 @import 'PATH' 引入模板样式

@import '/template/myTem/myTem.wxss'
1

---

15、小程序分包

点击访问官网：分包加载

1、目前小程序分包大小有以下限制

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

2、具体使用方法请参考

• 常规分包
  • 加载小程序时必先加载主包
  • 分包依然可以访问主包资源
• 独立分包
  • 可单独访问分包内容，不需要下载主包
  • 独立分包不能依赖主包或者其他分包的内容
• 分包预下载
• 分包异步化

---