小程序设计

一、项目结构

（一）全局文件

• json是一种轻量级的数据格式，在小程序中是一种配置文件

app.js	小程序入口文件
app.json	小程序全局配置文件，配置全局属性或者页面路由信息
app.wxss	小程序全局样式结构
pages	以文件夹的形式存放每个页面的细节
project.config.json	小程序项目的配置文件，保存项目的一些配置信息和作者的个人信息
sitemap.json	配置小程序及其页面是否允许被微信索引，提高小程序在微信引擎中搜索到的频率。

A、pages文件

 每个文件夹代表一个页面，文件中内容包括：

myFirst.js	页面js文件（行为）
myFirst.json	页面配置文件
myFirst.wxml	页面结构文件（结构）
myFirst.wxss	页面样式文件（外表、装饰）

（二）创建新的页面与微信基础库

A、创建新的页面

• 直接在pages文件夹中创建自己想要创建的页面文件夹，创建完成后，会自动将js、json、wxml、wxss添加到文件夹中。
• 在app.js文件中pages配置项中添加想要创建页面的路径，如下：

"pages": [
    "pages/index/index",
    "pages/myFirst/myFirst"
  ],

B、微信基础库

微信基础库是指小程序的运行环境，给小程序提供了运行所需的各种API和工具，以及基础框架和运行逻辑。

在小程序开发过程中每个小程序都有自己所允许的基础库最低版本要求，开发者需要选择要兼容的基础库版本，从而确保小程序能够正常运行。

调整方式如下：

• 在开发者工具中点击详情
• 点击本地设置
• 点击测试调试库，选择要兼容的微信基础库

 （三）调试器和工具栏

A、调试器

在console中可以隐藏系统打印信息，只留下我们需要的信息：

B、工具栏

编译：类似于浏览器中刷新件，重新编译页面内容。

预览：点击后会出现一个二维码，手机扫描后可以预览页面。

真机调试：扫描二维码后，电脑端会出现一个调试器，实时显示手机的数据和操作状态变化。

清缓存：因为微信小程序开发工具缓存非常严重，这导致很容易出现未知错误，当出现未知错误时，可以通过该键清理缓存后从新编译。

二、app.json配置项解析

（一）pages、entryPagePath

 "pages": [
    "pages/index/index",
    "pages/myFirst/myFirst"
  ]

每个页面都会体现在该属性中，在添加页面时，不需要加文件后缀js。

"entryPagePath": "pages/myFirst/myFirst",

该属性用来指定进入小程序的默认页面。

当该属性不存在时，默认第一个页面是pages属性数组中第一个页面 。

（二）window（页面配置 | 微信开放文档)

先了解下小程序大致结构：

navigationBarBackgroundColor	设置导航栏背景色
navigationBarTextStyle	设置导航栏标题、状态栏颜色，仅支持blcak、white两种颜色
nabigationBarTitleText	导航栏标题文字内容
backgroundColor	窗口的背景色
backgroundTextStyle	设置下拉loading字样，仅支持dark、light两种样式。同时要配合enablePullDownRefresh使用。
enablePullDownRefresh	是否允许下拉刷新。

（三）tabBar(全局配置 | 微信开放文档)

底部导航栏配置：

第一层配置有：

• borderStyle:设置导航栏边线是否显示。
• backgroundColor:设置tab的背景色
• selectedColor:当tab被选中时文字的颜色
• list:导航栏对象，里面设置每个tab的图标样式等

第二层配置有：

• selectedIconPath:被选中时图标的路径
• pagePath:要路由到的页面路径
• iconPath:未选中状态的图标路径
• text:设置图标下文字内容
• color:设置文字默认颜色

下面是一个示例：

"tabBar": {
    "color":"#efefef",
    "backgroundColor": "#3452dd",
    "borderStyle":"black",
    "selectedColor": "#57BD6A",
    "list": [
      {
      "text":"追忆",
      "pagePath":"pages/myFirst/myFirst",
      "iconPath": "icon/1.png",,
      "selectedIconPath": "icon/2.png"
      },
      {
      "text":"寻梦",
      "pagePath":"pages/mySecond/mySecond",
      "iconPath": "icon/3.png",
      "selectedIconPath": "icon/4.png"
      }
    ]
  },

三、xxxx.json（具体页面的配置文件）

其中配置项和app.json中的window属性值一致，其效果会被运用到具体某个页面之中，如果全局效果和单个页面有冲突，则以单个页面为准。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F1943C",
  "enablePullDownRefresh": true,
  "navigationBarTitleText":"参透世界"
}

四、config文件详细介绍

（project.config.json、project.private.config.json）

在创建新的项目时，都会产生以上两个文件，用于保存开发者在开发时所做的个性化配置，例如和编译有关的配置。当重新安装微信开发者工具或换电脑时，只要载入同一个项目的代码包，开发者工具就会恢复到最初开发时的个性化配置。

