第一章总结

小程序的简介

微信(WeChat)是腾讯公司于2011年1月 21日推出的一款为智能终端提供即时通信
(InstantMessaging，IM)服务的应用程序。
微信之父张小龙曾经解释： 小程序是一种不需要下载安装即可使用的应用， 它实现了应
用“触手可及”的梦想，用户扫一扫(二维码)或者搜一下 (关键词)即可打开应用。微
信小程序体现了“用完即走”的理念， 用户不用关心是否安装太多应用的问题。有了微信
小程序，应用将无处不在，随时可用， 且无须安装与卸载。
小程序、订阅号、服务号、企业微信(企业号) 属于微信公众平台的四大生态体系，
它们面向不同的用户群体， 应用于不同的方向和用途。 小程序是微信的一种新的开发能力，
具有出色的用户使用体验， 可以在微信内被便捷地获取和传播； 订阅号为媒体和个人提供一
种新的信息传播方式， 构建信息发布者与浏览者之间更好的沟通与管理模式； 服务号为企业
和组织提供更强大的服务与用户管理能力， 帮助企业快速实现全新的公众号服务平台；企业
微信(公众号)为企业提供专业的通信工具、 丰富的办公应用与应用程序接口(Application
Programming Interface，APl)，助力企业高效沟通与办公。

小程序的特征

优势:无须安装、触手可及、用完即走、无须卸载场景。

小程序应用场景的特点

简单的业务逻辑、使用频率低

第一个微信小程序项目

 

 index.wxml

<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<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.ts

// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
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: any) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    onInputChange(e: any) {
      const nickName = e.detail.value
      const { avatarUrl } = this.data.userInfo
      this.setData({
        "userInfo.nickName": nickName,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    getUserProfile() {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res)
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    },
  },
})

 index.scss

/**index.scss**/
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;
}

{

index.json

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

截图

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

1.工具栏

在工具栏中可以实现多种功能，例如账号的切换，模拟区，编辑区，调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。

2.模拟区

在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。

3.目录文件区

目录文件区用来显示当前项目的目录结构，单击左上角的”+“按钮可以进行目录和文件的创建，右键单击目录文件区中文件或目录可以进行”硬盘打开“”重命名“”删除“等相关操作。

4.编辑区

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json文件的操作，使用组合键能提高代码的编辑效率。

5.调试区

调试区的功能是帮助开 发者进行代码调试及排查有问题的区域。小程序系统为开发者提
供了9个调试功能模块，分别是 Console、 Sources、 Network、Security、 Storage、AppData、
Wxml、Sensor和Trace。 最右边的扩展菜单项 “：” 是定制与控制开发工具按钮，如图1一
24所示。