封装自己的网站为百度小程序 适用于任何网站

封装自己的网站为百度小程序 适用于任何网站。这句话咋的一看可能会闷,但是其实和将网站封装成APP是一个道理,有的网站因为结构繁杂,无开发人员,以及开发成本等等原因,导致不能支持额外的费用来开发百度小程序或者其他小程序,但是又想享受百度小程序的福利,那么就需要将网站封装为百度小程序了,毕竟有个小程序在移动端,流量展现将会大大靠前,享受头部流量!

那么我们该如何封装自己的网站为百度小程序,并成功上线呢?这里菜鸟库以菜鸟库图床为例子!

前提条件

  • 必须拥有企业资质或者个体工商户资质,非常抱歉,当前个人不支持入驻百度小程序!
  • 网站为自适应站点(H5)或者拥有移动站点。
  • 网站必须开启SSL
  • 网站必须完成备案,且内容合规合法

创建小程序

前往百度智能小程序管理中心创建小程序,并按照要求填写好小程序相关信息等待审核!点击下方网址即可进入百度智能小程序管理中心!

https://smartprogram.baidu.com/developer/applist.html

封装自己的网站为百度小程序 适用于任何网站

这里要注意,小程序的取名很重要,也要符合要求,建议先查阅名称规则后再给自己的小程序取名,一般可以使用自己的网站名后面加网即可,比如网站备案名为菜鸟库,菜鸟库的小程序就取名为菜鸟库网,大家自行参考,如果审核拒绝,请联系官方人员或者修改其他符合名称的要求!

提交审核后,我们会先获得自己的小程序APPID,这里记录下,然后下载百度智能小程序开发工具!https://smartprogram.baidu.com/docs/develop/devtools/history/。安装完成后,我们新建小程序项目!

封装自己的网站为百度小程序 适用于任何网站

1、项目名称修改为自己提交审核时的小程序名称,切记,小程序名称体现一定要一致,否则提交代码后会提示小程序名称不一致而不能通过!

2、项目目录为自己本机的小程序开发源码,大家自己选择!

3、填写自己审核中的小程序APPID,如果没有创建审核,那么就点击测试号也可以进行开发!

4、最重要!小程序后台配置服务器域名,就是你网站的域名 设置–》开发设置–》服务器域名、以及业务域名改为你的网站域名!务必操作,否则无法打包审核!

封装自己的网站为百度小程序 适用于任何网站

源码修改

小程序项目创建完成后,开发工具会默认生成文件!

封装自己的网站为百度小程序 适用于任何网站

1、将pages/index/index.json中的默认内容修改为以下内容:

{
    "navigationBarTitleText": "菜鸟库图床" /**名称修改为自己的审核中或者审核好的小程序名称**/
}

2、将pages/index/index.swan中的默认内容全部删除并且修改为以下内容:

<web-view src="https://pic.jszbug.com"></web-view> /**域名修改为自己的**/

上方代码若被转义,请放大图片查看!

封装自己的网站为百度小程序 适用于任何网站

完成以上步骤,我们就实现了封装自己的网站为百度小程序,但是切记,我们需要在小程序后台配置自己的业务域名等信息!

流量配置

其实就是因为封装网站成百度小程序后,对SEO不是很友好,但是我们也尽量可能让自己的首页能有个最基本的TDK!所以修改pages/index/index.js。在onLoad() {上方添加以下代码:

 onShow(options) {
        swan.setPageInfo({
            title: '菜鸟库图床-免费好用的图床',
            keywords: '菜鸟库图床',
            description: '菜鸟库免图床免费提供清新唯美的图片壁纸下载,把高清的壁纸推荐给您,让您更快的找到您想要的图片',
            success: function () {
                console.log('setPageInfo success');
            }
        })
  },

封装自己的网站为百度小程序 适用于任何网站

其中的TDK请修改为自己的,如果没有配置的话,在开发者工具调试栏会显示如下提示:

封装自己的网站为百度小程序 适用于任何网站

提交代码

完成以上步骤即可提交代码审核了,以上就是封装自己的网站为百度小程序,其实也同样适用于其他小程序,所以网站均适用!菜鸟库觉得这种方法能节约开发成本,但是这样封装的弊端就是对于小程序SEO不友好,建议有能力的还是不要封装!封装的小程序是不支持提交url适配以及sitemap

人已赞赏
技术教程

完美解决Cloudreve安装完成后域名访问首页空白

2020-7-29 4:22:27

技术教程

微幕小程序增强版添加百度follow-swan关注小程序组件

2020-7-29 4:27:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索