微信小程序制作

微信公众平台 

• 微信公众平台是由腾讯提供的，基于腾讯的微信服务器，为广大的企业、组织或个人提供用户管理或咨询服务的平台。微信公众号平台提供的账号类型有：

                        1、服务号：给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。

                        2、订阅号：为媒体和个人提供一种新的信息传播方式，构建读者之间更好的沟通与管理模式

                        3、小程序：一种新的开放能力，可以在微信内被编辑的获取和传播，同时具有出色的使用体验

接入微信小程序

• 在微信聊天列表界面，完成下拉操作即可跳出一打开的微信小程序列表。若没有打开过任何小程序，可以点击搜索按钮搜索，选择后进入微信小程序。
• 接入微信小程序步骤如下：

                                                        1、在微信公众平台注册开发者账号

                                                        2、填写注册信息

                                                        3、填写用户登记信息

                                                        4、填写小程序信息

安装熟悉开发环境

• 开发微信小程序需要使用微信官方提供的IDE（集成开发工具），使用步骤如下：

                                                        1、访问官方网站，下载最新版开发工具

                                                        2、安装开发工具

                                                        3、创建项目

• 打开小程序开发工具，通过齿轮图标（设置）可以修改白色主题，点击 + 可以新建项目
• 先写项目信息，创建小程序。

                                                注意：项目目录严禁出现中文或空格并选择不使用云服务

微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/

小程序文件组成

开发工具：

1、小程序的文件类型有：

• .json，配置文件

                app.json：全局配置

                page.json：页面配置，其优先级高于全局配置

• .wxml，模板文件，其类似于网页开发中的HTML

                不能使用任何的HTML标签，只能使用小程序专用的组件

• .wxss，样式文件，其类似于网页开发中的CSS

                app.wxss，全局样式

                page.wxss，页面样式，其优先级高于全局样式

• .js，脚本文件

                app.js，小程序的入口脚本文件

                page.js，页面的脚本文件

        app.json、app.wxss、app.js文件必须储存在小程序的跟目录下

• app.json用于对小程序进行全局配置。配置app.json，来定义小程序全局的效果。常用配置属性如下：

                        1.pages属性：pages属性用于指定小程序由哪些页面组成，每个页面由 .json、 .wxml 、 .wxss和 .js组成

：谁在前谁显示，只能创建新的文件，并不能删除新的文件，需要在目录树中自己删除

                        2.window属性：用于设置小程序导航栏、标题、窗口背景颜色等信息，object类型。

 "window":{

    "navigationBarTitleText": "Weixin",                 //标题文本

    "navigationBarBackgroundColor": "#fff",        //标题栏背景颜色 （只认定#十六进制颜色）

    "navigationBarTextStyle":"black"，                //标题文本颜色（white | black）

    "enablePullDownRefresh":true，                  //开启下拉刷新（true | false）

    "backgroundTextStyle":"light"，                    //下拉刷新loading的样式（light | dark）

    "backgroundColor":"#eee"，                     //下拉刷新窗口的背景颜色

  },

                                        

                        3.tabBar属性：用于配置小程序底部的选项卡，object类型

                                                list中至少包含2-5个选项卡；pagePath不能以/开头；

                                                iconPath 和 selectedIconPath 不能使用网络路径；

                                                图片尺寸建议为81x81，字节数不能超过40KB

 "tabBar":{

    "position": "选项卡的位置（top | bottom）",         //一般为bottom   

    "color": "文本正常显示的颜色",       

    "selectedColor":"文本被选中时的颜色"，           

    "backgroundColor":"底部选项卡的背景颜色"，              

    "borderStyle":"选项卡上边框的颜色（black | white）"，                  

    "list":[ ... ]      //在list中配置每个选项卡的基本信息       

  },

 "list":[

 {

    "text": "文本内容",         

    "pagePath": "页面的路径",       

    "iconPath":"正常显示时的图片路径"，           

    "selectedIconPath":"被选中时的图片路径"                    

  }

]

                                                

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/cart/cart",
    "pages/me/me",
    "pages/theatre/theatre"
  ],
  "window":{
    "enablePullDownRefresh":true,
    "backgroundColor": "#eee",
    "backgroundTextStyle":"dark",

    "navigationBarBackgroundColor": "#a00",
    "navigationBarTitleText": "学子影院",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "borderStyle": "black",
    "color": "#222",
    "selectedColor": "#a00",
    "position": "bottom",
    "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": "v2",
  "sitemapLocation": "sitemap.json"
}

     

                        4.style属性：用于指定样式，目前值仅为v2（要求基础库版本>=2.8），string类型

        siteMapLocation属性：用于指定sitemap.json文件的位置，string类型 

        siteMap配置：微信开放小程序内搜索，开发者可以通过sitemap.json配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。

        siteMap.josn用于制定爬虫的搜索规则，其基本结构是：

{

     "rules":[

        {

              "action":"动作类型（allow | disallow）",        //允许或不允许

              "page":"页面路径",

              "params":["路径参数1","路径参数2"],                

              "matching":"匹配规则（exact | inclusive | exclusive | partial）"

        }

   ]

}

路径参数指：pages/article/article?cid=6&order=time 中的cid和order

matching的规则包括：

                                    exact            完全相同

                                    inclusive      包含

                                    exclusive     不包含

                                    partial          部分包含

siteMap配置示例，若如下图所示配置，则：

 path/to/page?a=1&b=2  命中

 path/to/page?a=1&b=2&c=3 命中  （因为上面的matching为inclusive）

                        5.JSON文件不能书写注释

                        6.字符串必须括在英文双引号之间

                        7.数组中最后一个成员后不能存在逗号

                        8.JSON中不能存在undefined数据类型（可以用null）

小程序组件库

小程序官方提供了组件库用于渲染基本页面结构。除此依然有一些团队开发了第三方组件库。小程序官方提供的组件库主要包括以下部分：

• 试图容器类
• 基础内容类
• 表单组件
• 导航
• 媒体相关
• 地图
• 画布

小程序官方提供了小程序组件库演示项目，在微信中搜索”小程序示例“即可

小程序提供的组件基本语法如下：

        <组件名

                组件属性 = "组件属性值"

                组件属性 = "组件属性值"

                组件属性 = "组件属性值"

       

• 小程序中的组件既遵守驼峰标记法(hoverClass)，也遵守短横线分隔法(hover-class)
• 布尔类型的数据无论其值为多少，结果都认为是true，除非该属性不存在；动态属性时只能使用true或false来表示

View组件

组件为视图容器组件，其语法结构是：

        hover-class:"按下去的WXSS样式类名称"

        hover-start-time="多久后出现点击状（50）"

        hover-stay-time="点击状保持的时长（400）"

        hover-stop-propagation="是否阻止冒泡"> 

        //冒泡：点击子view时，父view也出现点击态，但不论设置true还是false时，都会有该效果；是因为该属性类型是boolean，上面的属性类型都是string；但是对于标签来说，我们引入一个属性，对属性赋值使用双引号，双引号内部永远都是字符串型，对于字符串“true”和“false”，boolean类型永远都会解析为ture；若写的是空字符串 "",则会被解析为false

还有一个方法就是利用双花括号：

hover-stop-propagation="{ {ture} }"        /true

hover-stop-propagation="{ {false} }"      /false

        . . .

案例：

• 编写view组件，测试view组件的属性效果，步骤如下
  • 在pages中新增一页
  • 找到wxml，新增view组件
  • 测试view属性效果       

app.json
    "pages":[
        "pages/testing/view/view",
        "pages/index/index",
        "pages/logs/logs",
        "pages/cart/cart",
        "pages/me/me",
        "pages/theatre/theatre"
      ],

view.wxml
     
          
     

view.wxss
    .myview{
      margin-top: 10px;
      width: 200px;
      height: 200px;
      border: 1px solid black;
      background-color: #eee;
    }
    .myhoverview{
      background-color: cornflowerblue;
    }
    .mychild{
      width: 100px;
      height: 100px;
      margin: 30px;
      border: 1px solid black;
      background-color: darkcyan;
    }
    .myhoverchild{
      background-color: firebrick;
    }

image组件

组件为图片组件，支持GIF、JPG、PNG、SVG和WEBP等图像格式，其语法结构是：

       

                        src = "图片的url地址"                //本地路径和网络路径都可以

                        lazy-load = "是否采用懒加载"    //boolean类型属性

                        show-menu-by-longpress = "长按是否显示识别小程序码的菜单"

                        mode = "图像裁切及缩放模式">

       

 组件的默认图像大小为320x240

组件的mode属性用于指定图片裁剪、缩放的模式，常用的有如下几种：

• scaleToFill 
• aspectFit（尽量选择）
• aspectFill（尽量选择）
•  组件还有一些不常用的mode组件设置如下：

        widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

        heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

        top：裁剪模式，不缩放图片，只显示图片的顶部区域

        bottom：裁剪模式，不缩放图片，只显示图片的底部区域

        center：裁剪模式，不缩放图片，只显示图片的中间区域

        left：裁剪模式，不缩放图片，只显示图片的左边区域

        right：裁剪模式，不缩放图片，只显示图片的右边区域

        top left：裁剪模式，不缩放图片，只显示图片的左上边区域

        top right：裁剪模式，不缩放图片，只显示图片的右上边区域

        bottom left：裁剪模式，不缩放图片，只显示图片的左下边区域

        bottom right：裁剪模式，不缩放图片，只显示图片的右下边区域

• 为了在不同的设备适配图像宽度，需要按照图片宽高与屏幕宽度来计算高度。小程序为了适配方便，在wxss中提供了rpx来替代px。
• rpx(Responsive Pixel)，响应式像素，可以根据屏幕分辨率进行自适应。

设备	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

无论任何屏幕宽度为750rpx

swiper组件

• 滑块视图容器(轮播图)。其中只可放置swiper-item组件，否则会导致未定义的行为。其语法结构是：

                autopaly="是否自动播放"

                indicator-dots="是否显示指示标志"

                indicator-color="指示标志正常显示的颜色"

                indicator-active-color="提示标志被选定时的颜色"

                circular="是否采用衔接滑动"

                interval="自动切换的时间间隔"

                duration="切换的时长">

                . . .

                . . . 

app.json
    "pages":[
    "pages/testing/swiper/swiper",
    "pages/index/index",
    "pages/logs/logs",
  ],

swiper.wxml
    
  
  
  

  
  
  

  
  
  


