微信小程序原生常用语法 1

微信小程序的教程

学习目标

如何创建小程序项目

小程序项目的基本组成结构

小程序页面由几部分组成

小程序中常见的组件如何使用

小程序如何进行协同开发与发布

小程序的宿主环境

小程序标准开发模式

1.申请小程序开发账号

地址：https://mp.weixin.qq.com/

2.安装小程序开发者工具

3.创建和配置小程序项目

小程序项目的基本组成构建

pages 文件夹 用来存放所有小程序的页面 *主要学习

utils 文件夹 用来存放工具性质的模块

app.js 文件 小程序项目的入口文件 *主要学习

app.json文件 小程序项目的全局配置文件 *主要学习

app.wxss文件 小程序项目的全局样式文件

project.config.json文件 项目配置文件

project.prevate.config.json文件

sitemap.json文件 配置小程序及其页面是否允许被微信索引

.eslintrc.js文件 eslint 检测js语法的文件

小程序页面的组成部分

都存放在 pages 目录中，以单独的文件夹存在

每个页面由 4个基本文件组成，它们分别是：

①.js文件 （页面的脚本文件，存放页面的数据、事件处理函数等）

②.json文件 (当前页面的配置文件，配置窗口的外观、表现等)

JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不例外：通过不同的 .json配置文件，可以对小程序项目进行不同级别的配置。

③.wxml文件 （页面的模板结构文件）

④.wxss文件 （当前页面的样式表文件）

app.json 文件

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

app.json配置内容如下：

{
  // 用来记录当前小程序所有页面的路径
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 全局定义小程序所有页面的背景色、文字颜色等
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  // 全局定义小程序组件所有使用的样式版本
  "style": "v2",
  // 用来指明 sitemap.json 的位置
  "sitemapLocation": "sitemap.json"
}

project.config.json 文件

project.config.json 是 项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

setting 中保存了编译相关的配置

projectname 中保存的是项目名称

appid 中保存的是小程序的账号ID

{
    "description": "项目配置文件",
    "packOptions": {
        "ignore": [],
        "include": []
    },
    // 编译相关的配置
    "setting": {
        // 关闭 sitemap 的索引提示 添加这个代码 "checkSiteMap":false
        "checkSiteMap":false,
        "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",
    // 小程序的账号ID
    "appid": "wx0684b193e107d6ad",
    // 项目名称
    "projectname": "miniprogram-92",
    "condition": {},
    "editorSetting": {
        "tabIndent": "insertSpaces",
        "tabSize": 4
    }
}

sitemap.json 文件

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面会将可能展示在搜索结果中。

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  // 如果不想被微信小程序索引 就把allow 改为 disallow
  "action": "allow",
  // 所有的页面都可以通过 allow 被微信索引
  "page": "*"
  }]
}

小程序页面中的.json 配置文件

小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项

{
  "navigationBarBackgroundColor": "#055511",  
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {}
}

新建小程序页面

只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的文件

修改项目首页

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

WXML

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

与 HTML 的区别

① 标签名称不同

​ HTML 常用标签( div, span, img, a )

​ WXML 常用标签( view, text, image, navigator ) 对应上面的HTML标签

② 属性节点不同

<!-- html中的a 标签 属性href -->
<a href="#" > 超链接 </a>

<!-- WXML中的 navigator标签 属性url 对应 a 标签的href -->
<navigator url="/pages/home/home"></navigator>

③ 提供了类似于 Vue 中的模板语法

1.数据绑定

2.列表渲染

3.条件渲染

WXSS

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

与 css 的区别

① 新增了 rpx 尺寸单位

​ CSS 中需要手动进行像素单位换算，例如 rem

​ WXSS 在底层支持新的尺寸单位 rpx, 在不同大小的屏幕上小程序会自动进行换算

② 提供了全局的样式和局部样式

​ 项目根目录中的 app.wxss 会作用于所有小程序页面

​ 局部页面的 .wxss 样式仅对当前页面生效

③ WXSS 仅支持部分 CSS 选择器

​ .class 和 #id

​ element

​ 并集选择器、后代选择器

​ ::after 和 ::before 等伪类选择器

小程序中的 .js文件

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

小程序中的JS文件分为三大类，分别是：

