第一章总结

认识微信小程序

简介:

小程序是微信的一种新的开发能力，具有出色的用户使用体验，可以在微信内被便捷地获取和传播；订阅号为媒体和个人提供一种新的信息传播方式，构建信息发布者与浏览者之间更好的沟通与管理模式；服务号为企业和组织提供更强大的服务与用户管理能力，帮助企业快速实现全新的公众号服务平台；企业微信（公众号）为企业提供专业的通信工具、丰富的办公应用与应用程序接口（Application Programming Interface，API)，助力企业高效沟通与办公。

特征:

1. 无须安装 
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
2. 触手可及
用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通.
3. 用完即走
用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对不理会，实现用完即走。
4. 无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载。

应用场景的特点：

1. 简单的业务逻辑
简单是指应用本学的业务逻银并不复统。例如，出行类应用“a如小黄车”，用户通过扫描二维码就可以实现租车，该过用的业务芝用非常简单，服务时间很短符。“完即走”。此外，各类020(Onine 1o OHIne，线上到线下)API，如家政服务、订餐类应用、天气预报类应用，都符合“简单”这个特性。不过，对于业务复杂的应用，无论从功能实现上还是从用户体验上，小程序都不如原生App(Application的简写，应用)。
2.低频度的使用场景
低频度是小程序使用场景的另一个特点。例如，提供在线购买电影票服务的小程序应用“猫眼”，用户对该小程序的使用频度不是很高，就没有必要在手机中安装一个单独功能的App。

代码作用:

{

  "usingComponents": {

  }

}

主要是设置页面的路径，页面的窗口，网络超时时间，设置tabBar,是否开启debug模式。

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

          })

        }

      })

    },

  },

})

主要是定义页面和组件、数据处理和业务逻辑、API调用和网络、模块化开发

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

里面编写一些页面内容，UI标签，数据绑定

/**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;

}

里面编写一些 .wxml 里面的 css 样式，它跟普通 css 文件又有点区别，.wxml 文件可以导入其他的 .wxml 文件进来使用…
 

小程序运行截图: