我的知识记录分享

我的知识记录分享

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) 浏览(1039)

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) 浏览(787)

2.2 WXML与WXSS

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

2.2.1 编辑WXML文件 我们在开发者工具里打开之前修改的模板小程序home文件夹下的home.wxml,里面有如下代码 <!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> 这个第1行,是一句注释,也就是一句说明,不会显示在小程序的前端,第2行就是一个**组件**。 接下来我们会广泛使用到小程序的组件。比如我们在上面的代码下面加一下下面的代码,大家再来看效果: <view> <view&g...

阅读全文>>

评论(0) 浏览(843)

第2章 小程序页面开发

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

在这一章,我们在不使用云开发的情况下,会一步步开发出一个静态的小程序。为了学习和讲解的方便,大家可以重新建一个项目,在创建项目时,也可以勾选“不使用云服务”。 2.1 页面结构与配置 2.1.1 文件结构和页面组成 在了解以下知识时,大家只需要结合开发者工具的编辑器对照着介绍,一一展开文件夹、用编辑器查看文件的源代码,大致浏览一下即可。这就是实战学习的方法(和看书、看视频的学习方法不同),千万不要死记硬背哦,你以后用多了自然就记住啦~ 1、小程序的文件结构 在开发者工具的编辑器里可以看到小程序源文件的根目录下有app.js、app...

阅读全文>>

评论(0) 浏览(580)

1.7 开始一个云开发项目

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

在前面已经介绍过通过开发者工具自带的模板创建一个云开发QuickStart小程序,我们还可以在创建一个小程序项目时不勾选云开发直接创建一个简单的小程序Demo项目,以及到Github或者其他网站上找到一些开源项目导入,或者是自己之前使用其他后端开发过的小程序项目,那这些项目如何改造成为一个云开发项目呢? 1.7.1 开始一个云开发项目的准备回顾 在我们开始一个云开发项目之前,需要有一系列的准备工作要做好,不然会出现一些问题,这些准备工作在前面已经有所介绍,这里整理一下,不明白的地方可以回顾一下前面的章节哦: 你是否已经注册成功了一个小程序,并获...

阅读全文>>

评论(0) 浏览(756)