html5网站模板免费,深圳关键词首页排名,网站开发项目教程,新的东莞网站制作公司文章目录 前言一、实现uniapp网页跳转微信小程序二、具体步骤1.获取小程序的token2.获取小程序跳转链接3.总的示例模板 总结 前言
最近的项目中有用到#xff0c;算是踩坑后的记录吧 微信官方文档参考#xff1a;获取token 微信官方文档参考#xff1a;获取url scheme 提示… 文章目录 前言一、实现uniapp网页跳转微信小程序二、具体步骤1.获取小程序的token2.获取小程序跳转链接3.总的示例模板 总结 前言
最近的项目中有用到算是踩坑后的记录吧 微信官方文档参考获取token 微信官方文档参考获取url scheme 提示以下是本篇文章正文内容下面案例可供参考
一、实现uniapp网页跳转微信小程序
备注要跳转的微信小程序必须有线上版本此方法仅在开发环境中生效生产环境会出现跨域问题我后来是在C1N上生成了短链接然后进行跳转的。
二、具体步骤
1.获取小程序的token
代码如下示例
// 这里的appid写你需要跳转的小程序的appid,secret秘钥也一样grant_typeclient_credential是固定的参数不用改
getToken() {uni.request({url: /api/cgi-bin/token,method: GET,data: {grant_type: client_credential,appid: wx9bf8ae1b7dfc82c5,secret: a7ec5ad46417c3b705fdea7dd51bfd02},success: res {// console.log(res, 获取小程序的token);this.getScheme(res.data.access_token)}})
},2.获取小程序跳转链接
代码如下示例
// path跳转到的小程序目标页面query跳转需要携带参数在目标页面onload里面接收options里面其他参数固定获取看文档了解
getScheme(token) {uni.request({url: /api/wxa/generatescheme?access_token token,method: POST,data: {jump_wxa: {path: ,query: ,env_version: release // 正式版为release体验版为trial开发版为develop},is_expire: true,expire_type: 1,expire_interval: 1},success: res {// console.log(res.data.openlink, 我获取到的openlink)//这里获取到openlink的就是可跳转的路径地址把它赋值给href即可this.openlink res.data.openlink}})
},3.总的示例模板
代码如下示例
//备注要跳转的微信小程序必须有线上版本templateview classtiao_btnuni-link color#fff showUnderLinefalse :hrefopenlink text跳转至小程序跳转至小程序/uni-link/view/templatescriptexport default {data() {return {openlink: }},onLoad() {this.getToken()},methods: {//第一步获取小程序的token// 这里的appid写你需要跳转的小程序的appid,secret秘钥也一样grant_typeclient_credential是固定的参数不用改getToken() {uni.request({url: /api/cgi-bin/token,method: GET,data: {grant_type: client_credential,appid: wx9bf8ae1b7dfc82c5,secret: a7ec5ad46417c3b705fdea7dd51bfd02},success: res {// console.log(res, 获取小程序的token);this.getScheme(res.data.access_token)}})},//根据第一步获取到的token第2步获取小程序跳转链接// path跳转到的小程序目标页面query跳转需要携带参数在目标页面onload里面接收options里面其他参数固定获取看文档了解getScheme(token) {uni.request({url: /api/wxa/generatescheme?access_token token,method: POST,data: {jump_wxa: {path: ,query: ,env_version: release // 正式版为release体验版为trial开发版为develop},is_expire: true,expire_type: 1,expire_interval: 1},success: res {// console.log(res.data.openlink, 我获取到的openlink)//这里获取到openlink的就是可跳转的路径地址把它赋值给href即可this.openlink res.data.openlink}})},}
}
/script
总结
以上就是今天要讲的内容本文仅仅简单介绍了uniapp h5 网页跳转微信小程序的开发环境下的方法。
