# 二、小程序原生开发入门

# 1. 安装开发者工具

打开微信开发者工具，用微信扫码登录开发者工具，确认后会进入选择「小程序项目」出现如下界面：

# 示例程序

点击「确定」后，出现一个示例项目的预览，点击顶部菜单「编译」就可以在微信开发者工具中预览你的第一个小程序。

# 2. 代码构成

├── pages                  页面目录
|   ├── index              首页
|   |   ├── index.js       页面逻辑
|   |   ├── index.json     页面配置
|   |   ├── index.wxss     页面样式表
|   |   └── index.wxml     页面结构
|   ├── logs               日志页
|   |   ├── logs.js        页面逻辑
|   |   ├── logs.json      页面配置
|   |   ├── logs.wxss      页面样式表
|   |   └── logs.wxml      页面结构
├── utils                  工具函数目录
|   ├── utils.js           工具函数
├── app.js                 app入口文件
├── app.json               app配置文件
├── app.wxss               app样式文件
└── project.config.json    项目配置文件
└── sitemap.json           小程序页面索引配置

小程序必须要有一个 app.js 入口文件，app.json 配置文件。project.config.json 是工具配置文件，方便你在不同的电脑上开发时，开发者工具能拥有相同的设置。

每个页面上，同样会有 page.json 、page.js 、 page.wxml 、 page.wxss 这四种文件。分别是页面配置，页面逻辑，页面模板和页面样式文件。

# app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

所有的页面都需要在app.json的pages里面增加入口，这样才能让页面被加载。

# index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

可以见到，页面中有一个 Page 包裹着一个对象，页面的 data、一些生命周期、一些方法，都挂载在该对象上。而小程序正是通过这样的方式进行初始化的。

# index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.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>

WXML 模板文件里面，提供了数据绑定、列表渲染、条件渲染、模板、事件、引用等功能，有点类似Vue的语法。

# index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

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

.usermotto {
  margin-top: 200px;
}

WXSS 样式文件和 CSS 别无大异，能支持绝大多数的 CSS 、 CSS3 的语法。

# 3. 生命周期

小程序的生命周期分为页面的生命周期和整个应用的生命周期。

应用的生命周期主要有 onLaunch、onShow、onHide

onLaunch 是当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow 是当小程序启动，或从后台进入前台显示，会触发 onShow
onHide 是当小程序从前台进入后台，会触发 onHide

页面的生命周期)会比较多一些，有 onLoad、onReady、onShow、onHide、onUnload

onLoad 是监听页面加载的函数
onReady 是监听页面初次渲染完成的函数
onShow 是监听页面显示的函数
onHide 是监听页面隐藏的函数
onUnload 是监听页面卸载的函数

← 一、小程序注册流程三、框架选型 →