微信小程序导航站要点解析

引言

工作有开发微信小程序的内容,而PC微信上的微信浏览器和小程序首页不尽如人意 (打开不方便,首页有广告和其它内容)

因此结合之前的经验以及最近的发现;写了一个方便的小程序导航页;此为单HTML页面

主要功能有:

• 体验版小程序跳转
• 小程序码自动生成
• Chrome与手机双支持
• 自定义跳转参数和页面

打开微信浏览器这最后一公里用到了微信的截图识别二维码功能

代码请看:https://gist.github.com/wangshuai-007/1dcdc5c09ba7d7e2fb3a0e2442800cbd

配置说明

配置主要为变量miniProgramGroups

示例大概是这样的:

const miniProgramGroups = {   
      "常用": {
        "wxcff7381e631cf54e": { name: "微信开发者助手", icon: "https://developers.weixin.qq.com/community/ngi/personal/suncode/wxcff7381e631cf54e",prodUrl:"weixin://dl/business/?appid=wxcff7381e631cf54e&path=pages/index/index" , testUrl: "https://open.weixin.qq.com/sns/getexpappinfo?appid=wxcff7381e631cf54e"},   
      },
      "极简":{
        "wxcff7381e631cf54e":{
          name:"极简小程序",
        }
      }      
    };

支持的参数有:

名称	必输	说明
name	true	显示的名称
icon	false	图标,默认用小程序码
testUrl	false	体验版二维码地址,可以从小程序后台扫码后解析得到
prodUrl	false	正式二维码地址,一般不需要;只在需要用参数打开页面时有用;具体参数说明请查看微信文档:获取 URL Scheme

要点解析

之前写过一篇文章:通过url打开微信小程序介绍了 URL Scheme和PC快捷方式打开小程序的方法;这里介绍其它的要点

打开微信浏览器

日常开发使用的chrome;但体验版微信小程序由于有认证必须要在微信浏览器里面才行;所以使用微信浏览器打开指定的链接是最难的部分;

解决方法是微信截图;

聊天记录中的二维码可以直接在微信里面识别 ;微信截图工具也带了这个功能

只要截图中有二维码,就可以直接使用微信浏览器打开链接或小程序

小程序码

官方文档中正常打开一个小程序需要有明文URL Scheme;这个需要在后台给每个小程序单独开通设置;

还有一个方法就是小程序码;不过小程序码是微信私有的算法;网上暂无公开生成方法;但是我找到一个官方的小程序码地址:https://developers.weixin.qq.com/community/ngi/personal/suncode/wxcff7381e631cf54e

有了这个地址后,搭配微信截图识别;就可以打开任意小程序了

微信开发者助手

导航网站一开始我放了微信开发者助手这个小程序;这个小程序是微信官方开发的;里面可以看到自己管理或体验的所有小程序;还能看到每个人提交的预览版版本;

里面可以看到所有的appid;如果需要知道其它小程序的appid;在手机小程序的更多资料中查看

参考资料

• 小程序助手-微信开放社区