首页 › 教程频道› 小程序开发 › 查看内容

少年练剑：小程序学习笔记：HelloWorld，json配置项，视图容器

作者：模板之家 2018-1-27 10:52 2850人关注

本文仅供参考，本文写于上个开发者版本时期一：HelloWorld 准备工作开发工具安装好后，新建一个项目，记得取消勾选创建quick start项目从Hello，World！开始了解下目录结构小程序=

本文仅供参考，本文写于上个开发者版本时期

一：HelloWorld

准备工作

开发工具安装好后，新建一个项目，记得取消勾选“创建quick start项目”

从Hello，World！开始

了解下目录结构

小程序 = app程序主体 + 页面pages

app程序主体文件结构：

app.js（必填）
小程序的逻辑。通过app()函数注册一个小程序，并指定生命周期函数。
app.json（必填）
小程序的公共设置。页面路径、窗口表现、tabBar、网络超时等配置项。
app.wxss
小程序公共样式表。可以理解成common.css，不是必填，每个页面可以有自己的样式表，也可以引用公共样式表。

页面page文件结构：

js文件（必填）
页面逻辑。在这里注册页面，初始化数据、生命周期函数、事件处理函数等。
wxml文件（必填）
页面结构，可以理解成html。
wxss
页面样式表，理解成单个页面的css文件，可以为页面单独设置样式。
json
页面配置。只能配置window相关配置项，改变窗体表现。

创建app.js

通过开发工具的提示，使用App函数，快速生成一个小程序。

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

创建app.json

一个app.json文件的配置项包含：

pages（必填）---页面路径管理
一个数组，每一项是字符串“路径+文件名”，指定小程序由哪些页面组成，数组第一项作为初始页面。文件名不需要后缀。
```
"pages":[
 "pages/index/index"
 "pages/logs/logs"
]
```
后面这几个不是必备，等以后用到的时候再展开
window---设置窗口表现
tabBar---设置tabBar
networkTimeout---设置网络请求超时时间
debug

所以我们的app.json代码如下

{
    "pages":[
        "pages/index/index"
    ]
}

创建index页面

为了便于管理，一般页面会放在pages文件夹下，一个页面一个子文件夹，里面包含js文件、wxml文件、wxss文件、json文件（4个文件名必须一致）。

index.js

用Page函数快速生成页面实例

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
index.wxml

把view换成div是不是很容易理解

<view id="hello-world">
    Hello,World!
<view>
index.wxss

样式表的使用基本跟css一样

#hello-world{
    text-align: center;
    margin-top: 75%;
}

编译运行

二：json配置项

准备工作

14-46-45.jpg

创建my页面（基础工作不在复述，参照上一篇）；
创建图片文件夹images，及子目录tabBar；
前往http://iconfont.cn，下载任意两个icon及对应的高亮颜色版，60px，保存到tabBar目录下；

改变下导航栏

在app.json中添加window相关配置项：
注意：json中是不能加注释的，这里注释只是为了说明，请自行删除

"window":{
        "navigationBarTitleText":"小程序学习笔记",   //导航栏标题
        "navigationBarTextStyle":"black",  //标题颜色，默认black，可选white
        "navigationBarBackgroundColor":"#eee",  //导航栏背景色，默认#000

        //下面影响的是下拉刷新的部分，还没研究出怎么实现
        "backroundColor":"#555",    //窗口背景色，默认#fff
        "backroundTextStyle":"dark",   //下拉字体样式，默认dark，可选light
        "enablePullDownRefresh": true  //是否支持下拉刷新，默认false
    }

写个tabBar吧

tabBar最少2个，最多5个tab
在app.json中添加tabBar配置项：

"tabBar":{
        "color":"#999",  //字体颜色，必填
        "selectedColor":"#56abe4", //选中状态字体颜色，必填
        "backroundColor":"#fff",  //背景色，必填
        "borderStyle":"white", //上边框颜色，非必填，默认black，可选white
        //list数组，为每一个tab的配置，必填。tab排序与数组排序一致       
        "list":[
            {
                "pagePath":"pages/index/index",   //页面路径
                "iconPath":"images/tabBar/article.png",  //icon路径
                "selectedIconPath":"images/tabBar/articleHL.png",  //选中状态icon路径
                "text":"笔记"  //文字
            },
            {
                "pagePath":"pages/my/my",
                "iconPath":"images/tabBar/my.png",
                "selectedIconPath":"images/tabBar/myHL.png",
                "text":"我的"
            }
        ]
    }

page的json

page也是支持json文件的，不过只能配置window相关的，因此无需写window这个键
例如，在my.json添加下面代码，改变了标题栏文本为“我的”，而不是“小程序学习笔记”。

{
    "navigationBarTitleText":"我的"
}

json配置项里还剩下networkTimeOut 和 debug，以后用到再说吧

三：视图容器

准备工作

新建view页面（4个文件都包含，并修改导航栏标题文字为“视图容器”）；
新建app.wxss公共样式表；
修改tabBar“我的”路径指向view页面；

创建公共样式

因为后面都是学习各个组件的使用，页面结构基本保持一致，一个view包裹着标题+组件内容。因此这里创建公共样式，代码如下：

