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


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 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
javascript代码加载优化方法
Jan 30 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
课程设计心得体会
2013/12/28 职场文书
物流业务员岗位职责
2014/02/08 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
工程承诺书怎么写
2014/05/24 职场文书
公司合作意向书范文
2014/07/30 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
倡议书作文
2015/01/19 职场文书
大学生个人学年总结
2015/02/15 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python