AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2018-01-30 1353
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一、前沿        从这个章节开始进入实战状态，利用项目以及小demo来逐步认识小程序。主要包含以下内容        1、注册程序和页面        2、数据绑定        3、循环        4、条件...

一、前沿

       从这个章节开始进入实战状态，利用项目以及小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>


文章标签：
JavaScript
容器
开发工具
数据格式
JSON
关键词：
小程序项目配置
小程序项目配置数据绑定
小程序学习数据绑定
小程序学习页面
小程序学习项目
一生有你llx
目录
相关文章
yuanzhengme
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局？
【10月更文挑战第16天】小程序的页面如何布局？
yuanzhengme
92 1
邹荣乐
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
邹荣乐
355 3
Codelinghu
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
Codelinghu
46 1
杀死一只知更鸟debug
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航（声明式导航和编程式导航）
这篇文章介绍了微信小程序中页面导航的两种方式：声明式导航和编程式导航，包括如何导航到tabBar页面、非tabBar页面、后退导航，以及如何在导航过程中传递参数和获取传递的参数。
杀死一只知更鸟debug
184 0
微信小程序开发学习之页面导航（声明式导航和编程式导航）
明弟有理想
|
2月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架，它允许开发者使用 Vue.js 来构建应用程序，并能够同时发布到多个平台，如微信小程序、支付宝小程序、H5、App（通过DCloud的打包服务）等。uni-app 的目标是通过统一的代码库，简化多平台开发过程，提高开发效率。 在这一部分中，我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序，以及实现数据缓存的基本方法。
明弟有理想
61 0
杀死一只知更鸟debug
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件，下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件，包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件，以及监听上拉触底事件和配置上拉触底的距离。
杀死一只知更鸟debug
231 0
疯狂的猿
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
疯狂的猿
36 0
在线课堂+工具组件小程序uniapp移动端源码
千寻简
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中，版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新，提示用户并提供立即更新选项，自动下载更新内容，并在更新完成后重启小程序以应用新版本。适用于微信小程序，确保用户始终使用最新版本。以下是实现步骤： ### 实现步骤 1. **创建更新方法**：在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**：添加编译模式并选择成功状态进行模拟测试。
千寻简
58 0
微信小程序更新提醒uniapp
胡东旭
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件，兼容 H5、小程序和 APP，提供丰富的注释和简洁代码，适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
胡东旭
117 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
胡东旭
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序，旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建，具备丰富的注释与简洁的代码结构，非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
胡东旭
119 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

热门文章

最新文章

  • 1
    小程序审核常见驳回类型
  • 2
    【微信小程序】页面tabBar切换、下拉刷新
  • 3
    微信小程序使用vant组件样式不生效的问题
  • 4
    微信小程序新增推广功能，支持自定义关键词
  • 5
    小程序自定义弹窗禁止底部内容滚动（滚动穿透问题）
  • 6
    微信小程序把玩（十三）progress组件
  • 7
    【小程序开发框架选型】7大小程序开发框架，哪一个更适合你？
  • 8
    小程序云开发联表数据查询以及云函数中的应用
  • 9
    微信公众平台小程序会是下一个App Store吗？
  • 10
    从微信公众平台·小程序内测邀请函看应用号动向
  • 1
    Matplotlib库模板学习，2024年最新微信小程序页面跳转方法总结
    76
  • 2
    JAVA智慧工厂制造生产管理MES系统，全套源码，多端展示（app、小程序、H5、台后管理端）
    213
  • 3
    高德地图实现-微信小程序地图导航
    345
  • 4
    微信小程序封装请求
    82
  • 5
    性能工具之JMeter 微信小程序 WebSocket 脚本入门
    225
  • 6
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    140
  • 7
    微信小程序用户登陆和获取用户信息功能实现
    133
  • 8
    uniapp-微信小程序-上拉和下拉触底刷新
    152
  • 9
    外卖小程序实战-接单后小票机自动打印订单
    186
  • 10
    微信小程序和springboot实现微信支付
    257

    • 相关课程

    更多
  • IoT小程序框架课程
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 如何快速创建插件agent
  • 1分钟SAE部署PHP商城小程序
  • 语言入门-1：环境构建
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS