一、小程序注册流程

通过以下几个步骤，进行小程序的注册：

1. 注册方法

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

2. 选择注册的帐号类型

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

3. 填写邮箱和密码

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

4. 激活邮箱

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

5. 填写主体信息

点击激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。选择主体类型：

主体类型说明如下：

注册选择类型	组织机构类型
个人	18岁以上有国内身份信息的微信实名用户
企业类型	个人独资企业、企业法人、企业非法人、非公司制企业法人、全名所有制、农民专业合作社、企业分支机构、合伙企业、其他企业个体户，个体工商户、个体经营
媒体类型	事业单位媒体、其他媒体、电视广播、报刊、杂志、网络媒体等
其他组织	免费类型（基金会，政府机构驻华代表处）
	社会团体（社会团体法人、社会团体分支、代表机构、其他社会团体、群众团体）
	民办非企业，学校，医院等
	其他组织（宗教活动场所、农村村民委员会、城市居民委员会、自定义区、其他未列明的组织机构）
政府单位	事业单位（事业单位法人、事业单位分支、派出机构、部队医院、国家权力机关法人、其他事业单位）
政府单位	政府机关(国家行政机关法人、民主党派、政协组织、人民解放军、武警部队、其他机关)

验证方式说明：

企业类型帐号可选择两种主体验证方式。

方式一：支付验证

需要用公司的对公账户向腾讯公司打款来验证主体身份，打款信息在提交主体信息后可以查看到。

请根据页面提示，向指定的收款帐号汇入指定金额。

温馨提示：请在10天内完成汇款，否则将注册失败。

方式二：微信认证

通过微信认证验证主体身份，需支付300元认证费。认证通过前，小程序部分功能暂无法使用。

如需了解主体验证方式请查看→ “http://kf.qq.com/faq/170109QvMNRB170109nYnYFr.html”

确认主体信息

填写管理员信息并确认主体信息不可变更信息完成注册。

6. 登录获取小程序APPID

登录补填小程序基本信息，管理人员，以及业务域名等，并获取APPID进行开发。

二、小程序原生开发入门

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 是监听页面卸载的函数

三、框架选型

1. 为什么采用框架

先说结论，推荐使用 uni-app。

使用原生开发的问题：

小程序本身不支持常用的 css 预编译器
不支持 ES7 以上的高级语法，如 async await 等特性；
不支持工程化，如环境、变量等管理
缺少统一的 request 拦截请求
缺少统一的本地缓存读取管理

目前市面上开源的框架可以帮助我们解决上述问题，有些框架还有比较便捷的脚手架工具、以及支持多端的能力。

2. 可选框架

官网

WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。
Mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，Mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
Uni-App 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用。
Megalo 是基于 Vue（Vue@2.6.6）的小程序开发框架，让开发者可以用 Vue 的开发方式开发小程序应用。Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案，只需要少量改动即可完成 H5 和小程序之间的代码迁移。
MPX
Nanachi

3. 跨端支持

框架	技术栈	案例	微信小程序	支付宝小程序	百度小程序	头条小程序	H5	App
WePY	Vue	丰富	⭕	❌	❌	❌	❌	❌
mpvue	Vue	丰富	⭕	❌	❌	❌	⭕️	❌
uni-app	Vue	丰富	⭕	⭕️	⭕️	⭕	⭕️	⭕
megalo	Vue	少	⭕	⭕️	⭕️	❌	❌	❌
Mpx	Vue	少	⭕	❌	❌	❌	❌	❌
Taro	React/Vue	丰富	⭕	⭕	⭕	⭕	⭕	⭕
Nanachi	React	少	⭕	⭕️	⭕️	⭕️	⭕️	❌

4. 选择权重

生态：案例多说明使用者多，坑应该都踩得差不多了，有坑也应该是明坑；案例少的话，就要自己上去踩，暗坑多少不清楚；从官网公开案例来看，taro、uni-app、mpvue、wepy公开展示的案例较多
跨端：开发后内容考虑兼顾其他平台，故wepy、mpx这种针对微信小程序的增强型开发框架首先排除，其次mpvue虽支持 H5 平台代码复用，但未跟进其它几家小程序。
技术栈：首选 Vue

5. uni-app or taro

由于 Taro 3 开始也支持 Vue，故对于同时满足跨端，生态、技术栈，Taro 和 Uni-app 成为唯二选择。

小公司选择框架首选生态，毕竟趟坑人力有限。

生态

Taro官方发布了taro-ui库，awesome里三方组件不太多。
uni-app官方发布了uni-ui库，还有插件市场，轮子很多。

工具

工具属性维度，uni-app明显胜出，其出品公司同时也是HBuilder的出品公司，DCloud.io。 HBuilder/HBuilderX系列是国产开发工具，有300万开发者用户。 HBuilderX为uni-app做了很多优化，故uni-app的开发效率、易用性非其他框架可及。当然对于不习惯HBuilderX的开发者而言，uni-app的这个优势无法体现。

学习资料

官方文档、搜索系统的完备度方面：uni-app文档内容丰富，示例demo完备，taro相对要弱一些。教程方面：uni-app官方有视频教程，不少三方专业培训机构也录制的uni-app教程，包括腾讯课堂自家NEXT学院也录制了uni-app培训视频课，公开售卖；taro没有视频教程，但官方发布了掘金小册。学习成本 uni-app更低。