为什么最近新建项目/代码片段和以前不一样？ 干货

前言

最近应该会有不少同学在使用微信开发者工具开发小程序遇到一些问题：

  • 新建项目/代码片段自带了components文件夹？

  • 导航栏怎么不见了？

  • 文字怎么都跑到状态栏去了

    ......

这是模板更新了：

  1. 目前新建项目/代码片段默认会包含一个名为components文件夹（这个文件夹一般用于存放封装好的自定义组件），里面会自带一个自定义的导航栏组件navigation-bar。

  2. app.json全局配置默认配置了自定义导航栏：

{
  "window": {
    "navigationStyle": "custom", // 自定义导航栏
    "navigationBarTextStyle": "black"
  }
}

因为配置了自定义导航栏，所以原生导航栏就不见了，元素就从顶部状态栏开始渲染。

  1. app.json全局配置中开启了Skyline 渲染引擎（目前新建代码片段会默认开启Skyline 渲染引擎和全局配置自定义导航栏）：
{
  "renderer": "skyline", // 开启了Skyline渲染引擎
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel"
}

因为目前 Skyline渲染引擎 不支持原生导航栏，所以原生导航栏就不见了，元素就从顶部状态栏开始渲染。


解决方案

1、学习使用新的模板

自定义导航栏

你可以使用模板自带的「自定义导航栏」代替「原生导航栏」，自定义导航栏的文档可参考：https://wechat-miniprogram.github.io/weui/docs/navigation.html

页面滚动

如果你的项目开启了Skyline 渲染引擎（即配置"renderer": "skyline"），目前页面是不支持全局滚动的，需要滚动的区域可使用scroll-view组件实现。

Skyline常见兼容问题可参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/migration/compatibility.html

2、自行修改模板

如果你想像之前的那样，使用原生导航栏，可以把app.json文件里面的"renderer": "skyline"（如有）和"navigationStyle": "custom" 删掉，保存重新编译下项目就可以了。

导航栏颜色

修改后，若发现原生导航栏变黑色了，这个是因为原生导航栏默认就是黑色的。

之前的模板会全局配置好导航栏背景颜色为#fff（白色），导航栏标题内容为Weixin。现在模板没有配置这两个属性了，导航栏就使用默认值#000000（黑色）了，同时也没有标题文字内容。

参考文档配置下就好了:

3、下载旧模板

如果你觉得第二步修改有点麻烦，你可以前往我的 GitHub下载我放上去的模板，导入到微信开发者工具使用就好了。

本文发表平台
上次更新:
贡献者: Hlxuan