小程序教程分享

至于为什么做小程序的文档教程，原因有以下几点

• 小程序在1月9号正式对外公测，业界大佬们纷纷入驻小程序，当天就推出小程序的大公司有大众点评+，滴滴出行DiDi，美团外卖+等等；小程序即将在中国互联网占领很大的市场，如果发展趋势好，很可能达到公众号那样的高度。而且据我所了解，很多公司已经打算将用户从公众号上转移至小程序。
• 微信小程序和一般的App程序不一样，它不存在安装卸载的过程，一切操作都是在微信中进行，且可以做到快速开发、便捷使用。且由于是在微信内部进行使用，它无疑可以统一Android、IOS、WP三大平台，实现了一套程序，在多处运行，这就相当于微信成为了一个系统架构，避开了原始的微信搭载环境。
• 当你真正探究小程序的时候，你会发现，小程序入手会非常的简单，对于有过编程经验的人来说，学习成本非常低，所以每个人都可以着手。
• 个人原因的话，自从自己换了公司，对于技术的学习，也慢了下来，所以打算做一篇比较全的文档，自己边学习边分享，提升自己，也福利他人。

以上只是一些无伤大雅的话，真正的干货，由下面开始。

一：获取AppID

小程序的AppID需要公司的营业执照编号，没有的可以跳过这一步，没有AppID也可以开发应用。

1. 登录微信公众平台，点击注册按钮，并在账号类型中选择小程序
2. 邮箱选项为自己正在使用的邮箱，并设置密码
3. 进入邮箱激活之后，登录自己刚刚设置的账号
4. 填写自己公司的基本信息，即可进入微信公众号的小程序页面
5. 在设置中即可看到自己的AppID信息，每个AppID可以绑定10个微信账号

二： 开始阶段

在开发之前，我们需要安装微信官方提供的开发者工具（点击链接即可下载页面），安装完开发者工具之后，我们可以使用微信号扫码登录。

1. 新建项目，如果之前在AppID设置中绑定了你的微信号，那么你可以在AppID选项中填写自己的AppID，你可以使用开发者工具中更多的功能。
2. 微信官方会默认提供一个小demo，有兴趣的可以去看一下代码，此处我们就不讲述这个demo的细节代码，只介绍一下代码的整体思想。
3. 整个代码由两个文件夹和三个文件构成。pages文件夹下有两个文件夹，对应两个页面，每个文件夹下有三个文件，分别是.js、.wxml、.wxss，分别对应js逻辑、html代码、css样式。utils文件夹主要是写了一下公共的js逻辑。app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。 app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序的路由，配置小程序的窗口�背景色，配置导航条样式，配置默认标题。app.wxss是整个小程序的公共样式。
4. 明白了整个代码构成，我们就可以新建自己的项目。

三：技术栈

参考：小程序官方文档

小程序最吸引我一点的就是小程序使用起来非常的简单，当然，也由此可见小程序团队下了非常多的功夫。这也是当一名开发者在造轮子的时候所必备的优秀品质，使用者使用起来越简单，这个产品就越受欢迎，这也是为什么vue.js这么火的原因，所以小程序也会如此。

小程序局限性很大，比如说他的入口只能通过搜索按钮和扫描二维码才能进入，这将会导致很多的公司止步于小程序，当然，我幻想过如果我做一款类似安卓或者苹果的应用商店的话，我会不会靠这个发财，走向人生巅峰，但是，我觉得微信肯定不能容忍这种行为的，所以有这个想法的人，打消你们的念头吧。此处我也通过开发一款简单的类似豆瓣电影的小程序来介绍其中的要点，至于做豆瓣，原因纯粹是因为豆瓣有现成的api。

1.配置

小程序的最外层有一个app.json，这个就是整个小程序的配置文件。

{
  "pages":[
    "pages/index/index",
    "pages/list/list",
    "pages/search/search",
    "pages/shoucang/shoucang",
    "pages/my/my"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#48C23D",
    "navigationBarTitleText": "豆瓣电影",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath":"icons/nohotIndex.png",
      "selectedIconPath":"icons/hotIndex.png"
    }, {
      "pagePath": "pages/list/list",
      "text": "分类",
      "iconPath":"icons/nohotList.png",
      "selectedIconPath":"icons/hotList.png"
    }, {
      "pagePath": "pages/search/search",
      "text": "搜索",
      "iconPath":"icons/nohotSearch.png",
      "selectedIconPath":"icons/hotSearch.png"
    },{
      "pagePath": "pages/shoucang/shoucang",
      "text": "收藏",
      "iconPath":"icons/nohotShoucang.png",
      "selectedIconPath":"icons/hotShoucang.png"
    },{
      "pagePath": "pages/my/my",
      "text": "我们",
      "iconPath":"icons/nohotMy.png",
      "selectedIconPath":"icons/hotMy.png"
    }],
    "color": "#888",
    "selectedColor": "#48C23D",
    "borderStyle": "white"
  }
}

