前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序(2)- 基础样例

小程序(2)- 基础样例

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

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 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档