首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >小程序(2)- 基础样例

小程序(2)- 基础样例

作者头像
小尘哥
发布2018-08-15 10:53:38
发布2018-08-15 10:53:38
7470
举报
文章被收录于专栏:小尘哥的专栏小尘哥的专栏

01

app.json

基本这些配置就可以满足正常的开发,其他有一些比如request请求超时之类的,都采用默认即可

代码语言:javascript
复制
{
  "pages":[
    "pages/index/index", //所有的页面都需要定义在该模块,否则无法显示
    "pages/logs/logs"
  ],
  "window":{  //全局的一些配置
    "backgroundTextStyle":"white",
    "navigationBarBackgroundColor": "#fff",//顶部导航栏颜色
    "navigationBarTitleText": "陌与尘埃",//顶部文字
    "navigationBarTextStyle":"black"//文字样式,支持white|black
  },
  "tabBar": {//tab选项卡
    "list": [
      {
        "iconPath": "imgs/icon/icon-home.png",//未选中状态图片地址
        "selectedIconPath": "imgs/icon/icon-home-selected.png",选中时图片地址
        "pagePath": "pages/index/index",//页面
        "text": "首页"//文字显示
      },
      {
        "iconPath": "imgs/icon/icon-usercenter.png",
        "selectedIconPath": "imgs/icon/icon-usercenter-selected.png",
        "pagePath": "pages/logs/logs",
        "text": "我的"
      }
    ],
    "color": "#000",//文字默认颜色
    "selectedColor": "#fff",//选中时文字颜色
    "backgroundColor": "#e04443",//默认tab背景
    "borderStyle": "white",
    "position": "bottom" //位置,支持bottom|top
  }
}

2

其他json

每个对应的wxml有自己对应的json,同样可以做如上配置,会覆盖全局的app.json文件配置

3

wxss

上一篇说过我引用了一个外部的样式表(wa-ui),引用方法如下:

@import 'wa-ui.wxss';

只需在全局app.wxss引入即可,其他页面都可以使用其样式。

4

JS

小程序的js不同于普通的js,不能使用window、document等对象,因此也不能使用jquery等框架。小程序的js写法有点类似VUE,如下:

5

Demo

一个简单的配置效果如下图:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-09-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 陌与尘埃 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档