2配置微信小程序

导读:本篇文章讲解 2配置微信小程序,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

小程序配置

1.app.js
是项目的入口js 模块

2.app.js中,App()是注册小程序并进行项目初始化,()里写小程序需要初始化的内容。
(1)onlaunch(){} 是小程序的生命周期之一,做初始化操作
下面这段代码必须加
App({
  onLaunch () {
  }
})

3.app.wxss
里面写的是全局的样式,等价于微信css文件(80%与css一样)

4.app.json(重点) -- 项目配置文件,至关重要

5.sitemap.json
小程序支不支持被索引,搜关键字搜出小程序
{
  "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [
      {
          // dallow 允许被索引
          "action": "allow", 
          // demo页面允许被索引
          "page": "pages/demo/demo"
      },
      {
          // disallow 不允许被索引
          "action": "disallow", 
          // 其他所有页面都不允许被索引
          "page": "*"
      }
  ]
}

6.demo.wxml -- html页面

7.demo.wxss -- demo的样式

8.demo.js -- demo的js逻辑

9.快速创建demo.wxml、demo.wxss、demo.js、demo.json的方法:
在demo文件夹下新建page文件 --> 取名demo --> 一次性生成以上四个文件

app.json

1.page字段
(1)在page文件夹下新建页面(demo等),在page字段会自动追加路径
(2)哪个路径在第一个,哪个路径就是小程序的首页
2.底部选项卡
输入tabbar回车就可以直接生成代码
让UI准备好两套图标(一套高亮、一套非高亮)
(1)navigationBarBackgroundColor 顶部背景色
(2)navigationBarTitleText 顶部标题
(3)selectedColor 底部选项卡选中时文字颜色
(4)backgroundColor 背景色
(5)iconPath 不选中时非高亮图标的路径
(6)selectedIconPath 选中时高亮图标的路径
(7)navigationBarTextStyle navbar导航栏字体颜色(只支持两种颜色:black white)
(8)下拉loading样式
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"

app.json
{
  "pages": [
    "pages/home/home",
    "pages/demo/demo",
    "pages/center/center",
    "pages/shopCar/shopCar"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    // 选中字体颜色
    "selectedColor": "#f60",
    // 背景颜色
    "backgroundColor": "#f54",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        // iconPath 不选中时非高亮图标的路径
        "iconPath": "images/home.png",
        // selectedIconPath 选中时高亮图标的路径
        "selectedIconPath": "images/home_light.png"
      },
      {
        "pagePath": "pages/demo/demo",
        "text": "测试",
        "iconPath": "images/camera.png",
        "selectedIconPath": "images/camera_light.png"
      },
      {
        "pagePath": "pages/shopCar/shopCar",
        "text": "购物车",
        "iconPath": "images/search.png",
        "selectedIconPath": "images/search_light.png"
      },
      {
        "pagePath": "pages/center/center",
        "text": "个人中心",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_light.png"
      }
    ]
  }
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/4564.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!