百度智能小程序web化配置踩坑

1.百度智能小程序为什么要web化？

简而言之，发挥百度的优势---搜索引擎，使开发者的百度小程序不仅在百度app上运行，更可以脱离客户端，在任意浏览器内运行。相比于微信的用户量，如果百度小程序只能在端内运行，那么流量必然会小于微信，开发者自然不会重视。小程序web化其实就是将小程序转换成类h5应用。对于一些没有小企业来说，开发一个小程序，相当于连h5站一起开发了，一举两得。

2.web化url-mapping和sitemap配置

url-mapping:是配置小程序页面和h5页面映射规则的，小程序后台会根据开发者配置的映射规则通过模版字符串的编译自动生成相应的web化页面。

sitemap：帮助百度爬虫学习抓取规则，提高抓取效率，当一个页面出现动态参数时，sitemap要尽可能的多写一些（下面会举例）

官网上的例子可能有些人看的不太明白，我们这里分不同情况举几个例子

h5站点：m.baidu.com

1.我的h5页面没有参数，小程序对应的页面也没有参数,一般为首页

h5路径：m.baidu.com 小程序路径：pages/index/index

url-mapping:{'pages/index/index':'/'}

sitemap:

          /pages/index/index
复制代码

2.h5页面有参数，小程序页面有参数，一般为列表页,参数是动态的

h5路径：m.baidu.com/list?id=1 小程序路径：pages/list/list?page=2

url-mapping:{'pages/list/list':'/list?id=${id}'}

sitemap:

          /pages/list/list?id=1&page=1 
          /pages/list/list?id=2&page=2 
          /pages/list/list?id=3&page=3 
          /pages/list/list?id=4&page=4 
          /pages/list/list?id=5&page=5
复制代码

3.h5页面路径有多处动态参数 小程序页面无参数

h5路径：

        m.baidu.com/playAudio/3321(动态)/110(动态)？pages=5(动态)
复制代码

小程序路径：

        /pages/playAudio/Audio
复制代码

url-mapping:

        {'/pages/playAudio/playAudio':'/playAudio/${id}/${list}?pages=${pages}'}
复制代码

sitemap:

        /pages/playAudio/playAudio?id=3321&list=110&pages=5
        /pages/playAudio/playAudio?id=33&list=10&pages=3
        /pages/playAudio/playAudio?id=321&list=6324&pages=777
复制代码

小程序web化和原h5站的关系

开发者在小程序后台的业务域名内将自己的h5站点配置成功 并在自然搜索部分设置为小程序h5域名后，提包上线后，小程序web化的地址为h5站点域名+小程序页面路径 如

h5站点：

 m.baidu.com 
复制代码

小程序列表页

 /pages/list/list 
复制代码

小程序的web化列表页地址:

 m.baidu.com/pages/list/list?id=5&page=5
复制代码

小程序web化的点击量会加到原h5站，提高网站的权重，在手百端内搜索相应的页面，会优先展示小程序，打开小程序，在端外搜索，会优先展示web化页面，不会对原h5站造成任何影响

先写到这，有问题欢迎提问

转载于:https://juejin.im/post/5c3ff0126fb9a049f66c643b