swiper.wxss
    swiper image{
  /* 如果把height写死的话，换成不同的设备，图片不一定能完整的显示,
此时我们可以用比例计算height：原图的宽:现图的宽 = 原图的高:现图的高，
就可以求出现在我们应该设置的height为多少了；但是显示的图片不仅仅只跟
image有关，还要设置相应的swiper的height，否则在不同设备中效果依旧不同*/
  width: 750rpx;  height: 220.7rpx; }
swiper{ height: 220.7rpx; }

text组件

• text组件用于显示文本（类似html中的span标记，行级标签）。小程序提供了以下常用属性：
  • user-select：文本是否可被选中，该属性会使文本节点显示为inline-block       
  • space：显示连续空格（没有加这个属性时，文本中有多个空格在小程序页面内只会显示一个空格，要想显示文本中所有的空格，添加该属性）
  • decode：是否解码；由于文章内大于小于号引号会与标识符冲突，所以设置了这些并且需要解码才能够表现出来

后有一个换行，如果贴着写，在页面中不会显示换行。

  

注意：在 text 组件中写 image 是无效的 

scroll-view组件

• 可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过wxss设置height。组件属性的长度单位默认为px，其基本语法结构如下：

                        //全部为boolean类型数据

                        scroll-x = "是否允许水平滚动"

                        scroll-y = "是否允许垂直滚动"

                        enable-flex = "是否启用flex布局"

                        enhanced = "是否启用增强特性"

                        showScrollbar = "是否显示滚动条"> //想要启动该属性，就必须要开启enhanced属性：enhanced = "true"

                        . . .

scrollview.wxml
 
  
  
  吴磊
  
  
  
  吴磊
  
  
  
  吴磊
  
  
  
  吴磊
  
  
  
  吴磊
  
  
  
  吴磊
  
  
  
  吴磊
  


scrollview.wxss
    .scroll{
      display: flex;
     }
    .item{
      width: 100px; height: 160px; margin: 10px 10px;
    }
    .item text{
      display: block;text-align: center;
    }

navigator组件

• 组件是页面链接组件，其语法结构是：

                        url = "当前小程序内的页面路径"

                        open-type = "跳转方式"

                        hover-class = "按下去的wxss样式类名称"

                        hover-start-time = "多久后出现点击状（50）"

                        hover-stay-time = "是点击状保持的时长（600）"

                        hover-stop-propagation = "是否阻止冒泡"> 

                        . . .

• 组件的open-type的可选项如下：
  • navigate：默认的跳转方式，称为保留跳转。可以跳转到非tabBar页面（tabBar页面：包含底部选项卡的，例如：/index /me /theatre；除此之外其他页面称为非tabBar页面），保留跳转将会新建目标页面面后跳转。可以带有url参数
  • navigateBack：返回上级页面，此时需要配合dalta属性使用（可以回到上一页，也可以回到上上页）
  • switchTab：可以跳转到tabBar页面，会导致关闭所有的非tabBar页面
  • redirect：关闭当前页面，重向定向到非tabBar页面，可以带有url参数
  • reLaunch：关闭所有页面跳转到指定页面（包括tabBar页面），可以带有url参数

注意：小程序最多只能跳转10个页面。

           点击返回时，该页面会销毁自身，

           回到上上页时，上一页去哪了？——这两页都会被销毁

app.json
    "pages":[
    "pages/testing/a/a",
    "pages/testing/b/b",
    "pages/testing/c/c",
    "pages/testing/scrollview/scrollview",
    "pages/testing/text/text",
    "pages/testing/swiper/swiper",
    "pages/testing/image/image",
    "pages/testing/view/view",
    "pages/index/index",
    "pages/logs/logs",
    "pages/cart/cart",
    "pages/me/me",
    "pages/theatre/theatre"
  ],

a.wxml
    
    我是A，点我navigator到B。
    

b.wxml
    
    我是B，点我navigator到C。
    
    
    我是B,点我redirect到C。
    

c.wxml
    
    我是C，点我navigator到A。
    
    
    我是C，点我回到B。
    
    
    我是C，点我回到A。
    
    
    我是C，点我回到index。
    
    
    我是C，reLaunch到index，这个过程将销毁所有非tabBar页面。
    

input组件（最好用真机测）

• 组件用于收集用户数据，其语法结构是：

                        type = "输入框类型"

                        placeholder = "占位符内容"

                        value = "初始内容"

                        password = "是否为密码"

                        maxlength = "最大长度"

                        focus = "是否自动获取焦点"

                        bindinput = "输入时触发的函数名称（只写函数名称，坚决不能带小括号）"

                        bindfocus = "获得焦点时触发的函数名称"

                        bindblur = "失去焦点时触发的函数名称"> 

• 组件输入框的类型常见有如下选择

值	说明	最低版本
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

                                        

input.wxml
    测试input组件
    
    
    
    
    
    
    

input.wxss
    input{
      margin: 10px; padding: 5px; border: 1px solid gray;
    }

• 小程序提供了confirm-type属性用于控制当在input组件中输入内容时原生键盘右下角提交按钮的样式。可选项有如下几项：

值	说明	最低版本
send	右下角按钮为”发送“
search	右下角按钮为”搜索“
next	右下角按钮为”下一个“
go	右下角按钮为”往前“
done	右下角按钮为”完成“

                                                                                

