Day1微信小程序

项目目录结构及其构成

pages文件夹

微信小程序的页面都存放在pages文件夹下，每个页面对应一个文件夹，每个页面的文件夹由四个基本文件组成:

页面四个基本文件
.js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
.json 文件（当前页面的配置文件，配置窗口的外观、表现等）
.wxml 文件（页面的模板结构文件）
.wxss 文件（当前页面的样式表文件）

例如index页面由上述四种基本文件组成

json配置文件

小程序项目中 : 通过不同 的 json 配置文件,可以对小程序项目进行不同级别的配置。
小程序项目中有4 种 json 配置文件,分别是 :
① 项目根目录中的 app.json 配置文件
② 项目根目录中的 project.config.json 配置文件
③ 项目根目录中的 sitemap.json 配置文件
④每个页面文件夹中的 .json 配置文件

app.json 配置文件

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。

// 简单了解下这4个配置项的作用 :
// pages : 用来记录当前小程序所有页面的路径
// window : 全局定义小程序所有页面的背景色、文字颜色等
// style : 全局定义小程序组件所使用的样式版本
// sitemapLocation : 用来指明 sitemap.json 的位置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

project.config.json 文件

// project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如 :
//setting 中保存了编译相关的配置
//projectname 中保存的是项目名称
//appid 中保存的是小程序的账号 ID

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "wx5f3029ce323f1f01",
  "projectname": "miniprogram-92",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

sitemap.json 文件

微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许 微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页 面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",//是否允许被索引，当等于disallow时不被允许
  "page": "*" //表示小程序中所有页面都允许被微信使用爬虫索引
  }]
}

页面的 json 配置文件

小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖 app.json 的 window 中相同的配置项。例如：在app.json中我们将全局属性 “navigationBarBackgroundColor”: “#fff”,属性设置为白色，在index.json中设置为 “navigationBarBackgroundColor”: "#00FF00"设置为绿色，那么页面属性将覆盖全局属性

初识小程序页面

新建小程序页面

只需要在 app.json -> pages 中新增页面的存放路径，（记得ctrl+s保存哦）,小程序开发者工具即可帮我们自动创建对应的页面文件,例如：

修改项目首页

只需要调整 app.json pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页 面,当作项目首页进行渲染,如图所示 :

什么是 WXML

WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作 用类似于网页开发中的 HTML。

WXML 和 HTML 的区别

① 标签名称不同
HTML (div, span, img, a)
WXML(view, text, image, navigator)
② 属性节点不同
<a href=“#”>超链接
<navigator url=“/pages/home/home”></navigator>
③ 提供了类似于 Vue 中的模板语法
数据绑定
列表渲染
条件渲染

什么是 WXSS

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的 CSS。

WXSS 和 CSS 的区别

① 新增了 rpx 尺寸单位
● CSS 中需要手动进行像素单位换算,例如 rem
● WXSS 在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
● 项目根目录中的 app.wxss 会作用于所有小程序页面
●局部页面的 .wxss 样式仅对当前页面生效 WXSS
② 仅支持部分
●CSS 选择器 class 和 #id
● element
●并集选择器、后代选择器
●::after和::before 等伪类选择器

小程序中的 .js 文件

一个项目仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如 : 响应用户的 点击、获取用户的位置等等。

小程序中 .js 文件的分类

小程序中的JS 文件分为三大类,分别是 : app.js 是整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序 页面的 .js 文件 是页面的入口文件,通过调用 Page() 函数来创建并运行页面 ③ 普通的js 文件 ●是普通的功能模块文件,用来封装公共的函数或属性供页面使用

小程序宿主环境

包含的内容

• 通信模型
• 运行机制
• 组件
• API

小程序的宿主环境 - 通信模型

通信的主体
小程序中通信的主体是渲染层和逻辑层,其中 :
① WXML模板和 WXSS 样式工作在渲染层
② JS脚本工作在逻辑层

小程序的通信模型

小程序中的通信模型分为两部分 :
①渲染层和逻辑层之间的通信
  ●由微信客户端进行转发
②逻辑层和第三方服务器之间的通信
  ●由微信客户端进行转发

小程序的宿主环境 - 运行机制

小程序启动的过程：
① 把小程序的代码包下载到本地
②解析 app.json 全局配置文件
③ 执行 app.js 小程序入口文件,调用 App() 创建小程序实例 渲染小程序首页
⑤ 小程序启动完成
页面渲染的过程：
① 加载解析页面的 .json 配置文件
② 加载页面的 .wxml 模板和.wxss 样式
③ 执行页面的 .js 文件,调用 Page() 创建页面实例
④ 页面渲染完成

小程序的宿主环境 - 组件

小程序中组件的分类

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组 件分为了9大类,分别是 :
① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ map 地图组件
⑦ canvas 画布组件
⑧开放能力
⑨ 无障碍访问

常用的视图容器类组件

view
● 普通视图区域
● 类似于 HTML 中的 div,是一个块级元素
●常用来实现页面的布局效果
scroll-view
●可滚动的视图区域
●常用来实现滚动列表效果
swiper和swiper-item
● 轮播图容器组件 和 轮播图 item 组件

小程序的宿主环境 - 组件

view 组件的基本使用

练习将三个view组件横向排列
pages/list/list.wxml

<!--pages/list/list.wxml-->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

pages/list/list.wxss

