关于前端:小程序模板语法样式与页面配置

文章和代码曾经归档至【Github 仓库：https://github.com/timerring/front-end-tutorial】或者公众号【AIShareLab】回复 小程序 也可获取。

小程序模板与配置

WXML 模板语法

数据绑定

在 data 中定义数据，在 WXML 中应用数据。应用 Mustache{{}}语法：

• 绑定内容
• 绑定属性
• 运算（三元运算、算术运算等）

data: {
    info: 'hello world',
    imgSrc: 'http://www.xxxx.com/images/logo.png',
    randomNum1: Math.random() * 10,
    randomNum2: Math.random().toFixed(2),
  },

<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>
<view>{{randomNum1 >=5 ? '数字大于或等于 5' : '数字小于 5'}}</view>
<view>{{randomNum2 * 100}}</view>

事件绑定

什么是事件：事件是渲染层到逻辑层的通信形式。通过事件能够将用户在渲染层产生的行为，反馈到逻辑层进行业务的解决。

小程序中罕用的事件

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event，它的具体属性如下表所示：

target 和 currentTarget 的区别

**target 是触发该事件的源头组件，而 currentTarget 则是以后事件所绑定的组件。** 举例如下：

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

此时，对于外层的 view 来说：

e.target 指向的是触发事件的源头组件，因而，e.target 是外部的按钮组件。

e.currentTarget 指向的是以后正在触发事件的那个组件，因而，e.currentTarget 是以后的 view 组件。

bindtap 的语法格局

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。通过 bindtap，能够为组件绑定 tap 触摸事件，语法如下：

在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（个别简写成 e）来接管：

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

通过调用 this.setData(dataObject) 办法，能够给页面 data 中的数据从新赋值，示例如下：

setCount(){
    this.setData({count:this.data.count+1})
  }

事件传参

小程序中的事件传参比拟非凡，不能在绑定事件的同时为事件处理函数传递参数。例如，上面的代码将不能失常工作：

因为小程序会把 bindtap 的属性值，对立当作事件名称来解决，相当于要调用一个名称为 btnHandler(123) 的事件处理函数。

能够为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字：

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

最终 info 会被解析成参数的名字，数值 2 会被解析为参数的值，{{2}}被解析为数字 2，如果间接是 2，则会被解析为文本 2.

在事件处理函数中，通过 event.target.dataset. 参数名 即可获取到具体参数的值，具体查找的办法能够先console.log(e)，而后从打印的信息中查找。

bindinput 的语法格局

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

通过 bindinput，能够为文本框绑定输出事件：

在页面的 .js 文件中定义事件处理函数：

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

条件渲染

wx:if

在小程序中，应用 wx:if=”{{condition}}” 来判断是否须要渲染该代码块，也能够用 wx:elif 和 wx:else 来增加 else 判断：

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

如果要一次性管制多个组件的展现与暗藏，能够应用一个 <block></block> 标签将多个组件包装起来，并在 <block> 标签上应用 wx:if 管制属性。留神：<block> 并不是一个组件， 它只是一个包裹性质的容器，不会在页面中做任何渲染。

<block wx:if="{{false}}">
    <view>view1</view>
    <view>view2</view>
</block>

hidden

在小程序中，间接应用 hidden="{{condition}}" 也能管制元素的显示与暗藏。

wx:if 与 hidden 的比照：

运行形式不同

• wx:if 以动态创建和移除元素的形式，管制元素的展现与暗藏。频繁切换时，倡议应用 hidden。
• hidden 以切换款式的形式（display: none/block;），管制元素的显示与暗藏。管制条件简单时，倡议应用 wx:if 搭配 wx:elif、wx:else 进行展现与暗藏的切换。

<view hidden="{{!flag}}"> 条件为 true 的时候暗藏元素，否则显示 </view>
<view wx:if="{{flag}}"> 这是应用 wx:if 管制的元素 </view>

列表渲染

wx:for

通过 wx:for 能够依据指定的数组，循环渲染反复的组件构造，默认状况下，以后循环项的索引用 index 示意；以后循环项用 item 示意。

<view wx:for="{{arr1}}" wx:key="index">
    索引是：{{index}}，item 项是：{{item}}
</view>

    arr1: ['苹果', '华为', '小米'],

手动指定索引和以后项的变量名 *

• 应用 wx:for-index 能够指定以后循环项的索引的变量名
• 应用 wx:for-item 能够指定以后项的变量名

<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
    索引是：{{idx}}，item 项是：{{itemName}}
</view>

wx:key

相似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也倡议为渲染进去的列表项指定惟一的 key 值，从而进步渲染的效率。

<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>

    userList: [{ id: 1, name: '小红'},
      {id: 2, name: '小黄'},
      {id: 3, name: '小白'}
    ]

WXSS 模板款式

WXSS (WeiXin Style Sheets)是一套款式语言，用于丑化 WXML 的组件款式，WXSS 具备 CSS 大部分个性，同时，WXSS 还对 CSS 进行了裁减以及批改，以适应微信小程序的开发。与 CSS 相比，WXSS 扩大的个性有：

• rpx 尺寸单位
• @import 款式导入

rpx

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。为了实现屏幕的主动适配，rpx 把所有设施的屏幕，在宽度上等分为 750 份（即：以后屏幕的总宽度为 750rpx）。

• 在较小的设施上，1rpx 所代表的宽度较小
• 在较大的设施上，1rpx 所代表的宽度较大

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

rpx 与 px 之间的单位换算：

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

750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1 物理像素

官网倡议：开发微信小程序时，设计师能够用 iPhone6 作为视觉稿的规范。

开发举例：在 iPhone6 上如果要绘制宽 100px，高 20px 的盒子，换算成 rpx 单位，宽高别离为 200rpx 和 40rpx。便于计算。

款式导入

应用 WXSS 提供的 @import 语法，能够导入外联的样式表。

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

全局款式和部分款式

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

部分款式：在页面的 .wxss 文件中定义的款式为部分款式，只作用于以后页面。

• 当部分款式和全局款式抵触时，依据就近准则，部分款式会笼罩全局款式
• 当部分款式的权重大于或等于全局款式的权重时，才会笼罩全局的款式

全局配置

罕用的配置项

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

• pages记录以后小程序所有页面的寄存门路
• window全局设置小程序窗口的外观
• tabBar设置小程序底部的 tabBar 成果
• style是否启用新版的组件款式

window

小程序窗口的组成部分

window 节点罕用的配置项

tabBar

tabBar 是挪动端利用常见的页面成果，用于实现多页面的疾速切换。小程序中通常将其分为：

• 底部 tabBar
• 顶部 tabBar

留神：
tabBar 中只能配置起码 2 个、最多 5 个 tab 页签，当渲染顶部 tabBar 时，不显示 icon，只显示文本。

tabBar 的 6 个组成部分

• backgroundColor：tabBar 的背景色
• selectedIconPath：选中时的图片门路
• borderStyle：tabBar 上边框的色彩
• iconPath：未选中时的图片门路
• selectedColor：tab 上的文字选中时的色彩
• color：tab 上文字的默认（未选中）色彩

tabBar 节点的配置项

每个 tab 项的配置选项

  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "音讯",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "分割咱们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  },

含有 tabBar 页面必须放在 pages 的结尾，否则可能会显示没有 tabBar 的页面，这样就无奈跳转。

页面配置

小程序中，app.json 中的 window 节点，能够全局配置小程序中每个页面的窗口体现。
如果某些小程序页面想要领有非凡的窗口体现，此时，“页面级别的 .json 配置文件”就能够实现这种需要。罕用的配置项与全局配置中 window 配置项雷同。

网络数据申请

1. 小程序中网络数据申请的限度

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

• 只能申请 HTTPS 类型的接口

• 必须将接口的域名增加到信赖列表中

2. 配置 request 非法域名

需要形容：假如在本人的微信小程序中，心愿申请 https://www.escook.cn/ 域名下的接口

配置步骤：登录微信小程序管理后盾 -> 开发 -> 开发设置 -> 服务器域名 -> 批改 request 非法域名

注意事项：

• 域名只反对 https 协定
• 域名 不能应用 IP 地址或 localhost
• 域名必须通过 ICP 备案
• 服务器域名一个月内最多可申请 5 次批改

也能够跳过 request 非法域名校验

如果后端程序员仅仅提供了 http 协定的接口、临时没有提供 https 协定的接口。
此时为了不耽搁开发的进度，咱们能够在微信开发者工具中，长期开启「开发环境不校验申请域名、TLS 版本及 HTTPS 证书」选项，跳过 request 非法域名的校验。

⚠留神：跳过 request 非法域名校验的选项，仅限在开发与调试阶段应用！

3. 发动 GET 申请

调用微信小程序提供的 wx.request() 办法，能够发动 GET 数据申请，示例代码如下：

<button bindtap="getInfo"> 发动 GET 申请 </button>

  // 发动 GET 数据申请
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: 'zs',
        age: 20
      },
      success: (res) => {console.log(res.data)
      }
    })
  },

4. 发动 POST 申请

调用微信小程序提供的 wx.request() 办法，能够发动 POST 数据申请，示例代码如下：

<button bindtap="postInfo"> 发动 POST 申请 </button>

// 发动 POST 申请
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {console.log(res.data)
      }
    })
  },

5. 在页面刚加载时申请数据

在很多状况下，咱们须要在页面刚加载的时候，主动申请一些初始化的数据。此时须要 在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function (options) {
    // 填写上面的调用
    this.getInfo()
    this.postInfo()},

6. 对于跨域和 Ajax 的阐明

跨域问题只存在于基于浏览器的 Web 开发中。因为小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax 技术的外围是依赖于浏览器中的 XMLHttpRequest 这个对象，因为小程序的宿主环境是微信客户端，所以小程序中不能叫做“发动 Ajax 申请”，而是叫做“发动网络数据申请”。

案例 – 本地生存

• 新建我的项目并梳理我的项目构造
• 配置导航栏成果
• 配置 tabBar 成果
• 实现九宫格成果
• 实现图片布局

app.json

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生存",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "音讯",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "分割咱们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

wxml

<!--pages/home/home.wxml-->
<!-- 轮播图区域 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

<!-- 图片区域 -->
<view class="img-box">
  <image src="/images/link-01.png" mode="widthFix"></image>
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 寄存轮播图数据的列表
    swiperList: [],
    // 寄存九宫格数据的列表
    gridList: []},

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function (options) {this.getSwiperList()
    this.getGridList()},

  // 获取轮播图数据的办法
  getSwiperList() {
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: 'GET',
      success: (res) => {
        this.setData({swiperList: res.data})
      }
    })
  },

  // 获取九宫格数据的办法
  getGridList() {
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'GET',
      success: (res) => {
        this.setData({gridList: res.data})
      }
    })
  },

  /**
   * 生命周期函数 -- 监听页面首次渲染实现
   */
  onReady: function () {},

  /**
   * 生命周期函数 -- 监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数 -- 监听页面暗藏
   */
  onHide: function () {},

  /**
   * 生命周期函数 -- 监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相干事件处理函数 -- 监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {}
})

wxss

/* pages/home/home.wxss */
swiper {height: 350rpx;}

swiper image {
  width: 100%;
  height: 100%;
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}

.grid-item {
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}

.grid-item image {
  width: 60rpx;
  height: 60rpx;
}

.grid-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.img-box {
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}

.img-box image {width: 45%;}