• 在小程序中对于如何获取input组件中输入的内容有特殊的处理办法。具体步骤如下：
  • 为input组件绑定bindinput事件
  • 编写监听方法，监听input的改变
  • 获取在input组件填写的内容，存入data属性中
  • 未来需要文本框的内容时去data中找

 案例：新建页面测试input组件的使用，测试步骤如下：

• 新增页面testing/input/input
• 编写input组件
• 为input绑定事件，在后台输出input组件的值

获取触发input事件的表单组件的value时，必须在事件处理函数中带有`event`参数，该参数代表事件对象，可以通过该对象的`detail`属性获取相关的信息，示例代码如下：

Page({

        inputEvent(event){

                console.log(event.detail.value) 

        }

})

在文本框中，每输入一个字母，都会有对应的事件触发，可以在调试器中看到并且根据detail找到数据

 

 输出event.detail.value，可以在调试器中拿到任意时刻的值

双向数据绑定

• 小程序表单组件的双向数据绑定方式稍稍复杂一些，步骤如下：
  • 为input组件绑定input事件

  • 在监听方法中更新data属性

    • Page({
        data: {
              val:''
        },
        inputEvent(event){
          this.setData({
              val : event.detail.value
              })
        }
      })

    • this.setData()中，this：当前小程序的配置对象
  • 在页面中使用{ { } }访问data变量

    • {{val}}

 在text文本框中输入什么内容，“ input：”这行就会实时更新什么内容，这就是双向数据绑定

 

radio-group组件

• 组件为单选框群组组件，其语法结构是：

 

         . . .  

• 组件双向数据绑定实现步骤如下：
  • 为radio-group组件绑定bindchange事件

    
      A.选项A内容
      B.选项B内容
      C.选项C内容
      D.选项D内容
    

  • 处理input事件，修改data属性

    /* 当前修改单选按钮的选中项后触发 */
    changeRadio(event){
        console.log(event.detail.value)
        this.setData({
          val:event.detail.value
        })
      },

  • 在页面中使用{ { } }引用data属性

    您选择的是：{{val}}

checkbox-group组件

• 组件为复选框群组组件，其语法结构是：

 

         . . .  

        . . .

checkboxgroup.wxml
    【多选】请选择您的爱好：
    
      健身
      游泳
      瑜伽
      拉丁
    
    您选择的爱好有：{{val}}

checkboxgroup.js
     /*** 页面的初始数据 */
  data: {
    val : ['健身']
  },
/* 当修改多选框选中状态时触发事件 */
  changeCheckbox(event){
    console.log(event.detail.value);
    this.setData({
      val:event.detail.value
    })
  },

checkboxgroup.wxss
    checkbox{
      display: block; margin: 10px;
    }

switch组件

• 组件为开关组件，其语法结构是：

                        check = "是否被选定"

                        color = "颜色"

                        type = "样式（switch | checkbox）"

                        bindchange = "选定项发生改变时触发的函数名称"> 

                        . . .

switch.js
    data: {
    flightOn: false
      },

  /* 当更改开关状态时触发 */
  changeSwitch(event){
    console.log(event.detail.value);
    this.setData({
      flightOn:event.detail.value
    })
  },

switch.wxss
    .line{
      margin: 10px; line-height: 32px;
    }
    .line switch{
      float: right;
    }

switch.wxml
    
      打开飞行模式
      
    
    当前飞行模式的状态:{{flightOn?'打开':'关闭'}}

WXML基础

• 我们已经在wxml中编写过组件，也使用 { { } } 引用过data中的属性数据。接下来介绍一下wxml中各种语法的使用场景：
  • 内容绑定

    • { {变量名称} }
    • 姓名：{ {username}}   (username要现在data内声明)
    • 

  • 属性绑定

    • <组件名称  属性名称 = "{ {变量} }"> . . .

    •   
      
      . . . 
        

      

  • 样式绑定

    • <组件名称 class = "{ {变量名称} }"> . . .   
      • 
    • <组件名称 style = "{ {变量名称} }"> . . .
      • 
    • 注意：发现在wxss中定义的背景图片无效
    • 在 text 组件中写 image 是无效的 

  • 列表渲染

    <组件名称 

                    wx: for = "{ {变量名称} }"

                    wx: for-item = "成员变量名称"

                    wx: for-index = "成员索引变量名称"

                    wx: key = "index">

                    . . .

    • 默认的成员变量名称是 item，默认的成员索引变量是 index
    • 

  • 条件渲染 

    • 条件渲染的使用方式有如下几种： 

    <组件名称  wx:if = "{{条件表达式}}">
        ...
    
    
    
    
    
    <组件名称  wx:if = "{{条件表达式}}">
        ...
    
    <组件名称  wx:else>
        ...
    
    
    
    
    <组件名称  wx:if = "{{条件表达式}}">...
    <组件名称  wx:elif = "{{条件表达式}}">...
    ...
    <组件名称  wx:else>...
    
    

  • 列表渲染与条件渲染的示例如下：
    • 
    •   

 
 
 

  姓名：{{username}}
  年龄：{{age}}
  性别：{{gender}}
  学校名称：{{school.name}}
  学校地址：{{school.loc}}



  学历：
  专科
  本科
  研究生
  博士生
  


    
{{item}}