① app.js

​ 是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

② 页面的 .js 文件

​ 是页面的入口文件，通过调用 Page() 函数来创建并运行页面

③ 普通的 .js 文件

​ 是普通的功能模块文件，用来封装公共的函数或属性供页面使用

小程序的宿主环境

宿主环境（host environment）指的是程序运行所必须的依赖环境。

Android 系统 和 iOS系统 是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

小程序宿主环境包含的内容

① 通信模型

② 运行机制

③ 组件

④ 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组件 的基本使用

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

/* pages/list/list.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color: lightskyblue;
}
.container1 view:nth-child(2){
    background-color: lightgreen;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}
.container1 {
    display: flex;
    justify-content: space-around;
}

scroll-view 组件的基本使用

scroll-view 纵向滚动 需要在 标签中设置 scroll-y 属性 还需要设置固定高度

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

/* pages/list/list.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color: lightskyblue;
}
.container1 view:nth-child(2){
    background-color: lightgreen;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}
.container1 {
    border: 1px solid black;
    width: 100px;
    height: 120px;
}

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

swiper标签中的 indicator属性 是添加轮播图下的小圆点

swiper标签的常用属性

indicator-dots boolean类型 默认值：false 是否显示面板指示点

indicator-color color类型 默认值：rgba(0,0,0,.3) 指示点颜色

indicator-active-color color类型 默认值：#000000 当前选中的指示点颜色

autoplay boolean类型 默认值：false 是否自动切换

interval number类型 默认值：5000 自动切换时间间隔

circular boolean类型 默认值：false 是否采用衔接滑动

<!--轮播图-->
<swiper class="swiper-container" indicator-dots>
    <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 */
.swiper-container {
    /* 轮播图容器的高度 */
    height: 150px;
}
.item {
    height: 100px;
    line-height: 150px;
    text-align: center;
}
swiper-item:nth-child(1){
    background-color: lightskyblue;
}
swiper-item:nth-child(2){
    background-color: lightgreen;
}
swiper-item:nth-child(3){
    background-color: lightpink;
}

常用基础类容组件

① text

​ 文本组件

​ 类似于 HTML 中的span 标签，是一个行内元素

② rich-text

​ 富文本组件

​ 支持把 HTML 字符串渲染为 WXML 结构

text 组件的基本使用

​ 只有 text 组件支持 selectable 的长按选中效果

​ 通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：

selectable属性 boolean类型 默认值：false 实现长按选中文本内容的效果

<view>
    手机号支持长按选中效果
    <text selectable>138xxxxxxxxx</text>
</view>

rich-text 组件的基本使用

​ 通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构

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

其他常用组件

① button

​ 按钮组件

​ 功能比 HTML 中的 button 按钮丰富

​ 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

② image

​ 图片组件

​ image 组件默认宽度约 300px、高度约 240px

③ navigator

​ 页面导航组件

​ 类似于 HTML 中的 a 链接

button 按钮的基本使用

type 属性 指定按钮类型 值： primary 主色调(绿色) warn 警告按钮(红色) 默认是黑色
size 属性 设置按钮的大小 值：mini 迷你
plain 属性 设置 按钮是否 镂空 boolean类型 默认值：false

<!-- 默认颜色的按钮 -->
<button>点我</button>
<!-- type="primary" 绿色按钮 size="mini" 最小尺寸的按钮 设置了mini 就不在是独占一行了-->
<button type="primary" size="mini">主色调</button>
<!-- type="warn" 红色按钮  plain 镂空按钮-->
<button type="warn" plain>警告</button>

image 组件的基本使用

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

scaleToFill 默认值，缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

<!-- 空图片 -->
<image></image>
<!-- 使用 src 指向图片路径 -->
<image src="/images/1.jpg" mode="widthFix"></image>

小程序 API

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力

例如：获取用户信息、本地存储、支付功能等。

小程序 API 的 3 大分类

① 事件监听 API

​ 特点：以 on 开头，用来监听某些事件的触发

​ 举例： wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

② 同步 API

​ 特点1： 以Sync 结尾的 API 都是同步 API

​ 特点2： 同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

​ 举例：wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容

③ 异步 API

​ 特点：类似于 Jquery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果

​ 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

