小程序和H5互跳以及小程序跳转小程序

做个小程序的笔记~
1、小程序跳转h5:

<web-view src="{{link}}"></web-view>

这一行代码便可以实现,其中link为嵌入的h5页面的链接地址
具体实现如下:
新建一个文件夹link作为所有需要嵌入h5的外联容器
在这里插入图片描述

  //需要跳转h5的小程序页面
  goList(e){
         wx.setStorage({
          key: 'airportLink',
          data: "h5页面的链接地址"
        });
        wx.navigateTo({
          url: "/pages/link/link"
        })
  }
<!--pages/link/link.wxml-->
//嵌入h5的容器页面
<web-view src="{{link}}"></web-view>
//link.js
//嵌入h5的容器页面
const app = getApp()
Page({
  data: {
    link: "",
  },
  onLoad: function (e) {
    var that = this;
    wx.getStorage({
      key: 'airportLink',
      success(res) {
        var link = res.data;
        that.setData({
          link: link
        });
      }
    });
  }
})

2、h5跳转小程序
2.1npm install weixin-js-sdk --save
2.2在需要跳转小程序的页面引入:import wx from ‘weixin-js-sdk’//微信js
2.3判断是否在微信小程序环境:

//公用方法里面:
// 判断是否在微信环境
import wx from 'weixin-js-sdk'//微信js
export function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}
 // 判断是否是小程序环境
 export function isMiniProgram() { //是否为小程序环境
    //是否在微信环境
    if (!is_weixn()) {
       return false
    } else {
      //微信API获取当前运行环境
      wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) { //小程序环境
         return true
        } else {
          return false
        }
      })
    }
  };

2.4如果是小程序环境则跳转

import {is_weixn,isMiniProgram} from './js/public.js'
goMiniProgram(){
    if(isMiniProgram){
          wx.miniProgram.navigateTo({
            url: "/pages/index/index"
         });
    } 
}

2.5如果h5需要向小程序传参

  //h5页面
  wx.miniProgram.navigateTo({
    url: "/pages/index/index?phone=17801111000"
 });
//小程序页面
Page({
  data: {
    phone:''
  },
  onLoad: function (options) {
    /*获取h5传过来的参数*/
    let phone = options.phone
    this.setData({
      phone: phone,
    })
  }
})

在这里插入图片描述
3、小程序跳转小程序
3.1在配置文件app.json 添加 属性navigateToMiniProgramAppIdList:[]

"navigateToMiniProgramAppIdList": ['要跳转得小程序的appid']

3.2 跳转方法

wx.navigateToMiniProgram({
  appId: '',
  path: 'page/index/index?id=123',
  extraData: {
    foo: 'bar'
  },
  envVersion: 'develop',
  success(res) {
    // 打开成功
  }
})

在这里插入图片描述
3.3使用限制
在这里插入图片描述
web-view

wx.navigateToMiniProgram

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值