微信小程序入门与组件 - Day01

1.内容介绍

微信小程序简介（了解）
小程序开发环境（重点）
小程序的开发配置与文件结构（重点）
组件（重点）

2.微信小程序简介（了解）

2.1.什么是小程序

微信小程序（Wechat Mini Program），简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
2016年9月21日，小程序正式开启内测。2017年1月9日，小程序正式上线。全面开放申请后，主体类型为个人、企业、政府、媒体或其他组织的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。

2.2.微信小程序与app的区别

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。小程序定位是“轻应用”，不仅使用简单，对于创业团队来说，大大降低了开发门槛。
APP也叫移动App，外语全称：APPlication，移动应用服务，就是针对手机这种移动连接到互联网的业务或者无线网卡业务而开发的应用程序服务；简单的说就是手机或无线工具的应用服务。需要在手机上安装和升级，针对不同的手机系统需要不同的开发人员。

一个公司不想花大成本支持手机操作,就可以使用小程序或者微信公众号来实现.如果愿意花大成本就针对不同手机平台开发App.

所以现在很多公司不一定有app,但是基本都有公众号或者小程序. 当然uniapp也能解决问题,但是还不是很成熟.https://uniapp.dcloud.io/

2.3.小程序在入口

用过一次小程序以后，微信的发现栏目里面就会有，如下图（右边是小程序娱票儿的二维码，扫一扫之后，发现栏目就会出现小程序）

2.4.微信小程序的工作原理

用户在微信中打开小程序时，小程序可以通过内置的组件显示出界面，还可以通过网络API实现数据请求等功能，企业自己的数据仍然在自己的服务器上，只不过是小程序发起请求。

2.5.注册小程序帐号

小程序帐号是小程序上线的必备条件，在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。企业和个人均可注册小程序帐号。如果只是学习使用，可以个人注册也可以使用无APPID进行开发，只不过无法进行真机测试。

填写注册信息：
https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

激活账号

填写个人信息

注册成功

版本管理

成员管理

页面接入

秘钥管理

3.小程序开发环境（重点）

开发文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/

3.1.获取AppID

上线的项目必须有AppID，没有AppID也可以开发。
登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。

3.2.下载安装开发工具

我们需要通过专用的微信开发者工具，来完成小程序创建和代码编辑。
下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

3.3.创建项目

开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

注意：这里建议可以先选择不使用云服务，云服务指的是小程序的一些云功能，如果使用云服务需要配置用户环境。

4.小程序配置与结构详解（重点）

4.1.认识开发工具

微信小程序开发工具不同于其它IDE，它内置了编辑器、项目管理器、调试工具等等功能。

4.2.文件结构详解

官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

在pages目录有很多的页面，一个小程序页面由四个文件组成，分别是：

4.3.创建新页面

4.3.1.创建页面

点中项目，右键创建文件夹，然后创建page，自动生成 4 个文件，效果如下：

4.3.2.添加页面链接

这里其实会自动添加链接的

4.3.3.页面跳转

在首页index.wxml中增加导航：

  <!-- 自定义 -->
  <view class="uploader">
    <navigator url="/pages/demo/demo" open-type="navigate" class="uploader-text">
      <button>跳转页面</button>
    </navigator>
  </view>

解释：

navigator ：导航器，用来做页面跳转导航
Url:跳转的页面
open-type=“navigate”：页面打开方式，可以使用 “navigate” ，但是如果页面在tabbar中引入过，那么这里就要使用switchTab。

4.4.全局配置app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。文档：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

4.4.1.配置项

4.4.2.窗口配置

"window": {
    "backgroundColor": "#F6F6F6",    窗体的背景颜色
    "backgroundTextStyle": "light",  窗体的文本样式
    "navigationBarBackgroundColor": "#F6F6F6",  导航条背景
    "navigationBarTitleText": "小程序开发",  导航条标题
    "navigationBarTextStyle": "black" 导航条文本风格
  },

4.4.3. tabBar工具条

在app.json加入内容

 "tabBar": {
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "position": "bottom",
    "list": [{
      "pagePath": "pages/movie/movie",
      "text": "电影",
      "iconPath":"img/2.png",
      "selectedIconPath":"img/2s.png"
    }, 
    {
      "pagePath": "pages/movietheater/movietheater",
      "text": "影院",
      "iconPath":"img/3.png",
      "selectedIconPath":"img/3s.png"
    },
    {
      "pagePath": "pages/home/home",
      "text": "我的",
      "iconPath":"img/1.png",
      "selectedIconPath":"img/1s.png"
    }]
  },

注意：工具条对应的page要和 pages 里面配置的 page的顺序一致，如果出现错误：
VM1192:1 cloud init error: Error: invalid scope 没有权限，请先开通云服务 需要开启云开发

选择个人账户支付，免费开通

4.5.小程序js脚本app.js

App.js是小程序全局的js脚本，里面有一些公共配置

4.6.页面json配置

在每个page页面中都有个 json文件，该文件作为当前页面的配置，可以覆盖掉app.json全局配置
如修改页面标题，在页面的配置：demo.json中加入：

{
  "navigationBarTitleText": "自定义页面",
  "usingComponents": {}
}

4.7.页面Js脚本文件

app.js作为全局的js脚本，
在每个page页面中都有个 js 文件，该文件作为当前页面的业务逻辑代码，并且内置了很多的事件

4.7.1.绑定数据

这里的数据绑定和VUE很像，在页面的js中的data添加数据，在页面的wxml中使用{{数据}}取值

在页面取值

4.7.2.事件方法

Page()函数用来注册一个页面。接受一个Object参数，其制定页面的初始化数据、生命周期函数、事件处理函数等。
Object参数说明
属性 类型 描述
data Object 页面的初始数据
onLoad Function 生命周期函数–监听页面加载
onReady Function 生命周期函数–监听页面初次渲染完成
onShow Function 生命周期函数–监听页面显示
onHide Function 生命周期函数–监听页面隐藏
onUnload Function 生命周期函数–监听页面卸载
onPullDownRefeash Function 页面相关处理函数–监听页面下拉动作

自定义方法：其他Any开发者可以添加任意的函数活数据到Object参数中，用this就可以访问

5.wxml页面模板语法

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。 <a class style url=”” onclick=””>
打开开发工具的编辑器，在根目录下找到 app.json 文件，双击打开，在 “pages/index/index” 上新增一行 “pages/wxml/index” 保存文件。模拟器刷新后，读者可以在编辑器中找到 pages/wxml/index.wxml 文件，本小结的学习通过修改这个文件来完成。
WXML 文件后缀名是 .wxml ，打开 pages/wxml/index.wxml 文件，有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式，简单的 WXML语句在语法上同 HTML 非常相似。

<view>
  <text>hello world</text>
</view>

View 相当于 div ，text 相当于span

5.1 常用的标签/组件（重点）

更多请查阅： https://mp.weixin.qq.com/debug/wxadoc/dev/component/

<view>
  <text>数据绑定演示：</text>
  <text>{{intro}}</text>
</view>

<view>
  <text>小图标演示：</text>
  <icon  type="success" size="30"></icon>
</view>

<view>
  <text>按钮演示：</text>
  <button class="mini-btn" type="primary" size="mini">按钮 MINI</button>
</view>

<view>
  <text>图片演示：</text>
  <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="scaleToFill" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
</view>

<view>
  <text>视频演示：</text>
  <video 
      id="myVideo" 
      src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
      binderror="videoErrorCallback" 
      enable-danmu 
      danmu-btn 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      controls
    ></video>
</view>

5.2 响应式数据绑定

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

5.2.1. 添加数据和事件：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    "intro":"自定义页面简介",
    "changeData":"初始化数据"
  },
  chagneDataHandler: function(){
    console.log("修改内容");
    this.setData({changeData:"内容改变了"});
  },

注意：这里要用 setData才能改变数据

5.2.2. 添加按钮点击事件

<view>
  <text>点击事件演示：</text>
  <text>{{changeData}}</text>
  <button  bindtap="chagneDataHandler" class="mini-btn" type="primary" size="mini">点我改变数据</button>
</view>

