第一章 微信小程序概述总结_微信小程序使用介绍

目录

学习目标

如何认识小程序？

1.1  小程序简介

1.2小程序的特征

1.3 小程序应用场景的特点

1.4 微信小程序开发流程

1.5 下载微信小程序开发中工具APP

微信开发者功能介绍

（1）工具栏

（2）模拟区

（3）目录文件区

（4）编辑区

                                           表1-1  微信小程序开发工具常用组合键

（5）调试区

调试区功能介绍

---

学习目标

了解小程序的特点

了解微信小程序的应用领域

掌握微信小程序开发工具的安装及使用

掌握微信小程序的开发流程

熟练使用微信小程序开发者工具

如何认识小程序？

1.1  小程序简介

微信（WeChat）小程序是腾讯公司于2011年1月21日退出的一款智能终端提供即时通信（Instant Messaging,IM）服务的应用程序，小程序是一种不需要下载安装级可使用的应用。

1.2小程序的特征

（1）无需安装

（2）触手可及

（3）用完即走

（4）无需加载

1.3 小程序应用场景的特点

（1）简单的业务逻辑

简单是指应用本身的业务逻辑。例如："小黄车"

（2）低频度的使用场景

低频度是小程序使用场景的另一个特点。例如："猫眼"

1.4 微信小程序开发流程

第一步：在微信公众号平台上注册小程序账号

第二步：下载开发者工具进行编码

第三步：通过开发者工具提交代码，通过审核后便可发布

1.5 下载微信小程序开发中工具APP

 学习这本课程中，首先，需要安装一个软件APP，之后注册一个微信小程序账号

微信开发者功能介绍

微信小程序界面划分于5大区域：工具栏、模拟区、目录文件区、编辑区和调试区。

（1）工具栏

实现多种功能，例如账号切换，小程序编译、清理存缓、预览等

（2）模拟区

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

（3）目录文件区

用来显示当前的目录结构

（4）编辑区

用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json文件的操作

编辑区常用的组合键：

                                           表1-1  微信小程序开发工具常用组合键

（5）调试区

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

调试区功能介绍

（1)Console面板

Console面板是控制台，是调试小程序的控制面板，当代码执行错误时，错误信息将显示在控制Console面板中，便于开发者排查错误。

（2）Sources面板

Sources面板是源码，用于显示当前项目的脚本文件，例如：微信开放文档

（3）Network面板

Network面板是请求网络调试信息页，用于显示当前项目的脚本文件

（4）Security面板

Security面板是安全人证信息页，开发者可以通过该面板调试当前的网页的安全和认证等问题。如果安全设置安全论证，则会显示“The security of this page is unknown.”

(5)Storage面板

Storage面板是数据库存储信息页

（6）AppData面板

AppData面板是实时数据信息页，用于显示被激活的所有页面的数据情况

（7）Wxml面板

Wxml面板是布局信息页，主要用于调试Wxml组件和相关CSS样式，显示Wxml转化后的界面。

（8）Sensor面板

Sensor面板是重力传感器信息页，用于调试重力感应API

(9)Trace面板

Trace面板是路由跟踪信息页，开发者在这里可以追踪连接到电脑中的安装的路由信息

我的第一个微信小程序代码如下所示：

.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>

.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;
}

.json代码：

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

.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
          })
        }
      })
    },
  },
})

最后呈现的效果图为：