微信小程序

2024-03-28 06:15•杂谈•阅读 2634

微信小程序 `Unit01`

`HTTP`协议的状态管理

由于HTTP协议是一款短连接的协议，所以http请求具有无状态的特点。即同一个客户端发送的多次请求并没有当做一个整体来看待。所以急需想一些办法将这些独立的请求当做一个整体，即将同一个客户端发送的多次请求涉及到的数据保存下来。这就叫做http的状态管理。

http的状态管理有3种解决方案：

cookie

session

token 详见视频。

jwt 链接：https://pan.baidu.com/s/1B3YUiJnd3A2vOGKmkEu0_Q 
提取码：2prs

`cookie`机制

客户端发送第一次请求，服务端接收请求处理请求。
服务端返回响应，并且在响应数据包中以消息头的方式告诉客户端有一些cookie数据需要客户端存储。
客户端接收到响应后，解析响应数据包，发现cookie信息后保存到浏览器本地。
当客户端发送后续请求时，将会从本地寻找合适的cookie带着一起发送请求（使用请求消息头的方式添加到请求数据包）
服务端接收请求，解析请求后获取cookie信息，这些信息是这个客户端上次请求时服务端添加的，这样就可以解决http状态管理。

cookie有个严重的缺点：不安全。

`session`机制

客户端发送请求，服务端接收请求，处理请求。
服务端请求处理完毕后，为该客户端分配一个随机的SESSIONID，并且将需要保存的数据与SESSIONID绑定在一起存在服务端内存中。在响应数据包中追加SESSIONID给客户端，让客户端保存。这个sessionid就相当于某一个客户端的唯一标识符。
客户端接收响应，保存SESSIONID，当发送后续请求时，将会自动带着SESSIONID一起发送。
服务端接收请求，获取SESSIONID，去内存中寻找是否有与该SESSIONID绑定在一起的数据，如果有则拿出来执行后续任务。至此完成http的状态管理。

`Token`机制

jwt 链接：https://pan.baidu.com/s/1B3YUiJnd3A2vOGKmkEu0_Q 
提取码：2prs

重新下载小程序开发工具：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载稳定版：稳定版 Windows 64

微信小程序

微信公众平台

服务号：为企业或组织提供的进行用户的管理和服务的账号类型。

订阅号：为企业、组织、个人提供的全新的消息传播方式。

小程序：为企业、组织、个人提供的可以达到与原生app相同体验的应用程序。（微信内部运行）优点在于：用完就走。

访问微信公众平台官方网站：

https://mp.weixin.qq.com

接入微信小程序

进入微信公众平台官网https://mp.weixin.qq.com，注册账号。

新建项目

小程序项目的文件结构

小程序项目中包含的文件类型有：

.json 配置文件 （文件符合json字符串的语法）

app.json 项目根目录中。定义全局配置。

"pages.json" 单页面目录中。定义当前页面的配置。

.wxml 模板文件 类似vue中的template，定义页面结构。但是此处不能使用任何html原生标签。

.wxss 样式文件

app.wxss 在项目根目录中。 定义全局样式。

"pages.wxss" 在单页面目录中。 定义单页面样式。

.js 脚本文件

app.js 在项目根目录中。 编写小程序全局初始化脚本。

"pages.js" 在单页面目录中， 编写当前页面所需要的脚本代码。

`app.json`

app.json用于对小程序进行全局配置。

json文件有非常严格的书写格式：

json文件中不能写注释。

字符串必须在双引号之间。json对象的属性名也必须在双引号之间

数组或对象的最后一个成员后不能写逗号。

json中不存在undefined。

`pages`配置项

"pages": [
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
],
新建pages/test/test后将会在pages目录下新建test目录并且新增四件套（.js .wxss .wxml .json）。若写在数组的第一个元素，则会被当做小程序的首页显示。

`window`配置项

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

"window": {
    "backgroundTextStyle": "dark",
    "backgroundColor": "#ccc",
    "enablePullDownRefresh": true,

    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "学子影院",
    "navigationBarTextStyle": "white"
},

`tabbar`配置项

tabbar配置项用于配置小程序的底部选项卡。object类型。

"tabBar": {
    "color": "#333",
    "selectedColor": "#f00",
    "list": [{
        "text": "电影",
        "pagePath": "pages/index/index",
        "iconPath":"/images/index_disable.png",
        "selectedIconPath": "/images/index_enable.png"
    },{
        "text": "影院",
        "pagePath": "/pages/theatre/theatre",
        "iconPath": "/images/theatre_disable.png",
        "selectedIconPath": "/images/theatre_enable.png"
    },{
        "text": "我的",
        "pagePath": "pages/me/me",
        "iconPath": "/images/me_disable.png",
        "selectedIconPath": "/images/me_enable.png"
    }]
},

`style`

基础库 2.8.0 开始支持，低版本需做兼容处理。

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式。

本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

`sitemapLocation`

指明 sitemap.json 的位置；sitemap.json中配置的内容指明了哪些页面希望微信官方通用爬虫进行收录。

每当更新页面跳转时，控制台都会有警告，描述当前页面是否被索引。可以通过project.config.json里的setting配置项，添加checkSiteMap:false即可隐藏这些警告。

`app.wxss`

用于定义全局样式。语法与css极其类似。

`app.js`

app.js是小程序全局的初始化脚本。当小程序启动时，将会执行app.js，调用App()来初始化整个小程序的环境。初始化时将会自动调用onLaunch生命周期方法，可以让小程序开发者在应用启动时完成某些业务逻辑。

App({
    onLaunch(){
        xxxxx
    }
})

小程序组件

小程序的wxml中由各式各样的组件构成。这些组件都是微信自定义的，原生html标签都不能使用。

`view`组件

view组件为视图容器组件，其基本语法如下：

<view class="css样式类名"
      hover-class="点击view后所应用的样式类名">
</view>
案例：新建：pages/testing/view/view.

