微信小程式實驗一、小程式與伺服器端入門視訊講解（以Wafer Quick Start為例）
(>>>>在公眾號中輸入彩蛋號，即可獲取測試原始碼與視訊講解的下載地址)
一、實驗目的
以Wafer Quick Start為例，掌握微信小程式的入門，特別是伺服器端與小程式端之間的互動，實現登入、請求登入狀態、上傳圖片、建立通道與CGI的功能。
二、實驗內容
1、介面
2、實現登入、請求登入狀態、上傳圖片、建立通道與CGI的功能。
三、小程式端與伺服器端原始碼分析
1、登入功能實現
1）小程式端程式碼
在client\pages\index\index.js中，程式碼示例如下：
// 使用者登入示例
login: function() {
if
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為例）
(>>>>在公眾號中輸入彩蛋號，即可獲取測試原始碼與視訊講解的下載地址) 一、實驗目的 以Wafer Quick Start為例，掌握微信小程式的入門，特別是伺服器端與小程式端之間的互動，實現登入、請求登入狀態、上傳圖片、建立通道與CGI的功能。
Qt的網絡通信（以一對一聊天室為例）
lis sci idg ESS host 文字 btn stdstring nec 一、以一對一（服務器，客戶端）為例 1、服務器： 1、在目錄文件 .pro文件中 QT += core gui network 添加network
一、Python安裝與Pycharm使用入門
進入 epel源 targe ext width ngx enter date prefix 一、安裝Python 1、Linux下安裝 一般系統默認已安裝2.6.6版本，升級成2.7版本， 但 2.6 不能刪除，因為系統對它有依賴，epel源裏最新的也是2.6版本，所以以
Android 客戶端與伺服器端進行資料互動（一、登入伺服器端）
概要 安卓APP要實現很多功能（比如登入註冊、發表評論等）時都必須要使用到網路資料互動。所以在學習了這部分內容後，就將其以最常見的登入過程為例整理出來，也方便跟我一樣的新手能迅速學習上手。 預期效果圖如下，輸入手機號和密碼，點選Login按鈕，上傳資料到伺
基於Android硬體裝置跟微信伺服器通訊的專案心得，以UDP Byte通訊為例，建立無向連線，0530手札
這段時間挺忙的，微信企業號等微信系列的教程全部停滯了，原因是我手頭上抓著幾個專案，加班就不說了，今天剛剛把新接手的專案整到大概%80的樣 子吧，準備明天整整，星期一過來直接對接測試，很多朋友跑過來問問題，我是真沒時間，請見諒！ 今天就分享下這個專案的總結，原始碼就不貼上了
Spring boot(20) Spring /Spring boot使用AOP、強制使用cglib（以記錄方法耗時為例子）
1. Spring boot 1.1 Spring boot預設使用了AOP和動態代理 RPC，AOP都會用到代理，代理的技術有jdk的Proxy代理(必須傳入介面)，cglib(可以是類而非介面, spring)，Javassist(jboss )而S
根據ArcGis拓撲錯誤記錄提取shp檔案、匯出Excel表格 ArcGis拓撲檢查的流程——以面重疊檢查為例
在ArcGis拓撲檢查的流程——以面重疊檢查為例中講述瞭如何在ArcGis進行拓撲檢查與修改。 在實際操作中，有時我們還需要將ArcGis拓撲檢查的結果製作成報告或者提取錯誤資訊反饋作業方。 本文仍然是基於“面重疊檢查”這一例子進行講述，其它規則自作變通即可。 提取Excel資訊 一般在儲存拓撲資料的
Android 客戶端與伺服器端進行資料互動（二、登入客戶端）
概要 Android客戶端分為User，HttpUtil，HttpCallbackListener，MainActivity四個部分。User model與服務端的一樣，一方面是用於本地使用者資訊的儲存model，另一方面也是為了保證構造URL時使用的key一
微信小程式+SpringBoot+Mybatis登入demo(一、小程式端)
現在微信小程式越來越火了，相信不少人都通過各種途徑學習過微信小程式或者嘗試開發，我也是因為新鮮感學習了一下，寫了一個登入demo 前言： 微信小程式開發者註冊API等亂起八糟的東西我這裡就不寫了，是SpringBoot框架不會搭建的可以看我上一篇文章
微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項
微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項 小程式實現選擇圖片、預覽圖片、上傳到開發者伺服器上 後臺使用的tp3.2 圖片上傳 請求時候的header參考時可以去掉(個人後臺驗證許可權使用) 小程式前端程式碼： <view class="se
微信裡有哪些有趣、實用的小程式？
隨著微信小程式的持續火熱，目前已經有了很大一批優質、有趣又實用的微信小程式，這裡推薦幾類自我感覺還不錯的給大家，喜歡的可以直接在微信小程式裡搜尋使用。 實用工具類 愛莫能記 一款輕量級的備忘錄提醒小程式，支援雲同步，可隨時隨地在電腦、平板等裝置檢視、修改備忘錄。不同的事
微信小程式跳一跳輔助程式（手動版）
最近，微信官方推出了demo小程式遊戲《跳一跳》，這個遊戲操作簡單，容易上手，卻又不容易獲得高分，受到很多人的喜愛（emm...這遊戲有毒）。自己也嘗試了玩了幾次，作為一個手殘+腦殘的資深玩家，對於這種遊戲的分數簡直低的可怕...既然自己這麼菜，就找些工具輔
Laravel 中如何使用支付寶、銀聯支付、微信支付進行支付 阿星小棧
如何 lar AC -c 可能 org ane str aca Laravel Packages 為 Laravel 提供了強大的擴展功能，為從 1 到 n 提供無限可能，這其中就包括支付， Laravel 官方提供的 Cashier 包集成對 Stripe 的支持
微會動微信現場互動：7種小程式給公眾號導流的方法
微信生態下，公眾號、小程式、社群、個人號是運營同學必不可缺的運營工具，但彼此之間如何引流呢？公眾號給小程式導流容易，小程式做裂變也比公眾號容易，但小程式的使用者流失快，怎麼通過公眾號實現粉絲留存呢？ 關於小程式給公眾號導流的方法，我一口氣找了7個。 1.抽獎活動，關注公眾號領獎 活動流程如下：進入小
Android仿微信首頁下拉顯示小程式列表
花點時間重新熟悉一下AndroidUI方面的東西，把古董PullToRefreshView又擼了一遍，技術這種東西真是忘得快啊...在基礎上新增一點東西，粗糙地實現了仿微信首頁下拉顯示小程式列表的樣式，是的，粗糙粗糙... PullToRefreshView原始的實現思路： 1.垂直方向的L
微信小程式評論/留言功能，附：前端+後端程式碼+視訊講解！
前端介面： 演示： <!-- 表單 --> <form bindsubmit="formSubmit"> <input type="text" name="liuyantext" placeholder='輸入留言內容' class
微信公眾號網頁開發和小程式開發之路
在微信公眾號網頁和小程式開發的過程中，難免會遇到一些知識外的相容問題。在此記錄我所遇到的問題，以便給需要的前端開發者查閱。 1、小程式使用外部字型 使用微信自帶api，開發工具上有效，但真機測試無效 // 載入網路字型 wx.loadFontFace({ family:
微信小程式樣式Flex Box精通課程-Flex專案的屬性-align-self（子元素上中下的設定）
align-self（子元素上中下的設定） 基礎語法 align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。 預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。 .
微信公眾號 跳轉到小程序
true html url index ram wiki 微信公眾 參數說明 點擊 微信公眾號，點擊菜單，跳轉到小程序 官網鏈接：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141
三十一、小程序上傳多張圖片帶參數
默認 inf led export EDA sed 預覽圖 態度 alt WXML <view class=‘right‘> <view class="parcel" wx:for="{{pics}}" wx:key="{{index}}