欢迎关注点赞转发留言
头条小程序可以通过自定义页面，方便用户把个性化想法展现出来。平台有人性化开发帮助文档，整个制作流程，原理，概念讲得非常详细，开发者能短时间快速上手。个人制作小程序需要懂js,css,html,后端语言(如java, php等)。下面讲精简版制作方法。
1通读平台开发帮助文档，收获不仅仅是小程序制作，还可以学习平台人性化文档设计，小程序的设计思想等等。开发帮助文档地址(https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/start/introduction)。
2下载开发工具，平台支持Vscode,和平台自己的工具(字节跳动开发者工具)。个人推荐用平台的工具，很方便,比国外的好用。工具下载地址(https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/developer-instrument/developer-instrument-update-and-download/)。
2.1 工具界面如下
2.1开发工具示意图
2.2 新建工程
2.2新建工程示意图
2.3 目录工程介绍。pages是存放非通用的页面，和pages同级目录是放公共配置。
2.3 工程目录示意图
2.3 来自帮助文档的根介绍示意图
2.3 来自文档页面介绍示意图
2.4 以一个hello world开启头条小程序之旅。
A 修改app.json 文件中navigationBarTitleText属性值 把导航栏标题更改。
修改完成文件要 保存(ctrl+s),不然不生效。如图所示。
2.4 更改标题示意图
B 页面底部加导航栏。pages 新增页面test, 同样在app.json 页面 tabBar属性增加test页 面链接。
{
"pages":[
"pages/test/test","pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "HELLO",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "hello",
"Badge":1
},
{
"pagePath": "pages/test/test",
"text": "word",
"iconPath":"pages/images/test.png",
"selectedIconPath":"pages/images/test.png"
}
]
}
}
2.4 添加底部导航栏运行示意图
欢迎关注点赞转发留言
网友评论