微信小程序 day01

小程序的优势：

1、微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个入口，这些入口有助于企业更好的获取流量，从而进行转化和变现

2、使用便捷

3、体验良好，有接近原生app的体验。h5页面经常出现卡顿、延时、加载慢、权限不足等元音音，而这些问题在小程序里都不会出现

4、成本低，小程序的花费约是APP的十分之一

小程序的不足

1、单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是16M（这个值一直在变化，以官网为准）

2、需要像app一样审核上架，相对于H5的发布要麻烦一些

3、处处受微信限制，例如不能直接分享到朋友圈，涉及到积分或者虚拟交易的时候，小程序也是不允许的

项目的目录结构

pages：

        wxml：编写小程序界面结构的地方

        wxss：编写小程序样式的地方

        json：编写界面配置的地方

        js：编写界面逻辑的地方

utils：编写工具类的地方

app.js：创建程序实例的地方

app.json：编写全局配置地方

app.wxss:编写全局样式的地方

project.config.json：项目的配置文件

sitemap.json配置那些网站可以呗检索到

tabbar设置在app.json中，图片只能用本地地址，不能是线上地址

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "assets/icons/index.png",
      "selectedIconPath": "assets/icons/index-active.png"
    },{
      "pagePath": "pages/my/index",
      "text": "我的",
      "iconPath": "assets/icons/wode.png",
      "selectedIconPath": "assets/icons/wode-active.png"
    }]
  },

小程序中的组件（标签）

view 相当于html中的div

text相当于html中的span

image 相当于html中的img

其余请看官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/

在小程序中，使用WXML语言通过数据绑定来实现界面数据的更新

1、先在data属性中定义数据

data:{

age:18,

}

2、引用数据

通过{{}}的方式来引用数据

<view>{{age}}</view>

逻辑渲染

在WXML中，使用wx:if="{{}}"来判断是否需要渲染该代码块

data: {
    age:18
  },


<view wx:if="{{age>14}}" hidden="{{age}}">age>20</view>
<view wx:if="{{age>15}}" >age=22</view>
<view wx:elif="{{age>16}}">age=23</view>
<view wx:else>age</view>

其中hidden属性是通过display属性设置为none来进行条件渲染

列表渲染

通过wx-for循环来渲染数组或对象的数据

data: {
    age:18,
    array:[{name:'张三',age:'男'},{name:'lixi',age:'nv'}]
  },



<view wx:for="{{array}}">
{{index}}-{{item.name}}-{{item.age}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itm">
{{idx}}-{{itm.name}}-{{itm.age}}
</view>

Template

先创建模板，然后在实例中引用

<view wx:for="{{array}}">
  <template is="msgItem" data="{{...item}}"></template>
</view>
<template name="msgItem">
  <view>
    <text> {{name}}-{{age}} </text>
  </view>
</template>

引用

1、import  <import src="文件地址">

import有作用域的概念，例如：c引入b，b引入a，c只能拿到b中的template，不能拿到a定义的template

2、include  <include  src="文件地址">

include可以将整个文件都拷贝到

小程序中的wxss

小程序中是以rpx为尺寸单位，1rpx=0.5px

样式的导入：

@import  ‘样式文件地址’

小程序目前支持的选择器

 小程序中的js

小程序目前可以运行的三大平台

1、ios平台

2、Android平台

3、小程序IDE

小程序和浏览器渲染数据有什么不同

浏览器中渲染是单线程的

而在小程序中的运行环境分为渲染层和逻辑层，WXML模板和WXSS样式工作在渲染层，js脚本工作在逻辑层

小程序如何渲染数据

1、在WXML模板中使用view标签，用{{}}来绑定一个变量

2、在JS脚本中使用this.setData方法把{{}}中的字串设置出来

程序和界面

小程序指的是产品层面的成熟，而程序值得是代码层面的程序实例

onLaunch：当小程序初始化完成是，会触发onLaunch（全局只触发一次）

onShow：当小程序启动，或从后台进入前台显示，会触发onShow

onHide：当小程序从前台进入后台，会触发onHide

onError：当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息

其他字段：可以添加任意的函数和数据到Object参数中，在App实例回调用this可以访问

生命周期

onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady

onReady：生命周期函数--监听页面初次渲染完成

onShow：生命周期函数--监听页面显示，触发事件早于onReady

onHide：生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

数据

       WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段，这里所说的数据其实就是来自于页面Page构造器的data字段，data参数是页面第一次渲染时从逻辑层传递到渲染层的数据。

       在JS脚本中如果需要获取到data上的数据，需要通过this.data获取。

<!-- page.wxml -->

<view>{{text}}</view>

// page.js

Page({

  data: {

    text: '天亮教育',

  },

onLoad(){

      console.log(this.data.text)

}

})

       如果涉及到更新，这里可以调用Page实例提供的setData把数据传递给渲染层，从而达到更新界面的目的。由于小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。

       setData其一般调用格式是 setData(data, callback)，其中data是由多个key: value构成的Object对象。

// page.js

Page({

  onLoad: function(){

    this.setData({

      text: 'change data'

    }, function(){

      // 在这次setData对界面渲染完毕后触发

    })

  }

})

注意事项：

• 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
• 由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
• 不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。

页面的用户行为：

onPullDownRefresh 下拉刷新

监听用户下拉刷新事件，需要在app.json的window选项中或页面配置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom 上拉触底

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

onPageScroll 页面滚动

监听用户滑动页面事件，参数为 Object，包含 scrollTop 字段，表示页面在垂直方向已滚动的距离（单位px）。

onShareAppMessage 用户转发

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容，如代码清单3-13所示。

// page.js

Page({

onShareAppMessage: function () {

 return {

   title: '自定义转发标题',

  // 自定义点击链接需要跳转的页面，默认当前页面

   path: '/page/user?id=123'

 }

}

})

10. 事件

事件定义

在小程序中绑定事件可以以bind开头然后跟上事件的类型，如bindtap绑定一个点击事件，对应的值是一个字符串，需要在page构造器中定义同名函数，每次触发事件之后就会执行对应函数的内容。

<view bindtap="handleTap">点击事件</view>

<view bind:tap="handleTap">另一种写法</view>

// pages/my/index.js

Page({

  handleTap(){

    console.log("执行了点击事件");

  }

})

常见的事件类型

• touchstart     手指触摸动作开始
• touchmove   手指触摸后移动
• touchcancel  手指触摸动作被打断，如来电提醒，弹窗
• touchend      手指触摸动作结束
• tap  手指触摸后马上离开
• longpress     手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
• longtap  手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
• transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
• animationstart    会在一个 WXSS animation 动画开始时触发
• animationiteration     会在一个 WXSS animation 一次迭代结束时触发
• animationend      会在一个 WXSS animation 动画完成时触发

阻止事件冒泡

       在小程序中除了通过bind之外，还可以通过catch进行事件绑定，通过catch绑定的事件不会触发事件冒泡。

事件捕获

       事件的触发分为两个阶段，首先是捕获阶段，其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可以通过capture-bind进行事件绑定。

事件传参

       在小程序中进行事件传参不能像传统的Web项目中一样，在括号里写参数。在小程序中需要在标签上通过data-方式定义事件所需的参数。

<!-- data-参数名=’参数值’ -->

<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

       每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路由传递的参数。

handleTap(e){

console.log("执行了点击事件");

// 通过currentTarget中的dataset属性可以获取时间参数

    console.log(e.currentTarget.dataset.msg);

}

关于这个事件对象其他属性

• type 事件类型
• timeStamp   页面打开到触发事件所经过的毫秒数
• target     触发事件的组件的一些属性值集合
• currentTarget      当前组件的一些属性值集合
• detail     额外的信息
• touches  触摸事件，当前停留在屏幕中的触摸点信息的数组
• changedTouches 触摸事件，当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。