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

优势

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/
立即注册
TIM图片20170824170511.png
用个人邮箱就可以注册
注册完成后,登录进入后台
进入设置找到小程序的AppId,为下一步做好准备
QQ图片20170824220635.png

下载微信开发者工具

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

添加项目

打开开发者工具,选择“本地小程序项目”,添加项目
QQ图片20170824221155.png

输入AppId和项目名,选择一个本地目录作为项目目录
勾选上quick_start会在目录下新建一些示例代码
QQ图片20170824221330.png

点击添加项目以后,可以看到示例的hello world
QQ图片20170824221706.png

系统分析

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

那么如何与数据库进行交互呢?
接口!
用小程序的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合法域名,
QQ图片20170824231319.png

再回到开发者工具,项目-》配置信息那刷新一下
QQ图片20170824234840.png

展示已报名人员

上一步实现了报名操作,现在把已报名的人员列表展示出来
在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%;
}

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

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