小程序开发入门到实践

---

一、什么是小程序？

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

https://mp.weixin.qq.com/cgi-bin/wx

二、开发工具

1.小程序开发者工具

这个工具集成了公众号网页调试和小程序调试两种开发模式。我这里使用了Beta版本，没有用正式版。因为我想体验使用其中的Git版本管理功能。下载地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

下载安装好后，先要微信扫描登录。然后选择小程序项目。

新建小程序项目。

选择新建小程序的项目目录，AppID没有注册的话，可以先点击下面的使用测试号即可，不影响开发。

大致的工具界面如下图，新版有版本管理。红色圈起来的为小程序项目的一个页面包含的元素：

工具用起来很方便、简单、直接。详细用法就不说了，主要的功能大概说下。左侧是模拟器，可以模拟安卓手机和苹果手机的效果，因为有些小程序组件在安卓和苹果上显示是有区别的，大家可以注意下。圈红的为小程序一个页面的基本组成文件元素：xx.js、xx.wxml、xx.wxss、xx.json。其实就是有JS文件、HTML文件（xx.wxml）、CSS样式文件（xx.wxss）和配置文件（xx.json）组成，非常的容易理解。我们就是在使用小程序的组件、控件来绘制UI布局，主要是xx.wxml和xx.wxss文件。xx.js负责生命周期函数和事件处理，例如：点击事件、数据请求、数据绑定等等逻辑操作。

我们在编写完后，可以点击工具栏上的预览按钮，扫描二维码在真机上体验，也可以直接用左侧的模拟器时时预览即可。

看完了工具，我们看下基本开发的要素和需要注意的问题吧，以免新手再次重蹈覆辙。

2.文件目录结构

看下默认的新建后的结构：

app.json是小程序全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

大致代码结构如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages是配置小程序所有页面，类似于注册清单。window是全局的窗口配置，如颜色、标题等等。当然每个页面也可以自己单独配置，就是页面名称.json文件。例如：page.json。不过需要注意的是，单独页面配置的json无需写window这个关键字，直接如下代码所示：

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#34495e",
  "navigationBarTitleText": "日记",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true,
  "backgroundColor": "#34495e"
}

那么再看工具配置文件project.config.json。

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。具体详细配置大家可以看小程序官方文档有详细介绍。

还有一个app.wxss和app.js。这个app.wxss就是全局的样式文件，也就是css文件，当然和页面配置文件一样，每个页面可以单独写页面名称.wxss。

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

再来看app.js，很明显是一个js文件。负责UI交互、数据绑定更新、网络请求、页面生命周期等等操作相关的都在这里。当然每个页面都有自己单独的.js文件，这个app.js可以做一些需要全局共享和操作的逻辑在里面。在这里可以调用微信小程序的很多API，也可以自己写js方法使用。

那么我们看下一个页面的组成，基本上就是下图这些结构元素。有界面、有样式、有js交互、有配置。

每新增一个页面都要在app.json里添加注册进去。

一个.js文件里有生命周期的管理函数，可以在这里面做相应的操作。

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

我们看下最简单的一个index.wxml页面，可以当做是Html页面，只有一个text控件，里面的bindtap就是点击事件的绑定。

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto" bindtap='click'>{{motto}}</text>
  </view>
</view>

那么这个class就是index.wxss里的样式文件。里面的{{motto}}就是指向index.js里的data里定义的一个变量。小程序都是通过{{…}}两个大括号包括一个英文名字来进行变量绑定的。这样我们就可以动态更换里面的显示内容了。那么怎么更新内容呢？

在js里使用下面的this.setData方式动态更新刷新数据：

this.setData({ motto: "名字" })

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.userinfo-nickname {
  color: #aaa;
}
 
.usermotto {
  margin-top: 200px;
}

再看下index.js文件。

//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
    motto: 'Hello World',
  },
  
  //事件处理函数
  click: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
    
})

Page函数是必须要有的，里面包含data:{ … }，用于放置数据、常量、变量等等。这里的click:function就是我们定义的点击事件。wx.navigateTo…方法就是小程序的官方API，具体其他API的用法和返回参数是什么可以看官方API文档，很详细。

观察下，上面有个声明了app这个常量。这个就是app.js里拿到的全局管理调用app.js里的方法和常量用的。很多需要存储和全局读写、处理的都可以进行操作以及放置在app.js里。在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置。

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后执行
  }
})

小程序的组件和控件有很多，可以看做是Html的标签，对称方式使用。具体组件特性看官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/

3.页面生命周期

页面的生命周期,这个比较重要，大家可以看下理解下。

看下逻辑层需要注意的。除了页面的生命周期，还有页面的监听事件。onPullDownRefresh()：监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()：监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance，默认为50px。
在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll(Object)：监听用户滑动页面事件。

onShareAppMessage(Object)：

监听用户点击页面内转发按钮（ 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。

onTabItemTap(Object)：点击 tab 时触发。

Page.prototype.setData(Object data, Function callback)：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

4.路由跳转

接下来看下小程序里的路由、跳转。

主要有这几种方式：

这几种方式url都可以传递参数。

wx.navigateTo：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。注意：目前页面路径最多只能十层。

wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。如果你想让页面没有返回按钮，不能返回的话，就用这个跳转方式吧。

wx.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面。

wx.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

注意：

1、navigateTo, redirectTo 只能打开非 tabBar 页面。
2、switchTab 只能打开 tabBar 页面。
3、reLaunch 可以打开任意页面。
4、页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
5、调用页面路由带的参数可以在目标页面的onLoad中获取。