小程序学习---开启小程序之旅（项目、配置、页面、数据绑定）

一、前沿

       从这个章节开始进入实战状态，利用项目以及小demo来逐步认识小程序。主要包含以下内容

       1、注册程序和页面

       2、数据绑定

       3、循环

       4、条件

       5、运算

       6、模板

       7、事件

       8、引用

       9、组件

       10、api

二、创建实验项目

       整个学习过程中，以“天气预报”为主线，尽可能利用小程序提供的各种功能。（ps：由于本人不擅长UI，因此项目的整体感观可能不是很优美，这里只注重功能；较真的朋友可以参考App Store里的各种天气类软件）

1、本节效果预览

2、项目结构

目前只有两个界面：欢迎界面、天气数据界面。每个界面都可以单独去设置标题、背景等信息

1）该项目在创建的时候，并没有勾选“quickstart”，既然是学习，就从头开始，每一个目录和文件都亲自创建。

2）images目录

这个用来存放项目中会用到的一些图片（目录名字是自己取的），这个目录下还可以根据需要创建子目录。目前小程序的IDE还不支持支持复制图片，因此你只能在硬盘上打开对应的文件夹，然后将所有的图片都粘贴进去，IDE会自动更新的。

3）pages目录

这个用来存放项目中用到的所有的页面，当然每个页面最好单独创建一个子目录，而且都包含四个文件。你可以采用一种方式快速创建这4个文件，在指定的目录上单击鼠标右键，选择“创建page”选项，IDE会自动为你创建4个文件。

当前我们有两个界面：“欢迎”、“7天预报”。

4）全局文件，这三个文件的名字必须是app

app.js 注册小程序

app.json 全局配置

app.wxss 样式，目前我们可以不需要

三、全局配置（参考文档）

       1、页面注册

       在app.json文件中的pages字段中注册页面，需要注意几条规则：

       1）pages字段不可以写错，区分大小写

       2）所有需要显示的界面都要注册

       3）pages的第一个元素就是小程序显示的启动界面

       2、设置全局窗口样式

       在app.json文件中的window字段中设置，样式根据自己的喜好来设置，没有什么难的，参考文档即可

{
    "pages": [
        /*第一个注册的就是启动界面，所有界面都必须注册*/
        "pages/welcome/welcome",
        "pages/weather/weather"
    ],
    "window": {
        /*全局窗口设置*/
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#dddddd",
        "navigationBarTitleText": "墨迹天气",
        "navigationBarTextStyle": "black"
    }
}

3、注册小程序

在app.js中，依照参考文档来完成，里面其实就是一些生命周期函数而已

点击(此处)折叠或打开

App({
     //目前不研究生命周期，因此什么也不写了
    //注意这个框架一定要有的，而且必须是App这个单词
})

四、页面

       页面的编写基本和html+css差不多，不懂的童鞋需要去补习一下这方面的功课了。。。

       1、welcome

       这个页面有一个按钮，还有一个背景图，当然我们也要注意它的标题。首先按钮其实并没有用button，而是用了一个text组件，因为text简单嘛。其次，对于背景图片，这个有一个很大的问题，之前已经说了，样式存放在wxss文件中，而目前小程序规定wxss文件不能提取项目中的资源文件（但是可以使用网络图片），因此你不能再wxss中指定背景图片，很遗憾！

       1）wxml文件

由于样式表表中不能设置背景图片，因此这里用image组件来实现背景。Text组件用来显示文本信息。也许有人觉得在html中可以直接写文本，不需要被标签包含，当然这里也可以。但是在小程序中，只有被text标签包含的文字才可以被“长按”选中。

<view class='container'>
    <image src='/images/logo.jpg' class="background"></image>
    <text class='welcome' bindtap='onClick'>点击进入天气预报</text>
</view>

2）wxss文件

/* pages/welcome/welcome.wxss */
.container{
    display: flex;
    flex-direction: column;
}

.background{
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100% 100%;
}

.welcome{
    margin-top: 900rpx;
    color: #121212;
    position: absolute;
    border: solid 1px;
    border-radius: 5px;
    font-size: 40rpx;
}

3）json文件

这里没有做过多的设置，只是设置了当前的标题。在全局配置app.json中也有相应的设置，但是页面的设置会覆盖全局设置。

