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

vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼

 更新時(shí)間:2022年08月07日 11:04:08   作者:_詹某_  
本文主要介紹了vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
.push(item) }) return pages } }

因?yàn)槲覀兡J(rèn)是4個(gè)一行,一頁(yè)8個(gè),所以我們將原來(lái)的數(shù)組列表稍微更改一下數(shù)據(jù)結(jié)構(gòu),將其變?yōu)閿?shù)組套數(shù)組的套娃模式,根據(jù) innerArray 的個(gè)數(shù)來(lái)判斷需要分幾頁(yè)。有興趣的朋友可以自己 cv 一下代碼看看實(shí)現(xiàn)效果。

computed 中的 pages 寫好之后我們需要將原來(lái)遍歷的 iconList 修改為 pages。

這樣就實(shí)現(xiàn)了可以左右滾動(dòng)的容器了。

開(kāi)放標(biāo)簽 wx-open-launch-weapp 使用

接下來(lái)是使用微信給我們提供的標(biāo)簽來(lái)實(shí)現(xiàn)跳轉(zhuǎn)微信小程序

前置準(zhǔn)備 - 引入 js

在我們使用之前,需要在溫馨公眾平臺(tái)里填寫必要的 js接口安全域名,這里不詳細(xì)說(shuō)明,有需要的話可以點(diǎn)這里移步查看一下.

如果想在我們的項(xiàng)目中使用微信開(kāi)放標(biāo)簽的話需要引入相關(guān) js 文件。

我們打開(kāi) index.html,引入相關(guān) js 文件。

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

配置 config

所有需要使用開(kāi)放標(biāo)簽的頁(yè)面必須先注入配置信息,并通過(guò)openTagList字段申請(qǐng)所需要的開(kāi)放標(biāo)簽。

這一步需要我們調(diào)用接口,把當(dāng)前頁(yè)面的 url 地址傳給后端然后拿到 appId、timestamp、nonceStr 和 signature。然后進(jìn)行相對(duì)應(yīng)的配置。

這里不得不吐槽一下,由于后端和我都沒(méi)有寫過(guò) h5 跳轉(zhuǎn)小程序相關(guān)內(nèi)容,公司里也是第一次遇到這種需求,一開(kāi)始就產(chǎn)生了各種非常奇葩的情況。

當(dāng)時(shí)情況是我先給后端把 openId 傳過(guò)去,他給我返對(duì)應(yīng)的 ticket。接著我把 ticket 傳給后端,他給我返我需要的東西。。。反正最后寫的兩個(gè)人都懵了,還是另一個(gè)還算清醒的后端過(guò)來(lái)看了下,給我們重新整理了思路,只需要我把 url 給后端就可以了,其余的我不用管,拿值就完事了。

大致代碼如下

let url = window.location.href.slice(0, window.location.href.indexOf('#'))
const res = await getSignatureInfo({ url })
wx.config({
debug: false,
appId: res.appId,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: ['closeWindow'],
openTagList: ['wx-open-launch-weapp']
})

配置完成之后可以通過(guò) ready 接口處理成功驗(yàn)證

wx.ready(() => {
    console.log('success')
})

當(dāng)控制臺(tái)輸出了 success 之后,我們配置這一塊就成功了

wx-open-launch-weapp 使用

wx-open-launch-weapp 標(biāo)簽用起來(lái)其實(shí)很簡(jiǎn)單

<wx-open-launch-weapp
    :username="item.originalId"
    :path="`${item.pageUrl}?phone=${user.phone}`"
  >
    <script type="text/wxtag-template">
      code...
    </script>
  </wx-open-launch-weapp>

將需要跳轉(zhuǎn)小程序的原始 id 和需要跳轉(zhuǎn)到哪個(gè)路徑寫一下就完事了。這里比較坑的是樣式問(wèn)題。

處理樣式

我們這里的跳轉(zhuǎn)需要根據(jù)后端傳的一個(gè) appType 判斷是跳轉(zhuǎn)到另外的 h5 或者 公眾號(hào) 或者 小程序。

本來(lái)我的思路是直接循環(huán),判斷當(dāng)前 app 是否是跳轉(zhuǎn)小程序,如果是就渲染 wx-open-launch-weapp,否則渲染普通的 div 標(biāo)簽。

