从零开始打造一个报名小程序
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
优势
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%;
}
调试没什么问题后,可以提交到真机预览
点开发者工具-》项目-》基础信息-》预览
用微信扫描二维码,即可进行预览,效果图如下
要邀请其他人一起体验的话,点击预览下面的上传按钮
上传后会生成一个体验版本,在微信官方后台-》开发管理,设置一下,就会生成一个体验版的二维码
然后在用户身份-》成员管理处,添加成员,邀请进行体验