let f = true
f = -1
f = 100
f = 0
f = \'true\'
f = \'false\'
f = \'\'
f = undefined
f = null
if(f){
    console.log(\'true\')
}

微信小程序 `Unit02`

小程序组件

小程序的wxml中由各式各样的组件构成。这些组件都是微信自定义的，原生html标签都不能使用。

关于组件属性的使用
对于布尔类型的属性，无论设置true或者false，小程序都将当做普通字符串来进行判断，都被解析为true，除非用空字符串""。但是有点野。推荐用{{}}的方式引用js字面量，赋值true或false即可。
小程序中组件属性既遵循驼峰命名法，也可使用短横线命名法，两种属性名的设置都会生效。

`view`组件

view组件为视图容器组件，其基本语法如下：

<view class="css样式类名"
      hover-class="点击view后所应用的样式类名"
      hover-start-time="点击后多久出现点击态（毫秒）"
      hover-stay-time="点击态持续多长时间（毫秒）"
      hover-stop-propagation="是否阻止点击效果向父节点传递">
</view>

案例：新建：pages/testing/view/view.

`image`组件

image组件为图片组件，支持gif、jpg、svg、webp等图像格式。其语法结构如下：

<image  src="图片路径"
        lazy-load="是否采用懒加载显示图片"
        mode="图像的裁切及缩放模式"
        show-menu-by-longpress="">
</image>

案例：pages/testing/image/image。

`wxss(weixin style sheets)`

wxss是小程序提供的一套样式语言，用于描述组件样式。wxss具备了css大部分特性。并且对css进行了扩展。新增了rpx作为尺寸单位。

rpx (响应式像素)

1rpx在不同的设备下可以转换成不同的px像素值，从而实现适配效果。它的实现原理：

规定：所有设备的屏幕宽度都是750rpx。所以可以根据这个规定计算当前设备下rpx与px之间的换算关系，这样就可以根据这个换算关系，使用rpx定义组件的宽高，从而动态设置显示效果。

设备 rpx换算px (屏幕宽度/750)      px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px   1px = 2.34rpx
iPhone6 1rpx = 0.5px    1px = 2rpx
iPhone6 Plus    1rpx = 0.552px  1px = 1.81rpx

`swiper`组件

swiper组件为轮播图组件，其语法结构是：

<swiper
  indicator-dots="{{true}}"
  indicator-color="#fff6"
  indicator-active-color="#0f0"
  autoplay="{{true}}"
  interval="3000"
  duration="100"
  vertical="{{true}}"
  circular="{{true}}">
    <swiper-item>
        <image src=""></image>
    </swiper-item>
    .....
</swiper>

案例：pages/testing/swiper/swiper。

`text`组件

text组件为文本组件，其基本语法：

<text user-select="是否允许用户选中文本"
      decode="是否解码html实体"
      space="显示空格的方式 nbsp  ensp  emsp">
</text>

`navigator`组件

navigator组件是页面链接组件，用于控制页面的跳转。其语法结构：

<navigator url="当前小程序内的页面路径"
           open-type="跳转方式">
    链接文本
</navigator>

open-type跳转方式的可选项有五种，包括：

navigate 默认的跳转方式，可以从当前页跳转到非tabbar页面。跳转的过程将会保留当前页，新建目标页，然后跳过去。称为保留跳转。
navigateBack 返回上一页。这种操作将会销毁当前页，自然也就看到了上一页。还可以配合delta属性实现回到上n页。
switchTab 字面理解为：切换到某个选项卡页面。这种跳转方式可以跳转到tabbar页面。一旦这么做就会销毁所有的非tabbar页面。
redirect 字面理解为：重定向。这种跳转方式将会关闭当前页，跳转到非tabbar页面。这种跳转也会重新创建新的目标页。
reLaunch 字面理解为：重新启动应用。这种方式将会关闭所有页面并且重新打开目标页面。

`scroll-view`组件

scroll-view组件用于实现滚动的视图容器（支持水平、垂直滚动）。其语法结构是：

<scroll-view    scroll-x="是否允许水平方向滚动"
                scroll-y="{{true}}"
                enable-flex="{{true}}"
                show-scrollbar="{{false}}"
                enhanced="{{true}}"
                bindscroll="scrollEvent">
    ......
    ......
</scroll-view>

案例：pages/testing/scroll/scroll。

scroll-view组件提供了很多eventhandle类型的属性，这些属性用于为当前组件绑定事件处理函数：

<scroll-view bindscroll="scrollEvent"></scroll-view>

一旦scroll-view滚动，就会触发scroll事件，执行scrollEvent事件处理函数，该事件处理函数需要在page.js中进行定义。

Page({
    scrollEvent(event){
        console.log(event.detail.xxxxxx)
    }  
})

`input`组件

input组件为输入框组件，其基本语法结构：

<input  type="输入框的类型 text number idcard digit"
        placeholder="输入框的占位文本内容"
        value="输入框的值"
        maxlength="最大输入长度"
        password="是否为密码框"
        focus="设置是否让当前输入框自动获取焦点"
        bindinput="绑定输入事件处理函数名"/>

案例：pages/testing/input/input。

input组件中提供了一些事件处理（eventHandle）属性。这些属性用于为input绑定事件。只需要在属性值中填写事件处理函数名称即可。（注意：严禁出现小括号）

<input type="text" bindinput="inputEvent"/>
一旦绑定了inputEvent，则需要在page.js中声明inputEvent方法用于处理该事件。

Page({
    inputEvent(event){
        console.log(event.detail.value)
    }
})

微信小程序 `Unit03`

`input`组件

input组件为输入框组件，其基本语法结构：

<input  type="输入框的类型 text number idcard digit"
        placeholder="输入框的占位文本内容"
        value="输入框的值"
        maxlength="最大输入长度"
        password="是否为密码框"
        focus="设置是否让当前输入框自动获取焦点"
        bindinput="绑定输入事件处理函数名"/>
案例：pages/testing/input/input。

input组件中提供了一些事件处理（eventHandle）属性。这些属性用于为input绑定事件。只需要在属性值中填写事件处理函数名称即可。（注意：严禁出现小括号）

<input type="text" bindinput="inputEvent"/>
一旦绑定了inputEvent，则需要在page.js中声明inputEvent方法用于处理该事件。

Page({
    inputEvent(event){
        console.log(event.detail.value)
    }
})

小程序表单组件的双向数据绑定

`Vue`的双向数据绑定示例如下：

<span>您输入的内容是：{{name}}</span>
<input type="text" placeholder="输入name" v-model="name" >
data(){
    return {
        name: \'\'
    }
}

如上代码，所谓双向数据绑定意味着，用户修改了输入框的value，将会动态更新data中的name（对视图层的操作动态更新逻辑层），一旦data中的name有变化，也会动态更新UI界面（对逻辑层的操作动态更新视图层）。

小程序的双向数据绑定

对视图层的操作动态更新逻辑层

page.wxml

<input type="text" bindinput="inputEvent"/>
page.js

Page({
    data:{
        name: \'\'
    },
    inputEvent(event){
        let val = event.detail.value
        // 第一种方式 这种方式可以改掉name  但是不能立即更新界面
        this.data.name = val 
        // 第二种方式 这种方式不仅可以修改name 还可以立即更新界面
        this.setData({ name:val })
    }
})

对逻辑层的操作动态更新视图层

page.js

Page({
    data: {
        name: \'zs\'
    }
})
page.wxml

<view>{{name}}</view>

`WXML`语法基础

wxml是一套标签语言，符合标签语言的相关语法，用于定义页面结构。

wxml中动态数据（动态文本，动态属性，动态样式等）来源于js中的data。

Page({
    data: {
        name:\'zs\',
        pwd: \'12345\'
        ...
    }
})

wxml需要获取动态数据时，可以使用{{}}，大概有以下几类需求：

内容动态绑定

动态更新组件的内容文本：

<view>{{name}}</view>
<text>{{pwd}}</text>

案例：pages/testing/databind/databind

属性动态绑定

动态更新组件的属性值：

data:{
    url: \'/images/1.jpg\',
    n: 1,
    f: true
}
<image src="{{url}}"></image>
<image src="/images/{{n}}.jpg"></image>
<scroll-view  show-scrollbar="{{f}}"></scroll-view>

样式动态绑定

动态更新组件的wxss样式：

data:{
    cn: \'c2\',
    r: \'red\',
    bw: 1
}
c1{color:red;}
c2{color:blue;}
<view class="{{cn}}"></view>
<view >
</view>

列表动态渲染

基于小程序提供的列表动态渲染语法，可以动态输出列表数据：

data: {
    foods:[
        {id:1, name:\'臭豆腐\', price:8.0},
        {id:2, name:\'螺蛳粉\', price:8.6},
        {id:3, name:\'榴莲\', price:200.0}
    ]
}

若在vue中遍历foods数组，语法如下：

<div v-for="(item, i) in foods" :key="i">
  id：{{item.id}}，名称：{{item.name}}，价格：{{item.price}}
</div>

如果在小程序中遍历foods数组，语法如下：

<view wx:for="{{foods}}">
   id：{{item.id}}，名称：{{item.name}}，价格：{{item.price}} 
</view>

wx:for类似vue中的v-for，可以方便的遍历列表数据，渲染界面。在遍历过程中，小程序将会自动的将foods数组中的每一个对象赋值给变量item，所以可以在wx:for内部使用{{item.xxx}}来引用数组中的每个对象的属性。同理，小程序也将会自动的把遍历过程中的每一个对象对应的下标索引赋值给变量：index。可以使用{{index}}来访问下标。

如上渲染列表后，发现控制台中有一个警告，需要设置wx:key.

`wx:key`

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

我们还可以自定义变量名（不叫item、不叫index了），修改他们：

<view wx:for="{{products}}"  wx:key="xx"
      wx:for-item="product"  wx:for-index="i">
    .... {{i}}   {{product.xxxx}}
</view>

条件动态渲染

使用条件渲染可以动态的处理是否渲染某个元素，类似vue中v-if。例如：

data:{
    islogin: true
}
<text wx:if="{{!islogin}}">点击登录</text>
<text wx:else>欢迎：XXX</text>
常见的写法如下：

<text wx:if="{{布尔表达式}}"></text>
-----------------------------------------------
<text wx:if="{{布尔表达式}}"></text>
<text wx:else></text>
-----------------------------------------------
<text wx:if="{{布尔表达式}}"></text>
<text wx:elif="{{布尔表达式}}"></text>
<text wx:elif="{{布尔表达式}}"></text>
<text wx:elif="{{布尔表达式}}"></text>
<text wx:else></text>

组件

`button`组件

`radio-group`组件

radio-group组件为单选框组组件，其基本结构：

<radio-group>
    <radio value="m" checked color="颜色值">男</radio>
    <radio value="f" color="颜色值">女</radio>
</radio-group>

案例：testing/radio/radio。

小程序的事件处理

事件是视图层到逻辑层的通讯方式，他可以将用户的行为反馈到逻辑层进行处理。

小程序中的事件类型

bindscroll  bindinput  bindtap  bindchange .....

上述事件类型都属于小程序提供的一些事件类型，在微信小程序中，事件类型分为两类：

冒泡事件（事件触发后将会向父组件传递）
非冒泡事件（事件触发后不会像父组件传递）

WXML的冒泡事件列表：

非冒泡事件一般都是微信自定义组件中的自定义事件，而冒泡事件一般都是原生事件。

类型 触发条件
touchstart      手指触摸动作开始
touchmove       手指触摸后移动
touchcancel     手指触摸动作被打断，如来电提醒，弹窗
touchend        手指触摸动作结束
tap     手指触摸后马上离开
longpress       手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

小程序的事件绑定机制

<view bind事件名="事件处理函数名"></view>
<view bind:事件名="事件处理函数名"></view>
<view catch事件名="事件处理函数名"></view>

案例：testing/event/event。

微信小程序 `Unit04`

小程序的事件处理

事件是视图层到逻辑层的通讯方式，他可以将用户的行为反馈到逻辑层进行处理。

小程序中的事件类型

bindscroll  bindinput  bindtap  bindchange .....

上述事件类型都属于小程序提供的一些事件类型，在微信小程序中，事件类型分为两类：

冒泡事件（事件触发后将会向父组件传递）
非冒泡事件（事件触发后不会像父组件传递）

WXML的冒泡事件列表：

类型 触发条件
touchstart      手指触摸动作开始
touchmove       手指触摸后移动
touchcancel     手指触摸动作被打断，如来电提醒，弹窗
touchend        手指触摸动作结束
tap     手指触摸后马上离开
longpress       手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

非冒泡事件一般都是微信自定义组件中的自定义事件，而冒泡事件一般都是原生事件。

小程序的事件绑定机制

<view bind事件名="事件处理函数名"></view>
<view bind:事件名="事件处理函数名"></view>
<view catch事件名="事件处理函数名"></view>

案例：testing/event/event。

上述3种方式都可以为view组件绑定事件。bind方式绑定事件可以应用于任何组件；而bind:方式不能应用于某些原生组件。

原生组件指的是由手机操作系统直接控制的组件，如input组件、video组件、camera组件等。这些组件的特点是由android或ios操作系统直接提供，并不是微信官方自己实现的UI。

bind与bind:这两种方式绑定的事件不能阻止事件的冒泡，但是catch方式可以自动阻止事件冒泡。

小程序中事件参数的传递

无论组件绑定的是冒泡事件还是非冒泡事件，事件处理函数中严禁出现小括号。

<button bindtap="tapEvent"></button>
<input bindinput="inputEvent" />

如何在执行事件处理函数时进行参数传递？

在小程序中，如果有参数需要传递给事件处理函数，可以将参数绑定在事件源对象上，使用data-xxx属性进行声明：

<button data-i="0" data-a="zs" bindtap="tapDel"></button>
<button data-i="1" bindtap="tapDel"></button>
<button data-i="2" bindtap="tapDel"></button>

在事件处理函数中，使用event.target访问事件源，从而获取data-xxx属性值：

tapDel(event){
    let i = event.target.dataset.i
    let a = event.target.dataset.a
}

案例：模拟购物车删除功能。

对于非冒泡事件（bindinput、bindscroll、bindchange），事件触发时涉及到的参数通常情况下已经被微信官方封装到了event.detail属性中，所以很少需要传递自定义参数。

<input bindinput="inputEvent"/>
inputEvent(event){
    let val = event.detail.value
    ......
}

实验：吃饭睡觉打豆豆。

小程序`API`

界面交互类`API`

wx.showToast 弹出消息提示框
wx.showModal 弹出模态对话框
wx.showLoading 弹出提示框
wx.showActionSheet 弹出底部操作菜单

路由跳转类`API`

wx.switchTab 跳转到tabbar页面。将会销毁非tabbar页面。
wx.reLaunch 重新启动应用程序。销毁所有页面。
wx.redirectTo 干掉自己，新建目标也，跳过去。
wx.navigateTo 保留跳转新建目标页，跳过去。不能跳到tabbar页面
wx.navigateBack 销毁自己，返回上一页。

上述5个方法可以实现小程序中页面间的跳转，他们的特点与navigator组件中5个相应open-type的跳转规则完全一致。

案例：点击a中按钮，跳转到b。

`wx.navigateTo()`

保留跳转，跳转到应用内某个非tabbar页面。在跳转的过程中如果涉及到参数的传递包含有两种：正向传参、反向传参。

正向传参： (A页面跳转到B页面，并且携带参数一起跳转)

//A页面
wx.navigateTo({
    url: \'/pages/testing/b/b?
})
//B页面
Page({
    onLoad(options){
        // options封装了?后的参数列表：
        // options:  {id:1, name:\'张三\',  age:18}
        options.id
        options.name
    }
})

反向传参：A页面跳转到B页面，当B页面销毁时回传参数给A页面的过程称为反向传参。

//A 页面
wx.navigateTo({
    url: \'/pages/testing/b/b\',
    events: {
        acceptDataFromB:(data)=>{ .... }
    }
})

// B页面  Page.js
let ec = this.getOpenerEventChannel()
ec.emit(\'acceptDataFromB\', {xxxxxxx})

小程序的生命周期

小程序的生命周期分为两类：

小程序页面的生命周期
小程序应用的生命周期

小程序页面的生命周期

小程序页面从创建到销毁会经历完整的生命周期，在这个过程中，小程序提供了一些生命周期方法，用于让我们重写，在某一个时间节点执行自定义的业务逻辑。这些生命周期方法在page.js中定义：

/**生命周期函数--监听页面加载  执行一次 */
onLoad: function (options) {
},

/**生命周期函数--监听页面初次渲染完成  执行一次 */
onReady: function () {
},

/** 生命周期函数--监听页面显示 执行多次  */
onShow: function () {
},

/**生命周期函数--监听页面隐藏  执行多次 */
onHide: function () {
},

/**生命周期函数--监听页面卸载  执行一次 */
onUnload: function () {
},

小程序应用的生命周期

小程序应用从启动到销毁也会涉及到生命周期，称为小程序应用的生命周期。涉及到的生命周期方法需要在app.js中进行定义：

// app.js   当应用程序启动时执行
App({
  // 当应用程序第一次启动时执行
  onLaunch() { 
  },
  // 当应用程序显示时执行（应用程序从后台回到前台时执行）
  onShow(){
  },
  // 当应用程序从前台隐藏到后台时执行
  onHide() {  
  },
    
  globalData: {
    userInfo: null
  }
})

`globalData`全局数据存储区

小程序提供了globalData用于存储全局共享数据。在page.js中可以随时向globalData中存数据，也可以随时从globalData中取出数据。具体API：

存数据：

//Page.js
getApp().globalData.name = \'zs\'

在page.js中调用getApp()可以获取全局唯一的App对象。该对象中就包含了globalData属性用于存储数据。

取数据：

//page.js
let name = getApp().globalData.name

在取数据时要保证以前存储过，否则将会得到undefined。建议将需要存储在globalData中的数据显式的声明在app.js中。

微信小程序 `Unit05`

小程序网络类`API`

`wx.request()`

小程序发送http请求，可以使用wx.request()。但是有一些要求：

小程序发请求之前必须在后台管理网站配置合法通讯域名列表。
要求配置合法的域名，而不是ip地址。
要求域名必须经过ICP备案。
请求资源路径只支持https协议（服务端配置SSL证书）
配置域名时不支持配置父域名，但使用子域名的情况。

项目中需要访问的测试地址：

https://api.tedu.cn/index.php?cid=1

尝试修改DNS： 114.114.114.114

打开文件管理，右键网络 -- 属性
更改适配器设置
右键正在使用的网络 -- 属性
双击 intenet协议版本 v4

在小程序后台管理网站中配置服务器域名

进入后台管理网站。 mp.weixin.qq.com
选择开发--开发管理--开发设置--往下滚--服务器域名
将https://api.tedu.cn配置在合法request域名中即可

腾讯视频

初始化项目

新建项目xzyy。

搭建项目的主体结构。index、theatre、me

准备好3个页面：index、theatre、me

配置app.json其它配置项。

项目配置的微调。配置project.config.json checkSiteMap:false

初始化加载电影列表

电影列表接口

     说明
接口地址    https://api.tedu.cn/index.php
请求方式    GET
请求参数    cid:类别ID 热映:1 待映:2 经典:3 offset:读取条目的起始下标位置（默认0）
返回结果    某类别下从offset开始读20条电影数据组成的数组 [{电影信息},{电影信息},{电影信息}...]

https://api.tedu.cn/index.php?cid=1&offset=0   热映第一页
https://api.tedu.cn/index.php?cid=1&offset=20  热映第二页
https://api.tedu.cn/index.php?cid=1&offset=40  热映第三页

返回的结果：

{
    actors: "章若楠／孙晨竣／王彦霖"
    cover: "https://p1.meituan.net/movie/f6ec"
    id: "1"
    moviename: "如果声音不记得"
    movietype: "爱情／青春／奇幻"
    score: "8.2"
}

实现思路：

在index的onLoad方法中，发送https请求，获取热映类别下（cid=1）电影列表数据。
通过wx:for完成列表渲染即可。

实现点击顶部导航更新选中样式并刷新列表

实现思路

在data中声明变量：cid用于保存当前类别id。

在wxml中使用data.cid动态设置类样式。

为顶部导航添加tap事件处理，一旦点击某一个导航项，执行tapNav方法，将data.cid修改为当前选中项id即可。

点击选中项后，发送http请求，注意：cid应是当前选中项类别id

获取当前类别下的首页电影数据后，替换当前movies。

实现触底分页加载列表业务

`onReachBottom()`

监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。

封装`loadData`方法

由于onLoad、tapNav、onReachBottom三个方法内部都需要向 /index.php地址发请求，获取电影列表，只不过发请求时的参数与获取列表后的业务逻辑有些不同而已，最好封装一个loadData方法，提高代码的重用性，便于维护。

loadData(cid, offset, callback){
    return new Promise((resolve, reject)=>{
        wx.request({
            url: \'httpxxxx\',
            data: {cid, offset},
            success: (res)=>{
                let movies = res.data
                resolve(movies)
            }
        })
    })
}

onLoad(){
    loadData(1, 0).then(movieList=>{
        this.setData({movies: movieList})
    })
}
tapNav(){
    loadData(1, 0).then(movieList=>{
        this.setData({movies: movieList})
    })
}
onReachBottom(){
    loadData(1, 0).then(movieList=>{
        push...追加
    })
}

小程序缓存设计方案

什么是缓存？

当客户端向服务端发送请求试图获取一组数据时，一旦数据下载完毕，客户端可以将这些数据缓存到客户端本地。当下次再发请求时，先去缓存区域中搜索，若可以找到需要的数据，则直接使用不必访问服务器。若没有再去发请求。这样可以极大降低服务端压力。

注意：一旦服务端真实数据发生改变，缓存中的数据也应该想办法更新。

什么样的业务适合使用缓存？

数据基本不会有太大的变化。

数据访问量越大，缓存对服务端优化的效果就越好。

切换顶部导航时的缓存方案的实现

点击顶部导航时，发送请求加载首页数据，将首页数据存入小程序缓存。

当下次点击顶部导航时，发请求之前先判断是否可以在小程序缓存中能够找到相应的列表（以前存过），若找得到，则拿来直接用；找不到再发请求。

小程序中缓存相关API

存数据：

wx.setStorage({
    key: \'key\',
    data: \'具体需要存储的数据\'
})
取数据：

wx.getStorage({
    key: \'key\',
    success: (res)=>{ ...得到结果后的回调... },
    fail: (err)=>{ ...找不到key对应的缓存数据后的回调... }
})

微信小程序 `Unit06`

小程序缓存设计方案

什么是缓存？

注意：一旦服务端真实数据发生改变，缓存中的数据也应该想办法更新。

什么样的业务适合使用缓存？

数据基本不会有太大的变化。

数据访问量越大，缓存对服务端优化的效果就越好。

切换顶部导航时的缓存方案的实现

点击顶部导航时，发送请求加载首页数据，将首页数据存入小程序缓存。

当下次点击顶部导航时，发请求之前先判断是否可以在小程序缓存中能够找到相应的列表（以前存过），若找得到，则拿来直接用；找不到再发请求。

小程序中缓存相关API

存数据：

wx.setStorage({
    key: \'key\',
    data: \'具体需要存储的数据\'
})
取数据：

wx.getStorage({
    key: \'key\',
    success: (res)=>{ ...得到结果后的回调... },
    fail: (err)=>{ ...找不到key对应的缓存数据后的回调... }
})

基于下拉刷新实现列表缓存的更新

onPullDownRefresh()

监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

实现首页左上角地理定位功能

在onLoad中测试小程序提供的getLocation方法。

接入腾讯位置服务

登录腾讯位置服务官方网站： https://lbs.qq.com

申请开发者密钥（key）：申请密钥

开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

小程序示例

var QQMapWX = require(\'../../libs/qqmap-wx-jssdk.js\');
var qqmapsdk = new QQMapWX({
    key: \'申请的key\'
});
qqmapsdk.search({ ... })

实现详情页

通过电影`ID`查询电影详情接口

   说明
请求地址    https://api.tedu.cn/detail.php
请求方式    GET
请求参数    id: 影片ID
返回结果    object类型：描述相应id的电影详细数据。

返回：https://api.tedu.cn/detail.php?id=18
{
    actor: (29) [{…}, {…}...]
    cover: "https://p0.meituan.net/moviemachine/70be7"
    description: "倾覆沉没的cxxxxx"
    director: [{…}]
    moviename: "紧急救援"
    movietype: "剧情／灾难／动作"
    score: "4.7"
    showingon: "2020-12-18"
    star: "彭于晏／王彦霖／辛芷蕾"
    thumb: (441) ["https://p1.meituan.n".....]
}

实现步骤：

新建页面： pages/movie/movie，将movie.wxss与movie.wxml覆盖掉相应文件即可。

首页中点击列表中某一电影，跳转到movie页面（跳转的过程需要传递当前选中项的id）

在详情页的onload生命周期方法中，获取上一个页面传过来的id，发送https请求，获取详情信息。

渲染界面。

注意：将movie.wxss中107行、142行附近的display:flex删除。

渲染页面

渲染基本信息。

渲染演职人员表。

渲染视频与剧照列表。（注意图片裁剪模式）

点击视频或剧照图片，以大图方式浏览器视频剧照图片列表。

wx.previewImage({ urls: [\'url\', \'url\'..] })
解决无论点击哪一张图片，都显示第一张的问题。（传参即可）

小程序云开发

概述

开发者可以使用腾讯提供的云服务来开发微信小程序、小游戏后端程序。而无需搭建服务器。云开发提提供的基础能力有：

云数据库 是一个可以在小程序端直接操作的json类型数据库。

云存储 是一个可以在小程序端直接操作的网络云盘。支持上传下载。

云函数 是一个在小程序端定义，然后部署到云端后，可以通过小程序调用，然后在云端执行的函数。云函数中可以直接操作云存储与云数据库。

开通云开发服务

点击与开发工具的工具栏中的按钮：【云开发】

云数据库

云数据库是一个可以在小程序端直接操作的json类型数据库。

关系型数据库与`json`类型数据库的区别

关系型数据库

id name    sex     school_id
1       zs      m       1
2       ls      f       2
3       ww      m       1
..      ..      ..      ..

id name    loc     area
1       清华大学    五道口     1000
2       北京大学    中关村     850

`json`类型数据库

[
    {
        id: 1,
        name:\'zs\',
        sex: \'m\',
        school: {
            name: \'清华大学\',
            loc: \'五道口\',
            area: 1000
        }
    },{
        id: 2,
        name:\'ls\',
        sex: \'f\',
        school: {
            name: \'北京大学\',
            loc: \'五道口\',
            area: 850
        }
    },{
        id: 3,
        name:\'ww\',
        sex: \'m\',
        school: {
            name: \'清华大学\',
            loc: \'五道口\',
            area: 1000
        }
    }
]

如上述存储方式，会涉及到一些新的json数据库相关的概念：

有一个集合，集合的名字叫test，该集合中有3条记录（3个对象、3篇文档），每一条记录包含有4个字段（4个属性），他们有各自的数据类型：string、number、object、array等。

微信小程序 `Unit07`

小程序云开发

概述

开发者可以使用腾讯提供的云服务来开发微信小程序、小游戏后端程序。而无需搭建服务器。云开发提提供的基础能力有：

云数据库是一个可以在小程序端直接操作的json类型数据库。
云存储是一个可以在小程序端直接操作的网络云盘。支持上传下载。
云函数是一个在小程序端定义，然后部署到云端后，可以通过小程序调用，然后在云端执行的函数。云函数中可以直接操作云存储与云数据库。

开通云开发服务

点击与开发工具的工具栏中的按钮：【云开发】

云数据库

云数据库是一个可以在小程序端直接操作的json类型数据库。

关系型数据库与`json`类型数据库的区别

关系型数据库

id name    sex     school_id
1       zs      m       1
2       ls      f       2
3       ww      m       1
..      ..      ..      ..

id name    loc     area
1       清华大学    五道口     1000
2       北京大学    中关村     850

[json类型数据库

    {
        id: 1,
        name:\'zs\',
        sex: \'m\',
        school: {
            name: \'清华大学\',
            loc: \'五道口\',
            area: 1000
        }
    },{
        id: 2,
        name:\'ls\',
        sex: \'f\',
        school: {
            name: \'北京大学\',
            loc: \'五道口\',
            area: 850
        }
    },{
        id: 3,
        name:\'ww\',
        sex: \'m\',
        school: {
            name: \'清华大学\',
            loc: \'五道口\',
            area: 1000
        }
    }
]

如上述存储方式，会涉及到一些新的json数据库相关的概念：

有一个集合，集合的名字叫test，该集合中有3条记录（3个对象、3篇文档），每一条记录包含有4个字段（4个属性），他们有各自的数据类型：string、number、object、array等。

云数据库的操作

插入数据

获取数据库引用对象：

let db = wx.cloud.database({
    env: \'云服务器的ID\'
})
获取集合引用对象：

let col = db.collection(\'test\')
调用集合的add方法添加数据：

col.add({
    data: {待插入的json数据对象},
    success: (res)=>{ ... }
})
案例：

创建云开发项目.

新建页面，测试添加操作。

注意：

当调用collection.add()插入数据后，将会为这一条数据自动添加两个字段：_id_openid。

_id是小程序为这一条记录随机生成的主键id。

_openid是小程序自动添加的当前用户的唯一标识符。

_id        _openid name    ...
123456  aabbccdd1234    zs      ...
123122  aabbccdd1234    zs      ...
345345  aaccdddd2222    ls      ...

_openid字段标识着当前这一条记录的归属（谁创建的这条记录，这条记录就属于谁）。记录到底归属给哪一个用户与集合中数据的访问权限有很大的关系。

查询数据

通过ID查询一条记录：

db.collection(\'集合名\').doc(\'数据的id\').get({
    success: (res)=>{ 成功后执行 },
    fail: (err)=>{ 失败时执行 }
})

案例：点击按钮，查询某id的记录。

注意：查询过程中会遇到权限问题，需要关注当前集合的权限设置。

通过`where`添加筛选条件，查询多条记录

// 查询28岁  已婚的用户
db.collection(\'test\').where({
    married:true,
    age: 28
}).get()

实现学子影院电影评论列表

新建云开发项目： xzyycloud
将旧项目中的资源，直接覆盖到新项目的miniprogram下。
在movie页面中，加载电影评论信息（读云数据库）
获取评论列表，完成列表渲染。

云数据库中的查询指令

假设我们需要查询进度大于 30% 的待办事项，那么传入对象表示全等匹配的方式就无法满足了，这时就需要用到查询指令。

const _ = db.command
db.collection(\'todos\').where({
  //  _.gt(30) 是一个 "大于 30" 的条件
  progress: _.gt(30)
}).get()..

API 提供了以下查询指令：

查询指令       说明
eq      等于
neq     不等于
lt      小于
lte     小于或等于
gt      大于
gte     大于或等于
in      字段值在给定数组中
nin     字段值不在给定数组中

Collection常用 API

方法 说明
collection.add()        添加数据
collection.doc()        通过id查询一条记录
collection.where()      添加筛选条件
collection.field()      设置返回字段
collection.limit(n)     向后查n条
collection.skip(n)      跳过n条
collection.orderby()    排序
collection.get()        发请求，查询数据
collection.update()     发请求，修改数据
collection.remove()     发请求，删除数据
....

删除数据

通过id删除一条数据：

db.collection(\'test\')
  .doc(\'133e253361c3e44301cff680773a3e2c\')
  .remove()

修改数据

通过ID，修改一条数据：

db.collection(\'test\')
  .doc(\'c0ca0aed61c2f72001db2e0829ed69e3\')
  .update({
    data: {
      // price: _.inc(10)
      married: false,
      age: _.inc(10),
      hobby: _.push(\'摊煎饼\')
    }
  })

除了用指定值更新字段外，数据库 API 还提供了一系列的更新指令用于执行更复杂的更新操作，更新指令可以通过 db.command 取得：

更新指令       说明
set     设置字段为指定值
remove  删除字段
inc     原子自增字段值
mul     原子自乘字段值
push    如字段值为数组，往数组尾部增加指定值
pop     如字段值为数组，从数组尾部删除一个元素
shift   如字段值为数组，从数组头部删除一个元素
unshift 如字段值为数组，往数组头部增加指定值

实现首页左上角点击选择城市

新建页面：pages/citylist/citylist，将ftp的资源覆盖到citylist目录下。
实现citylist页面中的城市列表数据的呈现。

# 微信小程序 `Unit08`

### 实现首页左上角点击选择城市

1. 新建页面：`pages/citylist/citylist`，将`ftp`的资源覆盖到`citylist`目录下。

2. 实现`citylist`页面中的城市列表数据的呈现。

#### 点击右侧导航，自动定位到某一个位置

```html

<scroll-view scroll-into-view="S">

</scroll-view>

```

1. 为子元素绑定`id`属性，为`scroll-view`设置`scroll-into-view`属性就可以自动滚动到相应`id`的位置。

2. 为右侧边栏导航绑定`tap`事件，点击后修改`data.letter`即可。

微信小程序 `Unit08`

实现首页左上角点击选择城市

新建页面：pages/citylist/citylist，将ftp的资源覆盖到citylist目录下。

实现citylist页面中的城市列表数据的呈现。

#### 实现选择城市业务

1. 在首页中点击左上角，跳转到城市列表页。`<navigator>`

2. 在城市列表页中，为每一个`item`绑定`tap`事件。点击某一个`item`后获取选中的城市名称，存入`globalData`，返回首页即可。

3. 在首页中重写`onShow`生命周期方法，从`globalData`中获取存储的城市名称，更新左上角文本。

#### 实现选择城市页面中的定位城市功能

1. 从`index.js`将发起定位的相关代码，复制到`citylist`页面中。

```javascript
var QQMapWX = require(\'../../libs/qqmap-wx-jssdk.js\');
var qqmapsdk = new QQMapWX({
key: \'A7CBZ-FZ73U-PUPV7-BINEG-ICD57-KAB6J\'
});
/** 获取当前定位 */
getLocation(){
qqmapsdk.reverseGeocoder({
success: (res)=>{
console.log(res)
let city = res.result.address_component.city
this.setData({cityname: city})
}
})
},
```

#### 处理未赋予定位权限时的业务流程

1. 用户进入城市列表页后`onload`，将会自动加载当前城市（会失败）。
2. 一旦失败，弹出模态对话框（提示用户是否重新赋予权限）。
1. 否：啥事不干。
2. 是：跳转到设置页面，让用户重新设置权限。
3. 回到城市列表页后，重新开始定位即可。

### 实现影院模块页面

1. 实现首页城市名称与影院页面城市名称的联动。

2. 加载当前选择的城市下的影院列表。

```javascript
qqmapsdk.search({
keyword: \'关键字\',
region: \'城市名\',
success: (res)=>{ ... }
})
```

#### `target`与`currentTarget`之间的区别

```html
<view class="v1" bindtap="tapV1">
<view class="v2"></view>
</view>

```

1. 若点击了`v2`，将会触发父组件上的`tap`事件。此时：
1. `event.target`: 指的是`v2` （因为点击的就是`v2`）
2. `event.currentTarget`: 指的是`v1` （因为事件绑定在`v1`上）
2. 若点击了`v1`，也会触发`v1`的`tap`事件，此时：
1. `event.target`: 指的是`v1` （因为点击的就是`v1`）
2. `event.currentTarget`: 指的是`v1` （因为事件绑定在`v1`上）

## 小程序组件库

### `vant`组件库（小程序版）

`https://vant-contrib.gitee.io/vant-weapp/#/home`

### 小程序自定义组件

```html
<mybutton value="设置按钮上的文本"
color="控制按钮的颜色"
round 控制是否是胶囊按钮
bind:doubletap="doubleTapEvent" 监听双击事件
></mybutton>
```

#### 自定义组件的基础步骤

1. 新建组件四件套。

2. 在`wxml`、`wxss`中编写组件的默认结构及样式。

3. 在`page.json`中引入该组件，就可以直接使用自定义标签显示该组件了

微信小程序 `Unit09`

小程序自定义组件

<mybutton value="设置按钮上的文本"
          color="控制按钮的颜色"
          round     控制是否是胶囊按钮
          bind:doubletap="doubleTapEvent"  监听双击事件>
</mybutton>

自定义组件的基础步骤

新建组件四件套。

components/mybutton/mybutton.js
components/mybutton/mybutton.json
components/mybutton/mybutton.wxml
components/mybutton/mybutton.wxss
在wxml、wxss中 编写组件的默认结构及样式。

<view class="btn">默认按钮</view>
定义.btn样式即可
在page.json中引入该组件，就可以直接使用自定义标签显示该组件了

在json中引入组件：

{
  "usingComponents": {
    "mybutton": "/components/mybutton/mybutton"
  }
}
在wxml中使用组件：

<mybutton></mybutton>

为组件添加自定义属性

组件.js声明组件属性

Component({
  /** 组件的属性列表 */
  properties: {
    color: {
      type: String,
      value: \'#33c\'
    },
    value: {   // 当前组件设计一个属性：value
      type: String,   // value属性的类型：String
      value: \'默认按钮\'  // value属性的默认值：默认按钮
    }
  },
}

组件.wxml中使用组件属性，动态设置内容

<view class="btn" >{{value}}</view>

page.wxml中使用组件时，设置属性

<mybutton value="登录" color="#a33"></mybutton>
<mybutton value="注册" color="#3a4"></mybutton>

`Vant`组件库

安装Vant组件库的必要步骤：

下载vant。
通过小程序开发工具构建npm，将下载好的vant源码编译到小程序项目中，否则是不会带着vant一起打包编译的。

初始化配置`vant`的详细步骤：

1.通过 npm 安装

# 进入xzyycloud目录下， 使用cmd执行以下命令
npm init   # 一路回车即可生成package.json
npm i @vant/weapp -S --production
修改 app.json

2.将 app.json 中的 "style": "v2" 去除。
修改 project.config.json：

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}
使用组件：

3.在json中引入组件：

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
4.在wxml页面中使用组件：

<van-button type="primary">文本</van-button>

基于`Vant`组件库搭建`/me`的页面结构

封面、头像、昵称。
cell。

实现微信登录

微信小程序提供了 wx.getUserProfile() 方法实现获取微信用户信息。

wx.getUserProfile({
    desc: \'告诉用户为何需要用户信息\',
    success: (res)=>{
        获取结果
    }
})

实现步骤：

为text绑定tap事件，在事件处理函数中调用该方法获取用户信息。
获取用户信息后，更新界面。

微信登录业务流程

用户通过微信提供的API执行登录业务，获取昵称和头像等用户信息。

一定要将该用户信息存入自己家数据库中。（mysql，云数据库）

id   nickName        avatarUrl       city    ...
1       徐铭      https:/xxxxx    ....    ...

这样未来才可以对自己家数据库中的用户信息进行管理（删、改、查）

实现步骤

创建一个新的云数据库集合：users，用于存储用户信息。

当微信登录成功后，执行“注册业务”，将用户信息存入users集合中。

当下次登录时，提供了权限后，去自己家users集合中找一找有没有当前用户：

如果有，则直接获取最新信息，更新界面。

如果没有，则向users集合中新增用户。

实现修改头像功能

简易版实现流程

点击头像后，跳转到新的页面选择新头像图片。
```
wx.chooseImage()
```
选择完毕后，点击确定，获取选中的头像图片路径，更新界面。

标准版实现流程

想要随时可以看到以前修改过的头像，就必须将新头像的路径存入数据库。所以需要将头像图片上传至服务器，获取一个可以随时访问的外链地址，将该地址存入数据库才可以。

将选择的图片上传至云存储空间，并获取访问地址。
将访问地址更新到云数据库。userInfo.avatarUrl。
下次登录时，直接访问users集合，拿到的路径就是最新的云存储头像路径，这样就可以访问到新头像了。

云存储

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。

在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。下面简单的几行代码，即可实现在小程序内让用户选择一张图片，然后上传到云端管理的功能：

wx.cloud.uploadFile({
    filePath: "本地文件路径",
    cloudPath: "云端文件路径（注意防止命名重复）",
    success: (res)=>{ .... 返回上传结果：包含访问地址 }
})

云函数

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。

小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文（appid、openid 等），无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（openid）。

使用云函数

在小程序开发工具中的cloudFunctions目录下 ，新建云函数。

右键cloudFunctions，设置云函数名称。

编写云函数代码。

在小程序开发工具中一键部署到云端。

右键云函数文件夹，选择上传并部署：云端安装依赖。

在小程序端（使用wx.cloud.callFunction()）进行云函数的调用。

上一篇 »php 微信小程序支付
下一篇 »[微信小程序] 认识微信小程序及开发环境搭建

微信小程序

微信小程序 Unit01

HTTP协议的状态管理

cookie机制

session机制

Token机制

微信小程序

微信公众平台

接入微信小程序

小程序项目的文件结构

app.json

pages配置项

window配置项

tabbar配置项

style

sitemapLocation

app.wxss

app.js

小程序组件

view组件

微信小程序 Unit02

小程序组件

view组件

image组件

wxss(weixin style sheets)

swiper组件

text组件

navigator组件

scroll-view组件

input组件

微信小程序 Unit03

input组件

小程序表单组件的双向数据绑定

Vue的双向数据绑定示例如下：

小程序的双向数据绑定

WXML语法基础

内容动态绑定

属性动态绑定

样式动态绑定

列表动态渲染

wx:key

条件动态渲染

组件

button组件

radio-group组件

小程序的事件处理

小程序中的事件类型

小程序的事件绑定机制

微信小程序 Unit04

小程序的事件处理

小程序中的事件类型

小程序的事件绑定机制

小程序中事件参数的传递

小程序API

界面交互类API

路由跳转类API

wx.navigateTo()

小程序的生命周期

小程序页面的生命周期

小程序应用的生命周期

globalData全局数据存储区

微信小程序 Unit05

小程序网络类API

wx.request()

在小程序后台管理网站中配置服务器域名

腾讯视频

初始化项目

初始化加载电影列表

实现点击顶部导航更新选中样式并刷新列表

实现触底分页加载列表业务

onReachBottom()

封装loadData方法

小程序缓存设计方案

什么是缓存？

切换顶部导航时的缓存方案的实现

微信小程序 Unit06

小程序缓存设计方案

什么是缓存？

切换顶部导航时的缓存方案的实现

基于下拉刷新实现列表缓存的更新

微信小程序 `Unit01`

`HTTP`协议的状态管理

`cookie`机制

`session`机制

`Token`机制

`app.json`

`pages`配置项

`window`配置项

`tabbar`配置项

`style`

`sitemapLocation`

`app.wxss`

`app.js`

`view`组件

微信小程序 `Unit02`

`view`组件

`image`组件

`wxss(weixin style sheets)`

`swiper`组件

`text`组件

`navigator`组件

`scroll-view`组件

`input`组件

微信小程序 `Unit03`

`input`组件

`Vue`的双向数据绑定示例如下：

`WXML`语法基础

`wx:key`

`button`组件

`radio-group`组件

微信小程序 `Unit04`

小程序`API`

界面交互类`API`

路由跳转类`API`

`wx.navigateTo()`

`globalData`全局数据存储区

微信小程序 `Unit05`

小程序网络类`API`

`wx.request()`

`onReachBottom()`

封装`loadData`方法

微信小程序 `Unit06`

通过电影`ID`查询电影详情接口

关系型数据库与`json`类型数据库的区别

`json`类型数据库

微信小程序 `Unit07`

关系型数据库与`json`类型数据库的区别

通过`where`添加筛选条件，查询多条记录

微信小程序 `Unit08`

微信小程序 `Unit09`

`Vant`组件库

初始化配置`vant`的详细步骤：

基于`Vant`组件库搭建`/me`的页面结构

微信小程序生成小程序码

微信小程序图片查看