如何通过短链接跳转到小程序，或者跳转至小程序webview一个h5页面

theme: channing-cyan

一、需求背景：

公司需要通过发送短信携带短链接，用户点击短链接跳转到小程序的某个页面，然后打开小程序该页面webviewh5页面，然后链接携带参数。

使用技术：

主要是用小程序的云开发，相关文档在这里：

云开发文档

操作流程：

1小程序能链接网站吗，用户点击短链接跳转小程序

之后就打开小程序了

就是这样一个过程

代码流程：

1,首页我们需要一个h5路由页面，可以地址访问该页面，我使用的是vue框架

上面代码就是打开小程序的代码，但是此时还没有效果，需要配置云函数功能

需要先在小程序后台开通云开发服务，此时会分配一个云环境cloudID

打开小程序开发者工具-》点击云开发，开通静态网站功能

在云开发控制台点击设置，

然后点击云函数配置自定义安全规则

public为云函数名字,规则如下

{
    "*": {
        "invoke": "auth != null"
    },
    "public": {
        "invoke": true
    }
}

此时缺少云函数需要在代码新建云函数

新增文件夹起名叫cloud

再project.config.josn文件里增加配置

“cloudbaseRoot”: “cloud/”,

新增云函数起名public,然后同步云函数到服务器（微信小程序自己）

云函数index.js里代码写

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  switch (event.action) {
    case 'getUrlScheme': {
      return getUrlScheme(event.option)
    }
  }
  return {
    event
  }
}
async function getUrlScheme(option) {
  let query = 'xxx=' + option.xxx + '&from=yunhanshu' // 需要携带的参数
 
  const result = await cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: 'pages/h5/h5', // 
      query: query
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: false,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
  return {
    ...result,
    query
  }
}

然后同步云函数

此时云函数部门已经开发完毕，剩下的是跳转到小程序指定页面路径，后的代码

2,然后就要在小程序配置接受参数函数

h5.wxml部分很简单因为webview

h5.js 只需要接受参数就可以了

// pages/webview/h5.js
const {
  getOpenId,
} = require('../../utils/userUtils')
Page({
  data: {
    url:''
  },
  onLoad(options) {
    // console.log(options, 'optionsaaa')
    if(options.from && options.from === 'yunhanshu') {
      const url = `https://xxx/#/?xxx=${options.xxx}`
      this.setData({
        url: url
      })
    }else {
      this.setData({
        url:decodeURIComponent(options.url)
      })
    }
  }
})

3， 上面用到外部封装的函数

该函数需要调后端接口配合使用，主要是获取signature等参数信息，网上有很多，自行搜索

const getWeChatParams = async function (agentID, path, isHidden = false) {
  if (agentID) {
    let result = await wxticket({agentID, path})
    if (result.code === S_OK) {
      if (isHidden) {
        getHiddenWeChatShare(result.data)
      } else {
        getWeChatShare(result.data)
      }
    }
  }
}
const getWeChatShare = function (params) {
  let title = shareTitle;
  let desc = shareDesc
  weChat.config({
    debug: false,
    appId: appId,
    timestamp: params.timestamp,
    nonceStr: params.nonceStr,
    signature: params.signature,
    jsApiList: ['hideMenuItems', 'onMenuShareAppMessage', 'onMenuShareTimeline'],
    openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
  });
  weChat.ready(function () {
    // 批量隐藏菜单项
    weChat.hideMenuItems({
      menuList: [
        'menuItem:readMode', // 阅读模式
        'menuItem:share:qq',
        'menuItem:share:weiboApp',
        'menuItem:share:facebook',
        'menuItem:share:QZone'
      ]
    });
    // 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
    weChat.onMenuShareAppMessage({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: params.url, // 分享链接
      imgUrl: `${urlDomain}/logo.png` // 分享图标
    });
    //监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
    weChat.onMenuShareTimeline({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: params.url, // 分享链接
      imgUrl: `${urlDomain}/logo.png` // 分享图标
    })
  });
}

至此 整个开发流程就结束了，哈哈，是不是很简单。

如果有帮助，请点赞，评论，加收藏小程序能链接网站吗，方便以后用到查找，如果没有实现，可以留言交流。

打开App，阅读手记