第一章总结

小程序简介

微信小程序于2017年1月9日正式上线。微信之父张小龙曾经说过：微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

微信小程序特征

微信小程序是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开应用。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。

1.无需安装与卸载

用户无需下载安装即可使用小程序，使用完后也无需卸载，节省手机存储空间。

2.触手可及

小程序可以在微信内直接搜索并找到，用户无需跳转到其他应用或浏览器。

3.用完即走

小程序无需注册登录，用户可以直接使用，使用完成后即可退出，无需担心卸载问题。

4.快速加载与使用

小程序的体积小，加载速度快，用户无需等待即可使用。

5.跨平台

小程序可以在iOS和Android平台上使用，具有强跨平台性。

6.与微信生态系统互联互通

小程序可以与微信公众号、微信支付等微信生态系统中的其他功能进行互联互通，提供了更多的服务和功能。

7.安全性高

小程序经过微信平台的审核和监管，具有较高的安全性和可靠性。

8.制作成本低

相对于传统的App开发，小程序的制作成本较低，开发周期也较短。

9.灵活性强

小程序可以轻松地与其他技术结合，满足各种功能需求。

10.多种应用场景

小程序适用于各种应用场景，包括电商、生活服务、游戏、教育等。

小程序的应用场景

小程序的应用场景非常广泛，几乎涵盖了人们日常生活中的各种需求和服务。以下是一些常见的小程序应用场景：

1.电商购物

小程序可以用于在线购物，用户可以通过小程序直接购买商品，无需离开社交媒体平台。

2.餐饮服务

餐厅和咖啡店可以使用小程序来提供在线订餐服务，用户可以通过小程序查看菜单、下单、支付等。

3.旅游出行

旅游公司可以使用小程序来提供在线预订机票、酒店、门票等服务，用户可以通过小程序方便地查询和预订。

4.金融服务

银行和保险公司可以使用小程序来提供在线理财、保险等服务，用户可以通过小程序方便地管理自己的财务和保险。

5.教育培训

学校和培训机构可以使用小程序来提供在线课程、考试等服务，学生可以通过小程序方便地学习和参加考试。

6.生活服务

洗衣店、超市、快递公司等可以使用小程序来提供在线预约、下单、支付等服务，用户可以通过小程序方便地处理各种生活琐事。

7.医疗健康

医院和诊所可以使用小程序来提供在线挂号、预约、诊断等服务，用户可以通过小程序方便地管理自己的健康。

8.娱乐休闲

电影院、KTV、游戏厅等可以使用小程序来提供在线预订、点餐、游戏等服务，用户可以通过小程序享受更多的娱乐和休闲。

9.社交通讯

社交媒体平台可以使用小程序来提供更便捷的聊天、分享等功能，用户可以通过小程序更加方便地与他人交流。

10.物流配送

快递公司可以使用小程序来提供在线下单、查询物流等服务，用户可以通过小程序方便地处理各种物流问题。

创建第一个微信小程序

第一次打开或者长时间未打开“微信web开发者工具”，双击应用后弹出一个二维码，如下图所示

使用开发者的微信扫描二维码进入后，出现下图所示的界面

单击“小程序项目”选项，将出现如下图所示的对话框，填入“项目目录”“AppID”和“项目名称”，并勾选“创建QuickStart项目”复选框。单击“确定”后，将创建成功一个系统默认的示例项目，如下图所示

微信小程序示例代码及代码执行结果

// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Component({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },
  methods: {
    // 事件处理函数
    bindViewTap() {
      wx.navigateTo({
        url: '../logs/logs'
      })
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    onInputChange(e) {
      const nickName = e.detail.value
      const { avatarUrl } = this.data.userInfo
      this.setData({
        "userInfo.nickName": nickName,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res)
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    },
  },
})

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}