5.3 简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
修改index.wxml

<view>{{ message }}</view>

修改index.js

Page({
	data: {
	    message: 'Hello MINA!'
	}
})

5.4 组件属性(需要在双引号之内)

<view id="item-{{id}}"></view>

Page({
  data: {
    id: 0
  }
})

5.5 if控制属性(需要在双引号之内)

<view wx:if="{{condition}}"></view>
Page({
  data: {
    condition: true
  }
})

5.6 字符串运算

<view>{{"hello" + name}}</view>
Page({
  data: {
    name: 'MINA'
  }
})

5.7 对象运算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

5.8 数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
Page({
  data: {
    zero: 0
  }
})

最终组合成数组[0, 1, 2, 3, 4]。

5.9 列表渲染

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

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

<!-- 对应的脚本文件
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
-->

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

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

类似 block wx:if ，也可以将 wx:for 用在 标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

5.10 模板

5.10.1 模板

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

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

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

<!-- 模板需要的数据 -->
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

使用模板并传入参数： “…item” 传入参数到模板

<template is="msgItem" data="{{...item}}"/>

is可以动态决定具体需要渲染哪个模板，如代码2-18所示。

<template name="odd">
  <view> odd </view>
</template>

<template name="even">
 <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
 <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

5.10.2 引用

WXML 提供两种文件引用方式import和include。
import 可以在该文件中使用目标文件定义的 template，如：
在 item.wxml 中定义了一个叫 item的 template ：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

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

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
例如：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template ，如代码2-19、代码2-20、代码2-21所示。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

模板 B

<!-- B.wxml -->
<import src="a.wxml"/>

<template name="B">
  <text> B template </text>
</template>

模板 C

<!-- C.wxml -->
<import src="b.wxml"/>

<template is="A"/>  <!-- 这里将会触发一个警告，因为 b 中并没有定义模板 A -->

<template is="B"/>

include 可以将目标文件中除了 外的整个代码引入，相当于是拷贝到 include 位置，如代码2-22、代码2-23、代码2-24所示。
index.wxml

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

header.wxml
<!-- header.wxml -->
<view> header </view>

footer.wxml
<!-- footer.wxml -->
<view> footer </view>

6.WXSS 样式

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。
WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。

6.1 尺寸单位

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

6.2 WXSS引用

在小程序中，页面的wxml可以默认使用wxss中的样式，我们依然可以实现外部样式的引用，样式引用是这样写：在wxss中导入其他外部样式 ，在wxss文件内容的最后面引入

@import './test_0.wxss';

由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。

6.3 内联样式

WXSS内联样式与Web开发一致:

<!--index.wxml-->
<!--内联样式-->
<view style="color: red; font-size: 48rpx"></view>

小程序支持动态更新内联样式：

<!--index.wxml-->
<!--可动态变化的内联样式-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

7.事件

7.1 点击事件

<!-- page.wxml -->
<view id="tapTest" data-xx=”{{user}}” bindtap="tapName"> Click me! </view>

// page.js
   Page({
  tapName: function(event) {
    console.log(event.target.dataset.xx) //取按钮的 data-xx 的值
  }
})

事件是通过bindtap这个属性绑定在组件上的，同时在当前页面的Page构造器中定义对应的事件处理函数tapName，当用户点击该view区域时，达到触发条件生成事件tap，该事件处理函数tapName会被执行，同时还会收到一个事件对象event。

7.2 事件类型

bindtap 等同于 bind:tap

8.课程总结

8.1 重点

1.小程序开发环境
2.配置与文件结构
3.常用组件

8.2 难点

4.配置与文件结构

8.3 如何掌握

5.查看小程序官方文档
6.多做小项目

8.4 排错技巧

7.在IDE中运行测试，看懂错误提示
8.通过错误调试的提示，看懂报错和调用栈

9.课后作业

9.制作一个电影小程序，至少要有2个页面

10.每日一练

10.使用Vue完成管理员管理，并进行数据双向绑定

11.面试题

11.你会不会做小程序？

12.扩展知识或课外阅读推荐（可选）

12.1 扩展知识

12.2 课外阅读