Chinaunix首页 | 论坛 | 博客

等等等等等

首页　| 　博文目录　| 　关于我

一生有你llx

  • 博客访问： 5709157
  • 博文数量： 409
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 8273
  • 用 户 组： 普通用户
  • 注册时间： 2013-10-23 19:15
个人简介

qq：78080458 学习交流群：150633458

文章分类

全部博文（409）

文章存档

2019年（127）

2018年（130）

2016年（20）

2015年（60）

2014年（41）

2013年（31）

我的朋友
最近访客
推荐博文
相关博文
小程序学习---开启小程序之旅（项目、配置、页面、数据绑定）

分类： Web开发

2018-01-30 09:10:20

一、前沿

       从这个章节开始进入实战状态，利用项目以及小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字段中设置，样式根据自己的喜好来设置，没有什么难的，参考文档即可

点击(此处)折叠或打开

  1. {
  2.     "pages": [
  3.         /*第一个注册的就是启动界面，所有界面都必须注册*/
  4.         "pages/welcome/welcome",
  5.         "pages/weather/weather"
  6.     ],
  7.     "window": {
  8.         /*全局窗口设置*/
  9.         "backgroundTextStyle": "light",
  10.         "navigationBarBackgroundColor": "#dddddd",
  11.         "navigationBarTitleText": "墨迹天气",
  12.         "navigationBarTextStyle": "black"
  13.     }
  14. }


3、注册小程序

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


点击(此处)折叠或打开

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




四、页面

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

       1、welcome

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

       1）wxml文件

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

点击(此处)折叠或打开

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


2）wxss文件

点击(此处)折叠或打开

  1. /* pages/welcome/welcome.wxss */
  2. .container{
  3.     display: flex;
  4.     flex-direction: column;
  5. }
  6.   
  7. .background{
  8.     width: 100%;
  9.     height: 100%;
  10.     position: absolute;
  11.     background-size: 100% 100%;
  12. }
  13.   
  14. .welcome{
  15.     margin-top: 900rpx;
  16.     color: #121212;
  17.     position: absolute;
  18.     border: solid 1px;
  19.     border-radius: 5px;
  20.     font-size: 40rpx;
  21. }


3）json文件

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

点击(此处)折叠或打开

  1. {
  2.     "navigationBarTitleText": "北京"
  3. }


4）js文件

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

点击(此处)折叠或打开

  1. // pages/welcome/welcome.js
  2. Page({
  3.   
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.   
  9.     },
  10.   
  11.     /**
  12.      * 生命周期函数--监听页面加载
  13.      */
  14.     onLoad: function (options) {
  15.   
  16.     },
  17.   
  18. })


2、weather

       这个页面有几个要素：

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

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

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

1）wxml文件

点击(此处)折叠或打开

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


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

2）js文件

点击(此处)折叠或打开

  1. // pages/weather/weather.js
  2. Page({
  3.   
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.         title: ["七天预报", "15天预报"],
  9.         weatherData: [{ /* weatherData开始*/
  10.             date: "1-29",
  11.             image: "/images/sun.png",
  12.             state: "晴",
  13.             temperature: "-11 ~ -1 ℃"
  14.         }, {
  15.             date: "1-30",
  16.             image: "/images/cloud.png",
  17.             state: "阴",
  18.             temperature: "-19 ~ -5 ℃"
  19.         },
  20.          。。。。还有5组数据
  21.          ] /* weatherData结束*/
  22.     },
  23.   
  24.     /**
  25.      * 生命周期函数--监听页面加载
  26.      */
  27.     onLoad: function (options) {
  28.   
  29.     },
  30.   
  31. })


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


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

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

点击(此处)折叠或打开

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


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

       1）绑定内容

点击(此处)折叠或打开

  1. <view> {{ message }} </view>

  3. Page({
  4.   data: {
  5.     message: 'Hello MINA!'
  6.   }
  7. })


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

