「微信小程序每日学习记录02」模板与配置

二、模板与配置2.1 WXML 模板语法2.1.1 数据绑定1. 数据绑定的基本原则

• 在 data 中定义数据
• 在 WXML 中使用数据

2. 在 data 中定义页面的数据

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

 // pages/list/list.js
 Page({
     /**
      * 页面的初始数据
      */
     data: {
         // 字符串数据
         info: 'init data',
         // 数组类型数据
         msgList: [{msg: 'hello'},{msg: 'world'}]
     }
 })

注意：js文件初始化数据时无需数据格式

3. Mustache 语法的格式

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

 {{ 要绑定的数据名称 }}

4. Mustache 语法的应用场景

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

5. 动态绑定内容

 // pages/list/list.js
 Page({
     /**
      * 页面的初始数据
      */
     data: {
         // 字符串数据
         info: 'init data'
     }
 })

 {{ info }}

6. 动态绑定属性

 // pages/list/list.js
 Page({
/**
      * 页面的初始数据
      */
     data: {
         // 图片网址数据
         imgSrc: "http://www.itheima.com/images/logo.png"
     }
 })

7. 三元运算

 // pages/list/list.js
 Page({
/**
      * 页面的初始数据
      */
     data: {
         // 生成 10 以内的随机数
         randomNum: Math.random() * 10
     }
 })

 {{ randomNum >= 5 ? '大于等于5' : '小于5' }}

8. 算数运算

 // pages/list/list.js
 Page({
/**
      * 页面的初始数据
      */
     data: {
         // 生成一个带两位小数的随机数
         randomNum2: Math.random().toFixed(2)
     }
 })

 生成100以内的随机数：{{ randomNum2 * 100 }}

2.1.2 事件绑定1. 事件

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

2. 常用事件

与全局配置中window的配置项一样

2.5 网络数据请求2.5.1 小程序中网络数据请求的限制

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

• 只能请求 HTTPS 类型的接口

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

2.5.2 配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

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

注意事项:

域名只支持 https 协议-

域名不能使用 IP 地址或 localhost

域名必须经过 ICP 备案

2.5.3 发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求

 wx.request({
      //  请求的接口地址，必须基于 https 协议
       url: 'https://www.escook.cn/api/get',
     //   请求的方式
       method: 'GET',
     //   发送到服务器的数据
       data:{
           name:'chenmo',
           age:20
       },
     //   请求成功之后的回调函数
       success:(res) => {
           console.log(res);
       }
 })

使用 wx.request() 需要在函数方法内使用

2.5.4 发起 POST 请求

 wx.request({
         //  请求的接口地址，必须基于 https 协议
       url: 'https://www.escook.cn/api/post',
     //   请求的方式
       method: 'POST',
     //   发送到服务器的数据
       data:{
           name:'chenmo',
           age:20
       },
     //   请求成功之后的回调函数
       success:(res) => {
           console.log(res);
       }
 })

2.5.5 在页面刚加载时请求数据

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

示例代码如下：

2.6 案例-本地生活（首页）2.6.1 首页效果以及实现步骤

• 新建项目并梳理项目结构
• 配置导航栏效果
• 配置 tabBar 效果

• 实现轮播图效果

• 实现九宫格效果

• 实现图片布局

2.6.2 接口地址

• 获取轮播图数据列表的接口：【GET】https://www.escook.cn/slides

• 获取九宫格数据列表的接口：【GET】https://www.escook.cn/categories

需要依据具体的键名进行编写 wxml 的代码

2.6.3 示例代码

 // pages/home/home.js
 Page({
/**
      * 页面的初始数据
      */
     data: {
         // 轮播图数组
         swiperList: [],
         // 九宫格数组
         gridList: []
     },
/**
      * 生命周期函数--监听页面加载
      */
     onLoad(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
               })
           }
         })
     }
 })

 /* 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%;
     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 20rpx;
     justify-content: space-around;
 }
.img-box image{
     width: 45%;
 }

 
 
 
     
         
     
 
 
 
     
         
         {{item.name}}
     
  

 
     
     
 

---