数据绑定

数据绑定的基本原则

① 在data 中定义数据

② 在 WXML 中使用数据

在data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可

data: {
        // 字符串类型的数据
        info: 'init data',
        // 数组类型的数据
        msgList: [{msg: 'hello'},{msg: 'world'}]
    },

Mustache 语法的格式

把 data 中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。

<view>{{ 要绑定的数据名称 }}</view>

应用场景：

1.绑定内容

2.绑定属性

3.运算（三元运算、算术运算等）

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

小程序中常用的事件

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

事件对象的属性列表

属性	类型	说明
type	String	事件类型
timeStamp	integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。

e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件

e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

bindtap 的语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。

① 通过 bindtap，可以为组件定 tap 触摸事件，语法如下

<button type="primary" bindtap="btnTapHandler">提交</button>

② 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event(一般简写成 e) 来接收：

Page({
    btnTapHandler(e){
        console.log(e)
    }
})

在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下

Page({
    data: {
        count: 0
    },
    // 修改 count 的值
    changeCount() {
        this.setData({
            count: this.data.count + 1
        })
    }
})

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

<button type="primary" bindtap="btnTapHandler" data-info="{{ 2 }}">事件传参</button>

最终：

info 会被解析为 参数的名字

数值 2 会被解析为 参数的值

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

btnTapHandler(e){
    // dataset 是一个对象，包含了所有通过 data-* 传递过来的参数项
    console.log(e.target.dataset)
    // 通过 dataset 可以访问到具体参数的值
    console.log(e.target.dataset.info)
}

bindinput 的语法格式

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

① 通过 bindinput，可以为文本框绑定输入事件：

<input bindinput="inputHandler"></input>

e.detail.value 接收 input框内输入的值
e.detail.cursor 接收 input框内输入的值的总长度

e.detail.keyCode 接收 input框内 当前输入的值的 keyCode 码

实现文本框和 data 之间的数据同步

首先给input框添加 value=“{{ msg }}” 的动态属性

<input bindinput="inputHandler" value="{{msg}}"></input>

Page({
    data: {
        msg: ''
    },
    inputHandler(e){
        this.setDate({
            msg: e.detail.value
        })
    }
})

wx:if 条件渲染

在小程序中，使用 wx:if=“{{ condition }}” 来判断是否需要渲染该代码块：

<view wx:if="{{ condition }}"> True </view>

也可以用 wx:elif 和 wx:else 来添加 else 判断:

<view wx:if="{{ type === 1 }}"> 男 </view>
<view wx:elif="{{ type === 2 }}"> 女 </view>
<view wx:else> 保密 </view>

结合< block > 标签 使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个< block > < /block > 标签将多个组件包装起来，并在 < block > 标签上使用 wx:if 控制属性，示例如下：

<block wx:if="{{ type === 1 }}">
    <view>home</view>
    <view>to</view>
    <view>from</view>
</block>
<block wx:elif="{{ type === 2 }}">
    <view>a</view>
    <view>b</view>
    <view>c</view>
</block>
<block wx:else>
    <view>1</view>
    <view>2</view>
    <view>3</view>
</block>

注意：< block > 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

hidden 条件渲染

在小程序中，直接使用 hidden=“{{ condition }}” 也能控制元素的显示与隐藏：

<view hidden="{{ type !== 1 }}">当条件为true,将隐藏这个view,否则显示</view>

wx:if 与 hidden 的对比

① 运行方式不同

​ wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

​ hidden 以切换样式的方式 (display: none/block;),控制元素的显示与隐藏

② 使用建议

​ 频繁切换时，建议使用 hidden

​ 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

wx:for 条件渲染

通过 wx:for 可以根据指定的数组，循序渲染重复的组件结构，语法示例如下：

<!-- 列表渲染 -->
<view wx:for="{{ array }}"> 索引是：{{index}} 当前项是：{{ item }}</view>

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

**手动指定索引和当前项的变量名 ***

​ 使用 wx:for-index 可以指定当前循环项的索引的变量名

​ 使用 wx:for-item 可以指定当前项的变量名

<!-- 列表渲染 -->
<view wx:for="{{ array }}" wx:for-index="idx" wx:for-item="itemName"> 索引是：{{idx}} 当前项是：{{itemName}}</view>

