从零开始打造一个报名小程序

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

优势

1、对用户使用上来说，确实方便，要用的时候打开，不用的时候关掉，即用即走。这点比需要下载，还要占用手机内存空间的APP要好。

2、主要的样式代码都封装在微信小程序里面，所以打开速度比普通的H5要快，接近原生APP。

3、可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景。

4、在安卓手机上可以添加到手机桌面，看上去跟原生APP差不多，但仅限安卓手机，iphone就不行了。

5、运行速度跟APP差不多，也能做出很多H5不做到的功能，开发成本跟H5差不多，相对来说开发成本比APP要低。

劣势

1、微信小程序只有2M的大小，这样导致无法开发大型一些的小程序。所以目前你会看到很多小程序真的很小很简单。

2、小程序的技术框架还不稳定，开发方法时常有修改，导致短时间内经常要升级维护，或许这能解析为什么小程序只能2M大小，怕部署太大型的项目会出大问题。

3、不能跳转外链网址，所以间接影响了小程序的开放性。也可能是想限制其他支付方式或功能接入（或许是我想多了）。

4、不能直接分享到朋友圈，哎呀，少了一个重要的推广方式。

5、需要像APP一样审核上架，这点比HTML5即做即发布要麻烦些。

微信小程序入口在哪里？相信大家都已经使用过摩拜单车的小程序了。。。

小程序既不是原生开发，也不是纯html5网页，是以混合hybird的方式展示

小程序API一览

https://mp.weixin.qq.com/debug/wxadoc/dev/api/

更多教程看官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/

介绍完毕，正式开工

注册小程序

现在个人也可以注册小程序了
打开微信公众平台的登录页：https://mp.weixin.qq.com/
立即注册

用个人邮箱就可以注册
注册完成后，登录进入后台
进入设置找到小程序的AppId，为下一步做好准备

下载微信开发者工具

针对公众号和小程序，微信推出了“开发者工具”，集成了开发调试、代码编辑及程序发布等功能。
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

添加项目

打开开发者工具，选择“本地小程序项目”，添加项目

输入AppId和项目名，选择一个本地目录作为项目目录
勾选上quick_start会在目录下新建一些示例代码

点击添加项目以后，可以看到示例的hello world

系统分析

我们看到示例取到了用户的头像和昵称，
我们现在要实现一个简单的报名功能，
进入小程序，就展示已报名的用户头像和昵称，
未报名的用户，点击报名，记录报名用户的头像和昵称，存入数据库

那么如何与数据库进行交互呢？
接口！
用小程序的api-【wx.request】请求事先准备好的接口
例如：
接口1：获取已报名用户列表接口（GET）
https://api.keyunq.com/getUsers.php
接口2：用户报名接口（POST）（返回0：已经报过名了，其他整数：报名成功）
https://api.keyunq.com/addUser.php

在小程序加载时，调接口1
用户点击报名时，调接口2

报名操作

在示例页面上，新建一个报名按钮
在开发者工具上，打开pages/index/index.wxml首页的页面结构文件
将显示hello world的地方，改成一个报名按钮

<text class="user-motto">{{motto}}</text>

改为

<button type="primary" bindtap="baoming"> {{motto}} </button>

bindtap就是绑定事件处理函数,motto是在data里定义的数据，
关于数据绑定这块，小程序是单向数据绑定，和react类似
通过setData改变数据，同时会刷新页面，展示新的数据

data: {
    motto: '我要报名',
    userInfo: {}
},

然后在index.js文件Page定义里，编写这个函数

baoming: function () {
    console.log('baoming')
}

保存一下，可以在调试界面看到，点击报名，打印出来了baoming字符串
进一步完善，用wx.request调用接口

baoming: function () {
    var that = this
    let avatar = app.globalData.userInfo.avatarUrl
    let name = app.globalData.userInfo.nickName
    wx.request({
      url: 'https://api.keyunq.com/addUser.php',
      data: {
        avatar: avatar ,
        name: name
      },
      method: 'POST',
      header: {
          'content-type': 'application/x-www-form-urlencoded'
      },
      success: function(res) {
        if(res.data == 0) {
          that.setData({
            motto:'您已经报过名了，基佬!'
          })
        } else {
          wx.navigateTo({
            url: '../index/index'
          })
        }
      }
    })
  }

报错"不在以下合法域名列表中",需要在后台配置服务器信息
将接口域名配置为request合法域名，

再回到开发者工具，项目-》配置信息那刷新一下

展示已报名人员

上一步实现了报名操作，现在把已报名的人员列表展示出来
在Page的onLoad函数里，调用接口2，读取数据，展示出来

新增data定义baomingList，报名用户列表数据

data: {
    motto: '我要报名',
    userInfo: {},
    baomingList: {}
  },

onLoad函数，后期为了用户体验，把onLoad改为了onShow函数

onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
    wx.request({
      url: 'https://api.keyunq.com/getUsers.php',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if(res.data) {
          that.setData({
            baomingList: res.data
          })
        }
      }
    })
  },

调用接口2，然后setData到baomingList
然后在view视图文件index.wxml，输出baomingList

<!--index.wxml-->
<view class="container">
  <view class="">已经报名的基佬：</view>
  <view class="page__bd page__bd_spacing">
    <view class="weui-grids">
      <view class="weui-grid text_center" wx:for="{{baomingList}}" wx:key="key"><image class="userinfo-avatar" src="{{item.avatar}}" background-size="cover"></image><view class="weui-grid__label">{{item.name}}</view></view>
    </view>
  </view>
  <view class="usermotto">
    <button type="primary" bindtap="baoming"> {{motto}} </button>
  </view>
</view>

一些样式，app.wxss

/**app.wxss**/
@import "dist/style/weui.wxss";
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

这里我引入了weui的样式，下载weui的样式文件，放在了dist目录
首页的样式文件index.wxss

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

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

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 20px;
}

.grid {
  display: flex;
}
.grid-item {
  display: inline;
}
.page__bd {
  width: 100%;
}

调试没什么问题后，可以提交到真机预览
点开发者工具-》项目-》基础信息-》预览
用微信扫描二维码，即可进行预览，效果图如下

要邀请其他人一起体验的话，点击预览下面的上传按钮
上传后会生成一个体验版本，在微信官方后台-》开发管理，设置一下，就会生成一个体验版的二维码
然后在用户身份-》成员管理处，添加成员，邀请进行体验