为何要有两个文件记录？

project.config.json项目配置文件用来存放公共配置；project.private.config.json项目私有的配置，常用来配置个人的配置。

与最终编译结果有关的设置必须设置到project.config.json中。project.private.config.json应该被版本管理忽视，写到.gitignore中。

---

我们添加将编译结果转化为ES5：

发现project.config.json中两个配置项会自动发生变化！

---

当一些自己私人的设置发生改变时，就会更改project.private.config.json中的配置：

标注后：文件中多出配置项：

   "urlCheck": false

---

项全局配置文件(project.config.json)中增加使用样式拓展包sass

修改页面文件夹中样式文件名后缀为scss，并让字体颜色为绿色。(注意：配置是sass，是最新标准，文件名后缀为scss，是该标准下最新的写法。

text {
  color: green;
}

则最终效果为绿色文字！

五、sitemap.json详细介绍

该文件用来配置小程序或者小程序的页面是否允许被微信索引，提高小程序在微信内部被使用的概率。

（微信现在开放了小程序内部搜索，所以开发者可以设置那些页面允许被检索到，哪些页面不允许被检索到，为小程序的某个具体页面建立索引之后，在用户进行搜索后微信被微信爬到，页面会被展示到指定位置。）

---

注意文件中默认是：（所有页面都能索引，是最低优先级）

"rules": [{
    "action": "allow",
    "page": "*"
    }]

在app.json指定sitemap.json位置：

  "sitemapLocation": "sitemap.json",

---

action：disallow\allow 模式：不允许、允许

page: 指定页面

下面是不允许index页面被索引：

"rules": [{
    "action": "disallow",
    "page": "/pages/index/index"
    }]

六、页面结构与选择器、全局样式与局部样式

在小程序中不能使用HTML标签也没有DOM和BOM，css也仅仅支持部分选择器。小程序提供了WXML进行页面编写，同时提供了WXSS进行页面样式编写。

结构元素标签也不相同，WXML提供了一系列组件，包括但不限于view、text、image、navigator。

小程序因为因为存在于移动端，所以为了方便不同机型对尺寸进行把握，故新增了尺寸单位rpx。他可以根据不同屏幕的宽度进行自适应缩放。提供了全局样式和局部样式，另外需要注意的是，WXSS仅支持部分css选择器。

所有机型在小程序开发过程中，都默认为750rpx，所以只需要设置元素宽度为375rpx就可以让元素宽度占一半。

一般开发都用iphone6开发，因为6的屏幕宽度为375px，换算关系比较好计算。1rpx=0.5px。

#oneView{
  width:375rpx;
  background: pink;
  height: 400rpx;
  margin: 0 auto;
  text-align: center;
}

---

全局样式：定义在app.wxss中，作用于每个页面，例如：设置字号、背景色、宽高等全局样式。

局部样式：指在page.wxss中定义的样式规则，只作用在对应页面，并会覆盖app.wxss中相同的选择器。 

七、实例练习

（一）案例展示

• index.wxml

<!--index.wxml-->
<!-- 轮播图区域 -->
<view class="swiper">
<!-- autoplay 自动播放
circular 末图自动轮播
indicator-dots 轮播图提示点
interval 自动轮播间隔时间设置
indicator-color swiper容器背景色
indicator-active-color 提示点被激活的背景色 -->
<swiper autoplay circular indicator-dots interval="2000"
indicator-color="#efefef" indicator-active-color="#4fae70" >
<swiper-item>
<!-- src 指明图片来源地址
mode 图片裁剪方式
show-menu-by-longpress 长按图片显示菜单
  菜单内容：转发朋友、保存图片、扫描图中二维码、收藏
 lazy-load 图片懒加载（在图片呈现在屏幕区域前不加载图片）-->
<image src="../../icon/banner-1.png" alt="" show-menu-by-longpress lazy-load />
</swiper-item>
<swiper-item>
<image src="../../icon/banner-2.png" alt=""/>
</swiper-item>
<swiper-item>
<image src="../../icon/banner-3.png" alt=""/>
</swiper-item>
</swiper>
</view>
<!-- 公司信息 -->
<view class="info">
<text>同城配送</text>
<text>行业龙头</text>
<text>半小时送达</text>
<text>100%好评</text>
</view>
<!-- 商品导航 -->
<view class="good-nav">
<view>
<!-- open-type 跳转的方式
  navigate 跳转到非Tab页面，默认跳转方式
  redirect 跳转到非Tab页面，并关闭当前页面
  switchTab 跳转到Tab页面，并关闭所有其他非Tab页面，不能跳转到非Tab页面
  reLaunch 关闭所有页面，重新加载要到达的页面
  navigateBack 返回上一级或多级页面，使用指定层级 -->
