微信开发者平台提示：由于 skyline 页面的 navigationStyle 是 custom，app.json 中的 window 配置 navigationStyle、等是不生效的问题解决办法

信XXXL

已于 2024-03-06 10:45:24 修改

阅读量3k

点赞数 11

文章标签： json

于 2024-03-02 12:37:36 首次发布

本文链接：https://blog.csdn.net/LI_Donghua/article/details/136413427

版权

本文指导用户如何从app.json文件中移除renderer:skyline设置，并处理可能遇到的问题，包括提供必要的代码删除步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在app.json中删除"renderer":"skyline"

2.如果以上操作还出现问题，再把以下代码删除

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

信XXXL

关注关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 navigationStyle custom 无效

carbonzhao的专栏

12-28

5060

因为项目风格要求，需要自定义导航栏，所以需要将默认的导航栏隐藏掉。隐藏的代码倒很简单，只需要在相应的页面json文件中添加以下代码即可： "navigationStyle":"custom" 然后问题出来了。。因为产品太多，需要将A产品的部分页面移植到B产品上，为了效率肯定是直接将A项目中的页面复制到B项目中，结果挂屁了。。。移植过来的页面自定义导航全部无效了。。这他奶奶的是什么情况？出来走两步搞笑呢？经过排查，终于找到问题！发现问题了吗？原因是：我们直接复制过来的页面根本没有..

【微信小程序】开发与配置

领头羊的博客

07-26

2290

准备学习一下怎么开发微信小程序，主要是跟着微信官方文档进行学习，在这里记录一下。

3 条评论您还未登录，请先登录后发表或查看评论

小程序进阶（三）-----小程序的配置app.json

qq_42112846的博客

10-13

