我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

从本文开始,苏南大叔更新几篇百度智能小程序相关文章。不过目前为止,苏南大叔也没有申请到智能小程序的权限,因为官方说不对个人开放相关权限。所以,如何申请申请百度智能小程序的内容,苏南大叔就不叙述了。目前苏南大叔试了下,根本就进不去申请入口。不过,这并不妨碍大家实验百度智能小程序的相关功能。

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - baidu-app
百度智能小程序,如何新建测试项目,并添加新页面?(图9-1)

本文测试环境:mac/百度开发者工具@2.4.0。这里需要着重说明的一点是:目前来说,关于百度智能小程序的经验文章还是相对不多。但是,由于众所周知的原因,百度的智能小程序和微信小程序,是惊人的相似。所以,很多时候,可以换换思路。把问题变成微信小程序如何如何,那么也许就有结果了。

开发者工具下载

百度智能小程序的专用下载地址如下:
下载地址:

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - smartapp-tool-download
百度智能小程序,如何新建测试项目,并添加新页面?(图9-2)

window版本:

mac版本:

范例代码(@1.0.1)下载:

新建项目

打开开发者工具,单击“新建”。在弹出框内输入项目名称、项目目录和AppID

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - baidu-smart-app-init
百度智能小程序,如何新建测试项目,并添加新页面?(图9-3)

主要就是appid这一项目,问题可能比较大。拿不到appid的话,就随便输入8位数字就可以了。然后就可以得到一个默认的比较简单的百度智能小程序。目录结构看起来和微信小程序是非常惊人的类似。如果大家搞过微信小程序的开发的话,就不会太陌生。

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - smartapp-init
百度智能小程序,如何新建测试项目,并添加新页面?(图9-4)

新建页面

本文中,就说一下新建一个页面的概念,为下一篇文章打个基础。在pages目录下面,点击右键,新建页面即可。假设页面名称是test,这里记住页面路径就好:pages/test/test,以后是会用的到的。

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - page-new-01
百度智能小程序,如何新建测试项目,并添加新页面?(图9-5)

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - page-new-02
百度智能小程序,如何新建测试项目,并添加新页面?(图9-6)

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - page-new-03
百度智能小程序,如何新建测试项目,并添加新页面?(图9-7)

标准页面的组成

是由 同名的 css,js,以及swan文件组成的。如果放在普通页面里面,来理解的话,就非常容易理解了。这几个文件只需要放在同一级别下,并且注册到app.json中,就可以生效了。几个文件之间是没有显式的相互引用关系。其中,

  • swan文件就是大家通常意义上的html文件。
  • json文件就是存储相关数据的配置文件。
  • cssjs,这两个文件,就不用说了,大家都明白。

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - pages-component
百度智能小程序,如何新建测试项目,并添加新页面?(图9-8)

所有pages列表

app.json文件的pages节点里面,有所有的页面列表。如果对应的页面没能正常显示,就需要首先检测这里的节点定义。其中,pages项目中的第一条数据,是非常重要的,因为它是默认起始页面。

苏南大叔:百度智能小程序,如何新建测试项目,并添加新页面? - app-json-page-list
百度智能小程序,如何新建测试项目,并添加新页面?(图9-9)

如果页面路径在app.json里面没有注册的话,就会显示get类似的错误提示,而且错误文件非常少,可以拿着手机上的照相机放大功能才能看清楚。报错信息类似如下:

cannot get /pages/index/index

解决方案就是:检测并修正路径,并注意一定要注册到app.json文件的pages节点里面。

总结

本文中,苏南大叔就稍稍介绍一下页面的构成。下一篇文章中,苏南大叔讲述页面跳转。欢迎继续收看,苏南大叔的百度智能小程序相关文章。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   百度小程序    baidu