欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用vue開發(fā)公眾號網(wǎng)頁

 更新時間:2021年05月12日 14:20:57   作者:water  
因為項目需要,近期做了一個公眾號網(wǎng)頁開發(fā)。在此期間也踩了一些坑,解決這些坑之后,準備對這個項目進行復(fù)盤。記錄下項目從開發(fā)到上線所解決的問題,并對使用vue進行公眾號開發(fā)的步驟進行一個總結(jié)。方便以后有問題進行查閱。希望對你有所幫助

項目背景

主要就是一個h5頁面,涉及的功能不是很難,主要很久沒有開發(fā)公眾號,對整個開發(fā)步驟有些生疏。其中包括對微信sdk的調(diào)用方式、用戶的微信授權(quán)和sdk的接入等。主要圍繞開發(fā)步驟進行梳理。

開始

因為是一個h5頁面,整體而言項目不大,然后在項目技術(shù)選型的時候確定使用vue框架進行開發(fā)。使用vue開發(fā)h5,個人整體感覺還是效率比較高的。在ui庫方面選擇的是vant庫,組件整體而言還是不錯的,支持自定義主題方便樣式自定義比較適合h5的開發(fā)。

通過vue-cli創(chuàng)建項目

安裝腳手架工具

npm install -g @vue/cli
# OR
yarn global add @vue/cli

創(chuàng)建一個項目

vue create water_project

然后就創(chuàng)建了項目目錄

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── api
│   ├── assets
│   ├── components
│   ├── global.less
│   ├── main.js
│   ├── mock
│   ├── router
│   ├── store
│   ├── utils
│   └── views
└── vue.config.js

關(guān)于移動的適配

因為是移動端網(wǎng)頁,所以需要做適配。網(wǎng)上有很多適配方案這里就不展開說了,主要說下本項目使用的方案是amfe-flexible結(jié)合rem來做的,是淘寶的一種解決方案。關(guān)于設(shè)計稿的單位px轉(zhuǎn)換為rem使用的是postcss的postcss-pxtorem方案。其實用webpack的loader來做也是可以的,具體方案自行百度。

  • 安裝amfe-flexible包
npm i amfe-flexible -S
  • 安裝postcss-pxtorem插件
npm i postcss-pxtorem -D
  • 在main.js中引入amfe-flexible
import "amfe-flexible"
  • 在vue.config.js中配置postcss插件

項目中如果沒有vue.config.js文件就手動創(chuàng)建一個,這個是vue cli的配置文件。

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ["*"],
          }),
        ],
      },
  },

到此樣式適配已經(jīng)完成,至于rootValue為什么是37.5.主要是為了vant的適配,所以設(shè)計稿以375px為參考。如果沒有使用第三方ui庫可以設(shè)計稿以750為參考,此時rootValue為75。

使用 normalize.css

使用normalize.css來消除瀏覽器之間的基礎(chǔ)樣式差異

npm i normalize.css -S

在main.js中引入

import "normalize.css"

接入vant庫

vant是有贊出品的一個ui庫,站在巨人的肩膀上效率當然是要快很多。這種第三方庫只能作為基礎(chǔ),在有設(shè)計稿的情況下要對樣式進行定制。簡單的樣式vant都支持主題定制化還是比較方便的,如果有一些樣式?jīng)]有提供自定義主題,就只能寫樣式進行覆蓋了。

  • 下載安裝vant
npm i vant -S

方式一. 自動按需引入組件 (推薦)

babel-plugin-import 是一款 babel 插件,它會在編譯過程中將 import 的寫法自動轉(zhuǎn)換為按需引入的方式。

# 安裝插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 無需設(shè)置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 對于使用 babel7 的用戶,可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 接著你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { Button } from 'vant';

方式二. 手動按需引入組件

在不使用插件的情況下,可以手動引入需要的組件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 導入所有組件

Vant 支持一次性導入所有組件,引入所有組件會增加代碼包體積,因此不推薦這種做法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Tips: 配置按需引入后,將不允許直接導入所有組件。

定制vant主題

步驟一 引入樣式源文件

定制主題時,需要引入組件對應(yīng)的 Less 樣式文件,支持按需引入和手動引入兩種方式。

按需引入樣式(推薦)
在 babel.config.js 中配置按需引入樣式源文件,注意 babel6 不支持按需引入樣式,請手動引入樣式。

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定樣式路徑
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

手動引入樣式

// 引入全部樣式
import 'vant/lib/index.less';

// 引入單個組件樣式
import 'vant/lib/button/style/less';

步驟二 修改樣式變量

使用 Less 提供的 modifyVars 即可對變量進行修改,下面是參考的 webpack 配置。