866

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。以下是一个包含了部分常用配置选项的 app.json ： { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleTex...

微信小程序-顶部导航栏的配置不生效的问题

最新发布

2401_82463671的博客

03-27

719

自定义构建npm时出现的顶部导航栏未能成功显示的问题

单页“navigationStyle“: “custom“,不生效

qq_38932474的博客

12-11

5667

小程序单页"navigationStyle": “custom”,不生效的问题笔记：没有在app.json 配置页面路径

记录一次小程序单页面设置navigationStyle:custom无效的问题

KangTongShun的博客

05-14

4826

设置方式在页面的json文件中添加 { "navigationStyle":"custom" } 但是在开发工具上看不出来效果，在手机上可以看到。所以问题锁定到开发工具上。存在问题的版本调试基础库<2.4.3 将调试基础库调整到>=2.4.3即可 ...

微信小程序全局配置文件app.json中window:backgroundColor“不生效”

Builder_Taoge的博客

03-13

2万+

标题中"不生效"带着引号你就知道大概不是真的不生效了，而是没搞明白这个属性到底代表的是哪一部分的背景色。从小程序官方文档中看到图1画框处这样的说明：图1.以为指的是小程序中所有页面的背景色，于是满心欢喜的设置了这个属性值，结果出现图2的样子：图2以为是页面的page.json覆盖了app.json这个全局配置里的window属性,但是例子中的两个页面都没做自己的配置...然后又想，难道是开发工具中...

渲染器类型renderer为skyline时，设置navigationBarTitleText属性无效

yuning1247的博客

02-02

663

app.json文件中设置的"renderer": "skyline"时，在各自页面的json文件中设置navigationBarTitleText属性是无法生效的。

微信小程序起步-小程序代码构成

cheese的博客

02-04

1233

你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色，代码上传时自动压缩等等一系列选项。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了。通过这个章节，我们了解了小程序设计到的文件类型，以及对应的角色，在下个章节中，我们把这一章节中设计到的文件通过“小程序的框架”给“串”起来，让他们都工作起来。

Taro入门合集，新手小白也可以做项目（2）共86

caixin185的博客

01-04

1115

承接上一篇，，跟着我一起做下去，你也能做一款自己的小程序，今天会讲一些日常开发的注意或者说默认规则，包括全局配置，自适应单位命名等。

微信小程序自定义头部导航栏（组件化）

01-03

本文实例为大家分享了微信小程序自定义头部导航栏的具体代码，供大家参考，具体内容如下效果图支持导航栏自定义背景颜色、背景图片支持返回文字自定义支持导航标题自定义首先在app.json window配置项添加 window: { navigationStyle: custom } 自定义头部导航栏代码 wxml部分 <view class=cu-bar {{bgImage!=''?'none-bg text-white bg-img':''}}

微信小程序开发问题

不断努力向上攀登的路，比站在顶峰更加让人热血沸腾！

04-03

1872

pages/index/index.json 文件内容错误] pages/index/index.json: 根据页面或 app.json 的配置,pages/index/index.json 页面 renderer 为 skyline,需在页面配置中添加 disableScroll: true(env: Windows,mp,1.05.这个问题的解决办法是重新装一下微信开发者工具，安装位置设置成默认路径。不过有其它解决办法，可以评论区告诉我一下。

uniapp navigationStyle: custom 取消默认原生导航栏导致页面顶部进入状态栏区域问题

tengyuxin的博客

09-15

3645

关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。

微信小程序："navigationStyle":"custom"

oopxiajun博客专栏

05-06

2万+

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html 今天折腾了半天这个"navigationStyle":"custom"，让小程序顶部栏自定样式。第一个问题：是整个小程序全局都自定义吗？还是部分页面自定义（单独某一个页面自定）？全局都自定义请在app.json的...

第一次使用skyline渲染模式。如何使用skyline渲染模式，单个页面如何使用skyline渲染模式和使用后的样式问题

m0_65238444的博客

04-22

3796

skyline渲染模式：主要是单个页面使用了skyline渲染模式，然后从webview改成skyline容易遇到的一些样式或者js的渲染问题，单个页面的限制太多，使用skyline必须在样式或者布局上进行一些调整，如果整个项目使用的话反而不会那么麻烦，因为整个小程序都是用一个渲染模式，所以就不会遇到那么多样式上的问题，如果单个页面使用的话，会有许许多多的问题，以上都是我在单个页面使用中遇到的问题。

小程序错误：[app.json文件内容错误]app.json未找到

十九万里的博客

04-14

3万+

问题描述：在Github上刚刚拉取的代码，导入微信开发者工具打开之后出现如下问题， 解决办法： 1.我自己的原因是项目目录没打开对，打开目录的时候。此文件夹的二级目录必须包含pages，styles，example等主目录。我是把新建一个文件夹之后把克隆的文件夹放里面，打开的是我自己建的文件夹，所以导致错误，如上图所示应该打开vip文件夹而不是小程序1文件夹重新打开之后问题解决总结： 1、原因是项目目录不对，项目二级目录下必须有pages，styles，example等主目录。我是

小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar

热门推荐

hangGe0111的博客

12-29

4万+

1.在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏； 2.代码部分 2.1首先在app.json的window中配置"navigationStyle": "custom"（使用自定头部导航栏） 2.2导航栏组件部分（1）custom-component.wxml &lt...

{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true, "tagNameStyleIsolation": "legacy", "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }在logs文件内，有json1.js和json2.js两个文件，里面是全部物料的信息，如果我想使用搜索功能，那么下面的app.json代码应该怎么改：{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true, "tagNameStyleIsolation": "legacy", "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

03-25

<think>好的，我现在需要帮助用户解决如何在微信小程序中配置app.js以实现搜索功能，同时处理1.js和2.js中的物料信息。首先，我需要理解用户的需求。用户想要在app.js中添加搜索功能，能够搜索1.js和2.js存储的物料数据。根据提供的引用内容，用户可能在使用类似微信小程序的框架，如React或Vue，但根据引用[1]、[2]、[3]，更可能是微信小程序，因为提到了getApp()、setData、globalData等概念。首先，我需要回顾微信小程序的全局数据管理。在微信小程序中，app.js的globalData对象可以存储全局数据，其他页面或模块可以通过getApp()来访问。根据引用[1]，home.js通过getApp().list.information获取数据，并在onLoad生命周期中设置到页面数据中。引用[2]提到在封装的模块中使用app.js的数据，可能需要传递app实例或者将数据作为参数传入。引用[3]展示了如何在页面中等待app.js中的数据准备好，比如使用回调函数或闭包。现在，用户想修改app.js以支持搜索功能，处理来自1.js和2.js的物料信息。可能的步骤包括： 1. **在app.js中集中存储物料数据**：将1.js和2.js中的物料信息整合到app.js的globalData中，作为全局数据源。这样搜索功能可以统一访问这些数据。 2. **实现搜索方法**：在app.js中定义搜索函数，接收关键词参数，遍历globalData中的物料数据进行过滤，返回结果。 3. **数据同步与更新**：确保1.js和2.js的数据变动能同步到app.js的globalData。如果1.js和2.js是页面或模块，当它们修改数据时，需要更新globalData，比如通过调用app.js中的方法。 4. **在页面中调用搜索功能**：在需要搜索的页面中，获取app实例，调用搜索方法，并处理返回的结果，更新页面数据。接下来需要考虑如何具体实现这些步骤。例如，如何在app.js中定义搜索函数，其他页面如何调用这个函数，如何处理异步数据加载（如果数据是异步获取的），以及如何确保数据一致性。可能遇到的问题包括数据同步的时机，比如如果1.js和2.js的数据是异步加载的，搜索功能需要等待数据加载完成。这时可以借鉴引用[3]中的回调方法，或者使用Promise来处理异步操作。另外，如果1.js和2.js是独立模块，如何将它们的物料数据传递到app.js中？可能需要在这些模块初始化时，将数据写入app.globalData，或者在app.js中导入这些模块的数据。例如，在app.js中引入1.js和2.js，合并它们的数据到globalData.materials数组中。代码结构方面，app.js可能需要如下修改： ```javascript // app.js App({ globalData: { materials: [], // 合并1.js和2.js的数据 // 其他全局数据... }, // 搜索方法 searchMaterials(keyword) { return this.globalData.materials.filter(item => item.name.includes(keyword) || item.description.includes(keyword) ); }, // 初始化物料数据的方法，可能在onLaunch中调用 initMaterials() { const materialsFrom1 = require('./1.js').getMaterials(); // 假设1.js导出getMaterials方法 const materialsFrom2 = require('./2.js').getMaterials(); this.globalData.materials = [...materialsFrom1, ...materialsFrom2]; }, onLaunch() { this.initMaterials(); } }); ``` 然后，在1.js和2.js中，可能需要导出物料数据： ```javascript // 1.js module.exports = { getMaterials() { return [ /* 物料数据 */ ]; } }; // 2.js类似 ``` 在页面中使用搜索功能： ```javascript // 搜索页面的js const app = getApp(); Page({ data: { results: [] }, onSearchInput(e) { const keyword = e.detail.value; const results = app.searchMaterials(keyword); this.setData({ results }); } }); ``` 此外，需要考虑数据更新的问题。如果1.js或2.js的数据会动态变化，可能需要提供方法更新globalData中的对应部分，或者在每次搜索时重新获取最新数据。如果数据量很大，可能需要优化搜索性能，比如使用防抖、缓存等策略。总结步骤： 1. 整合1.js和2.js的数据到app.globalData。 2. 在app.js中实现搜索方法。 3. 在页面中调用搜索方法并展示结果。 4. 处理数据同步和更新机制。最后，需要验证这些步骤是否符合微信小程序的开发规范，例如全局数据的使用、模块的导入导出方式是否正确，以及生命周期函数的调用时机是否恰当。</think>### 分步配置app.js实现搜索功能 #### 一、数据集中管理 1. **在`app.js`中定义全局存储** 将`1.js`和`2.js`的物料数据整合到`globalData`中，作为统一数据源： ```javascript // app.js App({ globalData: { materials: [], // 初始为空，通过initMaterials填充 }, // 初始化方法（在onLaunch中调用） initMaterials() { const data1 = require('./1.js').materials; // 假设1.js导出materials数组 const data2 = require('./2.js').materials; // 假设2.js导出materials数组 this.globalData.materials = [...data1, ...data2]; }, onLaunch() { this.initMaterials(); } }); ``` 2. **`1.js`和`2.js`的数据导出格式** 确保模块文件导出规范的物料数据格式： ```javascript // 1.js const materials = [ { id: 1, name: "物料A", category: "电子元件" }, { id: 2, name: "螺丝刀", category: "工具" } ]; module.exports = { materials }; ``` #### 二、实现搜索逻辑在`app.js`中定义全局搜索方法，支持模糊匹配： ```javascript // app.js App({ globalData: { materials: [] }, // 搜索方法（不区分大小写） searchMaterials(keyword) { const lowerKeyword = keyword.toLowerCase(); return this.globalData.materials.filter(item => item.name.toLowerCase().includes(lowerKeyword) || item.category.toLowerCase().includes(lowerKeyword) ); } }); ``` #### 三、页面调用示例在页面中通过输入事件触发搜索： ```javascript // search-page.js const app = getApp(); Page({ data: { results: [] }, // 输入框事件绑定 onSearchInput(e) { const keyword = e.detail.value; if (keyword.trim()) { const results = app.searchMaterials(keyword); this.setData({ results }); } else { this.setData({ results: [] }); } } }); ``` ```html  <input placeholder="输入关键词" bindinput="onSearchInput" /> <view wx:for="{{results}}" wx:key="id"> {{item.name}} - {{item.category}} </view> ``` #### 四、动态数据更新若`1.js`或`2.js`数据可能变动，需主动更新全局数据： ```javascript // 在数据修改的模块中调用更新 const app = getApp(); // 例如在1.js中添加新物料后： app.globalData.materials = [...app.globalData.materials, newItem]; ``` #### 五、性能优化建议 1. **防抖处理** 避免频繁触发搜索，在输入事件中添加延迟： ```javascript let timer; onSearchInput(e) { clearTimeout(timer); timer = setTimeout(() => { const keyword = e.detail.value; // 执行搜索... }, 300); // 延迟300ms } ``` 2. **索引优化** 若数据量大，可预先建立搜索关键词索引： ```javascript // app.js中预生成索引 buildSearchIndex() { this.globalData.searchIndex = this.globalData.materials.map(item => ({ keywords: `${item.name} ${item.category}`.toLowerCase(), data: item })); } ``` --- ###