<navigator url="/pages/myFirst/myFirst" open-type="reLaunch">
<image src="../../icon/meigui.png"></image>
<text>玫瑰</text>
</navigator>
</view>
<view>
<!-- 所有方式除switchTab外，都支持url形式传参 
接收方使用生命周期函数onLoad(option)接收参数-->
<navigator url="/pages/list/list?name=chenpei&age=22" open-type="redirect">
<image src="../../icon/meigui.png"></image>
<text>鲜花</text>
</navigator>
</view>
<view>
<navigator url="/pages/list/list" open-type="navigate">
<image src="../../icon/meigui.png"></image>
<text>蛋糕</text>
</navigator>
</view>
<view>
<navigator url="/pages/list/list" open-type="navigate">
<image src="../../icon/meigui.png"></image>
<text>礼物</text>
</navigator>
</view>
</view>
<!-- 推荐商品 -->
<view id="good-hot"></view>
<!-- 测试滚动窗口 -->
<scroll-view class="scroll-x" scroll-x>
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>

• index.scss

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing:border-box;//width几位内边距和内容区之和。
  // 每个区域都有一定外边距，更加美观！
  > view{
    margin: 16rpx;
    border-radius: 10rpx; //设置图片圆角
    overflow: hidden; //隐藏圆角截去内容
  }
}
//轮播图样式
.swiper{
   swiper{
     height: 360rpx;
     background-color: skyblue;
    swiper-item{
    //  指第一个元素（item）
      &:first-child{
       background-color: lightcoral;
     }
    //  指最后一个元素
     &:last-child{
      background-color: greenyellow;
     }
     image{
      //  使图片铺满swiper
       height:100%;
       width: 100%;
     }
    }
   }
}
//公司信息
.info{
  display: flex;
  flex-direction: row;
  justify-content: space-around;//各元素之间平均分配空白，两端为一半。
  font-size: 20rpx;
}
//商品导航
.good-nav{
  display: flex;
  flex-direction: row;
  justify-content: space-between; //结束项目边缘无空间
  padding: 16rpx;
  view{
    display: flex;
    navigator{
      display: flex;
    flex-direction: column;
    align-items: center; //图片和文字对齐
    image{
      width: 80rpx;
      height: 80rpx;
    }
    text{
      font-size: 20rpx;
    }
  }
  }
}
//滚动窗口
.scroll-x{
  height: 80rpx;
  width: 718rpx;
  background-color: greenyellow;
  margin:16rpx;//为了更加美观
  white-space: nowrap; //不允许自动换行，使item溢出元素
  view{
    display:inline-block;//展示方式设置为行内块元素
    width:400rpx;
    height: 100%;
    &:first-child{
      background-color: orange;
    }
    &:last-child{
      background-color: red;
    }
  }

  
}

（二）相关知识

A、swiper和swiper-item

swiper和swiper-item组件

swiper	滑块视图容器，其中只能放置swiper-item组件。
swiper-item	只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的每一项。
&:元素名	中&代表父元素或自身元素如下

B、image组件

组件解释和属性

image	微信专门为图片设计的组件
src	图片资源的地址\路径
mode	图片剪裁，缩放的模式
show-menu-by-longpress	长按图片显示菜单
lazy-load	图片懒加载
注意	image默认具有宽度和高度， 宽度：320px 高度：240px 即使没有指定资源地址，依然占用默认宽高。

C、navigator（导航组件）

常用属性

url	指定要跳转到的路径，注意这里路径比page配置项中路径多了开头的“\”
open-type	指定跳转的方式
传参形式	在路径后使用？开始传参，使用&连接不同参数
接收参数	在目的路径页面的js文件中，使用生命周期函数 onLoad(option)接收参数。 注意：当open-type为switchTab时不接受传参。

open-type的值

navigate	保留当前页面，跳转到应用内非Tab页面，不能跳转到Tab页面。
redirect	关闭当前页面，跳转到应用内非Tab页面，但不能跳转到Tab页面
switchTab	跳转到指定Tab页面，关闭其他非Tab页面
reLaunch	关闭所有页面，再加载指定页面。
navigateBack	关闭当前页面，并返回上一页或多级页面， 多级页面使用：delta属性
解释	Tab页面就是使用导航栏到达的页面。

D、scroll-view

在微信小程序中如果想实现内容滚动，需要使用scroll-view组件。该组件是可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。

属性

scroll-x	允许横向滚动
scroll-y	允许纵向滚动

E、text

需要渲染文本时，需要使用text组件，常用属性有2个：

text

user-select

文本是否可以通过长按来选择

注意：text组件中只能嵌套text组件，不能嵌套其他组件！

如果想要表示连续空格的文本要用到select-text组件：

安装：

npm install @miniprogram-component-plus/select-text

在页面page.json中使用组件：

{
    "usingComponents": {
        "mp-select-text": "@miniprogram-component-plus/select-text"
    }
}

常用属性：

常用属性

show-copy-btn	长按显示复制按钮
space	显示连续空格
value	必填项，文本内容