前端筆記之微信小程式（三）GET請求案例&文件上傳和相冊API&配置https

来源:https://www.cnblogs.com/rope/archive/2019/08/07/10750558.html
-Advertisement-
Play Games

一、信息流小程式-GET請求案例 1.1服務端介面開發 一定要養成介面的意識，前端單打獨鬥出不來任何效果，必須有介面配合，寫一個帶有分頁、關鍵詞查詢的介面： 分頁介面：http://127.0.0.1:3000/info?page=1 查詢介面：http://127.0.0.1:3000/searc ...


一、信息流小程式-GET請求案例

1.1服務端介面開發

一定要養成介面的意識，前端單打獨鬥出不來任何效果，必須有介面配合，寫一個帶有分頁、關鍵詞查詢的介面：

分頁介面：http://127.0.0.1:3000/info?page=1

查詢介面：http://127.0.0.1:3000/search?word=李

詳情介面：http://127.0.0.1:3000/xiangqing?id=2

const express = require("express");
const app = express();
const url = require("url");
const info = require("./info.js");
app.use(express.static("www"));

//顯示分頁的明星信息
app.get("/info" , (req,res) => {
    const page = url.parse(req.url , true).query.page; //得到GET請求的page參數

    //提供分頁的介面
    res.json({
        "arr" : info.slice((page-1) * 4 , page * 4)
    });
});

//關鍵字篩選查詢
app.get("/search" , (req,res) => {
    //得到用戶的查詢詞
    var word = url.parse(req.url , true).query.word;
    //將字元串word變為正則表達式
    var wordExp = new RegExp(word);
    //遍歷，篩選
    res.json({
        "arr" : info.filter(item => wordExp.test(item.name))
    });
});

//某明星詳情
app.get("/xiangqing" , (req,res) => {
    //得到用戶的查詢的明星id
    var id = url.parse(req.url , true).query.id;
    //遍歷，篩選
    res.json({
        "xiangqing" : info.filter(item => item.id == id)[0]
    });
})
app.listen(3000);

1.2小程式開發

學習scrioll-view容器（可滾動視圖區域）和發起請求。

<scroll-view style="height:{{wH}}px;" scroll-y bindscrolltolower="tolower">
    <view>亂起八早</view>
    <view>亂起八早</view>
    <view>亂起八早</view>
.....
</scroll-view>

bindscrolltolower表示滾動到底部的事件，但這個盒子必須有高度。

如果希望這個盒子的高度和視窗的高度一樣，此時調用微信API，讀取設備視窗高度。

 

app.js使用微信小程式的API得到屏幕的高度：

//app.js
App({
//用戶首次打開小程式，觸發 onLaunch函數（全局只觸發一次）
    onLaunch(){
        var self = this;
        //讀取設備信息的API
        wx.getSystemInfo({
            success: function(res){
                self.globalData.gWH = res.windowHeight; //獲取視窗高度賦值給全局gWH對象
            }
        });
    },
    //全局數據
    globalData : {
        gWH : 0
    }
});

 

index.js中可以獲取app.js的全局數據

//每個頁面可以無條件、不引包的，直接使用getApp()函數，表示調用小程式的主體
var app = getApp(); 

Page({
    //當頁面載入的時候
    onLoad(){
        //得到視窗的高度，globalData.gWH數據是從全局獲取的
        this.setData({
            wH: app.globalData.gWH
        });
},
//局部數據
    data:{
        wH: 0  //當前屏幕的高度
    }
    tolower(){
        console.log("已經滾到底部了")
    }
});

1.3頁面佈局

<!--index.wxml-->
<view class="container">
<scroll-view style="height:{{wH}}px" scroll-y bindscrolltolower="tolower">
　　<view class="mingxing">
            <view class="box" wx:for="{{mingxing}}" wx:key="{{index}}">
                <view class="left">
                    <image src="{{baseURL}}/images/{{item.pic}}"></image>
                    {{item.name}}
                </view>
                <view class="right">
                    {{item.b_info}}
                </view>
            </view>