/* pages/testing/wxml/wxml.wxss */
image.small{
  width: 50px; height: 70px; margin: 10px;
}
image.big{
  width: 100px; height:140px; margin: 10px;
}
.avatar-view{
  display: inline-block; width: 100px; height: 140px; margin: 10px; 
  background-size: 100px 140px;  /* 改变图片的尺寸 */
  background-image: url(data:image/jpeg;base64,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);
}
.hobby-item{
  display: inline-block; margin-left: 10px; border: 1px solid black; 
  background-color: #33a; padding: 0px 10px; color: white;
}

// pages/testing/wxml/wxml.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    education: 4,
    size: 100,
    avatarClass:'big',
    pic: 1,
    username:'然然',
    age:18,
    gender:'男',
    hobby:['健身','游泳','瑜伽'],
    school:{
      name:'北京大学',
      loc:'北京海淀'
    }
  },

  /* 当点击图片后触发 */
  tapImage(){
  //修改pic的值 1->2 2->3 3->1
  this.setData({
    // 动态引入变量
    pic: this.data.pic % 3 +1
  })
  },
...
)}

• 在wxss中无法使用url定义背景图片的路径，可通过网络路径或使用base64的方式进行替代。

  • .container{
        width:750rpx;
        height:100px;
        background-image:url(http://www.tmooc.cn/static/logo.png);   
    }
    
    
    .container{
        width:750rpx;
        height:100px;
        background-image:url(
            data:image/png;base64,iVBORw0KAANSUhEUgAAAM);   
    }

  • 
  • 图片转 BASE64 编码 | 菜鸟工具Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。 Base64 常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。 图片的 BASE64 编码就是可以将一幅图片数据编码成一串字符串，使用该字符串代替图片地址，从而不需要使用图片的 URL 地址。 图片转 BASE64 编码工具提供了 PNG 转换 Base64，GIF 转换 Base64，JPEG..https://c.runoob.com/front-end/59/（在这里可以将图片转换为base64）
  • 

事件基础

button组件

• button组件用于显示按钮，其基本结构为：

                        type = "按钮类型（defaule | primary | warn）"

                        size = "按钮尺寸（default | mini）"

                        plain = "是否为镂空"

                        disabled = "是否禁用"

                        loading = "是否加载图标"> 

                        . . .

小程序事件

• 事件是视图层到逻辑层的通讯方式
• 事件可以将用户的行为反馈到逻辑层进行处理
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
• 事件对象可以携带额外信息，如：id，dataset，touches

小程序事件管理

• 若需要为组件绑定事件，小程序提供了如下三种方法：
  • bind  事件名
  • bind: 事件名
  • catch: 事件名

<组件名称    bind事件名称 = "事件处理函数名臣"> . . .

<组件名称    bind:事件名称 = "事件处理函数名臣"> . . .

<组件名称    catch:事件名称 = "事件处理函数名臣"> . . .

• 特点：
  • 自基础库版本1.5.0起，在大多数组件和自定义组件中，bind后可以紧跟一个冒号，其含义不变，如 bind:tap 。基础库版本2.8.1 起，在所有组件中开始提供这个支持。
  • bind事件名称和 bind: 事件名称不能阻止事件冒泡。而catch事件名称可以阻止事件冒泡。

案例：编写测试代码测试三种绑定事件的方式与小程序时间管理的特点

  



// pages/testing/event/event.js
 tapInner(){
    console.log('tapInner..');
  },
  tapOuter(){
    console.log('tapOuter..');
  },

/* pages/testing/event/event.wxss */
.outer{
  width: 200px; height: 200px; border: 1px solid black;
}
.inner{
  width: 100px; height: 100px; border: 1px solid red; margin: 50px;
}

 

小程序事件分类

•  事件分为冒泡事件和非冒泡事件：
  • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。事件 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
  • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

小程序事件传参

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

        按钮

       

• 此时将会出现问题：如何进行参数的动态传递？
• 小程序针对冒泡事件与非冒泡事件有不同的处理

冒泡事件传参：

• 先在组件上通过 data-* 属性绑定需要传递参数，示例：

        小米  2999.0   京东

• 在组件的事件处理函数中接收event事件对象，通过event.target.dataset.*从事件源对象中获取data-*绑定的参数，如：

tapEvent(event){

//当前触发事件的事件源对象中绑定的data-id属性值

        let  id = event.target.dataset.id

        let name = event.target.dataset.name

}

  
    商品名称：{{item.name}}
    商品单价：{{item.price}}
    商品数量：{{itme.num}}
  
  删除


/* pages/testing/eventparams/eventparams.wxss */
.item{
  margin: 10px; padding: 0px 10px;
}

// pages/testing/eventparams/eventparams.js
Page({

  /*** 页面的初始数据 */
  data: {
    products:[{
      name: '小米',
      price: 2999,
      num: 2,
    },{
      name: '华为',
      price: 5999,
      num: 3
    },{
      name: 'Oppo',
      price: 4999,
      num: 5
    },{
      name: '苹果',
      price: 6999,
      num: 4
    }]
  },
/* 点击删除按钮后执行 */
  tapDel(event){
    let index = event.target.dataset.index;
    // 删除该index位置的元素
    let prolist = this.data.products;
    prolist.splice(index,1);
    // 更新页面需要把prolist替换掉data中的products
    this.setData({
      products: prolist
    })
  },
...
})

非冒泡事件传参：

• 非冒泡时间参数一般分装在 event.detail 属性中：

获取文本输入框中的内容的语法：  event.detail.value      ==>  "xxx"

获取picker中当前选中的项的语法：   event.detail.value     ==>  0  |  [1,2]

获取switch中当前状态的语法：      event.detail.value      ==>  true |  false

实现TODOLIST小程序

待办事项列表
  


  
  添加新事项




  
  提示：当前没有待办事项
  

  
  
  {{index+1}}.{{item}}
  删除
  
  




/* pages/testing/todo/todo.wxss */
.h1{
  font-size: large; font-weight: bolder;
}
.todo-header{
  float: left;  margin: 10px 0px;
}
.todo-header input{
  width: 220px; height: 30px; border: 1px solid gray;
}
.todo-header button{
  width: 150px; height: 28px;line-height: 14px;margin: -30px 0px 0px 224px;
}
.todo-list-item{
  margin: 20px 0px;
}
.todo-list-item button{
  width: 100px;
  float: right;
}


// pages/testing/todo/todo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    todolist:['一点半开会','发邮件','聚餐'],
    val : ''
  },
  
  inputEvent(event){
    this.setData({
      val:event.detail.value
    })
  },

  tapEvent(event){
    let val = this.data.val;
    if(val.trim()==''){
      return;
    }
    /* 追加到当前todolist中 */
    let list = this.data.todolist;
    list.push(val);
    /* 更新页面 */
    this.setData({
      todolist: list,
      val:''  /* 添加完后文本框内容清空 */
    })
  },

  tapDelEvent(event){
    let index = event.target.dataset.index;
    //删除元素
    let list = this.data.todolist;
    list.splice(index,1);
    //更新列表
    this.setData({
      todolist: list
    })
  },