• 其中pages配置的是小程序的路由，数组中的每一条数据都是对应一个页面的路径。
• window设置默认页面的状态栏、导航条、标题、窗口背景色，比如导航栏的背景颜色，导航栏的标题颜色，导航栏的文字内容等等。
• 如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。tabBar的配置参数也非常多，我们可以配置tab上文字的默认颜色、文字选中的颜色、文字的背景色等等。
• networkTimeout可以设置各种网络请求的超时时间。这些都有默认值，一般无特殊情况下，不推荐自主设置。
• debug可以设置是否开启debug模式，在该模式下，可以打开控制台面板，可以查看路由跳转时候的一些生命周期等等， 可以帮助开发者快速定位一些常见的问题。
• 每一个页面的.json文件也可以设置当前页面下window的一些基本信息

如图，是我配置完的一个App的雏形，TabBar和路由跳转已经完成了。

2.生命周期函数

小程序的生命周期函数是最容易被人忽视的一点，但是如果利用好生命周期函数，可以做很多的事情。

• onLaunch函数，它会监听小程序初始化，只在小程序初始化完成之后调用，小程序的整个运行过程中，它只会被调用一次。
• onShow函数，它是小程序从后台进入前台的时候调用的。
• onHide函数，它是小程序从前台进入后台的时候调用的。
• onError函数，它是当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。
• 小程序还允许自定义生命周期，如官方demo中的getUserInfo函数。

3.组件

小程序提供了很多的组件，这些组件使用起来非常的简单，而且基本能帮你完成所有的事情。往下看你会发现，小程序很多地方都与react-native“不谋而合”。

• 视图容器

  • view
    view的使用方式就和html中的div标签（小程序中不能使用div标签）一样，相当于一个块容器。
  • scroll-view
    做过移动端的可能对这个东西应该非常的熟悉，开发移动端时，我们经常使用IScroll这个插件，好在小程序帮我们封装了，但论体验的话，小程序还是很差的。
  • swiper
    swiper大家应该也很熟悉，用过bootstrap或者引过swipper这个插件的人应该都知道，这个主要是用来做轮播图的，而且小程序提供的参数也非常的全。

• 基础内容

  • icon
    icon标签是小图标，微信只提供了不超过10种图标，主要是用在做提示性消息。
  • text
    text是文本标签，所有的文本只能写在test标签内，而且text标签只能嵌套一层text标签。
  • progress
    progress标签是用来做进度条的，也支持进度条的动画，动画也非常流畅。

• 表单组件

  • button、input、checkbox、label、radio、textarea
    button标签支持定义button类型、是否透明、是否禁用、是否带loading小图标等等，input标签也绑定了很多回调函数，其他标签与html表单中的标签基本一致。
  • picker
    picker标签可以从底部弹起选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。
  • slider
    slider标签相当于html表单中的range类型，它是一个滑动选择器，可以设置最大值和最小值。
  • switch
    switch是开关选择器。

• 导航

  • navigator
    navigator标签的主要 作用是路由跳转，url属性用作跳转，redirect属性用作重定向。

• 媒体组件

  • audio、video
    audio标签主要是用来播放音频，video标签主要是用来播放视频，它们与h5中新增的audio、video用法基本一致
  • image
    image标签是用来显示图片。其中有一个非常有趣的属性mode，该属性下有13个值，其中 4 种是缩放模式，9 种是裁剪模式。善用该属性会使你的图片能达到你的预期样式。

• 地图

  • map
    map标签是用来做地图的，非常的实用，而且这个标签的属性和api也非常多，我就不一一细说，非常感兴趣的可以参考官方文档中的地图map。

• 画布

  • canvas
    小程序基本上h5中的canvas全部搬了过来，而且用法也基本不变，用来做动画的话还是非常给力的。

4.API

• 网络请求

  wx.request(Object)是用来做https请求的，它的用法和$.ajax非常的相似，我就不详细介绍了。

