关于前端:记录微信小程序中遇到的问题

29次阅读

共计 1065 个字符,预计需要花费 3 分钟才能阅读完成。

一、页面窗口体现配置

每一个小程序页面也能够应用同名 .json 文件来对本页面的窗口体现进行配置,页面中配置项会笼罩 app.jsonwindow中雷同的配置项。
问题: 页面款式未失效
起因: 未将页面门路增加到 app.json 的 pages 数组中
解决:
1、要将 pages 目录下所有页面的门路,增加到 app.json 的 pages 数组中。

{
     "pages":[
         "pages/index/index",
         "pages/profile/profile"
     ],
     "window":{ // 全局默认的窗口体现
         "backgroundTextStyle":"light",
         "navigationBarBackgroundColor": "#ff0000",
         "navigationBarTitleText": "语言学习",
         "navigationBarTextStyle":"white"
},

2、页面配置:
在页面对应的.json 文件中,配置与窗口无关的属性,将 aap.json 的 window 属性中雷同的配置项笼罩。上面是与页面导航栏相干的属性:

{
     "navigationBarBackgroundColor": "#ffffff",
     "navigationBarTextStyle": "black", // 导航栏题目色彩,仅反对 black/white,默认 white
     "navigationBarTitleText": "微信接口性能演示",
     "navigationStyle": "#eeeeee" // 导航栏款式,仅反对以下值:default 默认款式,custom 自定义导航栏,只保留右上角胶囊按钮
}

二、自定义页面导航栏

在页面配置文件中将导航栏款式配置为自定义, "navigationStyle": "custom"
问题: 自定义的返回按钮,点击无奈跳转到 index 页面,然而能够跳转到其余页面。
起因: 是因为在 tabBar(app.json)中曾经将 index 页面配置为 tab 对应的页面所导致的。
解决:
有两种实现跳转的形式,对应的解决办法:
形式一、wxml 文件:
<navigator style="margin: 20px;" url="/pages/index/index">go back</navigator>
默认:open-type="navigate"
增加:open-type="switchTab"

形式二、js 文件:
`wx.navigateTo({

url: '/pages/index/index'

})`
wx.switchTab() 替换掉 wx.navigateTo() 即可。

正文完
 0