微信小程序通过URL Scheme动态的渲染数据

最近有个需求 是通过点击短信链接 动态的渲染小程序页面内的数据

 

获取URL Scheme

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。

以下为官方文档 ：获取 URL Scheme | 微信开放文档

1、第一种方式可以通过微信小程序官方后台手动生成URL Scheme

点击 微信公众平台 打开后台

手动生成链接，但是携带的参数不能是动态的

注意永久scheme有上限

Scheme 将根据是否为到期有效与失效时间参数，分为短期有效Scheme与长期有效Scheme：

1. 单个小程序每日生成 Scheme 上限为50万个（包含短期有效 Scheme 与长期有效 Scheme）
2. 有效时间超过180天的 Scheme 或永久有效的 Scheme 为长期有效Scheme，单个小程序总共可生成长期有效 Scheme 上限为10万个，请谨慎调用
3. 有效时间不超过180天的 Scheme 为短期有效Scheme，单个小程序生成短期有效 Scheme 不设上限

2、第二种方式通过调用微信接口动态生成

注意这是后端去调用接口生成的

urlscheme.generate

获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，有数量限制，目前仅针对国内非个人主体的小程序开放

urlscheme.generate | 微信开放文档

后台调用

POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN

请求参数

属性	类型	默认值	必填	说明
access_token / cloudbase_access_token	string		是	接口调用凭证
jump_wxa	Object		否	跳转到的目标小程序信息。
is_expire	boolean	false	否	生成的 scheme 码类型，到期失效：true，永久有效：false。注意，永久有效 scheme 和有效时间超过180天的到期失效 scheme 的总数上限为10万个，详见获取 URL scheme，生成 scheme 码前请仔细确认。
expire_type	number	0	否	到期失效的 scheme 码失效类型，失效时间：0，失效间隔天数：1
expire_time	number		否	到期失效的 scheme 码的失效时间，为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。is_expire 为 true 且 expire_type 为 0 时必填
expire_interval	number		否	到期失效的 scheme 码的失效间隔天数。生成的到期失效 scheme 码在该间隔时间到达前有效。最长间隔天数为365天。is_expire 为 true 且 expire_type 为 1 时必填

jump_wxa 的结构

属性	类型	默认值	必填	说明
path	string		否	通过 scheme 码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带 query。path 为空时会跳转小程序主页。
query	string		否	通过 scheme 码进入小程序时的 query，最大1024个字符，只支持数字，大小写英文以及部分特殊字符：`!#$&'()*+,/:;=?@-._~%``
env_version	string	"release"	否	要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。

3.返回值

openlink

生成的小程序 scheme 码

异常返回

Object

JSON

属性	类型	说明
errcode	number	错误码
errmsg	string	错误信息

errcode 的合法值

值	说明	最低版本
40002	暂无生成权限
40013	生成权限被封禁
85079	小程序未发布
40165	参数path填写错误
40212	参数query填写错误
85401	参数expire_time填写错误，时间间隔大于1分钟且小于1年
85402	参数env_version填写错误
44990	生成Scheme频率过快（超过100次/秒）
85400	长期有效Scheme达到生成上限10万
45009	单天生成Scheme数量超过上限50万

返回值说明

如果调用成功，会直接返回生成的小程序 scheme 码。如果请求失败，会返回 JSON 格式的数据。

示例

请求

{
    "jump_wxa":
    {
        "path": "/pages/publishHomework/publishHomework",
        "query": ""
    },
    "is_expire":true,
    "expire_time":1606737600
}

返回

{
 "errcode": 0,
 "errmsg": "ok",
 "openlink": Scheme,
}

4.数据处理

注意：返回的openlink就是携带参数的链接

 小程序界面中有一个编译那里 点击

重点来了 踩了坑才发现这个可以拿到携带的参数 

通过 url scheme 编译！！！可以看到openlink携带的参数！！！

此时需要数据处理
 onLoad: function (options) {
        //打印获取的参数
        console.log(options);
        for(let i in options){
          console.log(i);
          if(i){
            let href=  decodeURIComponent(i.replace(/\+/g,'%20'))//解码并且转空格
            this.setData({
              hrefUrl:href
            })
          }
          this.setData({
            hrefObj:hrefObj(this.data.hrefUrl) //拿到截取好的参数，之后拿它渲染页面就好
          })
          console.log(this.data.hrefObj);

        //写了个函数做截取
        function hrefObj(parms) {
          　  let localhref =parms;
              let localarr = localhref.split('&');
             console.log(localarr)
             var tempObj = {};
             for (let i = 0; i < localarr.length; i++) {
             　　tempObj[localarr[i].split('=')[0]] = localarr[i].split('=')[1];
          　　　　console.log(i)
             }
            return tempObj;}
        }
       
    },

此时遇到了问题 由于安卓机兼容问题 发送的url Scheme不是超链接，所以做了h5 跳转

export default {
  components: {},
  props: {},
  data() {
    return {
      hrefUrl: '',
    }
  },
  watch: {},
  computed: {},
  methods: {
      //跳转参数中的路径
    gotolist() {
      window.location.href = this.hrefUrl
    },
    //对参数中的路径做了截取，可以按照自己的需求去做处理
    hrefObj() {
      let localhref = decodeURIComponent(window.location.href)
      let localarr = localhref.split('=')[1]
      let localarr2 = localhref.split('=')[2]
      // console.log(localarr)
      var tempObj = localarr + '=' + localarr2
      return tempObj
    },
    //写了个函数跳转小程序地址
    openwechat() {
      window.location.href = 'weixin://dl/business/?t=xxxxxxxxf'
    },
  },
  created() {},
  mounted() {
    //由于短信发链接 所以把类似于这样携带参数的scheme：'weixin://dl/business/?t=xxxxxxxxf'拼在了路径后
    //判断参数是否存在 去跳转
    if (window.location.href.includes('=')) {
      this.hrefUrl = this.hrefObj()
      console.log(this.hrefUrl)
      this.gotolist()
    }
  },
}
</script>

以上是记录踩坑的问题 多多交流哦~