前言嗨嗨嗨，好久没更新小程序专栏了，本期浅浅用小程序写一个计算器。 最终代码会上传至资源噢~实现效果实现步骤新建一个项目，在app.json中配置文件导航栏的标题和颜色。先在index.wxml中编写计算器页面的外层结构，也就是两个view，第一个view显示数字和运算符，第二个view显示各种按钮。然后在index.wxss中添加样式。在page（整体页面）中使用flex布局，将result和b
效果图实现步骤点赞功能的思路和上期收藏的思路是一样的噢~首先在接口中添加处理点赞操作的方法。调用updataPostData方法，定义一个情况为“up”，赋值给变量data，并进行返回。// 点赞功能 up(){ var data = this.updatePostData('up'); return data; }在updataPostData方法
前期准备这一部分包括页面数据data.js和页面的结构。data.js放在文章末尾了噢~wxmlwxml页面部分比较简单，添加一个view容器，命名为tool。然后添加三个小view，分别表示点赞、评论、收藏。每个小view中包括图片和数量，即image和text标签。每个功能按钮都绑定了对应的点击事件，即catchtap属性。除此之外，每个功能按钮绑定当前文章的id号。<!-- 收藏、评论
?今日学习目标：动态设置导航栏标题 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战前言哈喽大家好，本期是微信小程序专栏第十八期。本期主要内容是动态设置导航栏标题。导航栏是页面最顶部的一块区域。本期使用两种方法来实现动态导航栏标题的设置，分别是使用配置文件配置导航栏标题和使用wx.setNavigationBarTitle(OBJECT)设置导航栏。 每期内容是连载呢，建议大家可以看看往期内
?今日学习目标：页面跳转、组件自定义、获取页面参数值 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战跳转到文章详情页面新建文章详情页面。在app.json中新增页面路径，然后保存。注册跳转事件。使用一个view组件将template包裹起来，将catchtap事件注册到view组件上。在post.js中编写事件的响应函数onTapToDetaill。组件自定义单篇文章绑定postId要想
?今日学习目标：缓存数据库操作类 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战编写缓存数据库操作类（prototype）在项目根目录下新建database文件夹，并新建DBPost.js文件。思路定义一个DBPost构造函数。将post数据在缓存数据库中的key，postList赋值给构造函数的this变量。这个postList必须和初始化数据库时设置的文章数据的key相同，否则无法读取
?今日学习目标：CSS模块化、使用缓存在本地模拟服务器数据库 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战CSS模块化上期我们将wxml模块化了，那么css也应该一起“打包”起来。如下，将post.wxss中有关于文章列表的CSS样式全部剪切到post-item.wxss中。在post.wxss中使用@import "src"进行引用，实现CSS的模块化。 注意：在引入CSS文件时，既
?今日学习目标：冒泡事件与非冒泡事件、将文章数据从业务中分离、wxml的模块化 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战冒泡事件与非冒泡事件冒泡事件是指某个组件上的时间被触发后，事件还会向父级元素传递；父级元素还会继续向父级的父级传递，一直到页面的顶级元素。而非冒泡事件则不会向父级元素传递事件。在上一期中，我们使用了tap事件，监听点击或者触摸动作，tap就是一个冒泡事件。常见的冒泡
?今日学习目标：实现页面跳转功能 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战实现效果要从welcome页面跳转到post页面，需要使用事件来响应点击“开启小程序之旅”这个动作。事件事件是视图层（wxml）到逻辑层（js）的通信方式。通俗些讲，事件可以让我们在js里处理一些用户在界面上的一些操作，并对这些操作做出反馈。如何实现事件在组件上注册事件。注册事件将告诉小程序，我们要监听哪个组件
?今日学习目标：列表渲染wx:for ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战效果图< block>< /block>标签< block>标签没有实质意义，仅仅是一个包装，不会在页面内被渲染，在block标签中包裹的元素将被重复渲染。在block标签上，放置了一个wx:for的属性，它的值为{{postList}}。wx:for将绑定一个数组，也就
?今日学习目标：数据绑定 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战实现数据绑定如何让data中的数据在页面中显示呢，小程序采用数据绑定的机制来做数据的初始化和更新。小程序的脚本逻辑是运行在JSCore中，JSCore是一个没有DOM的环境，它完全抛弃了DOM结构，我们只能使用数据绑定来做数据的相关操作。 不同于AngularJS的双向数据绑定，小程序仅实现了从逻辑层传递到渲染层的数据
?今日学习目标：.js文件的代码结构与page页面的生命周期 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战.js文件默认代码结构如下是js文件的默认代码结构。默认代码结构包含了我们可能使用到的代码结构，整个页面执行了一个Page({...})方法，参数是一个Object对象，用来指定页面的初始数据（data）、生命周期函数（on开头的函数）、事件处理函数等。// pages/post/p
?今日学习目标：image组件的4种缩放模式与9种裁剪模式 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战缩放模式scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。如下，当我们添加sacleToFill模式时，图片并没有发生任何变化。这是因为sacleToFill是缩放的默认模式，如果省略了mode，则小程序也会以sacleToFill的模式来缩放图片。
?今日学习目标：vertical属性、文章列表 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战vertical属性——Boolean值的"陷阱"这个属性可以指明swiper组件面板指示点的排布方向是水平还是垂直。将vertical="true"加入到swiper的属性中，保存后会发现swiper组件的面板指示点由原来的水平排布更改为垂直排布，出现在组件的右侧。如下，我们会发现，将verti
?今日学习目标：全局样式文件app.wxss、页面的根元素page、 app.json中的window配置项 ?创作者：颜颜yan_ ?专栏系列：小程序开发实战整体效果全局样式文件app.wxss全局样式表可以为所有页面设置“默认”样式，也就是app.wxss。如果不想在某个页面中使用全局默认样式，那么只需要在相应页面的wxss文件中重新定义这个样式即可。小程序会优先选择页面的wxss文件，而不是
?今日学习目标：文章列表页面——轮播图 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战效果图轮播图首先新建一个post文件夹，在文件夹内新建post.wxml、post.wxss、post.json、post.js四个文件。我们会发现每次新建文件夹，在文件夹内新建四个文件很麻烦，还可能出现配置错误。 此时我们可以在app.json的page中输入"pages/post/post"，它就会自
?今日学习目标：小程序支持的css选择器、小程序自适应单位rpx简介 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战小程序所支持的css选择器注意：小程序只支持下表中的6种css选择器选择器样例样例描述.class.sample选择所有拥有class="sample"的组件#id#sample选择所有拥有id="sample"的组件elementview选择所有view组件Element,
?今日学习目标：flex布局 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发实战Flex布局什么是flex？Flex布局是W3C组织在2009年提出的一个新的布局方案，其宗旨是让页面的样式布局更加简单，并可以很好地支持响应式布局。 Flex也成为“弹性布局”，主要作用在容器上，它将页面中所有的元素都包裹起来。在上期文章中，我们使用display:flex;将view变成了一个弹性盒子。设置di
?今日学习目标：我的第一个小程序页面——welcome页面?创作者：颜颜yan_?专栏系列：微信小程序开发实战基本文件结构app.js、app.json和app.wxss。一个小程序项目必须有这3个描述App的文件，它们必须放在应用程序的根目录下，否则小程序会提示找不到app.json文件。wxml文件类似于我们熟悉的HTML文件，用来编写页面的标签和骨架，不同的是wxml文件里的标签元素不可以使
?今日学习目标：微信Web开发者工具的部分界面功能 ?创作者：颜颜yan_ ?专栏系列：微信小程序开发编辑选项卡编辑界面分为左、中、右三部分，左边是模拟器的预览视图，中间是代码的树状目录，右边是代码编辑区。模拟器的预览视图左边的模拟器可以模拟微信小程序在客户端真实的逻辑表现，我们可以在这里看到小程序的运行情况。在模拟器的顶部有一条工具栏，这里可以让开发者选择模拟器的机型用来模拟小程序在不同机型上的
什么是微信小程序？ 小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。 本期我们来学习微信Web开发者工具的下载及安装。
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
