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


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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
javascript hashtable实现代码
Oct 13 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
JS创建对象的写法示例
Nov 04 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
input 高级限制级用法
2009/03/26 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
音乐教育感言
2014/03/05 职场文书
工程安全员岗位职责
2014/03/09 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
故宫导游词
2015/01/31 职场文书
2015年中个人总结范文
2015/03/10 职场文书
迎国庆主题班会
2015/08/17 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
解决Redis启动警告问题
2022/02/24 Redis