微信小程序实验一、小程序与服务器端入门视频讲解(以Wafer Quick Start为例)
2017-12-23 11:44
483 查看
(>>>>在公众号中输入彩蛋号,即可获取测试源码与视频讲解的下载地址)
2、实现登录、请求登录状态、上传图片、建立信道与CGI的功能。
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
如果觉得有用,请动动手指,分享该文章!
一、实验目的
以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
如果觉得有用,请动动手指,分享该文章!
相关文章推荐
- 微信小程序实验二、小程序后台PHP入门——从数据库中读取与返回数据视频讲解
- 微信小程序入门视频
- 微信小程序从入门到实践视频教程
- 微信小程序 火车票查询实例讲解
- J2EE入门视频教程第三讲——IDE使用高级技巧之程序调试
- 微信硬件平台从入门到精通(服务器端)
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
- Storage Cluster Quick Start【存储集群快速入门】
- 【微信小程序】从入门到放弃
- 微信小程序入门Demo(石头剪刀布)
- 微信小程序基础之媒体(图片,音频,视频)和地图的使用
- 微信小程序入门一之小程序架构
- 微信小程序入门四之逻辑层网络请求
- 微信小程序入门五:样式表wxss
- 微信小程序视频教程合集 附带源码、PPT下载
- spring boot,cloud,微信点餐系统,小程序开发视频教程
- 微信小程序入门之一
- 如何入门微信小程序开发
- Dojo QuickStart 快速入门教程 (1) Why Dojo
- 笔记:imooc-微信小程序入门与实践