wx:key 的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项目指定唯一的 key 值，从而提高渲染的效率，示例代码如下：

<view wx:for="{{ array }}" wx:key="id"> 索引是：{{index}} 当前项是：{{item.name}}</view>

wxss 模板样式

WXSS 与 CSS 的关系

WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。

与 CSS 相比，WXSS 扩展的特性有：

​ rpx 尺寸单位

​ @import 样式导入

rpx 尺寸单位

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。

rpx 的实现原理：

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上 等分为 750份 （即：当前屏幕的总宽度为750rpx）。

​ 在较小的设备上，1rpx 所代表的宽度较小

​ 在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx 的样式 单位换算成对应的像素单位来渲染，从而实现屏幕适配。

rpx 与 px 之间的单位换算

在 iphone6上，屏幕宽度为375px，共有 750 个物理像素，等分为 750 rpx。则：750rpx = 375px = 750 物理像素

​ 1rpx = 0.5px = 1 物理像素

官方建议：开发微信小程序时，设计师可以用 iphone6 作为 视觉稿的标准。

WXSS 样式导入

使用WXSS 提供的 @import 语法，可以导入外联的样式表。

@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径，用; 表示语句结束。示例如下：

@import "/common/common.wxss";

WXSS 全局样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

WXSS 局部样式

在页面的 .wxss 文件中定义的样式为 局部样式，只作用于当前页面。

注意：

​ ① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

​ ② 当局部样式的权重大于 或 等于 全局样式的权重时，才会覆盖全局样式。

全局配置

全局配置文件及常用的配置项

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

① pages

​ 记录当前小程序所有页面的存放路径

② window

​ 全局设置小程序窗口的外观

③ tabBar

​ 设置小程序底部的 tabBar 效果

④ style

​ 是否启用新版的组件样式

window窗口的组成部分

navigationBar 导航栏区域

Background 背景区域 默认不可见，下拉才显示

页面的主体区域 用来显示 wxml 中的布局

window节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持black/white
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/ light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距离页面底部距离，单位为px
backgroundColor	HexColor	#ffffff	窗口的背景色

tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面得到快速切换。小程序中通常将其分为：

​ 底部 tabBar

​ 顶部 tabBar

注意：

​ tabBar 中只能配置 最少2个、最多5个tab页签

​ 当渲染顶部 tabBar 时，不显示 icon，只显示文本

backgroundColor: tabBar 的背景颜色

selectedIconPath: 选中时的图片路径

borderStyle: tabBar 上边框的颜色

iconPath: 未选中时的图片路径

selectedColor: tab 上的文字选中时的颜色

color: tab 上文字的默认（未选中）颜色

tabBar 节点的配置项

在window 同级下 设置 tabBar

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black/white
color	HexColor	否		tab 上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 页签的列表，最少2个、最多5个tab

每一个 tab 项的配置选项

写在 tabBar 的 list 里面 用数组包行类的形式增加

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图片路径; 当 position 为 top时，不显示 icon
selectedIconPath	String	否	选中时的图标路径; 当 position 为top 时，不显示 icon

页面配置文件的作用

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面配置中常用的配置项

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

网络数据请求 get和post请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

① 只能请求 HTTPS 类型的接口

② 必须将接口的域名添加到信任列表中

添加域名接口的配置步骤

登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名一个月内最多可申请 5 次修改（所谓的49次 是假的）

发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：

wx.request({
    // 请求的接口地址，必须基于 https 协议
    url: 'https://www.https://api-ugo-web.itheima.net/api/get',
    method: 'GET',   // 请求的方式
    data: {
        name: 'zs',
        age: 22
    },
    success: (res) => {
        // 请求成功之后的回调函数
        console.log(res)
    }
})

发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：

wx.request({
    // 请求的接口地址，必须基于 https 协议
    url: 'https://api-ugo-web.itheima.net/api/public/v1/users/wxlogin',
    method: 'POST',   // 请求的方式
    data: {
        encryptedData: 'a',
        rawData: 'b',
        iv: 'c',
        signature: 'd',
        code: 'e'
    },
    success: (res) => {
        // 请求成功之后的回调函数
        console.log(res)
    }
})