微信小程序开发日记 (1)环境部署以及开发初认识

最新推荐文章于 2022-11-21 15:01:11 发布

向晚大魔王Avvvvvva

最新推荐文章于 2022-11-21 15:01:11 发布

阅读量1.1k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_50340097/article/details/118881825

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何快速搭建微信小程序的开发环境，包括在微信小程序官网注册、下载开发工具的步骤。讲解了app.json配置文件中的page字段、window字段以及tabBar字段的使用，详细阐述了这些配置项对小程序页面和导航栏样式的影响。此外，还提到了全局配置和页面局部配置的区别。

摘要由CSDN通过智能技术生成

环境部署

直接到微信小程序的官网进行注册，接着下载开发工具即可，该环境部署还是相对傻瓜式的。

熟悉开发框架

page字段

page字段存在于app.json配置文件内

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

这里代表着该小程序将会有多少个页面.，这与开发的框架中的page文件内的内容是完全对应的
值得注意的是，如果更改pages中的键值（注意：是在微信开发者工具中进行更改并且保存），就可以生成新的page框架。

window字段

先引用原始的框架来进行说明

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }

带有navigation的就是用于定义导航栏的，其后缀意义为导航栏的各种属性
具体应用：
“navigationBarBackgroundColor”: “#0094ff”,用来调节导航栏的颜色
“navigationBarTitleText”: “Weixin”,用来调节导航栏的标题文字
“navigationBarTextStyle”:“black”，用来调节导航字体的色调，调节之后可以明显看到标题字体的色调有明显的改变(注意,只能调节为blaack和white)

“enablePullDownRefresh”:true 用来调节说是否开启全局下拉刷新。
“backgroundColor”: “yellow”，刷新下来的那一部分是否是黄色的

tabbar字段

主要用于实现同级导航栏的效果
初始设定为

  "tabBar": {
    "list": [{//数组对象，内含有一下几种数据
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",//未选中的图标路径
      "selectedIconPath": "selectedIconPath"//以及选中的图标路径
    }]
  },