.section{
    margin: 20px 0; 
}
.section-title{
    margin-bottom: 10px;
    font-weight: bold;
}

view视图容器的两种排列布局

行布局row

<!--横向排列view-->
<view class="section">
    <view class="section-title">flex-direction:row</view>
     /*通过flex-direction：row 样式控制*/
    <view class="flex-wrp" style="flex-direction:row;">
        <view class="flex-item box-red">1</view>
        <view class="flex-item box-blue">2</view>
        <view class="flex-item box-green">3</view>

    </view>
</view>

列布局column

<!--竖向排列view-->
<view class="section">
    <view class="section-title">flex-direction:column</view>
    /*改变row为column*/
    <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item box-red">1</view>
        <view class="flex-item box-blue">2</view>
        <view class="flex-item box-green">3</view>
    </view>
</view>

样式

box-red、box-blue、box-green的背景颜色大家自己补充一下，这里就不在写出来了。

.flex-item{
    width: 100px;
    height: 100px;
    color: #fff;
}
.flex-wrp{
    display: flex;  /*不要忘记*/
}

动手开始做才发现自己的css水平简直不过关，布局部分好多都不知道，如果有类似情况的同学，推荐大家一个网站http://zh.learnlayout.com/，共勉吧！我先慢慢磨完小程序。

支持滚动scroll-view

竖向滚动

注意：为了让代码更加简洁，往后文章里我去掉了标题和外包的view

<!--需要给定容器一个固定高度-->
<scroll-view scroll-y="true"  style="height:200px;">
        <view id="red" class="scroll-view-item box-red"></view>
        <view id="blue" class="scroll-view-item box-blue"></view>
        <view id="green" class="scroll-view-item box-green"></view>        
</scroll-view>

样式

.scroll-view-item{
    width: 100%;
    height: 200px;
}

横向滚动

<!--记得加white-space:nowrap; 规定不换行-->
<scroll-view scroll-x="true"   style="white-space:nowrap;">
        <view id="red-H" class="scroll-view-item-H box-red"></view>
        <view id="blue-H" class="scroll-view-item-H box-blue"></view>
        <view id="green-H" class="scroll-view-item-H box-green"></view>        
    </scroll-view>

样式

.scroll-view-item-H{
    display: inline-block;  /*不要忘记*/
    width: 100%;
    height: 200px;
}

其他属性

scroll-top="100" ----> 设置竖向滚动条位置
scroll-left="100" ----> 设置横向滚动条位置
scroll-into-view="blue" ----> 值为某子元素id，则默认滚动到该元素顶部
另外，还做了些有趣的尝试

scroll-x 和 scroll-y 同时为true，支持双向滚动（需要内容宽高都超过scroll容器）；
scroll-top 和 scroll-into-view 同时存在时，scroll-top无效，不管数值多少；
scroll-into-view 对横向滚动无效（不知道是不是我方法的问题）

其他事件属性暂时不展开，请自行查阅官方文档

轮播swiper

<swiper indicator-dots="true" autoplay="true" current="1" interval="4000" duration="1000" vertical="true" style="height:200px;">
        <swiper-item class="box-red"></swiper-item>
        <swiper-item class="box-blue"></swiper-item>
        <swiper-item class="box-green"></swiper-item>
    </swiper>

swiper-item宽高固定为swiper的100%，相当于自动填充

属性说明

indicator-dots="true" ----> 是否显示面板指示点（默认值false）
autoplay="true" ----> 是否自动切换（默认false）
current="1" ----> 起始位置（默认0，即第一张）
interval="4000" ----> 自动切换时间间隔（默认5000，单位毫秒，即5秒）
duration="1000" ----> 滑动动画时常（默认1000，单位毫秒）
vertical="true" ----> 竖向轮播（默认false）

遗留问题

发现默认值是false的属性，如果我们写出来，例如vertical="false"，实际仍然按照true执行，结果是轮播竖向显示。其他的属性我也尝试了，包括上面的scroll-y="false", 结果仍然支持竖向滚动，大家可以试一下。
但是看微信官方demo里的代码是可以的，通过事件改变属性，false就是false，实在不清楚，先记在这里吧。

---------已解决-----------
学习下一节基础内容时，得到启发，google一下，解决了问题。
直接写在组件属性里，如vertical="false"，实际上false被当成了一个字符串来处理，非布尔值。而字符串不为空的情况下，布尔值=true，所以发生了上面遇到的情况。
附：javascript表达式为假的情况，除此之外其他都为真
false、0、字符串的空''、NaN、undefined、null

因此vertical="false"我们可以这样实现：

vertical=""
通过js文件data初始化数据，vertical：false 或者任何一个为假的表达式
不写，如果默认值就是false的话（推荐）

另外也发现，对于这些默认值false的属性，如果需要改成true，直接加上去就可以，例如这样：

<!--直接写scroll-y，而不是scroll-y="true"-->
<scroll-view scroll-y style="height:200px;">
        <view id="red" class="scroll-view-item box-red"></view>
        <view id="blue" class="scroll-view-item box-blue"></view>
        <view id="green" class="scroll-view-item box-green"></view>        
</scroll-view>

至于为什么，暂时还没明白。

总结一下：对于默认值false的属性，如果想要改成true，直接加上去即可，如果不需要，去掉就行