一、基础介绍

小程序是什么

小程序可以视为只能用微信打开和浏览的网站。小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被修改成了 WXML 标签，CSS标签被修改成了WXSS标签。

小程序最大的优势就是基于微信，也不需要考虑iOS和Android不同平台间的差异，同时微信也提供了丰富的API接口，例如拍摄、录音、语音识别、二维码等，小程序可以利用原生能力，快速进行开发。

开发准备

1. 去微信公众平台注册，申请一个AppId。

2. 下载小程序开发工具，微信开发者工具。

创建一个项目

创建小程序1.png

创建小程序2.png

调试运行项目

小程序支持实时预览，代码修改后，左边预览窗口就可以直接看到修改后的效果。
也可以点击预览按钮，通过微信的扫一扫在手机上体验。

小程序调试1.png

二、小程序项目结构

小程序包含一个描述整体程序的 app 和若干个描述页面的 page 组成。

小程序结构1.png

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档 。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。它的作用有些类似Android 中的 Application。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

全局配置

app.json 小程序的全局配置，用于声明页面文件的路径、窗口显示、设置多tab等。完整配置项说明请参考小程序全局配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

注册页面

小程序的每个页面，都需要在页面对应的js文件中进行注册，同时可以指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

详细的参数含义和使用请参考 Page 参考文档 。

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

三、页面

WXML 模板

wxml文件用来描述页面展示的代码：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

它和html页面主要有以下两个区别：

1. 标签名字不太一样，微信小程序提供了丰富的组件供开发者使用，所以不需要使用类似 div、p、span的基础标签。
2. 多了一些wx:if="{{!hasUserInfo && canIUse}}"这种{{}}的表达式，用的是 MVVM 的开发模式，将页面渲染和逻辑进行分离。通过 {{ }} 的语法把一个变量绑定到界面上，称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

JS交互逻辑

小程序为组件提供了很多交互属性，且使用非常简单：

//xxx.wxml
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

//xxx.js
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

更详细的事件可以参考文档 WXML - 事件 。

这里需要注意的是，直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的。

页面跳转

框架以栈的形式维护了当前的所有页面。 当发生页面切换的时候，页面栈的表现如下：

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

具体使用：

  //跳转到test界面
  skipTest(event) {
    wx.navigateTo({
      url: '../test/test',
    })
  }

四、API 使用

存储

每个微信小程序都有自己的本地缓存，可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理。

其中以 Sync 结尾的代表同步操作，二者的区别在于，异步不会阻塞当前任务。

具体使用：

  setStorageTest(event) {
    wx.setStorage({
      key: 'name',
      data: 'huangm',
      success(res) {
        console.log("storage success")
      }
    })
    console.log("storage end")
  }, 
  getStorageTest(event) {
    const that = this
    wx.getStorage({
      key: 'name',
      success (res) {
        that.setData({
          name: res.data
        })
        console.log(res.data)
      }
    })
    console.log('get Storage end')
  },
  deleteStorageTest(event) {
    const that = this
    wx.removeStorage({
      key: 'name',
      success(res) {
        that.getStorageTest()
      }
    })
  }

隔离策略

同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。

网络请求

小程序支持普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

具体使用：

wx.request({
      url: 'https://www.wanandroid.com/banner/json',
      success (res) {
        console.log(res.data.data)
        that.setData({
          bannerList: res.data.data
        })
      }
    })

调用Native方法

小程序提供很多设备相关API，如日历、联系人、蓝牙、电量、扫码等。

使用如下：

    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        console.log(res)
      },
      fail(res) {
        console.log(res)
      }
    })

五、自定义组件

在现有官方组件无法满足我们开发需求的时候，小程序也支持 自定义组件。

组件模板

组件模板和页面类似，也是包含 xxx.js、xxx.wxml、xxx.wxss、xxx.json

自定义组件1.png

创建一个button组件

1. 配置组件，testbutton.json

{
  "component" : true
}

2. 绘制界面和样式

testbutton.wxml

<view class="test-button" bindtap="onClick">
  {{content}}
</view>

testbutton.wxss

.test-button {
  width: 100%;
  height: 100rpx;
  background-color: burlywood;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center; 
  color: cornflowerblue;
}

3. 构造组件

Component 构造器可以指定组件的属性、数据、方法等，具体使用可以参考 Component 构造器。

testbutton.js

Component({
  //声明属性
  properties:{
    content:{
      type: String,
      value: 'test'
    }
    
  },
  methods: {
    onClick: function() {
      console.log('test button onclick')
      var myEventDetail = {
        toastContent: 'This is a test-button'
      }
      var myEventOption = {}
      //声明事件，组件间传递数据
      this.triggerEvent('onClick', myEventDetail, myEventOption)
    }
  }

})

4. 使用自定义组件

使用的界面需要通过 usingComponents 引用该组件

{
  "usingComponents": {   
    "Test-Button": "/component/testbutton/testbutton"
  },
  "navigationBarTitleText": "项目"
}

界面中直接使用该标签

<Test-Button content="This is a test-button" bindonClick="onClick"></Test-Button>

点击后弹出一个toast

  onClick(event) { 
    console.log(event)   
    wx.showToast({
      title: event.detail.toastContent,
      duration: 2000
    })
  }

自定义组件2.png

六、博客阅读demo开发

通过开发一个简单的demo，可以对以上的内容有更直观的了解。

玩Android API：https://www.wanandroid.com/blog/show/2

1. tab主界面，展示最近博客列表

   
   
   首页.png

2. 点击浏览具体文章

   
   
   浏览文章.png

3. 根据作者，展示文章列表

   
   
   文章.png

demo地址

参考：

官方文档

微信小程序入门教程之一：初次上手

一个漂亮玩安卓小程序版本wanandroid-mini