• 文件上传和下载

  • wx.uploadFile(Object)
    小程序为我们提供了一个上传文件的方法，我们将文件上传至开制定的发者服务器，来存储我们的文件。
  • wx.downloadFile(Object)
    同时，小程序也为我们提供了下载文件的方法，我们可以下载指定的url下的文件。
• WebSocket
  小程序提供了socket让服务端和客户端进行通信，监听WebSocket事件的函数也非常全，具体可移至官方文档查看，有一点要切记，小程序同时最多只能有一个socket。

• 媒体

  小程序提供了调用底层的一些方法。如拍照、录音、音频播放、视频播放

• 文件

  小程序提供了保存文件、删除本地文件、新开页面打开文档等等方法

• 数据缓存

  wx.setStorage(Object)可以数据缓存起来，这是一个异步接口。
  wx.setStorageSync(key,data)也是做缓存，但是一个同步接口。
  wx.getStorage(Object)用来异步地获取缓存的数据。
  wx.getStorageSync(key)用来同步地获取缓存的数据。
  wx.removeStorage(Object)用来异步地删除指定的数据缓存。
  wx.removeStorageSync(key)用来同步地删除指定的数据缓存。
  wx.clearStorage()用来异步地清理整个数据缓存。
  wx.clearStorageSync()用来同步地清理整个数据缓存。

• 位置

  wx.getLocation(Object)可以获取当前位置、速度。
  wx.chooseLocation(Object)可以打开地图选择位置。
  wx.openLocation(Object)可以调用微信内置的地图来查看自己当前的位置。

• 设备

  小程序提供了获取系统信息、网络状态、重力感应、罗盘、拨打电话、扫描二维码等设备接口。

• 界面

  • Toast
    wx.showToast(Object)可以显示消息提示框
    wx.hideToast()隐藏消息提示框
    wx.showModal(Object)​显示模态弹窗
    wx.showActionSheet(Object)显示操作菜单
  • 导航
    wx.navigateTo(Object)用于跳转到应用内的某个页面，这一点和react-native非常的相似。
    wx.redirectTo(Object)关闭当前页面，跳转到应用内的某个页面。
    wx.switchTab(Object)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    wx.navigateBack(Object)关闭当前页面，返回上一页面或多级页面。
  • 动画
    wx.createAnimation(Object)用来创建一个动画实例。
  • 绘图
    主要还是canvas中的一些绘图方法
  • 下拉刷新
    wx.onPullDownRefresh()用来监听该页面用户下拉刷新事件。
    wx.stopPullDownRefresh()用来停止当前页面下拉刷新。

• 开放性接口

  小程序还提供了获取用户信息、微信支付、客服消息、分享、获取二维码等api。

四：项目开发

前面介绍过了，我打算做一个类似豆瓣电影的小程序。

1.获取数据

开发阶段我们需要有数据来支持我们的小程序，正好豆瓣提供了一套完整的API供开发者来开发，详情可以点击豆瓣电影API,本项目全程采用此处提供的API进行开发。

2.首页

首页主要展示一些正在热映的电影类目，我们根据API将数据渲染在页面上。此处展示我已经获取到的数据。

通过wx:for语法糖来循环显示数据，这等同于angular中的ng-repeat、vuejs中的v-for。每个影片点击进去都将跳转至详情页，所以我们应该使用navigator标签和其url属性，并将影片的id带过去，代码如下：

<navigator wx:for="{{movieList.subjects}}" wx:for-item="item" url="/pages/detail/detail?id={{item.id}}">
    <li>
      <image src="{{item.images.medium}}" class="image50"></image>
      <p class="title">{{item.title}}</p>
      <p class="price">评分<span>{{item.rating.average}}</span></p>
    </li>
  </navigator>

完成之后的效果图如下所示（虽说太过于简单，但基本效果还是有(⊙o⊙)…）：

3.搜索

搜索页面主要也是调用豆瓣提供的API：搜索api，搜索框使用的小程序提供的，搜索按钮使用的是小程序中的Icon字体，完成后的代码和效果图如下所示：

<view class="searchBox">
    <input type="text" placeholder="请输入电影名/演员/类目进行查询" auto-focus  class="searchInput"/>
    <icon  type="search" class="searchIcon"></icon>
  </view>

4.详情页面

详情页面可以通过点击某个电影信息进入，我们在点击时已经将电影的id传至详情页面。所以我们可以在详情页面取id之后调取豆瓣API中的通过id获取电影信息。

未完待续~~~