点击(此处)折叠或打开

  1. <image class='weather-img' src="{{image}}"></image>
  2.   
  3. Page({
  4.   data: {
  5.     image: '/image/cloud.png'
  6.   }
  7. })


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

点击(此处)折叠或打开

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


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

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

点击(此处)折叠或打开

  1. 三元运算
  2. <view hidden="{{flag ? true : false}}"> Hidden </view>
  3.   
  4. 算术运算，结果显示3+3+d，注意运算只局限于{{}}内，千万不要得出6+d
  5. <view> {{a + b}} + {{c}} + d </view>
  6. Page({
  7.   data: {
  8.     a: 1,
  9.     b: 2,
  10.     c: 3
  11.   }
  12. })
  13.   
  14. 逻辑判断
  15. <view wx:if="{{length > 5}}"> </view>
  16.   
  17.   字符串运算，结果helloMINA
  18. <view>{{"hello" + name}}</view>
  19. Page({
  20.   data:{
  21.     name: 'MINA'
  22.   }
  23. })
  24.   
  25. 路径运算,object.key=hello, array[0]=M,结果helloM
  26. <view>{{object.key}} {{array[0]}}</view>
  27. Page({
  28.   data: {
  29.     object: {
  30.       key: 'Hello '
  31.     },
  32.     array: ['MINA']
  33.   }
  34. })


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

点击(此处)折叠或打开

  1. 构成了一个数组{0，1，2，3，4}，因此导致item会显示5次
  2. <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
  3. Page({
  4.   data: {
  5.     zero: 0
  6.   }
  7. })
  8.   
  9. a=1,b=2; 因此结果是for：1，bar：2
  10. <template is="objectCombine" data="{{for: a, bar: b}}"></template>
  11. Page({
  12.   data: {
  13.     a: 1,
  14.     b: 2
  15.   }
  16. })
  17.   
  18. “…”可以将对象展开，因此data={a:1,b:2,c:3,d:4,e:5}
  19. <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
  20. Page({
  21.   data: {
  22.     obj1: {
  23.       a: 1,
  24.       b: 2
  25.     },
  26.     obj2: {
  27.       c: 3,
  28.       d: 4
  29.     }
  30.   }
  31. })

  33.  如果对象的key和value相同，也可以用下面的写法，结果{foo: 'my-foo', bar:'my-bar'}。
  34. <template is="objectCombine" data="{{foo, bar}}"></template>
  35. Page({
  36.   data: {
  37.     foo: 'my-foo',
  38.     bar: 'my-bar'
  39.   }
  40. })
  41.   
  42. 如果组合的时候，变量名重复，那么覆盖，下面的结果是{a:5,b:3,c:6}
  43. <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"/>
  44. Page({
  45.   data: {
  46.     obj1: {
  47.       a: 1,
  48.       b: 2
  49.     },
  50.     obj2: {
  51.       b: 3,
  52.       c: 4
  53.     },
  54.     a: 5
  55.   }
  56. })


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

点击(此处)折叠或打开

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



六、wxml最终结果

点击(此处)折叠或打开

  1. <!--pages/weather/weather.wxml-->
  2. <view class='container'>
  3.     <image class="background" src='/images/weather-back.jpg'></image>
  4.     <view class="weather-container">
  5.         <text class="weather-title">{{title[0]}}</text>
  6.         <view class="weather-item">
  7.             <text class='weather-date'>{{weatherData[0].date}}</text>
  8.             <image class='weather-img' src="{{weatherData[0].image}}"></image>
  9.             <text class='weather-state'>{{weatherData[0].state}}</text>
  10.             <text class='weather-temperature'>{{weatherData[0].temperature}}</text>
  11.         </view>
  12.        。。。。
  13.        
  14.     </view>
  15. </view>


阅读(4244) | 评论(1) | 转发(0) |
0

上一篇：小程序学习---基本原理

下一篇：小程序学习---模块化编程

给主人留下些什么吧！~~

拾忆17652075852018-04-09 13:22:09

文明上网，理性发言...

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6