微信小程序通过URL Scheme动态的渲染数据_添加编译模式。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

请求参数

jump_wxa 的结构

3.返回值

openlink

生成的小程序 scheme 码

异常返回

Object

JSON

errcode 的合法值

返回值说明

如果调用成功，会直接返回生成的小程序 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>

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