uniapp h5项目点击跳转小程序,h5传参到小程序

uniapp h5项目点击跳转小程序,h5传参到小程序

第一步:全局安装微信sdk

npm install --save-dev weixin-js-sdk

第二步:直接在使用的页面引入

import wx from 'weixin-js-sdk';

由于我这块需要跳转到小程序,所以创建了个activity_sdk.js文件,封装好跳转小程序的方法,代码如下

import wx from 'weixin-js-sdk';
export default {
  //360页面跳转至NEV小程序
  to_page(url,parmes){
    let stringParmes = JSON.stringify(parmes) // h5活动需回传的参数
    let h5Url = "https://xxxx.com.cn/wxapp/nev-prod/3d/" // h5活动需回传的h5活动地址
    wx.miniProgram.redirectTo({
        url: `${url}?redirectURL=${encodeURIComponent(h5Url)}&parmes=${encodeURIComponent(stringParmes)}`
    })        
  }
}

第三步:直接在需要跳转小程序页面直接调用该方法

import wx from "@/util/activity_sdk.js";

 // 跳转小程序方法
    toWeChat() {
      const url = "/pages/car/children/carList/index"; //跳转小程序某个页面路径
      let parmes = {
        vhcCode:'xxx',
        gradeCode:'zzz',
      };//需要传的参数
      wx.to_page(url, parmes);
    },

第四步:小程序获取h5传的参数

  onLoad(options) {
    let that = this
    if(options.parmes){
      that.setData({
        h5Datas:  JSON.parse(decodeURIComponent(options.parmes))
      })
    }
  },

你可能感兴趣的:(小程序,前端,微信小程序)