小程序扫描普通链接二维码跳转小程序指定界面方法


Posted in Javascript onMay 07, 2019

微信官方文档https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

看了官方文档之后,还是存在很多困惑,微信小程序是托管到微信服务器上的,要想扫描普通链接跳转指定界面,首先要知道微信把小程序放的服务器的访问路径,这些最初想法,可是看微信官方文档,感觉不是我想的这样的

小程序扫描普通链接二维码跳转小程序指定界面方法

文档上:“二维码规则的域名须通过ICP备案的验证。”如果是微信的服务器,那他们就不必这么写了,

可是小程序是托管微信服务器上的,为什么扫码自己服务器上的url能跳转呢?困惑反倒是多了,然后各种查资料,最后还是在微信官方文档上找到答案了

 小程序扫描普通链接二维码跳转小程序指定界面方法

原来是这样!恍然大悟!微信会扫描所有自己配置的url,如果匹配上了,就跳转至指定界面,还有个前提,小程序必须先发布代码,才可以。

小程序扫描普通链接二维码跳转小程序指定界面方法

 下面记录一下详情:

1.二维码规则,这里需要下载微信提供的验证文件,放到指定目录,验证不过会有提示,验证过了如图所示,配置几层目录根据自己的需求而定,上图这个:https://www.aaa.com/a/b/c/ 验证文件放置到c目录同层

2.测试链接,这里的url就是扫码之后,跳转到你指定界面里,可以获取到你此处配置这个完整的url包括参数,当然,这个参数是一个动态参数,配置的时候是写死了一个,你的应用中,自己动态生成这个参数,
https://www.aaa.com/a/b/c/d/service?flag=123 目录a/b/c/d/是在你的服务器上真实存在的目录,在d目录里面有个脚本service,当然目录名称脚本名称换成你自己的,flag这个key值不能改变,123换成你的实际生成的动态参数

3.在app.js中这样获取参数
util.js
/**
* 获取url参数
*/

let getQueryString = function (url,name) {
 console.log("url = "+url)
 console.log("name = " + name)
 var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
 var r = url.substr(1).match(reg) 
 if (r != null) {
  console.log("r = " + r)
  console.log("r[2] = " + r[2])
  return r[2]
 }
 return null;
}
module.exports = {
 getQueryString: getQueryString,
}

//app.js文件如下:

var utils = require('./utils/util')

App({
 onLaunch: function (options) {
  console.log("全局onLaunch options==" + JSON.stringify(options))
  let q = decodeURIComponent(options.query.q)
  if (q){
   console.log("全局onLaunch onload url=" + q)
   console.log("全局onLaunch onload 参数 flag=" + utils.getQueryString(q, 'flag'))
  }

 }

})

在其它的界面中的js脚本中这样获取参数

Page({

 /**
  * 页面的初始数据
  */
 data: {

 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  console.log("index 生命周期 onload"+JSON.stringify(options))
  //在此函数中获取扫描普通链接二维码参数
  let q = decodeURIComponent(options.q)
  if(q){
   console.log("index 生命周期 onload url=" + q)
   console.log("index 生命周期 onload 参数 flag=" + utils.getQueryString(q, 'flag'))
  }
 }

})

以上所述是小编给大家介绍的小程序扫描普通链接二维码跳转小程序指定界面详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 #Javascript
vue接入腾讯防水墙代码
May 07 #Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 #Javascript
详解vue中使用protobuf踩坑记
May 07 #Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 #Javascript
微信小程序扫描二维码获取信息实例详解
May 07 #Javascript
Vue数据绑定简析小结
May 07 #Javascript
You might like
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
浅谈js中的闭包
2015/03/16 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Pytorch的mean和std调查实例
2020/01/02 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
django跳转页面传参的实现
2020/09/17 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Python实现一个论文下载器的过程
2021/01/18 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
大学生自我鉴定
2013/12/16 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
人力资源职位说明书
2014/07/29 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL