第一章微信小程序的概述

认识微信小程序

微信小程序的简介

一、什么是微信小程序
微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

微信小程序的优缺点

优点
不需要安装，省去了安装的麻烦
体积小，节省手机空间
使得手机桌面更加简洁
可以依靠微信平台传播、获取客户，节省了推广成本
开发周期短，节省了开发成本
开发门槛相对较低
连接线上线下，给生活带来了便利…
缺点
微信小程序整个体系依赖于微信
推送消息有诸多限制
小程序不能承载用户的所有需求

微信小程序的应用场景

1、低频类场景
　　用户生活中出现频率较低、不会每天多次进入的场景即为低频类场景，如房屋交易、车辆购买、家政保洁、旅游出行等。由于用户不愿意为某个低频场景特意安装App，导致低频类场景的App推广转化效果通常一般。

小程序“无须安装”的特点完全可以弥补此场景下App的不足，用户在低频类场景下可以直接进入小程序进行相关操作，降低了企业产品与用户的接触门槛。

例如，房屋交易属于低频场景，多数用户数十年交易一次。为应对这一低频场景，“房天下”开发出对应的小程序“房天下+”，用户无须安装App即可实现成交总览、房屋查询、房贷计算等功能。

2、碎片类场景
　　碎片类场景指的是用户每日打开次数较多，但每次使用时间较短的场景，如工作之余玩小游戏、乘坐地铁时看视频、网上购物等。

用户对这类场景的产品主要需求是“快进快出”，最好一键进入或退出。小程序可以很好地满足用户的这类需求——用户有超过10种快速进入小程序的方法，而且点击右上角的圆圈即可直接退出。

解决碎片类场景需求的小程序包括“跳一跳”“我最在行”“腾讯视频”“京东购物”等。

3、社交类场景
　　微信本身是一款社交软件，用户最常用到的是微信的聊天功能。不过由于微信的产品设计力求简洁，社交场景下无法进行更丰富的玩法。

小程序可以很好地满足用户对社交类场景的多样化需求，如群打卡、群聊精华、群投票、好友红包、聊天猜谜等。

例如，“群空间助手”是一款基于微信群的小程序，为用户的社交类场景提供了更多功能支持。群成员可以共享相册与动态、进行群内运动PK及投票，且内容可以永久保存，不被清空。

4、移动办公类场景
　　移动办公类场景指的是借助无线网络使用智能手机或平板电脑等移动设备进行商务活动的场景。在这类场景下，用户希望能高效地完成公文撰写、日程查看、文件管理、通知公告等事项。

小程序可以为移动办公类场景提供产品支持，用户直接使用微信即可快速处理日常商务事项。围绕此类场景开发的小程序包括“微信发票助手”“Teambition活动”“微考勤”“销售管家”等。

例如，小程序“微信发票助手”支持发票信息的编辑、分享和保存，为移动办公类场景下的用户提供了发票抬头添加、发票查验、发票管理等功能。

5、服务类场景
　　服务类场景多指线下服务场景，如饭店点餐、景点买票、营业厅排号、KTV点歌等。传统的线下服务场景需要大量人力或硬件设备投入，且效率较低；小程序可以为服务类场景提供支持，用户无须等待，直接用微信就能进行线下操作

代码

index.js

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

Page({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },
  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
        })
      }
    })
  },
})

index.json

{
  "usingComponents": {
  }
}

 index.wxml

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="userinfo">
      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
        </button>
        <view class="nickname-wrapper">
          <text class="nickname-label">昵称</text>
          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
        </view>
      </block>
      <block wx:elif="{{!hasUserInfo}}">
        <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
        <view wx:else> 请使用2.10.4及以上版本基础库 </view>
      </block>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>
    <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
    </view>
  </view>
</scroll-view>

 index.wxss

 

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

微信小程序开发者工具界面功能介绍