　　　　</view>
    </scroll-view>
</view>

 

index.wxss

page { background-color:#36b3ff; }  
.box{
    width:720rpx;display: flex;margin:10px auto;font-size: 14px;
    line-height:24px;color:#333; padding:10px; background: #fff;
    box-sizing:border-box; border-radius:6px; box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.left{flex:1;}
.left image{width:180rpx; height:180rpx;}
.right{flex:3;box-sizing: border-box;padding-left:10px;}
示例代碼

1.4請求分頁數據-顯示頁面效果

index.js中載入預設數據

Page({
    //當頁面載入的時候
    onLoad(){
        //得到視窗的高度，是從全局來的
        this.setData({
            wH: appInstance.globalData.wH
        });

        //核心語句：請求伺服器的數據，參數page表示第幾頁，當前第幾頁就請求第幾頁
        var self = this;
        wx.request({
            //請求的地址
            url: 'http://127.0.0.1:3000/info?page=' + this.data.page,
            //成功的回調
            success({data}){
                self.setData({
                    mingxing: [
                        ...self.data.mingxing,
                        ...data.arr
                    ]
                });
            }
        });
    },
    data : {
        wH : 0, //當前屏幕的高度
        mingxing: [], //信息流，現在是空的，等伺服器返回
        page : 1, //當前第幾頁，預設第一頁
    }
});

 

 

 

 

index.js下拉請求更多

var app = getApp(); 

//請求伺服器上某一個頁面的明星，參數page表示第幾頁
function queryServer(page){
//顯示一個Toast，Toast就是提示文本，黑色背景的方框。
wx.showToast({
   title: '正在載入更多',
   icon: 'loading',
   duration: 2000000  //持續時間，非常長，因為靠回調函數給它隱藏。
});
    var self = this;
    //核心語句，請求伺服器的數據，分頁請求，當前第幾頁就請求第幾頁
    wx.request({
        //請求的地址
        url: this.data.baseURL + '/info?page=' + page,
        //成功的回調
        success({ data }){
//隱藏Toast
        wx.hideToast();
            //看一下請求的數組長度是不是0，如果是0此時就改變信號量
            if(data.arr.length == 0){
                self.setData({
                    isMore : false
                });
                return;
            }
            //如果不是0，改變值，追加數據
            self.setData({
                mingxing: [
                    ...self.data.mingxing,
                    ...data.arr
                ]
            });
        }
    });
}

Page({
    onLoad(){
        //指定queryServer函數的上下文，綁定好後，調用時上下文自動就是這裡的this了
//不需要queryServer.call(this)了。
        queryServer = queryServer.bind(this); 
          
        //得到視窗的高度，是從全局來的
        this.setData({
            wH: app.globalData.wH
        });

        //請求第1頁的數據
        queryServer(1);
    },
    data : {
        wH : 0 ,
        mingxing: [],
        page : 1,
        baseURL:"http://127.0.0.1/3000",  //基路徑
        isMore : true //是否還有更多？
    },
    tolower(){
        if(this.data.isMore){
            //頁面數加1
            this.setData({
                page : this.data.page + 1
            });
            //下拉到底部請求更多
            queryServer(this.data.page);
        }
    }
});

1.5關鍵字查詢

<!--index.wxml-->
<view class="container">
    <view class="s_b">
        <input value="{{searchWord}}" bindconfirm="doSearch" class="s_box"  type="text" />
        <button bindtap='clearSearch'>×</button>
    </view>
</view>

index.wxss 

.s_box{ background: white;width:700rpx;margin: 0 auto;}
.s_b{ position:relative;}
.s_b button{
position: absolute; right:10px;top:0; z-index: 999;padding:0;
    width:20px;height:20px;line-height: 20px;text-align: center;
}
示例代碼

 

index.js

Page({
    data : {
        ...
    },
    tolower(){
        ...
    },
    //執行查詢
    doSearch(event){
        var self = this;
        wx.request({
            url: baseURL + "/search?word=" + event.detail.value ,
            success({data}){
                self.setData({
                    mingxing : data.arr
                });
            }
        });
    },
    //清空查詢
    clearSearch(){
        this.setData({
            searchWord : "",
            mingxing : []
        });
        //重新請求當前的頁碼，顯示全部
        //迴圈請求，比如當前頁碼是2，此時就要請求2、1
        for(let i = 1 ; i <= this.data.page ; i++){
            queryServer(i);
        }
    }
});

1.6點擊查看詳情頁

index.wxml

<view class="mingxing">
    <view class="box" wx:for="{{mingxing}}" data-mid="{{item.id}}" bindtap='tapBox' >
        .....
    </view>
</view>

 

info.wxml詳情頁

<view>
    <view>{{name}}</view>
    <image wx:if="{{pic != ''}}" src="{{baseURL}}/images/{{pic}}"></image>
    <view>
        {{info}}
    </view>
</view>

 

index.js

Page({
    //點擊了一個小白框，進入詳情頁
    tapBox(event){
        //通過自己的data-mid標簽，知道自己是誰
        var mid = event.currentTarget.dataset.mid;
        //帶給下一個頁面
        wx.navigateTo({
            //通過?傳參給info頁面，是微信小程式的語法約定，而並不是GET請求
            url: '/pages/info/info?mid=' + mid
        })
    }
});

 

info.js

//基路徑
const baseURL = "http://127.0.0.1:3000";

Page({
    onLoad({mid}){
        var self = this;
        wx.request({
            url : baseURL + "/xiangqing?id=" + mid ,
            success({data}){
                self.setData({
                    name: data.xiangqing[0].name,
                    pic : data.xiangqing[0].pic,
                    info: data.xiangqing[0].info
                })
            }
        })
    },
    data : {
        name : "",
        pic : "",
        info : "",
        baseURL
    }
});

二、文件上傳和相冊API

2.1小程式和Nodejs後端

前端是小程式，後端Nodejs，用formidable來處理POST請求，上傳圖片。

 

在小程式中發起POST請求：

<!--index.wxml-->
<view class="container">
    <button bindtap="fasong">按我將{a:8}這個信息用POST請求發給伺服器</button>
</view>

 

index.js

Page({
    fasong: function(){
        wx.request({
            //請求地址
            url: 'http://127.0.0.1:3000/tijiao',
            //請求類型
            method : "POST" ,
            //提交給服務端的數據
            data : {
                a : 8
            },
            //成功的回調函數
            success : function({data}){
                console.log(data.result);
            }
        });
    }
});

後端：

const express = require("express");
const app = express();
const formidable = require("formidable");

app.post("/tijiao", (req,res)=>{
    var form = new formidable.IncomingForm();
    form.parse(req, (err, data) => {
        console.log(data);
        res.json({result:"ok"});
    });
});

app.listen(3000);
示例代碼

2.2 圖片的上傳

在微信中是兩個事：

第一：調用wx.chooseImage()這個API，讓用戶選擇一個圖片文件或者拍照；

第二：調用wx.uploadFile()這個API，來傳輸文件。

 

從本地相冊選擇圖片或使用相機拍照的API：

wx.chooseImage();

 

上傳文件的API：

wx.uploadFile();

<!--index.wxml-->
<view class="container">
    <button bindtap="chooseImg">選擇圖片</button>
</view>

 

前端代碼index.js：

Page({
    chooseImg(){
        //選擇圖片或者進行拍照
        wx.chooseImage({
            count : 1, //只能選擇1張
            //選擇圖片成功之後做的事情
            success({tempFilePaths}){
                wx.uploadFile({
                    url : "http://127.0.0.1:3000/tijiao" , //上傳地址
                    filePath: tempFilePaths[0], //要上傳的文件，只有1張圖片也是數組，所以[0]
                    name: "tupian",   //key 
                    success({data}){
                        wx.showToast({
                            title: "上傳成功！"
                        });
                    }
                }); 
            }
        });
    }
});

 

後端formidable可以處理圖片的上傳，只需要加一句話：

const express = require("express");
const app = express();
const formidable = require("formidable");

app.post("/tijiao", (req,res)=>{
    var form = new formidable.IncomingForm();
    form.uploadDir = "./uploads";     //設置圖片的保存路徑
    form.keepExtensions = true;      //保留拓展名

    form.parse(req, (err, fileds, file)=>{
        res.json({result: "ok"});
    });
});

app.listen(3000);

 

開啟下拉刷新，在需要下拉刷新的頁面中index.json中添加：

{
    "enablePullDownRefresh" : true
}
<!--index.wxml-->
<view class="container">
    <button bindtap="chooseImg">選擇圖片</button>
    <view wx:for="{{imgList}}" wx:key="{{index}}">
        <image mode="center" src="http://127.0.0.1:3000/uploads/{{item}}"></image>
    </view>
</view>

 

後端app.js

const express = require("express");
const app = express();
const formidable = require("formidable");
const fs = require("fs");

//靜態化圖片目錄
app.use("/uploads" , express.static("uploads"));


//處理用戶的提交
app.post("/tijiao" , (req,res) => {
    var form = new formidable.IncomingForm();
    form.uploadDir = "./uploads"; //設置圖片的保存路徑
    form.keepExtensions = true;   //保留拓展名

    form.parse(req , (err , fileds , files) => {
        //將上傳文件改名為現在的時間戳，就是1970年1月1日到現在的毫秒數
        var date = Date.parse(new Date());
    　　 var ext = path.extname(files.tupian.path); //獲取文件擴展名
        //改名
        fs.rename(`./${files.tupian.path}`, `./uploads/${date}${ext}`, function(){
            res.json({result : "ok"});
        });
    });
});

//列出所有文件的清單
app.get("/list" , (req,res)=>{
    fs.readdir("./uploads", (err, files) => {
        res.json({ imgList: files.reverse()});
    });
});

app.listen(3000);

 

index.js

Page({
    xuantu(){
       ...
    },
    //顯示所有已經上傳的圖片
    onLoad(){
        var self = this;
        wx.request({
            url: "http://127.0.0.1:3000/list",
            success({data}){
                self.setData({
                    imgList: data.imgList
                })
            }
        });
    },
    //當下拉刷新的時候
    onPullDownRefresh(){
        var self = this;
        wx.request({
            url: "http://127.0.0.1:3000/list",
            success({data}){
                self.setData({
                    imgList: data.imgList
                })
            }
        });
    }
});

2.3獲取微信用戶信息

//得到app本身，為什麼要得到，因為一會就能使用app.globalData.userInfo
const app = getApp();

Page({
...
    addPics(){
        ...
},
    //*************這裡面的代碼是從HelloWorld案例抄的 start*************
    onLoad: function () {
        if (app.globalData.userInfo) {
            this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
            })
        } else if (this.data.canIUse){
            // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
            // 所以此處加入 callback 以防止這種情況
            app.userInfoReadyCallback = res => {
                this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                })
            }
        } else {
            //在沒有 open-type=getUserInfo 版本的相容處理
            wx.getUserInfo({
                success: res => {
                    app.globalData.userInfo = res.userInfo;
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    });
                }
            })
        }
    },
    getUserInfo: function(e) {
        app.globalData.userInfo = e.detail.userInfo;
        this.setData({
            userInfo: e.detail.userInfo,
            hasUserInfo: true
        });
}
//*************這裡面的代碼是從Hello World案例抄的 end*************
})
示例代碼

