微信小程序初始

1、微信小程序的优势和劣势

优势：微信助理，容易推广。

           使用便捷。

           体验良好，有接近原生app的体验。

           成本更低，

劣势：单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是16M

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

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

2. 项目的目录结构

• pages:
  1. wxml: 编写小程序界面结构的地方
  2. wxss: 编写小程序样式的地方
  3. json：编写界面配置的地方
  4. js：编写界面逻辑的地方
• utils: 编写工具类的地方
• app.js：创建程序实例的位置
• app.json: 编写全局配置地方
• app.wxss: 编写全局样式的地方
• project.config.json: 项目的配置文件
• sitemap.json：配置哪些网站可以被检索到

3.小程序模板语法WXML 

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。

text标签也是我们开发中常用的，这个相当于Html中的span

image标签相当于我们Html中的img。

引用数据 : 通过{{}}的方式可以引用数据。

逻辑渲染:

<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>

还有hidden隐藏true为隐藏，false为显示

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名

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

事件

常见的事件类型

• 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);
}