// webpack.config.js
module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        // ...其他 loader 配置
        {
          loader: 'less-loader',
          options: {
            // 若 less-loader 版本小于 6.0,請移除 lessOptions 這一級,直接配置選項。
            lessOptions: {
              modifyVars: {
                // 直接覆蓋變量
                'text-color': '#111',
                'border-color': '#eee',
                // 或者可以通過 less 文件覆蓋(文件路徑為絕對路徑)
                hack: `true; @import "your-less-file-path.less";`,
              },
            },
          },
        },
      ],
    },
  ],
};

如果 vue-cli 搭建的項目,可以在 vue.config.js 中進行配置。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0,請移除 lessOptions 這一級,直接配置選項。
        lessOptions: {
          modifyVars: {
            // 直接覆蓋變量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通過 less 文件覆蓋(文件路徑為絕對路徑)
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

引入微信jssdk

引入jsssdk有兩種方式,一種是用js鏈接直接引入,寫在index.html中。

 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>

然后在使用的地方就調(diào)用window.wx.xxx就能使用sdk提供的方法了。

第二種就是使用npm包的方式

  • 安裝weixin-js-sdk
npm i weixin-js-sdk -S
  • 在main.js中使用
import wx from "weixin-js-sdk"

// 掛在vue的原型上方便使用
Vue.prototype.$wx = wx;

這樣引入之后就可以用this.$wx.xx來使用相應(yīng)的方法了比如:

 this.$wx.config({
          debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。
          appId: res.data.appId, // 必填,公眾號的唯一標識
          timestamp: String(res.data.timestamp), // 必填,生成簽名的時間戳
          nonceStr: String(res.data.nonceStr), // 必填,生成簽名的隨機串
          signature: res.data.signature, // 必填,簽名,見附錄1
          jsApiList: [
            "getNetworkType",
            "getLocation",
          ], // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
        });

注冊驗證sdk才可以使用api

其實注冊的重要邏輯都在后端,提供一個獲取配置信息的接口,前端直接調(diào)用sdk的config方法進行注冊就好了。這里把sdk的注冊邏輯寫在app.vue文件中

  • 封裝一個注冊sdk的方法
async getWxJssdkConf() {
      const res = await this.$api.getSdkConfig({
        url: window.location.href.split("#")[0],
      });
      if (res.success) {
        this.$wx.config({
          debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。
          appId: res.data.appId, // 必填,公眾號的唯一標識
          timestamp: String(res.data.timestamp), // 必填,生成簽名的時間戳
          nonceStr: String(res.data.nonceStr), // 必填,生成簽名的隨機串
          signature: res.data.signature, // 必填,簽名,見附錄1
          jsApiList: [
            "getNetworkType",
            "getLocation",
          ], // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
        });
        this.$wx.ready(() => {
          this.$wx.checkJsApi({
            jsApiList: ["getNetworkType", "getLocation"], // 需要檢測的JS接口列表,所有JS接口列表見附錄2,
            success: function (res) {
              console.log("checkJsApi", res);
            },
          });
        });
        this.$wx.error((res) => {
          console.log("wx.error", res);
        });
      }
    },
created() {
    this.getWxJssdkConf();
  },

其中this.$api.getSdkConfig為調(diào)用后臺的接口,這里是給api也掛載到了vue的原型上,方便使用不用每個頁面都去引入api

Vue.prototype.$api = api

在app.vue中注冊成功后,就可以使用sdk的api了。

微信的授權(quán)

如果要獲取用戶的信息,就必須讓用戶進行授權(quán)。在授權(quán)的時候使用的是微信提供的接口,詳細請看這里,如果是只獲取用戶的openid只用靜默授權(quán)就可以了,不用用戶主動授權(quán)。具體請看文檔,這里只需要openid就使用靜默授權(quán)如下:

  • 在需要授權(quán)的主入口使用,比如這里是主頁Home,要先調(diào)用微信的接口獲取code,在用code去后端換取openid
/**
     * @description: 獲取授權(quán)code
     * @param {*}
     * @return {*}
     */
    getCode() {
      // 從 window.location.href 中截取 code 并且賦值
      // window.location.href.split('#')[0]
      if (window.location.href.indexOf("state") !== -1) {
        this.code = qs.parse(
          window.location.href.split("#")[0].split("?")[1]
        ).code;
      } 
      
      if (this.code) {
          // 存在 code 直接調(diào)用接口
          this.handGetUserInfo(this.code);
        } else {
          this.handLogin();
        }
    },
    /**
     * @description: 獲取用戶授權(quán)登陸
     * @param {*}
     * @return {*}
     */
    handLogin() {
      // 重定向地址重定到當前頁面,在路徑獲取 code
      const hrefUrl = window.location.href;

      if (this.code === "") {
        window.location.replace(`
		https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX
                           &redirect_uri=${encodeURIComponent(hrefUrl)}
                           &response_type=code
                           &scope=snsapi_base
                           &state=h5#wechat_redirect`);
      }
    },
    /**
     * @description: 獲取用戶信息
     * @param {*} code
     * @return {*}
     */
    handGetUserInfo(code) {
      // 調(diào)用后臺接口
    },

這里就是授權(quán)的主要邏輯,沒啥意外就基本走通了。

斷網(wǎng)進行提示

如果用戶的網(wǎng)絡(luò)斷了,就跳轉(zhuǎn)到斷網(wǎng)提示頁。主要使用的是html提供的方法進行判斷,判斷邏輯寫在app.vue文件中,因為每個頁面都會提示,就直接在主入口進行處理。

mounted() {
    window.addEventListener("online", this.updateOnlineStatus);
    window.addEventListener("offline", this.updateOnlineStatus);
  },
  
 methods: {
 		updateOnlineStatus(e) {
      const { type } = e;
      console.log("type==============", type);
      this.onLine = type === "online";
    },
 }
 beforeDestroy() {
    window.removeEventListener("online", this.updateOnlineStatus);
    window.removeEventListener("offline", this.updateOnlineStatus);
  },

主要就是這個方法來檢查用戶網(wǎng)絡(luò)連接情況

判斷是不是微信打開的網(wǎng)頁

這里主要使用的是vue-router的導航守衛(wèi)來做的,在跳轉(zhuǎn)之前對瀏覽器進行判斷,如果不是微信內(nèi)置瀏覽器就直接跳轉(zhuǎn)到異常提示頁

router.beforeEach((to, from, next) => {
  const ua = navigator.userAgent.toLowerCase();
  if (
    to.path !== "/notwx" &&
    !(ua.match(/MicroMessenger/i) == "micromessenger")
  ) {
    next("/notwx");
  } else {
    next();
  }
});

有時跳轉(zhuǎn)頁面,頁面的滾動高度會保留在上個頁面的滾動高度,這里也是在導航守衛(wèi)中解決的,主動給滾動到頂部

router.afterEach(() => {
  window.scrollTo(0, 0);
});

小結(jié)

到此整個開發(fā)流程簡單記錄完畢,也是對自己開發(fā)的一個梳理,也方便以后查閱。希望對看到文章的你有所幫助,個人見解,如有問題歡迎指正,覺得有幫助,歡迎點個贊,謝謝。

以上就是如何使用vue開發(fā)公眾號網(wǎng)頁的詳細內(nèi)容,更多關(guān)于vue開發(fā)公眾號網(wǎng)頁的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • element使用自定義icon圖標的詳細步驟

    element使用自定義icon圖標的詳細步驟

    前端經(jīng)常會用到UI提供的各種圖表,推薦阿里的圖標庫,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標的詳細步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton

    Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton

    這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton的具體代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • vue配置接口域名方法總結(jié)

    vue配置接口域名方法總結(jié)

    在本篇文章里小編給大家分享了關(guān)于vue配置接口域名方法和相關(guān)知識點總結(jié),需要的朋友們跟著操作下。
    2019-05-05
  • vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法

    vue axios調(diào)用接口方法報錯500 internal server err

    前端使用axios 訪問后端接口時報錯,在瀏覽器中點擊紅色的報錯數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法,感興趣的朋友一起看看吧
    2023-10-10
  • vue3使用ref的性能警告問題

    vue3使用ref的性能警告問題

    這篇文章主要介紹了vue3使用ref的性能警告問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題

    Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題

    這篇文章主要介紹了Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue-router跳轉(zhuǎn)頁面的方法

    vue-router跳轉(zhuǎn)頁面的方法

    本篇文章主要介紹了vue-router跳轉(zhuǎn)頁面的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • vue watch如何深度監(jiān)聽數(shù)組每一項的變化

    vue watch如何深度監(jiān)聽數(shù)組每一項的變化

    這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項的變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決)

    npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決)

    這篇文章主要介紹了npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue2設(shè)置hash模式的操作步驟

    Vue2設(shè)置hash模式的操作步驟

    在 Vue.js 應(yīng)用中使用 hash 模式是一種常見的路由配置方式,這種方式利用了 URL 的 hash(即 # 符號后面的部分)來實現(xiàn)頁面的跳轉(zhuǎn)和狀態(tài)管理,以下是使用 Vue 2 和 Vue Router 設(shè)置 hash 模式的步驟,需要的朋友可以參考下
    2024-10-10

最新評論