{
    "navigationBarTitleText": "北京"
}

4）js文件

当前页面还没有涉及到逻辑操作，因此js文件的内容很简单，只有一个框架

// pages/welcome/welcome.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

})

2、weather

       这个页面有几个要素：

标题“七天预报”，使用text组件

有自己的背景，使用image组件

有7个条目，每一个条目显示一个天气信息（text、image、text、text）

1）wxml文件

<!--pages/weather/weather.wxml-->
<view class='container'>
    <image class="background" src='/images/weather-back.jpg'></image>
    <view class="weather-container">
        <text class="weather-title">七天预报</text>
        <view class="weather-item"> <!--模块开始-->
            <text class='weather-date'>明日</text>
            <image class='weather-img' src="/images/cloud.png"></image>
            <text class='weather-state'>阴</text>
            <text class='weather-temperature'>-18 ~ -5 ℃</text>
        </view> <!--模块结束-->
             。。。后面还有6个类似的内容
    </view>
</view>

上面的代码是有问题的，对于天气预报来说，它显示的数据基本都是动态的从服务器上获取，我们不能直接在UI中将数据写死。做过web开发的都知道，在html文件中显示的数据，基本都来自脚本。下面我们就来看一下js文件

2）js文件

// pages/weather/weather.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        title: ["七天预报", "15天预报"],
        weatherData: [{ /* weatherData开始*/
            date: "1-29",
            image: "/images/sun.png",
            state: "晴",
            temperature: "-11 ~ -1 ℃"
        }, {
            date: "1-30",
            image: "/images/cloud.png",
            state: "阴",
            temperature: "-19 ~ -5 ℃"
        },
         。。。。还有5组数据
         ] /* weatherData结束*/
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

})

对于js文件来说，它必须是Page({…})这样的结构，里面其实就是object类型，仔细看就会发现，都是json格式的。data字段就是当前页面的数据，里面当然还是json数据。我们可以看到“title”就是标题，“weather[0].date”就是第一行数据的时间文本。那么我们如何让这些js中的“变量”和UI关联起来呢？

五、数据绑定（参考文档）

       在wxml中的动态数据，都来自js文件中的data，小程序使用{{数据}}来的方式将data和wxml关联起来，称为“数据绑定”。例如上面的代码中，如果要将标题改为data中的title字段，那么你需要在wxml中这样写

1.    <text class="weather-title">{{title[0]}}</text>

因为title是个数组，所以你要留意。对于数据绑定有下面几个要点

       1）绑定内容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

2）绑定组件属性，需要加引号

<image class='weather-img' src="{{image}}"></image>

Page({
  data: {
    image: '/image/cloud.png'
  }
})

3）绑定关键字，需要加引号

<checkbox checked="{{false}}"> </checkbox>

千万不要写“false”，这样是不对的

4）在{{}}中可以做运算

三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>

算术运算，结果显示3+3+d，注意运算只局限于{{}}内，千万不要得出6+d
<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

逻辑判断
<view wx:if="{{length > 5}}"> </view>

  字符串运算，结果helloMINA
<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

路径运算,object.key=hello, array[0]=M,结果helloM
<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

5）组合内容，构成新的数组或者对象

构成了一个数组{0，1，2，3，4}，因此导致item会显示5次
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

a=1,b=2; 因此结果是for：1，bar：2
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

“…”可以将对象展开，因此data={a:1,b:2,c:3,d:4,e:5}
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

 如果对象的key和value相同，也可以用下面的写法，结果{foo: 'my-foo', bar:'my-bar'}。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

如果组合的时候，变量名重复，那么覆盖，下面的结果是{a:5,b:3,c:6}
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"/>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

6）如果花括号和引号之间有空格，那么空格会被解析

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

六、wxml最终结果

<!--pages/weather/weather.wxml-->
<view class='container'>
    <image class="background" src='/images/weather-back.jpg'></image>
    <view class="weather-container">
        <text class="weather-title">{{title[0]}}</text>
        <view class="weather-item">
            <text class='weather-date'>{{weatherData[0].date}}</text>
            <image class='weather-img' src="{{weatherData[0].image}}"></image>
            <text class='weather-state'>{{weatherData[0].state}}</text>
            <text class='weather-temperature'>{{weatherData[0].temperature}}</text>
        </view>
       。。。。

    </view>
</view>