第一章总结

dsgbg

已于 2024-03-03 12:17:59 修改

阅读量1.2k

点赞数 22

文章标签：微信小程序小程序

于 2024-03-01 12:18:38 首次发布

本文链接：https://blog.csdn.net/dsgbg/article/details/136391076

版权

1. 认识微信小程序

1.1 介绍

微信小程序(WeChat Mini Program)是腾讯公司于2017年2月推出。是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与腾讯一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效益不断提升。

1.2 特征

快速启动：小程序无需下载和安装，用户可以直接通过扫描二维码或搜索即可使用，大大降低了使用门槛和用户流失率。

低内存占用：小程序相对于传统的原生应用来说，占用的内存更少，对手机性能的要求更低，能够在低端设备上流畅运行。

无需安装：小程序不需要用户手动安装，减少了用户的操作步骤，提高了用户体验。

跨平台支持：小程序可以在多个平台上运行，如微信、支付宝、百度等，开发一次即可在多个平台上使用。

离线访问：小程序可以缓存数据，支持离线访问，即使在没有网络的情况下，用户仍然可以使用一些基本功能。

强大的生态系统：小程序有庞大的用户群体和丰富的生态系统，开发者可以通过小程序平台获取更多的曝光和用户。

2.微信小程序开发流程

2.1 注册微信小程序

1.注册方法在微信公众平台官网首页（mp.weixin.qq.com点击右上角的“立即注册”按钮。

2.选择注册的账号类型选择“小程序”，点击“查看类型区别”可查看不同类型账号的区别和优势。

3.填写邮箱和密码请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。

4.激活邮箱登录邮箱，查收激活邮件，点击激活链接。

2.2 微信开发者工具下载及安装

1.下载安装包

2.安装微信Web开发者工具

3.申请小程序管理员账号，获取开发者AppID

4.小程序管理员授权测试用的微信账号

5.通过已授权的微信扫描登录开发者工具

6.新建并导入项目（项目路径+项目名称+AppID）

7.预览和调试小程序

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

3.1 微信开发者首页

如下图所示：

3.2 资源管理器

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

资源管理器中miniprogram\pages\index\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
          })
        }
      })
    },
  },
})

资源管理器中miniprogram\pages\index\index.json文件。

如下图所示：

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

资源管理器中miniprogram\pages\index\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;
}

资源管理器中miniprogram\pages\index\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>

3.3 工具栏

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

如下图所示：

3.4 模拟器

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

如下图所示：

3.5 调试器

调试区的功能是帮助开发者进行代码调试及非查有问题的区域。微信小程序系统为开发者提供了13个调试功能模块，分别是Wxml、Console、Sources、Network、Performance、Memory、 AppData、Storage、Security、Sensor、Mock、Audits、Vulnerability。最右边的扩展菜单项“”是定制与控制开发工具按钮。

Wxml是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

如下图所示：