但是這里有個(gè)大坑,wx-open-launch-weapp 這個(gè)鬼東西里面 script 寫的 dom 元素是沒(méi)辦法使用 rem 的。等于說(shuō)只要是小程序跳轉(zhuǎn)類型的 icon 大小都會(huì)和另外兩個(gè)類型的大小有一些細(xì)微的差別。這種差別在正常手機(jī)上看倒是還好,但是只要用 pad 打開(kāi)那直接爆炸。而且這個(gè)標(biāo)簽還必須在真機(jī)上用微信打開(kāi)才能調(diào)試,等于只要我有一些改動(dòng),不論大小都要先上傳測(cè)試環(huán)境然后再嘗試效果,總之就是極其之坑。

花了一點(diǎn)功夫網(wǎng)上沖浪尋找辦法最終找到一個(gè)我個(gè)人認(rèn)為最好的辦法 -- 蒙層。

.icon {
    width: 25%;
    float: left;
    overflow: hidden;
    text-align: center;
    margin-bottom: .22rem;
}

通過(guò)浮動(dòng) + 相對(duì)定位的方法把所有 icon 在 .common_component 元素中渲染出來(lái),然后還是通過(guò) v-if 來(lái)判斷當(dāng)前 icon 是否是需要跳轉(zhuǎn)小程序的,如果是就展示。和之前唯一的區(qū)別就是我們將開(kāi)放標(biāo)簽中的內(nèi)容提了出來(lái),標(biāo)簽中只有一對(duì) div 元素,樣式就是絕對(duì)定位,寬高 100%并提高一下 z-index 的值。

這樣就可以完美實(shí)現(xiàn)我們需要的功能了。

到此這篇關(guān)于vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼的文章就介紹到這了,更多相關(guān)vue 公眾號(hào)跳轉(zhuǎn)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法

    詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法

    本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法,在VUE開(kāi)發(fā)時(shí),數(shù)據(jù)可以使用jquery和vue-resource來(lái)獲取數(shù)據(jù),有興趣的可以了解一下。
    2017-01-01
  • vue3單文件組件中style特性的深入講解

    vue3單文件組件中style特性的深入講解

    單文件就是把一個(gè)頁(yè)面拆分為多個(gè),多層次的組件,通過(guò)多層引用,大大縮小vue文件的長(zhǎng)度和頁(yè)面復(fù)雜度,下面這篇文章主要給大家介紹了關(guān)于vue3單文件組件中style特性的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • VUE中常用的四種高級(jí)方法總結(jié)

    VUE中常用的四種高級(jí)方法總結(jié)

    開(kāi)發(fā)vue項(xiàng)目的時(shí)候一般都會(huì)開(kāi)發(fā)很多自定義的全局組件,下面這篇文章主要給大家總結(jié)介紹了關(guān)于VUE中常用的四種高級(jí)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • Vue打包部署到Nginx時(shí),css樣式不生效的解決方式

    Vue打包部署到Nginx時(shí),css樣式不生效的解決方式

    這篇文章主要介紹了Vue打包部署到Nginx時(shí),css樣式不生效的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08
  • 解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題

    解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題

    下面小編就為大家分享一篇解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • vue如何判斷dom的class

    vue如何判斷dom的class

    這篇文章主要介紹了vue如何判斷dom的class,vue點(diǎn)擊給dom添加class然后獲取含有class的dom文件,具體內(nèi)容詳情大家參考下本文
    2018-04-04
  • 談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系

    談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系

    本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08
  • 用了這么久的Vue3你真的了解Proxy了嗎

    用了這么久的Vue3你真的了解Proxy了嗎

    Proxy是ES6引入的一個(gè)新特性,它允許你創(chuàng)建一個(gè)代理對(duì)象,用于攔截對(duì)目標(biāo)對(duì)象的訪問(wèn),但用了這么久的vue3,你真的懂Proxy嗎,本文就來(lái)和大家深入聊聊Proxy吧
    2023-06-06
  • vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例

    vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例

    今天小編就為大家分享一篇vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境

    Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境

    這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08

最新評(píng)論