小程序是什么？

可以视为只能用微信打开和浏览的网站，使用 javascript、css、wxml 开发，只能使用微信提供的 API

优势：
微信提供的 API 功能丰富

开发准备

  • AppID、AppSecret
  • 小程序开发工具
  • 导入项目

基础目录结构

  1. app.js
    新建小程序实例，参数为配置对象
1
2
3
4
5
6
7
8
9
10
11
12
13
App({
    globalData:{},
    onLaunch: function(){
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Data.now())
        wx.setStorageSync('logs', logs)
        wx.login({
            success: function(res){
                console.log(res.code)
            }
        })
    }
})
  1. app.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}
  1. pages/index/index.js
1
Page({})

  1. pages/index/index.wxml

  2. 配置文件 app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

样式、布局

  1. 顶层 app.wxss
  2. 样式文件后缀 .wxss
  3. 样式语法同 CSS
  4. 小程序推荐使用 Flex 布局

常用组件

  • view
  • block
  • text
  • image
  • swiper
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view>
  <swiper
    indicator-dots="{{true}}"  // 是否显示轮播点
    autoplay="{{true}}"  // 是否自动播放>
    <swiper-item>
      <image src="urls"></image>
    </swiper-item>
    <swiper-item>
      <image src="urls"></image>
    </swiper-item>
    <swiper-item>
      <image src="urls"></image>
    </swiper-item>
  </swiper>
</view>

{{...}} 表示这是一段 javascript 代码

  • open-data
1
2
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

支持的用户信息

  1. userNickName：用户昵称
  2. userAvatarUrl：用户头像
  3. userGender：用户性别
  4. userCity：用户所在城市
  5. userProvince：用户所在省份
  6. userCountry：用户所在国家
  7. userLanguage：用户语言
  • navigator
1
2
3
4
<navigator url="../second/second">页面跳转</navigator>
wx.navigateTo({
    url: '../second/second'
});

脚本编程

  • 数据绑定
1
2
3
4
5
6
Page({
    data: { 
        // 配置当前页面全局变量
        str: 'world'
    }
})

<text class="title">hello {{str}}</text>
变量名区分大小写，str 和 Str 是两个不同的变量名

  • 全局数据
    多个页面共享
1
2
3
4
5
6
7
8
9
10
11
12
13
App({
    globalData: {
        now: (new Date()).toLocaleString()
    }
})

// 页面使用全局数据
const app = getApp()
Page({
    data: {
        now: app.globalData.now
    }
})

事件

事件是小程序互动的主要手段，小程序通过接收各种事件，执行回调函数响应交互

  • 常见事件
  1. tap：触摸后离开
  2. longpress：触摸后，超过 350ms 离开，指定了该事件的回调函数被触发，tap 事件将不被触发
  3. touchstart：触摸开始
  4. touchmove：触摸后移动
  5. touchcancel：触摸后被打断
  6. touchend：触摸结束

事件传播会有两个阶段：先捕获、后冒泡，同一事件在同一元素上会触发两次

  • 通过属性指定事件回调，指定触发阶段
  1. capture-bind：捕获阶段触发
  2. capture-catch：捕获阶段触发，中断捕获阶段，取消冒泡阶段
  3. bind：冒泡阶段触发
  4. catch：冒泡阶段触发，并取消事件进一步向上冒泡

注意事项

  1. 事件回调函数的参数是事件对象 event
  2. 事件回调函数内部 this -> 页面实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
buttonHandler(e) {
    console.log('事件触发')
    const that = this
    wx.showModal({
        title: '操作确认？',
        content: '确定修改内容吗？',
        success(res) {
            if (res.confirm) {
                that.setData({
                    'motto': 'motto'
                }, () => {
                    wx.showToast({
                        title: '操作完成',
                        duration: 700
                    })
                })
            } else if (res.cancel) {
                console.log('用户取消操作')
            }
        },
        cancelColor: 'cancelColor',
    })
}

WXML 语法

官方文档

1
2
3
<text class="title" wx:for="{{items}}">
    {{index}}、 {{item}}
</text>

客户端数据储存

wx.setStorageSync('key', value)
wx.getStorageSync('key')

注意事项：客户端存储是不可靠的

远程数据请求

微信规则：后台登记过的服务域名，才可以进行通信。开发者工具可以开放限制

  • 本地设置 -> 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

    json-server

  • 根据 JSON 数据文件，自动生成 RESTful 接口
    npx json-server db.json

1
2
3
4
5
6
wx.request({
    url:'',
    success(res){
        console.log('远程调用')
    }
})