三、Nodejs配置https

首先，需要申請SSL證書，證書可以在阿裡雲、騰訊雲、寶塔等平臺申請，申請成功後會提供SSL證書下載地址，下載好SSL證書會看見一個壓縮包，裡面包含很多版本的證書文件（IIS、Apache、Nginx、Tomcat）等，Nodejs服務端採用Nginx版本即可，裡面有兩個文件分別是：.key和.pem文件。

 

將文件放在你的Node項目中的某個文件夾中，這裡我放在根目錄的ssl文件夾中。

然後寫以下Node代碼即可開啟https

註意：要修改自己的key和pem文件路徑和名稱

//使用node自帶的https模塊開啟https服務
var https = require("https");

//讀取https配置文件
//讀取https配置
var httpsOption = {
    key : fs.readFileSync("./ssl/0_iqd.webqianduan.cn.key"),
    cert: fs.readFileSync("./ssl/1_iqd.webqianduan.cn_bundle.pem")
}

//監聽埠
http.createServer(app).listen(80);
https.createServer(httpsOption, app).listen(443);

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MobaXterm：遠程終端登錄軟體封神選手
    提到SSH、Telnet等遠程終端登錄，我相信很多人想到的都是PuTTY PuTTY通常用於Windows，但實際上可以多平臺運行，因此不表達為“Windows下的遠程終端登錄” PuTTY足夠成熟、小巧、專註核心任務，並且對編碼等常見坑的處理並不缺乏，這其實都是優點。 但PuTTY在額外功能上就同 ...
  • [轉載]Mysql資料庫千萬級數據處理優化
    轉載：http://blog.sina.com.cn/s/blog_6dcd17320100tm6o.html 1. 對查詢進行優化，應儘量避免全表掃描，首先應考慮在 where 及 order by 涉及的列上建立索引。 2.應儘量避免在 where 子句中對欄位進行 null 值判斷，否則將導致 ...
  • Hadoop學習(7)-hive的安裝和命令行使用和java操作
    Hive的用處，就是把hdfs里的文件建立映射轉化成資料庫的表 但hive里的sql語句都是轉化成了mapruduce來對hdfs里的數據進行處理 ，並不是真正的在資料庫里進行了操作。 而那些表的定義則是儲存在了mysql資料庫中，他只是記錄相應表的定義 所以你的集群中要有一臺機器裝了mysql 裝 ...
  • Android buildType混淆代碼
    【話題引入】 ①在Android開發完成，我們會將代碼打包成APK文件。選擇 菜單欄 Build --》 Build APK ②將查看視圖切換到 Project 模式，文件夾下有一個debug模式的文件。 🌂在實際開發發佈我們要發佈一個正式的版本，即 release 模式。 【進入正題】 程式在發 ...
  • Android View的background和padding
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/181 最近在做一個需求，是對im聊天消息設置氣泡背景，之前呢，設計師沒有特別遵循一定的設計規範，導致，氣泡背景有的是.9的圖片，有的是自己用xml畫出來的背景 ...
  • Flutter學習筆記（14）--StatefulWidget簡單使用
    今天上班沒那麼忙，突然想起來我好像沒StatefulWidget（有狀態組件）的demo，閑來無事，寫一個簡單的學習學習，前面我們有說過，Flutter不同於Android。Flutter是只繪製一幀，這一幀會繪製整個widget樹，也就是說一次繪製整個界面，那麼想一下，如果想要頁面內容發生變化，是... ...
  • DexOpt相關的異常
    查找的資料 dvm探討之odex繞過 DexClassLoader4.4.2動態載入分析（磁碟載入分析） Unable to extract+optimize DEX from '/system/app/AWCarInfo.apk'不能從 '/system/app/AWCarInfo.apk'中提取 ...
  • javascript實現blob加密視頻源地址
    一、HTML代碼： 二、JavaScript代碼： 三、效果圖如下： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類