/* pages/list/list.wxss */
/*后代选择器*/
.container1 view{
  width : 100px;
  height : 100px;
  text-align: center;/*横向剧中*/
  line-height: 100px;/*纵向剧中*/
}
/*C3伪类选择器*/
.container1 view:nth-child(1) { 
  background-color : lightgreen; 
}
.container1 view:nth-child(2) {
  background-color : lightskyblue;
 }
 .container1 view:nth-child(3){
   background-color : lightpink;
  } 

.container1{/*设置父级元素属性*/
  display: flex;/*设置横向排列*/
  justify-content : space-around;/*横向上分散对齐*/
}

运行效果图

scroll-view 组件的基本使用

练习纵向滑动
pages/list/list.wxml

<!--pages/list/list.wxml-->
<!-- scroll-y 属性 : 允许纵向滚动-->
<!-- scroll-x 属性 : 允许横向滚动-->
<!-- 注意 : 使用竖向滚动时,必须给 scroll-view 一个固定高度-->
<scroll-view class="container_y" scroll-y="true">
  <view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </view>
</scroll-view>

pages/list/list.wxss

/* pages/list/list.wxss */
/*后代选择器*/
.container1 view{
  width : 100px;
  height : 100px;
  text-align: center;/*横向剧中*/
  line-height: 100px;/*纵向剧中*/
}
/*C3伪类选择器*/
.container1 view:nth-child(1) { 
  background-color : lightgreen; 
}
.container1 view:nth-child(2) {
  background-color : lightskyblue;
 }
 .container1 view:nth-child(3){
   background-color : lightpink;
  } 

.container_y{/*设置父级元素属性*/
  border : 1px solid red; 
    /* 给scroll-view固定宽度高度 */
  width : 100px; 
  height : 120px;
}

运行效果：

练习横向滑动
pages/list/list.wxml

<scroll-view class="container_x" scroll-x="true">
  <view class="container2">
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </view>
</scroll-view>

pages/list/list.wxss

/*后代选择器*/
.container2 view{
  width : 100px;
  height : 100px;
  text-align: center;/*横向剧中*/
  line-height: 100px;/*纵向剧中*/
}
/*C3伪类选择器*/
.container2 view:nth-child(1) { 
  background-color : lightgreen; 
}
.container2 view:nth-child(2) {
  background-color : lightskyblue;
 }
.container2 view:nth-child(3){
   background-color : lightpink;
} 

.container2{/*设置父级元素属性*/
  background-color: rgb(94, 29, 114);
  width: 300px;
  height: 100px;
  display: flex;/*设置横向排列*/
}
.container_x{
  border:1px solid rgb(236, 154, 60) ;
    /* 给scroll-view固定宽度高度 */
  width: 120px;
  height: 100px;  
}

运行效果：

swiper 和 swiper-item 组件的基本使用

实现如图的轮播图效果 :
pages/list/list.wxml

<!--pages/list/list.wxml-->
<!-- 轮播图的结构 -->
<swiper class="swiper-container" indicator-dots 	indicator-color="pink" 	indicator-active-color="blue" 	autoplay 	interval="2000" circular> 
<!-- 第一个轮播图 -->
  <swiper-item> 
   <view class="item">A</view> 
  </swiper-item> 
<!-- 第二个轮播图 -->
  <swiper-item> 
    <view class="item">B</view>
  </swiper-item> 
<!-- 第三个轮播图 --> 
  <swiper-item>
    <view class="item">C</view> 
  </swiper-item> 
</swiper>

pages/list/list.wxss

/* pages/list/list.wxss */
/* 轮播图的样式 */
.swiper-container {  
  height : 150px; 

}
.item {
  height : 100%; 
  line-height : 150px; 
  text-align : center;
}
/*C3伪类选择器*/
swiper-item:nth-child(1) .item { 
  background-color : lightgreen; 
} 
swiper-item:nth-child(2) .item{
 background-color : lightskyblue; 
} 
swiper-item:nth-child(3) .item{
  background-color : lightpink;
}

效果图：

swiper属性说明

属性说明见官网：传送门

常用的基础内容组件

① text
●文本组件
●类似于 HTML 中的 span 标签,是一个行内元素
② rich-text
●富文本组件
●支持把 HTML 字符串渲染为 WXML 结构

text 组件的基本使用

通过 text 组件的 selectable 属性,实现长按选中文本内容的效果 :
在小程序里面只有text组件支持长按选中

<view>
长按选中效果
<text selectable>100866666666</text>
</view>

rich-text组件的nodes属性将HTML字符串渲染成WXML结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

效果图

其它常用组件

① 按钮组件
●功能比 HTML 中的 button 按钮丰富
● 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
② image
●图片组件
● image 组件默认宽度约 300px、高度约 240px
③ navigator
●页面导航组件 类似于 HTML 中的a链接

button 按钮的基本使用

pages/list/list.wxml

<!--pages/list/list.wxml-->
<!-- 按钮组件的基本使用 -->
<view>~~~~~~~~~通过type指定按钮类型~~~~~~~~</view>
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>~~~~~~~~~size="mini"小尺寸按钮~~~~~~~~</view>
<button size="mini">普通按钮</button>
<button type="primary"  size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>~~~~~~~~~plain镂空按钮~~~~~~~~</view>
<button size="mini" plain>普通按钮</button>
<button type="primary"  size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

效果图：

image 组件的基本使用

image 组件的 mode 属性 image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下 :

<!--pages/list/list.wxml-->
<!-- image图片组件 -->
<image></image>
<image src="/images/1.jpg" mode="heightFix"></image>

/* pages/list/list.wxss */
image{
  border: 1px solid red;
}

运行效果：