记录微信小程序中遇到的问题

一、页面窗口表现配置

每一个小程序页面也可以使用同名.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"
问题1： 自定义的返回按钮，点击无法跳转到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()即可。

注意：用<navigator>组件设置返回按钮后，从此页面返回前一页，再点击前一页的返回按钮会再次返回此页面。只能在这两个页面之间跳转了。如果使用默认的导航栏，其返回按钮会一致向前返回。

问题2：如何传递参数给跳转页面
解决：利用查询参数传递，onload生命周期获取。

<navigator url="/pages/en/reciteWords/reciteWordsCenter/reciteWordsCenter?title=CET4" class="item">
  <image src="/assets/en/reciteWords/cet4-book.png"/>
  <text>大学英语四级词汇</text>
</navigator>

// reciteWordsCenter.js

Page({
  data: {
    title: ''
  },
  Page({
    onLoad: function(options) {
      this.setData({
        title: options.title
      })
    }
  })
})

问题3：navigationBarTitleText动态改变
解决：利用wx.setNavigationBarTitle()

 wx.setNavigationBarTitle()
   onLoad: function (options) { 
     wx.setNavigationBarTitle({
     title: options.title
   })
 },

三、页面背景

页面json中配置的backgroundColor，是设置窗口背景色，不是页面背景色，即窗口下拉刷新或上拉加载时露出的背景色。
设置页面背景色，要在wxss中定义样式，如下：

page {   
  background-color: #4962da; 
}