目录

微信小程序的开发

简介

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。微信小程序则是微信平台的小程序,背靠微信的用户体系、数据。

微信 web 小程序和传统 web 的文件结构对比

- 传统 web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 JavaScript JavaScript
配置 - JSON

开发环境搭建

获取 AppID

注册微信小程序开发者账号,进入开发设置页面复制 AppID

微信开发工具

下载微信开发者工具,功能按照界面描述理解就可以了。

基础

项目目录

pages : 小程序对应页面的目录

  • index : 首页
    • index.js : index 页面下的 JS
    • index.wxml : index 页面下的页面结构
    • index.wxss : index 页面下的样式文件
  • page1 : 子页面
    • page1.js
    • page1.json : page1 页面的配置文件
    • page1.wxml
    • page1.wxss

components : 自定义组件目录(结构类似 pages)

utils : 自己封装的工具函数路径

app.js : 全局的教本文件

app.json : 全局的配置文件

app.wxss : 全局的样式文件

project.config.json : 项目的描述文件类似package.json

全局配置 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。完整配置项说明请参考小程序全局配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 常用配置
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

页面配置

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

1
2
3
4
5
6
7
8
// 常用配置
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

注册小程序

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// 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'
})

注册页面

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//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)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

注册自定义组件

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

创建自定义组件

1
2
3
4
<!--xxx.json-->
{
"component": true
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

使用自定义组件

1
2
3
4
5
6
<!--xxx.json-->
{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}
1
2
3
4
<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

视图结构

数据绑定

1
2
<!--wxml-->
<view> {{message}} </view>
1
2
3
4
5
6
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

1
2
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
1
2
3
4
5
6
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

1
2
3
4
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
1
2
3
4
5
6
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

基本组件

view

微信小程序的块级标签,类似 HTML 的<div>

  • hover-class : 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果。

text

微信小程序的行级标签,类似 HTML 的<span>。只能嵌套自己。

  • selectable : 文本是否可选
  • space : 显示连续空格
  • decode : 是否解码

image

  • src : 图片资源地址
  • lazy-load : 图片是否懒加载

video

  • src : 视频资源地址

swiper

轮播视图容器。其中只能放swiper-item

  • url : 跳转链接