头条号小程序制作分享

欢迎关注点赞转发留言

头条小程序可以通过自定义页面，方便用户把个性化想法展现出来。平台有人性化开发帮助文档，整个制作流程，原理，概念讲得非常详细，开发者能短时间快速上手。个人制作小程序需要懂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 添加底部导航栏运行示意图

欢迎关注点赞转发留言