记录微信小程序中遇到的问题
发表时间:2021-1-6
发布人:葵宇科技
浏览次数:36
一、页面窗口表现配置
每一个小程序页面也可以使用同名.json
文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.json
的window
中相同的配置项。
问题: 页面样式未生效
原因: 未将页面路径添加到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()
即可。