微信小程序基础

前言

了解小程序的概念以及优势和劣势
掌握小程序的申请和创建流程
掌握小程序的基本模板语法
掌握小程序代码组成
了解小程序的渲染模型
掌握小程序事件的使用

1、小程序是什么？

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。

1.2小程序优劣势
优势

1. 微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
2. 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
3. 体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
4. 成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

不足

1. 单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是16M（这个值一直在变化，以官网为准）。
2. 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
3. 处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

2、小程序目录结构

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

3.小程序模板语法WXML

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。例如：

3.1标签的使用
view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。
text标签也是我们开发中常用的，这个相当于Html中的span
image标签相当于我们Html中的img。

3.2数据绑定
用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。
在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。

引用数据
通过{{}}的方式可以引用数据。
除了引用数据之外，这里还可以进行一些计算，最终显示的结果是计算之后得到的结果。

<view>{{msg}},{{num + 10}}</view>

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

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

<view wx:if="{{condition}}"> True </view>

使用 wx:elif 和 wx:else 来添加一个 else 块：

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

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。

<view hidden="{{condition}}">
隐藏
</view>

3.4列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<!-- array 是一个数组 -->
<view wx:for="{{array}}">
  {{index}}: {{item.name}}
</view>

<!-- 对应的脚本文件
Page({
  data: {
    array: [{
      name: '天亮教育',
    }, {
      name: '尚云科技'
    }]
  }
})

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

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

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

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
   当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

3.6 template
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 内定义代码片段，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

msgList:[
      {
        index: 0,
        msg: '这是一段模板',
        time: '2020-10-10'
      }
    ]

<view wx:for="{{msgList}}">
  <template is="msgItem" data="{{...item}}"></template>
</view>

在 index.wxml 中引用了 item.wxml，就可以使用 item模板

<import src="item.wxml"/>

<template is="item" data="{{text: '测试'}}"/>

3.6 include
include 可以将目标文件中除了 外的整个代码引入，相当于是拷贝到 include 位置。
index.wxml

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

4.小程序样式wxss

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

4.1 尺寸单位
在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。
1rpx = （屏幕宽度/750）px
在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px。

4.2 样式的导入

@import './test_0.wxss'

4.3 样式选择器

5.小程序中的js

5.1 小程序中的js和浏览器中和node中的区别
浏览器中JS：
ES
DOM
BOM
Node中的JS：
ES
NPM
Native
小程序中的JS：
ES
小程序框架
小程序API

6.小程序中的渲染

6.1 小程序和浏览器中有什么不同
浏览器中渲染是单线程的。
而在小程序中的运行环境分成渲染层和逻辑层，第2章提到过 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

6.2 小程序中如何渲染
我们看看小程序是如何把脚本里边的数据渲染在界面上的。
WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量。

<view>{{ msg }}</view>

在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”。

Page({
  onLoad: function () {
    this.setData({ msg: 'Hello World' })
  }
})

6.3 小程序中通讯模型

7.程序和界面

App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow：当小程序启动，或从后台进入前台显示，会触发 onShow
onHide：当小程序从前台进入后台，会触发 onHide
onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
其他字段：可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问。

7.2 生命周期

onLoad：生命周期函数–监听页面加载，触发时机早于onShow和onReady
onReady：生命周期函数–监听页面初次渲染完成
onShow：生命周期函数–监听页面显示，触发事件早于onReady
onHide：生命周期函数–监听页面隐藏
onUnload：生命周期函数–监听页面卸载

8. 事件

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

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

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

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

handleTap(e){
console.log("执行了点击事件");
	// 通过currentTarget中的dataset属性可以获取时间参数
    console.log(e.currentTarget.dataset.msg);
}