当前位置: 首页>前端>正文

微信开发者工具设置跳转页面 微信开发者工具界面

在我们下载微信开发者工具后,打开工具,第一次需要扫码登录,登录后,如下图,选择新建一个小程序

微信开发者工具设置跳转页面 微信开发者工具界面,微信开发者工具设置跳转页面 微信开发者工具界面_微信开发者工具设置跳转页面,第1张

我的这个是新建了一个的了,点击加号新建,然后填入信息,项目名称,项目存储的地址,以及注册小程序时的APPID,再选择不使用云服务,语言选择默认的JavaScript

微信开发者工具设置跳转页面 微信开发者工具界面,微信开发者工具设置跳转页面 微信开发者工具界面_json_02,第2张

看一下创建好了的小程序的所有文件夹下面的文件是什么。如下图:

微信开发者工具设置跳转页面 微信开发者工具界面,微信开发者工具设置跳转页面 微信开发者工具界面_ico_03,第3张


文件都看过了,接下来就是文件下面的内容了,首先是app.json 全局入口文件 下面是直接生成的代码。
app.json是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的app.json配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"       
    //该项目的俩个字段表示里面有俩个页面,分别是首页和日志文件,可以在此字段当中添加其目录或者文件。
  ],
  "window": {
    "backgroundTextStyle": "light",   			// 下拉
    "navigationBarBackgroundColor": "#fff",  	//导航栏的背景颜色
    "navigationBarTitleText": "WeChat",  		//导航栏的标题
    "navigationBarTextStyle": "black"  			//文字颜色,只能定义为黑色和白色 black white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1.pages pages 字段⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
2.window window 字段定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等
window的属性挺多的,在该页面浏览:单击跳转 3 tabber属性:定义导航栏属性,页面路径,文字等等,以及color颜色,selectedColor选中后的字体颜色,属性详情:单击跳转

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    }
    ],
    "color":"#0099ff",
    "selectedColor": "#000000"
  },

在通过使用tabber属性添加导航后,我们可以看到在添加后与很多小程序多差不多了,在下方有一个图片加文字的导航。如下图所示:

微信开发者工具设置跳转页面 微信开发者工具界面,微信开发者工具设置跳转页面 微信开发者工具界面_ico_04,第4张


其次就是页面配置文件 page.json
在其他的.json文件当中,比如在index.json页面当中,在原本的基础上加上属性会对页面外观进行部分改变,代码如下:
除去原有的第一行,给主页面加上了背景色和文字的属性。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#0099aa",
  "navigationBarTitleText": "主页"
}

微信索引配置文件 sitemap.json
在该文件下会给出一个网址,该网址会直接指向微信官方的文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html




https://www.xamrdz.com/web/2pv1960055.html

相关文章: