微信小程序开发入门到实战【从0到1~入门篇2】

看这篇文章之前建议您看下我之前的小程序开发入门篇文章，按顺序阅读哦~

知识准备
由于小程序基于网页技术，所以学习之前，最好懂一点网页开发。具体来说，下面两方面的知识是必需的。

（1）JavaScript 语言：懂基本语法，会写简单的 JS 脚本程序。

（2）CSS 样式：理解如何使用 CSS 控制网页元素的外观。

此外，虽然 HTML 标签和浏览器 API 不是必备知识，但是了解浏览器怎么渲染网页，对于理解小程序模型有很大的帮助。

总的来说，先学网页开发，再学小程序，是比较合理的学习途径，而且网页开发的资料比较多，遇到问题容易查到解决方法。但是，网页开发要学的东西太多，不是短期能掌握的，如果想快速上手，先学小程序，遇到不懂的地方再去查资料，也未尝不可。

这篇文章的目的是实现以下页面的开发

今天将学习以下内容

1、WXML 模板语法

1.1 数据绑定

数据绑定的基本原则：

• 在 data 中定义数据
• 在 WXML 中使用数据
  WXML（微信小程序的标记语言）的数据绑定功能允许开发者将数据与界面元素进行绑定，实现数据和视图的同步更新。以下是WXML数据绑定的几种常见用法：

1. 文本插值
   在标签的文本内容中，使用双大括号{{}}来绑定数据。

<view>你好，{{name}}</view>

在Page的data对象中定义name：

Page({
  data: {
    name: '微信小程序'
  }
})

2. 属性绑定
   在标签的属性值中，使用{{}}来绑定数据。

<image src="{{imageUrl}}" mode="aspectFill"></image>

在Page的data对象中定义imageUrl：

Page({
  data: {
    imageUrl: 'path/to/image.jpg'
  }
})

3. 运算
   在{{}}中可以进行简单的运算，如三元运算、算术运算等。

<view>{{flag ? '是' : '否'}}</view>
<view>1 + 1 = {{1 + 1}}</view>

4. 数据绑定对象属性
   可以直接绑定对象属性的值。

<view>{{user.name}}</view>

在Page的data对象中定义user：

Page({
  data: {
    user: {
      name: '张三'
    }
  }
})

1.2事件绑定

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


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


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

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

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


右下角调试器可以看到输出的结果

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

//index的js文件
Page({
  /**
   * 页面的初始数据
   */
  data: {
    count: 0
  },

  // +1 按钮的点击事件处理函数
  CountChange() {
    this.setData({
      count: this.data.count + 1
    })
  },

//index.wxml文件
<button type="primary" bindtap="CountChange">+1</button>

事件传参：小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数

<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    info: "hello world",
    count: 0
  },

  btnTap2(e) {
    this.setData({
      count: this.data.count + e.target.dataset.info
    }),
    console.log(e.target.dataset.info)
  },

可以看到右下角控制器输出结果：2

1.3 条件渲染

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

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

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

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

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

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

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

1.4列表渲染

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

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

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

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

<view wx:for="{{arr1}}" wx:key="id">
{{item.id}},{{item.name}}
</view>

Page({
  data: {
    arr1:[
      {id:1,name:'小猿搜码1'},
      {id:2,name:'小猿搜码2'},
      {id:3,name:'小猿搜码3'},
    ]
  },

2、WXSS 模板样式

2.1 什么是rpx

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS

2.2样式导入

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

全局样式：定义在 app.wxss 中的样式为全局样式，作用于每一个页面
局部样式：在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面

注意：
① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
② 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

3、全局配置

2. 实现步骤
① 拷贝图标资源
② 新建 3 个对应的 tab 页面
③ 配置 tabBar 选项

"pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
]

其中，home 是首页，message 是消息页面，contact 是联系我们页面。

  "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"
    }]
  },

4、页面配置

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

页面配置和全局配置的关系:

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
**注意：**当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

5、网络数据请求

配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://applet-base-api-t.itheima.net域名下的接口

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

注意事项：
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改

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

<button bindtap="getInfo">发起GET请求</button>

  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/get',
      method: 'GET',
      data: {
        name: 'zs',
        age: 20
      },
      success: (res) => {
        console.log(res.data)
      }
    })
  },

代码解释
wx.request({ … })：这是微信小程序提供的API，用于发起网络请求。该函数接受一个对象作为参数，该对象包含了请求的详细信息。

url：这是请求的目标URL。这里指向了一个特定的API端点。

method: ‘GET’：定义了HTTP请求的方法。在这个例子中，使用的是GET方法，通常用于从服务器检索数据。

data: { name: ‘zs’, age: 20 }：这是发送到服务器的请求数据。在这个GET请求中，我们传递了两个查询参数：name和age，它们的值分别是zs和20。

success: (res) => { console.log(res.data) }：这是一个回调函数，当网络请求成功时会被调用。res参数是一个对象，包含了响应的数据。

console.log(res.data)：在回调函数内部，我们使用console.log来打印出响应数据res.data。res.data通常包含了服务器返回的实际数据。

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

<button bindtap="postInfo">发起POST请求</button>

  // 发起POST请求
  postInfo() {
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        console.log(res.data)
      }
    })
  },

在很多情况下，我们需要在页面刚加载的时候，自动请求**一些初始化的数据。**此时需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：

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

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。

跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

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

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

6、案例 - 本地生活（首页）

** 接口地址**
① 获取轮播图数据列表的接口
⚫ 【GET】https://applet-base-api-t.itheima.net/slides
② 获取九宫格数据列表的接口
⚫ 【GET】https://applet-base-api-t.itheima.net/categories

总结：
① 能够使用 WXML 模板语法渲染页面结构
wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
② 能够使用 WXSS 样式美化页面结构
rpx 尺寸单位、@import 样式导入、全局样式和局部样式
③ 能够使用 app.json 对小程序进行全局性配置
pages、window、tabBar、style
④ 能够使用 page.json 对小程序页面进行个性化配置
对单个页面进行个性化配置、就近原则
⑤ 能够知道如何发起网络数据请求
wx.request() 方法、onLoad() 事件

课件及源码获取方式：

关注公众号：小猿搜码

后台发送：csdn小程序

即可免费领取