我的知识记录分享

我的知识记录分享

3.3 点击事件

2020-10-9 糖果小宝 小程序学习

事件是视图层到逻辑层的通信方式,当我们点击tap、触摸touch、长按longpress小程序绑定了事件的组件时,就会触发事件,执行逻辑层中对应的事件处理函数。 小程序框架的视图层由 WXML 与 WXSS 来编写的,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 3.3.1 页面滚动 使用开发者工具新建一个tapevent的页面(直接在app.json的pages配置项第一行添加一个tapevent的页面,由于是第一项,这样就可以成为小程序的首页呈...

阅读全文>>

评论(0) 浏览(679)

3.2 小程序API实战

2020-10-9 糖果小宝 小程序学习

要使用JavaScript来实现小程序的具体的功能,除了要了解如何操作由不同的数据类型构成的实际数据以外,还需要掌握如何使用JavaScript适时的调用小程序封装好的API。编程语言的逻辑、数据以及API是小程序应用开发最核心的组成部分。 3.2.1 全局对象wx wx是小程序的全局对象,用于承载小程序能力相关API。小程序开发框架提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,了解网络状态等。大家可以在微信开发者工具的控制台Console里了解一下这个wx这个对象。 wx 可以看到wx的所有...

阅读全文>>

评论(0) 浏览(936)

第3章 JavaScript基础

2020-10-9 糖果小宝 小程序学习

JavaScript是目前世界上最流行的编程语言之一,它也是小程序云开发最重要的基础语言。要做出一个功能复杂的小程序,除了需要掌握JavaScript的基本语法,还要了解如何使用JavaScript来操作小程序(通过API接口)。 3.1 JavaScript基础入门 我们可以使用用微信开发者工具的控制台来快速学习JavaScript。打开微信开发者工具,在调试器里可以看到Console、Sources、Network、Appdata、Wxml等标签,这些都是调试器的功能模块。 而控制台Console除了可以显示小程序的错误信息外,还可以用于输入和调试代码。 ...

阅读全文>>

评论(0) 浏览(755)

2.10 优化与部署上线

2020-9-24 糖果小宝 小程序学习

通过前面的实战学习,相信大家在写代码的过程中,遇到了很多问题,在不断解决问题的过程中也总结了一些经验。在这一部分会总结一些开发中的经验以及小程序的优化、部署、上线。 2.10.1 开发者工具的使用 1、缩进与缩进设置 尽管缩进并不会对小程序的代码产生什么影响(Python才会严格强调缩进,不同的缩进也有不同的意义),但是为了代码的可读性,缩进是必不可少的。缩进除了美观,还可以体现逻辑上的层次关系,鼠标移到编辑器显示代码行数的地方,可以看到有**–**减号,点击即对代码进行折叠与展开,这一功能在开发上可以让我们更容易理清代码的层次、嵌套关系,避免出现少了闭...

阅读全文>>

评论(0) 浏览(759)

2.8 条件渲染

2020-9-24 糖果小宝 小程序学习

在前面的章节我们已经知道WXML中的动态数据来自于对应页面Page里的data,而data里面的数据无论是数字、字符串、数组、对象我们都可以将它们渲染到WXML页面,接下来我们会把data里面的数据作为条件来控制页面的渲染,而条件的核心就在于前面所说的布尔值Boolean是true还是false。 2.8.1 渲染的运算与逻辑判断 1、渲染的数字运算 在前面我们已经介绍过渲染的数字运算,这里我们再强调一下。使用开发者工具新建一个小程序页面,比如condition,然后再在condition.wxml里输入以下代码,页面有两个变量male和female,注...

阅读全文>>

评论(0) 浏览(1040)

2.7 列表渲染

2020-9-24 糖果小宝 小程序学习

在数据绑定的章节,我们学习了如何渲染数组类型和对象类型的数据,但是当时只是输出了数组里或对象的数组里的某一个数据,如果是要输出整个列表呢?这个时候就需要用到列表渲染啦。 2.7.1 渲染数组里的所有数据 相同的结构是列表渲染的前提,在实际的开发场景里,商品、新闻、股票、收藏、书架列表等都会有几千上万条的数据,他们都有一个共同的特征就是数据的结构相同,这也是我们可以批量化渲染的前提。还是以前面的互联网快讯的数据为例,下面的新闻标题他们的结构就非常单一。 data: { newstitle:[ "瑞幸咖啡:有望在三季度达到门店运营的盈亏平衡点", "腾讯...

阅读全文>>

评论(0) 浏览(831)

2.6 数据绑定

2020-9-24 糖果小宝 小程序学习

今天我们来了解一下数据绑定,什么是数据绑定呢?就是把WXML 中的一些动态数据分离出来放到对应的js文件的 Page 的 data里。 数据绑定这个概念其实很多学过网页开发的朋友也会比较困惑。大家可以不必执着于这个深奥的概念,而是先来动手做一下了解是一个什么效果。在潜移默化里,你会get到前端里一个非常了不得的技术知识哦~ 2.6.1 把数据分离出来 我们可以在小程序的页面文件wxml里写这样一段代码,比如我们可以写在home.wxml里面, <view>张明,您已登录,欢迎</view> ...

阅读全文>>

评论(0) 浏览(727)

2.5 渐变与动画

2020-9-24 糖果小宝 小程序学习

CSS是编程科技与设计艺术结合得最为完美的一项技术,编程的优雅在于代码的清晰可读,而设计的优雅在于能够结合技术为用户带来一场视觉和交互的盛宴。借助于CSS,不仅可以做出平面设计师常用的滤镜、渐变等设计效果,还可以设计出一些交互动画,增强用户的体验。 2.5.1 CSS的渐变Gradient 颜色渐变是设计师必不可少的,CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。 技术文档:CSS 渐变属性linear-gradient 使用开发者工具新建一个gradient的页面,然后在gradient.wx...

阅读全文>>

评论(0) 浏览(773)

2.4 WeUI

2020-9-24 糖果小宝 小程序学习

WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案。有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了一个UI框架,就能让我们的小程序变得更加美观。 2.4.1 体验WeUI小程序 WeUI 是微信官方设计团队设计的一套同微信原生视觉体验一致的基础样式库。在手机微信里搜索WeUI小程序或者扫描WeUI小程序码即可在手机里体验。 我们还可以下载WeUI小程序的源码在开发者工具里查看它具体是怎么做的。 源码下载:WeUI小程序源码 下载解压压缩包之后可以看到weui-wxss-master文件夹,点击开...

阅读全文>>

评论(0) 浏览(770)

2.3 链接和图片

2020-9-24 糖果小宝 小程序学习

前几节的内容让我们的小程序有了文字,但小程序的内容形式还不够丰富,比如没有链接,没有图片等元素,而这些元素在小程序里也都是通过组件来实现的。 2.3.1 navigator组件 在小程序里,我们是通过navigator组件来给页面添加链接的。有些页面在我们打开小程序的时候就可以看得到,还有些则需要我们通过点击链接进行页面切换才可以看得到,这些我们可以称之为二级页面。 技术文档:navigator组件技术文档 1、二级页面 为了让二级页面与tabBar的页面有更加清晰的结构关系,我们可以在tabBar对应的页面文件夹下面新建要跳转的...

阅读全文>>

评论(0) 浏览(788)