有参考各路大神的编写，主要参考B站@黑马程序员，这里只是做一个整理

题目部分 （全局配置）

alt

其中红框和黄框为window界面，navigationBar为红框，background为黄框。 alt

在app.json中。以京西商城的app.json为例。一定要记得在每个组件的下面加上逗号

{
//用来标注小程序都有哪些界面 格式为 文件夹/文件夹/文件.wxml
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine",
    "pages/cate/cate",
    "pages/shopcar/shopcar",
    "pages/search/search",
    "pages/details/details"
  ],
  
  //上面的导航页
  "window": {
    "backgroundTextStyle": "dark",//下拉刷新的颜色
    "navigationBarBackgroundColor": "#fff",//导航栏颜色
    "navigationBarTitleText": "京西商城",//title内容
    "navigationBarTextStyle": "black",//导航字体的颜色
    "enablePullDownRefresh": true,//下拉三个字点是否存在
    "backgroundColor": "#f3f3f3"//下拉三个点的颜色
  },
  //底边栏，最少两个，最多五个
  "tabBar": {
    "position": "bottom",//位置在下面，
    "borderStyle": "white",//底边颜色
    "color": "c0c0c0",//未选中颜色
    "selectedColor": "ff3456",//选中颜色
    //底边栏具体内容
    "list": [
      {
        "text": "首页",//名称
        "pagePath": "pages/index/index",//跳转页
        "iconPath": "/assert/tabs/icon-index-b.png",//icon图标，在顶部时不显示
        "selectedIconPath": "/assert/tabs/icon-index-r.png"//选中后的图标
      },
      {
        "text": "分类",
        "pagePath": "pages/cate/cate",
        "iconPath": "/assert/tabs/icon-cate-off.png",
        "selectedIconPath": "/assert/tabs/icon-cate-on.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/shopcar/shopcar",
        "iconPath": "/assert/tabs/icon-cart-b.png",
        "selectedIconPath": "/assert/tabs/icon-cart-r.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/mine/mine",
        "iconPath": "/assert/tabs/icon-center-b.png",
        "selectedIconPath": "/assert/tabs/icon-center-r.png"
      }
    ]
  },
  "style": "v2",//控制样式为最新样式为v2
  "sitemapLocation": "sitemap.json"
}

设置上拉触底的距离

默认值50px,就是说如过界面到下面不足50px自动加载下面的界面。在app.json中修改window，不用写单位。

 "window": {
    "onReachBottomDistance": 20
  },

需要注意的是，如果需要在别的界面也进行单独的界面设计，可以在别的页面的json部分进行window的设置。以达到每个界面不一样的效果。

组件部分

1. view：div

例子是将三个盒子组装成一行三个的样式。

wxml界面：

<view class="c1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

wss界面：

.c1 view{
  width:33%;//百分比占位，无视手机显示大小
  height: 100px;//盒子高
  text-align: center;//居中显示
  line-height: 100px;//行高
  padding: 10px;//内边距
  margin: 10px;//外边距
  border：1px solid red;//边框线 宽度 实线 红色（本条图中未实现）
}
.c1 view:nth-child(1){ //表示c1的view的第一个，也可以起名字，只是标记的一种方法
  background-color: lightgreen;
}
.c1{
  display: flex;//横向布局（默认一个盒子一行）
  justify-content: space-around;
}

显示界面

alt

2. scroll-view:可滚动的视图区域，滚动列表

alt 注意：纵向滚动要有固定高度，横向滚动要有固定宽度

3. swiper和swiper-item ：轮播图

alt

4.text组件：行内组件 rich-text:富文本

长按选中文字

<view class="c2">
<text selectable>wyshesszaishatanshangrewen</text>
</view>//selectable用来长按选中文字

在rich-text中使用nodes可以渲染成html格式（目前还不知道有什么用，，，）

<view>
<rich-text nodes="<h1 style='color:red;'>正处于于</h1>"></rich-text>
</view>

效果： alt

5.button：按钮

使用open-type可以调用各种功能（如客服、转发获取用户授权。获取用户信息等） 按钮显示设置：

<button>默认颜色按钮</button>
<button type="primary" size="mini">小主色调按钮</button>
<button type="warn" plain>镂空警告按钮</button>

成果展示： alt

6.image 图片

在标签里使用进行导入图片

mode属性如下图所示：二三会固定image的大小，四五会根据图片大小调整image大小

alt

7.navigator 导航栏