国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

Taonce / 2987人閱讀

摘要:目前正在寫一個微信公眾號的小項目,記錄一下遇到的問題和解決方法主要是前端。前端提交時使用,在后端再取出對應的微信支付看了下文檔,以前是需要用喚起支付,而現在則是把微信內置到了微信的瀏覽器中。

目前正在寫一個微信公眾號的小項目,記錄一下遇到的問題和解決方法(主要是前端)。內容持續更新中~

主要實現

前后端分離
前端為 SPA 單頁面
使用微信的JSSDK
微信支付

技術方案

后端使用 php 搭建接口
vux ui框架
vu2.0e全家桶(vue、vue-router、vue-resource、vuex)

問題列表 跨域問題

因為生產環境下是同域名,不存在跨域問題。生產環境配置反向代理解決了跨域。這里遇到的問題主要是開發環境下,后端和前端分別在兩個 http 服務器上。因為前端項目直接用 vue-cli 生成,所以用到了 webpack,正好 webpack 的 dev-server 可以設置反向代理。在config/index.js里找到 dev 下的 proxyTable 配置項,并加入配置即可

    proxyTable: {
      "/api": {
        target: "http://127.0.0.1:8888",
        changeOrigin:true,
        pathRewrite:{
            //"^/api":""
        }
      }        
    }
授權回調處理

主要是獲取用戶的 openid。因為每個用戶的 openid 固定不變,所以在首次加載時會檢測 store 中是否有openid,如果沒有就跳轉到授權頁面獲取openid再跳轉回來,并寫入 localstorage,并更新 store。

    //檢測url中是否有openid
    if(this.$route.query.openid){
      this.$store.commit("updateOpenid",this.$route.query.openid);
    }
    //跳轉授權
    if(!this.$store.state.openid){
      //授權完成后需要攜帶openid參數再跳回來
      window.location.href="/access";
    }

但是實際應用中這樣并不安全,因為直接將 openid 傳回頁面,容易被客戶端篡改。所以更加安全的做法是授權之后生成一個 token 和對應的 openid 存入數據庫,并設置 token 失效時間,不把 openid 直接暴露給前端。前端提交時使用 token,在后端再取出對應的 openid

微信支付

看了下文檔,以前是需要用 jssdk 喚起支付,而現在則是把微信 jssdk 內置到了微信的瀏覽器中??梢灾苯邮褂?WeixinJSBridge 來喚起支付。當然簽名生成和訂單需要在后端做。而且支付流程似乎也做了更改,以前是把訂單信息和加密字符串同時傳遞到微信服務器,而現在是先在后端把訂單信息傳遞給微信服務器,返回 prepay_id。前端只需要接收 prepay_id 并傳遞就可以了,這樣的話更安全一些。

在前端組件中的代碼更加簡單化

    pay(){
        let _this=this;
        let jsApiParameters={};
        let onBridgeReady=function(){
            WeixinJSBridge.invoke(
                    "getBrandWCPayRequest",
                    jsApiParameters,
                    (res)=>{
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            _this.alert("支付成功");
                            window.location.reload();
                        }
                        if (res.err_msg == "get_brand_wcpay_request:cancel") {
                            _this.alert("取消支付");
                            window.location.reload();
                        }
                    }
            );
        }
        let callpay=function(){
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
                    document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
                }
            } else {
                onBridgeReady();
            }            
        }
        //請求支付數據
        this.$http.get("wechat/wxpay?openid="+this.$store.state.openid+"&id="+this.$route.params.id)
                .then((response)=>{
                    if(response.body.status==1){
                        jsApiParameters=response.body.data;
                        callpay();
                    }else{
                        _this.alert(response.body.msg);                        
                    }
        });
    }
支付授權目錄問題

因為微信的支付授權目錄要精確到子目錄級別,而 spa 的 url的形式大概為 /wechat/#/show/1、/wechat/#/list/type 這樣,就會產生發生支付的頁面報支付目錄未定義的問題。針對這個問題可以在根目錄后加加上 ? 符號鏈接,后面的地址就會被當成參數解析,而不會當成目錄。/wechat/?#/show/1、/wechat?#/list/type,這樣解析出來的目錄都是在 /wechat/ 根目錄下面

安卓下無法使用 html5 input 無法喚起攝像頭

上傳圖片部分使用的是html5直接選擇圖片上傳

在 ios 設備下沒有問題,會彈出選擇拍照、圖庫等選項。但是朋友說在安卓下只能選擇圖庫,而且無法多選。上網查了一下,確實在部分安卓平臺下有這個問題。加上 capture=camera" 可以直接使用拍照,但是選擇圖庫又沒了。。。

解決方案有兩個
1.使用微信的 jssdk 來選擇圖片,但是這樣上傳部分要修改。
2.在安卓下使用 vux 提供的 Actionsheet 組件來代替系統默認的選擇,分別加上選擇圖庫、直接打開拍照。
好氣啊,手頭又沒有安卓設備,索性先放下不管了。

博客鏈接:https://lscho.com/tech/vue-we...,后續在博客更新

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83176.html

相關文章

  • 使用 vue2.0 發微公眾號下前后分離SPA站點填坑之旅

    摘要:目前正在寫一個微信公眾號的小項目,記錄一下遇到的問題和解決方法主要是前端。前端提交時使用,在后端再取出對應的微信支付看了下文檔,以前是需要用喚起支付,而現在則是把微信內置到了微信的瀏覽器中。 目前正在寫一個微信公眾號的小項目,記錄一下遇到的問題和解決方法(主要是前端)。內容持續更新中~ 主要實現 前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付 技術方案 后端使用 php ...

    afishhhhh 評論0 收藏0
  • 使用vue發微公眾號下SPA站點填坑之旅

    摘要:原文見我的博客,點擊進入使用開發微信公眾號下站點的填坑之旅本文為我創業過程中,開發項目的填坑之旅。作為一個技術宅男,我的項目是做一個微信公眾號,前后端全部自己搞定,不浪費國家一分錢。 原文見我的博客,點擊進入使用vue開發微信公眾號下SPA站點的填坑之旅 本文為我創業過程中,開發項目的填坑之旅。作為一個技術宅男,我的項目是做一個微信公眾號,前后端全部自己搞定,不浪費國家一分錢^_^。 ...

    yeyan1996 評論0 收藏0
  • 基于 LNMP 搭建個人網站填坑之旅

    摘要:博客搬家原地址原發表時間本文討論使用安裝包構建網站底層服務后,包括域名解析,的管理等的一系列填坑歷程。域名解析問題相關首先將本人的網站信息公布如下域名地址主機提供方搬瓦工域名托管及解析阿里云萬網本文之后的內容均是基于以上信息。 「博客搬家」 原地址: CSDN 原發表時間: 2016-11-16 本文討論使用 LNMP 安裝包構建網站底層服務后,包括域名解析,MySQL 的管理等...

    B0B0 評論0 收藏0
  • NodeJs發微公眾號(一)

    摘要:古話說萬事開頭難回頭細想想還真是這樣在沒有開始做微信公眾號開發之前我以為它很復雜但是學過之后只想說原來這里是我的項目的地址下面我就把我的學習過程做一下總結希望可以幫助到有需要的人兒粗鄙之見恐有不足歡迎指教在閱讀下文之前你應該對和框架有一定的 古話說: 萬事開頭難, 回頭細想想還真是這樣,在沒有開始做微信公眾號開發之前我以為它很復雜,但是學過之后只想說原來just so so~ 這里是我...

    tigerZH 評論0 收藏0

發表評論

0條評論

Taonce

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<