前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

微信h5网页跳转小程序方案

首页
2020-07-24 12:01:24
Front-End
小程序

# 接入要求

  • 主体要求: 仅开放给已认证的服务号
  • 系统要求:微信版本要求为:7.0.12及以上。系统版本要求为:iOS 10.3及以上、Android 5.0及以上

# 接入微信JS-SDK

包使用方式

# 接入要求

  • 主体要求: 仅开放给已认证的服务号
  • 系统要求:微信版本要求为:7.0.12及以上。系统版本要求为:iOS 10.3及以上、Android 5.0及以上

# 接入微信JS-SDK

包使用方式

"weixin-js-sdk": "^1.6.0"
@前端进阶之旅: 代码已经复制到剪贴板

直接在页面上使用

在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

wx.config({
  appId: '',
  debug: true,
  timestamp: '',
  nonceStr: '',
  signature: '',
  jsApiList: [],
  openTagList: ['wx-open-launch-app','wx-open-launch-weapp'] // 获取开放标签权限
});
@前端进阶之旅: 代码已经复制到剪贴板

需要注意的点

  • wx.config 内列出使用到的 openTagList
  • 符合开放平台列出的要求 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html
  • app 需要根据接入微信 sdk https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html

在微信开发者工具内打开你的网页测试如果显示

{errMsg: "config:ok”}
@前端进阶之旅: 代码已经复制到剪贴板

说明你已经接入JS-SDK成功了

# 在vue中使用例子

# 第1步 在main.js中设置

// 忽略微信自定义标签
Vue.config.ignoredElements = ['wx-open-launch-weapp','wx-open-launch-app']
fe
  • 接入要求
  • 接入微信JS-SDK
  • 接入要求
  • 接入微信JS-SDK
  • 在vue中使用例子
  • 第1步 在main.js中设置
  • 第2步 获取微信版本
  • 第3步 在页面上展示
  • 第4步 监听开发标签回调事件
  • 更多参考
  • 在vue中使用例子
  • 第1步 在main.js中设置
  • 第2步 获取微信版本
  • 第3步 在页面上展示
  • 第4步 监听开发标签回调事件
  • 更多参考

← Github Action部署应用实践总结小程序直播总结 →