...
})

 微信交互类API

• 为了更好的用户体验，小程序提供了一些交互相关API，常用的有：
  • wx.showToast()

    • 属性	类型	默认值	必填	说明
      title	string		是	提示的内容
      icon	string	'success'	否	图标
      image	string		否	自定义图标的本地路径，image的优先级高于icon
      duration	number	1500	否	提示的延迟时间
      mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透

    • 
  • wx.hideToast()

    • 属性	类型	默认值	必填	说明
      success	function		否	接口调用成功的回调函数
      fail	function		否	接口调用失败的回调函数
      complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

  • wx.showLoading()

    • 属性	类型	默认值	必填	说明
      title	string		是	提示的内容
      mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
      success	function		否	接口调用成功的回调函数
      fail	function		否	接口调用失败的回调函数
      complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

  • wx.hideLoading()

    • 属性	类型	默认值	必填	说明
      success	function		否	接口调用成功的回调函数
      fail	function		否	接口调用失败的回调函数
      complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

  • // pages/testing/todo/todo.js
    tapEvent(event){
        let val = this.data.val;
        if(val.trim()==''){
          return;
        }
        //添加之前（模拟发请求之前）先显示一个loading对话款
        wx.showLoading({
          title: '添加中，请稍后...',
          mask:true
        })
        /* 追加到当前todolist中 */
        let list = this.data.todolist;
        list.push(val);
        /* 更新页面 */
        this.setData({
          todolist: list,
          val:''  /* 添加完后文本框内容清空 */
        })
        wx.hideLoading()
        //调用微信提供的方法，弹出吐司提示框
        wx.showToast({
          title: '添加成功',
          duration: 5000,  //5s
          icon:"success",
          mask:true //为true时，后面的删除按钮是不可以点击的
        })
      },
    
      tapDelEvent(event){
        wx.showLoading({
          title: '删除中，请稍后',
          mask:true
        })
        let index = event.target.dataset.index;
        //删除元素
        let list = this.data.todolist;
        list.splice(index,1);
        //更新列表
        this.setData({
          todolist: list
        })
        wx.hideLoading()
      },

  • wx.showActionSheet()
  • wx.showModal()

    • 属性	类型	默认值	必填	说明
      title	string		是	提示的内容
      content	string		否	提示的内容 .editable 为true时，会输入框默认文本
      editable	boolean	false	否	是否显示输入框
      placeholderText	string		否	输入框提示文本
      showCancel	boolean	true	否	是否显示取消按钮
      cancelText	string	'取消'	否	取消按钮的文字，最多4个字符
      cancelColor	string	#000000	否	取消按钮的文字颜色，必须是16进制格式的颜色字符串
      confirmText	string	'确定'	否	确定按钮的文字，最多4个字符
      confirmColor	string	#576B95	否	确定按钮的文字颜色，必须是16进制格式的颜色字符

      // pages/testing/todo/todo.js
      tapDelEvent(event){
          //弹出模态对话框，询问用户，是否确认删除？
          wx.showModal({
            title:'提示',
            content:'确认删除吗？',
            showCancel:true,
            cancelText:'放弃不删',  /* 不能超过四个字符 */
            cancelColor: 'cancelColor',
            confirmText:'残忍删除',
            confirmColor:'#f00',
            success:(result)=>{
              if(result.confirm){
              wx.showLoading({
                    title: '删除中，请稍后',
                    mask:true
                  })
              let index = event.target.dataset.index;
              //删除元素
              let list = this.data.todolist;
              list.splice(index,1);
              //更新列表
              this.setData({
                todolist: list
              })
              wx.hideLoading()
              }
            }
          })
        },

 微信路由API

• 微信提供了与navigator组件相同功能的路由API用于完成页面之间的跳转逻辑。主要有以下5个方法：
  • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面，小程序中页面栈最多十层。
  • wx.navigateBack()
  • wx.switchTab()
  • wx.redirectTo()
  • wx.reLaunc()

跳转到B
选择城市：{{city}}

// pages/testing/wxa/wxa.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    city:'未选择'
  },

  tapToB(){
    wx.navigateTo({
      url: '/pages/testing/wxb/wxb',
    })
  },

  tapToChooseCity(){
    wx.navigateTo({
      url: '/pages/testing/wxb/wxb',
      events:{
        acceptCityFromB:(data)=>{
          this.setData({
            city:data
          })
        }
      }
    })
  },
...
})


北京
杭州
上海
深圳

// pages/testing/wxb/wxb.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  tapCity(event){
    let city = event.target.dataset.city;
    //把city回传给A页面
    let ec = this.getOpenerEventChannel();
    ec.emit('acceptCityFromB',city);
    wx.navigateBack();/* 点击完成后自动返回 */
  },
...})

页面的生命周期

• 小程序中有很多页面，每个页面都会经历：创建、使用、切换到后台、切换到前台、销毁等过程。小程序当然也针对每个页面提供了生命周期方法，用于在这些时机插入自定义的业务代码。

  onLoad	function	生命周期回调——监听页面加载
  onShow	function	生命周期回调——监听页面显示
  onReady	function	生命周期回调——监听页面初次渲染完成
  onHide	function	生命周期回调——监听页面隐藏
  onUnload	function	生命周期回调——监听页面卸载

  生命周期 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

  // pages/testing/a/a.js
  Page({
  ...
  
    /*** 生命周期函数--监听页面加载 */
    onLoad(options) {
      console.log('A onLoad...')
    },
  
    /*** 生命周期函数--监听页面初次渲染完成 */
    onReady() {
      console.log('A onReady...')
    },
  
    /*** 生命周期函数--监听页面显示 */
    onShow() {
      console.log('A onShow...')
    },
  
    /*** 生命周期函数--监听页面隐藏 */
    onHide() {
      console.log('A onHide..')
    },
  
    /*** 生命周期函数--监听页面卸载 */
    onUnload() {
      console.log('A onUnload...')
    },
  ...})
  
  // pages/testing/b/b.js
  Page({
  ...
  
    /*** 生命周期函数--监听页面加载 */
    onLoad(options) {
      console.log('B onLoad...')
    },
  
    /*** 生命周期函数--监听页面初次渲染完成 */
    onReady() {
      console.log('B onReady...')
    },
  
    /*** 生命周期函数--监听页面显示 */
    onShow() {
      console.log('B onShow...')
    },
  
    /*** 生命周期函数--监听页面隐藏 */
    onHide() {
      console.log('B onHide..')
    },
  
    /*** 生命周期函数--监听页面卸载 */
    onUnload() {
      console.log('B onUnload...')
    },
  ...})
  
  // pages/testing/c/c.js
  Page({
  ...
  
    /*** 生命周期函数--监听页面加载 */
    onLoad(options) {
      console.log('C onLoad...')
    },
  
    /*** 生命周期函数--监听页面初次渲染完成 */
    onReady() {
      console.log('C onReady...')
    },
  
    /*** 生命周期函数--监听页面显示 */
    onShow() {
      console.log('C onShow...')
    },
  
    /*** 生命周期函数--监听页面隐藏 */
    onHide() {
      console.log('C onHide..')
    },
  
    /*** 生命周期函数--监听页面卸载 */
    onUnload() {
      console.log('C onUnload...')
    },
  ...})

  

小程序的生命周期

• 微信小程序在使用过程中肯定会遇到：打开小程序、使用小程序、切换到后台、切换回前台、销毁小程序等过程。在这个过程中必然会遇到生命周期的使用。
• 微信小程序涉及到的生命周期可以分为两类：
  • 小程序APP生命周期
  • 页面生命周期
• 一个微信小程序的生命周期方法都定义在app.js（全局js）中，app.js中APP()方法用于注册小程序，该方法必须在app.js中调用且只能调用一次
• 在APP()的参数中可以注册小程序APP涉及的生命周期方法，将会在整个应用程序触发某种状态后自动调用相应的生命周期方法。

  属性	类型	默认值	必填	说明
  onLaunch	function		否	生命周期回调——监听小程序初始化
  onShow	function		否	生命周期回调——监听小程序启动或切前台
  onHide	function		否	生命周期回调——监听小程序切后台
  onError	function		否	错误监听函数

两种方法使两个页面交互


跳转到B
选择城市：{{city}}
选择城市：{{city}}

