微信小程序实验一、小程序与服务器端入门视频讲解（以Wafer Quick Start为例）
(>>>>在公众号中输入彩蛋号，即可获取测试源码与视频讲解的下载地址)
一、实验目的
以Wafer Quick Start为例，掌握微信小程序的入门，特别是服务器端与小程序端之间的交互，实现登录、请求登录状态、上传图片、建立信道与CGI的功能。
二、实验内容
1、界面
2、实现登录、请求登录状态、上传图片、建立信道与CGI的功能。
三、小程序端与服务器端源代码分析
1、登录功能实现
1）小程序端代码
在client\pages\index\index.js中，代码示例如下：
// 用户登录示例
login: function() {
if (this.data.logged) return
util.showBusy('正在登录')
var that = this
// 调用登录接口
qcloud.login({
success(result) {
if (result) {
util.showSuccess('登录成功')
that.setData({
userInfo: result,
logged: true
})
} else {
// 如果不是首次登录，不会返回用户信息，请求用户信息接口获取
qcloud.request({
url:config.service.requestUrl,
login: true,
success(result) {
util.showSuccess('登录成功')
that.setData({
userInfo:result.data.data,
logged: true
})
},
fail(error) {
util.showModel('请求失败', error)
console.log('request fail', error)
}
})
}
},
fail(error) {
util.showModel('登录失败', error)
console.log('登录失败', error)
}
})
},
2）服务器端代码
在server\application\controllers\Login.php中，代码示例如下：
class Login extends CI_Controller {
public function index() {
$result = LoginService::login();
if ($result['loginState'] === Constants::S_AUTH) {
$this->json([
'code' => 0,
'data' => $result['userinfo']
]);
} else {
$this->json([
'code' => -1,
'error' => $result['error']
]);
}
}
}
2、请求登录状态
1）小程序端代码
在client\pages\index\index.js中，代码示例如下：
// 切换是否带有登录态
switchRequestMode: function (e) {
this.setData({
takeSession: e.detail.value
})
this.doRequest()
},
doRequest: function () {
util.showBusy('请求中...')
var that = this
var options = {
url: config.service.requestUrl,
login: true,
success (result) {
util.showSuccess('请求成功完成')
console.log('request success', result)
that.setData({
requestResult:JSON.stringify(result.data)
})
},
fail (error) {
util.showModel('请求失败', error);
console.log('request fail', error);
}
}
if (this.data.takeSession) { // 使用 qcloud.request 带登录态登录
qcloud.request(options)
} else { // 使用 wx.request 则不带登录态
wx.request(options)
}
},
2）服务器端代码
在server\application\controllers\User.php中，代码示例如下：
class User extends CI_Controller {
public function index() {
$result = LoginService::check();
if ($result['loginState'] === Constants::S_AUTH) {
$this->json([
'code' => 0,
'data' => $result['userinfo']
]);
} else {
$this->json([
'code' => -1,
'data' => []
]);
}
}
}
3、上传图片
1）小程序端代码
在client\pages\index\index.js中，代码示例如下：
// 上传图片接口
doUpload: function () {
var that = this
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res){
util.showBusy('正在上传')
var filePath = res.tempFilePaths[0]
// 上传图片
wx.uploadFile({
url:config.service.uploadUrl,
filePath: filePath,
name: 'file',
success: function(res){
util.showSuccess('上传图片成功')
res =JSON.parse(res.data)
that.setData({
imgUrl:res.data.imgUrl
})
},
fail: function(e) {
util.showModel('上传图片失败')
}
})
},
fail: function(e) {
console.error(e)
}
})
},
// 预览图片
previewImg: function () {
wx.previewImage({
current: this.data.imgUrl,
urls: [this.data.imgUrl]
})
},
2）服务器端代码
在server\application\controllers\Upload.php中，代码示例如下：
class Upload extends CI_Controller {
public function index() {
// 处理文件上传
$file = $_FILES['file']; // 去除 field 值为 file 的文件
ini_set('upload_max_filesize', '10M');
ini_set('post_max_size', '10M');
// 限制文件格式，支持图片上传
if ($file['type'] !== 'image/jpeg' && $file['type'] !== 'image/png') {
$this->json([
'code' => 1,
'data' => '不支持的上传图片类型：' . $file['type']
]);
return;
}
// 限制文件大小：5M 以内
if ($file['size'] > 5 * 1024 * 1024) {
$this->json([
'code' => 1,
'data' => '上传图片过大，仅支持 5M 以内的图片上传'
]);
return;
}
$cosClient = Cos::getInstance();
$cosConfig = Conf::getCos();
$bucketName = $cosConfig['fileBucket'];
$folderName = $cosConfig['uploadFolder'];
try {
/**
* 列出 bucket 列表
* 检查要上传的 bucket 有没有创建
* 若没有则创建
*/
$bucketsDetail = $cosClient->listBuckets()->toArray()['Buckets'];
$bucketNames = [];
foreach ($bucketsDetail as $bucket) {
array_push($bucketNames, explode('-', $bucket['Name'])[0]);
}
// 若不存在 bucket 就创建 bucket
if (count($bucketNames) === 0 || !in_array($bucketName, $bucketNames)) {
$cosClient->createBucket([
'Bucket' => $bucketName,
'ACL' => 'public-read'
])->toArray();
}
// 上传文件
$fileFolder = $folderName ? $folderName . '/' : '';
$fileKey = $fileFolder . md5(mt_rand()) . '-' . $file['name'];
$uploadStatus = $cosClient->upload(
$bucketName,
$fileKey,
file_get_contents($file['tmp_name'])
)->toArray();
$this->json([
'code' => 0,
'data' => [
'imgUrl' => $uploadStatus['ObjectURL'],
'size' => $file['size'],
'mimeType' => $file['type'],
'name' => $fileKey
]
]);
} catch (Exception $e) {
$this->json([
'code' => 1,
'error' => $e->__toString()
]);
}
}
}
4、建立信道
1）小程序端代码
在client\pages\index\index.js中，代码示例如下：
// 切换信道的按钮
switchChange: function (e) {
var checked = e.detail.value
if (checked) {
this.openTunnel()
} else {
this.closeTunnel()
}
},
openTunnel: function () {
util.showBusy('信道连接中...')
// 创建信道，需要给定后台服务地址
var tunnel = this.tunnel = new qcloud.Tunnel(config.service.tunnelUrl)
// 监听信道内置消息，包括 connect/close/reconnecting/reconnect/error
tunnel.on('connect', () => {
util.showSuccess('信道已连接')
console.log('WebSocket 信道已连接')
this.setData({ tunnelStatus: 'connected' })
})
tunnel.on('close', () => {
util.showSuccess('信道已断开')
console.log('WebSocket 信道已断开')
this.setData({ tunnelStatus: 'closed' })
})
tunnel.on('reconnecting', () => {
console.log('WebSocket 信道正在重连...')
util.showBusy('正在重连')
})
tunnel.on('reconnect', () => {
console.log('WebSocket 信道重连成功')
util.showSuccess('重连成功')
})
tunnel.on('error', error => {
util.showModel('信道发生错误', error)
console.error('信道发生错误：', error)
})
// 监听自定义消息（服务器进行推送）
tunnel.on('speak', speak => {
util.showModel('信道消息', speak)
console.log('收到说话消息：', speak)
})
// 打开信道
tunnel.open()
this.setData({ tunnelStatus: 'connecting' })
},
/**
* 点击「关闭信道」按钮，关闭已经打开的信道
*/
closeTunnel() {
if (this.tunnel) {
this.tunnel.close();
}
util.showBusy('信道连接中...')
this.setData({ tunnelStatus: 'closed' })
}
2）服务器端代码
在server\application\controllers\Tunnel.php中，代码示例如下：
class Tunnel extends CI_Controller {
public function index() {
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$result = LoginService::check();
if ($result['loginState'] === Constants::S_AUTH) {
$handler = new ChatTunnelHandler($result['userinfo']);
TunnelService::handle($handler, array('checkLogin' => TRUE));
} else {
$this->json([
'code' => -1,
'data' => []
]);
}
} else {
$handler = new ChatTunnelHandler([]);
TunnelService::handle($handler, array('checkLogin' => FALSE));
}
}
}
5、建立CGI的功能
1）小程序端代码
在client\pages\addCgi\addCgi.js中，代码示例如下：
Page({
data: {
requestResult: '',
canIUseClipboard: wx.canIUse('setClipboardData')
},
testCgi: function () {
util.showBusy('请求中...')
var that = this
qcloud.request({
url: `${config.service.host}/weapp/demo`,
login: false,
success (result) {
util.showSuccess('请求成功完成')
that.setData({
requestResult:JSON.stringify(result.data)
})
},
fail (error) {
util.showModel('请求失败', error);
console.log('request fail', error);
}
})
},
copyCode: function (e) {
var codeId = e.target.dataset.codeId
wx.setClipboardData({
data: code[codeId - 1],
success: function () {
util.showSuccess('复制成功')
}
})
}
})
var code = [
]
2）服务器端代码
在server\application\controllers\Demo.php中，代码示例如下：
class Demo extends CI_Controller {
public function index() {
$this->json([
'code' => 0,
'data' => [
'msg' => 'Hello World'
]
]);
}
public function hello(){
echo 'My first Php Framework!';
}
public function saysomething() {
//echo'saysomething!';
$this->load->database('cAuth');
//$this->load->model('fans');
echo 'saysomething!';
//$info = $this->test_model->get_test_data();
//echo $info;
}
}
四、源代码下载及视频解析
在“豆豆咨询”公众号里，输入彩蛋号即可获得下载地址：
1、 源代码下载的彩蛋号（免费）：6000；
2、 视频讲解下载的彩蛋号（免费）：60001；
五、技术服务
如果有疑问或者需要帮助，请加入QQ群（群名称：豆豆咨询，群号：625686304）；或者公众号douAsk，公众号名称为“豆豆咨询”。扫描以下二维码，关注“豆豆咨询”。
技术QQ群名称：豆豆咨询，群号：625686304
微信公众号名称：豆豆咨询，微信公众号：douAsk
如果觉得有用，请动动手指，分享该文章！