// pages/testing/wxa/wxa.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    city:'未选择'
  },

  tapToB(){
    wx.navigateTo({
      url: '/pages/testing/wxb/wxb',
    })
  },

  tapToChooseCity2(){
    wx.navigateTo({
      url: '/pages/testing/wxb/wxb',
    })
  },

  tapToChooseCity(){
    wx.navigateTo({
      url: '/pages/testing/wxb/wxb',
      events:{
        acceptCityFromB:(data)=>{
          this.setData({
            city:data
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
// 从app的globalDtata中拿到city 给data赋值
  this.setData({
    city: getApp().globalData.city
  })
  },
...})


北京
杭州
上海
深圳

// pages/testing/wxb/wxb.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  tapCity(event){
    let city = event.target.dataset.city;
    // 把city存入app的globalData，退出当前页面后，在a页面中读取即可
    let app = getApp();
    app.globalData.city = city;
    //把city回传给A页面
    let ec = this.getOpenerEventChannel();
    ec.emit('acceptCityFromB',city);
    wx.navigateBack();/* 点击完成后自动返回 */
  },
...})

// app.js
App({
  onLaunch() {
    // // 展示本地存储能力
    // const logs = wx.getStorageSync('logs') || []
    // logs.unshift(Date.now())
    // wx.setStorageSync('logs', logs)

    // // 登录
    // wx.login({
    //   success: res => {
    //     // 发送 res.code 到后台换取 openId, sessionKey, unionId
    //   }
    // })
    console.log('App onLaunch...')
  },
  onHide(){
    console.log('App onHide...')
  },

  onShow(){
    console.log('App onShow...')
  },
// globalData可以存储全局共享的数据，例如用户信息
//可以在任何小程序页面的js文件中获取当前App对象，访问globalData的属性
//page.js中如何存？app = getApp()  app.globalData.user=xx
//page.js中如何取？app = getApp()  app.globalData.user
  globalData: {
    userInfo: null,
    city:''
  }
})

• 无论是小程序还是任何容器中组件生命周期的使用主要都在于明确某些业务的执行时机。组件是容器创建的，自然需要在容器管理组件的过程中的某个明确时机执行自定义的业务，可以把这些业务代码写在相应生命周期方法中，这就是生命周期方法存在的价值。
• 小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
• 通常，在小程序API有以下几种类型：
  • 事件监听API
  • 同步API
    • 我们约定，以Sync结尾的API都是同步API，如wx.setStorageAync，wx.getSystemInfoSync等。此外，也有一些其他的同步API，如wx.createWorker，wx.getBackgroundAudioManager等，同步API的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

      try{
          wx.setStorageSync('key','value')
      } catch(e){
          console.error(e)
      }

  • 异步API
    • 大多数API都是异步API，如wx.request，wx.login等。这类API接口通常都接受一个Object类型的参数，这个参数都支持按需指定以下字段来接受接口调用结果：

      参数名	类型	必填	说明
      success	function	否	接口调用成功的回调函数
      fail	function	否	接口调用失败的回调函数
      complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）
      其他	Any	-	接口定义的其他参数

  • 云开发API
    • 开通并使用小程序云开发，即可使用云开发API，在小程序端直接调用服务端的云函数。

      wx.cloud.callFunction({
          //云函数名称
          name:'cloudFunc',
          //传给云函数的参数
          data:{
              a:1,
              b:2,
          },
          success:function(res){
              console.log(res.result)     //示例
          },
          fail:console.error
      })

学子影院项目实战

需求分析

• 项目主功能 如下所示：

  • 电影分类列表显示

  • 触底分页加载

  • 定位页面实现

  • 实现详情页数据呈现

  • 演职人员表实现

  • 剧照列表实现

  • 剧照大图浏览实现

  • 评论列表实现

• 项目技术构架如下：

  • 前端：微信小程序

  • 后端：php（服务已上线）

  • 通信协议：https

小程序网络通信设置

• 在小程序中访问网络接口有很多的限制，主要有如下几点：

  • 域名只支持HTTPS协议

    • HTTPS（全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的HTTP通道，在HTTP的基础上通过传输加密和身份认证保障了传输过程的安全性。HTTPS在HTTP的基础下加入SSL，HTTPS的安全基础使SSL，因此加密的详细内容就需要SSL。HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。这个系统提供了身份验证与加密通讯方法。

  • 域名必须经过ICP备案

    • Internet Content Provider,中文全称：网络内容提供商。ICP可以理解为向广大用户提供互联网信息业务和增值业务的电信运营商，是经国家主管部门批准的正式运营企业或部门。

  • 小程序使用域名前必须设置通讯域名

    • 登陆小程序后台。

    • 开发 ->开发设置 ->服务器域名

    • 添加成功后，在小程序开发工具中检查状态是否更新

  • 对于每个接口，最多可以配置20个域名

  • 域名不支持IP地址

  • 不支持配置父域名，但使用子域名的情况

小程序网络通信API

• 小程序提供了网络通信的API，基本使用方法如下：

wx.request({
    url:"服务器接口的地址",
    method:"请求方式",
    header:请求头(object),
    data:请求参数(object),
    success:res=>{
        //...
    },
    fail:err=>{
        //...
    },
    compelete:res=>{
        //...
    }
})

案例：测试公共接口，检查小程序网络API是否可用：

	说明
接口地址	https://api.tedu.cn/index.php
请求方式	GET
请求参数	cid：类别 ID
返回值	电影列表

学子影院项目实战

搭建项目基础结构

• 搭建项目基础结构，步骤如下：
  • 新建项目
  • 新增3个小程序页面
  • 配置底部导航与选中项

—————————————————    根据学习进度更新笔记   ——————————————