微信小程序开发项目实战（微课版）课件全套 黄龙泉 项目1-10 初识微信小程序-新闻数据接口

项目一初识微信小程序任务一注册小程序MiniProgram微信小程序简称小程序。张小龙于2017年1月9日在微信公开课上宣布其正式上线。小程序英文名是MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序简介项目一

初识微信小程序触手可及应用体积小无需安装无需卸载特

点电商购物餐饮服务旅游出行金融服务教育培训生活服务

小程序在微信内部承接了各类流量池的串联，完成流量/内容到交易的闭环职能。目前小程序打通了微信聊天、企业微信、公众号、视频号、朋友圈、搜一搜等多个流量池，引流渠道丰富多元的同时，小程序也承载着助力各模块多元化运营的使命。

项目一初识微信小程序小程序简介小程序的开发过程小程序信息完善提交审核和发布开发小程序注册小程序账号01020304开发者可以打开微信公众平台网址:/

注册小程序管理账号，只有注册了账号，才能进行后续的代码开发与提交工作。注册小程序Next》项目一初识微信小程序

进入到小程序注册填写信息页面，填写的这个邮箱必须没有绑定过个人微信，也没有注册过微信公众平台下的订阅号或者服务号。码开发与提交工作。项目一初识微信小程序Next》

微信小程序公众号注册完成后，进入微信小程序管理后台，后台可以开发管理、用户身份、数据分析、模板消息等功能。Next》项目一初识微信小程序

成功注册好小程序开发者账号之后，直拉进行小程序后台管理页面或者登录到微信公众平台(/)查看个人的AppID。在左侧导航栏里选择“开发”->“开发管理”界面，在“开发设置”选项卡里查看到个人的AppID，如图所示。查看小程序的AppIDNext》项目一初识微信小程序感

谢

观

看THANK项目一初识微信小程序任务二认识小程序开发者工具MiniProgram为了帮助开发者简单和高效地开发和调试微信小程序，推出了微信开发者工具，该工具集成了公众号网页调试和小程序调试两种开发模式。工具在官方网站/miniprogram/dev/devtools/devtools.html上下载。安装微信开发工具Next》项目一初识微信小程序下载完成后，双击wechat_devtools_1.05.2111300_x64.exe文件进行开发工具的安装。安装步骤如图-图所示。Next》项目一初识微信小程序项目一

初识微信小程序选择安装路径Next》项目一初识微信小程序项目一初识微信小程序体验微信小程序成功登录之后，双击微信开发者工具，在左侧导航栏选择“小程序”选项，单击右侧的“+”按钮，进入创建小程序界面。Next》项目一初识微信小程序Next》项目一初识微信小程序进入“创建小程序”界面，依次填入“项目名称”、“目录”、“AppID”、“开发模式”、“后端服务”、“语言”以及“模板选择”。为方便开发者开发和体验小程序、小游戏的各种能力，开发者可以申请小程序或小游戏的测试号。Next》项目一初识微信小程序Next》当开发者创建项目之后，会进入到微信开发者工具的界面。从图中可以看出，微信开发者工具的主界面主要由菜单栏、工具栏、模拟器、资源区、编辑器、调试器组成。Next》项目一初识微信小程序菜单栏：通过菜单栏可以访问微信开发者工具的大部分功能，常用的菜单如下：项目文件编辑工具转到选择视图界面设置帮助微信开发者工具Next》项目一初识微信小程序工具栏：提供了一些常用功能的快捷按钮，具体说明如下：Next》项目一初识微信小程序Next》模拟器：用于在计算机中模拟小程序在不同型号手机上的执行效果，小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的机型，以及显示比例和字体大小。Next》项目一初识微信小程序Next》资源区：在资源管理区里，可以添加新的文件，文件类型包括WXML、JS、WXSS和JSON。在资源管理区还可以创建新的文件夹。Next》项目一初识微信小程序Next》编辑器：在代码编辑区中可以打开多个页面切换查看，在代码编辑区域，小程序提供自动联想功能。Next》项目一初识微信小程序Next》调试器：调试工具主要包括Wxml、AppData、Console、Sources、Storage、Network、Memory、Security、Sensor、Mock、Audits、Trace和Vulnerability功能模块。感

谢

观

看THANK项目一初识微信小程序任务二认识小程序开发者工具MiniProgram为了帮助开发者简单和高效地开发和调试微信小程序，推出了微信开发者工具，该工具集成了公众号网页调试和小程序调试两种开发模式。工具在官方网站/miniprogram/dev/devtools/devtools.html上下载。安装微信开发工具Next》项目一初识微信小程序下载完成后，双击wechat_devtools_1.05.2111300_x64.exe文件进行开发工具的安装。安装步骤如图-图所示。Next》项目一初识微信小程序项目一

初识微信小程序选择安装路径Next》项目一初识微信小程序项目一初识微信小程序体验微信小程序成功登录之后，双击微信开发者工具，在左侧导航栏选择“小程序”选项，单击右侧的“+”按钮，进入创建小程序界面。Next》项目一初识微信小程序Next》项目一初识微信小程序进入“创建小程序”界面，依次填入“项目名称”、“目录”、“AppID”、“开发模式”、“后端服务”、“语言”以及“模板选择”。为方便开发者开发和体验小程序、小游戏的各种能力，开发者可以申请小程序或小游戏的测试号。Next》项目一初识微信小程序Next》当开发者创建项目之后，会进入到微信开发者工具的界面。从图中可以看出，微信开发者工具的主界面主要由菜单栏、工具栏、模拟器、资源区、编辑器、调试器组成。Next》项目一初识微信小程序菜单栏：通过菜单栏可以访问微信开发者工具的大部分功能，常用的菜单如下：项目文件编辑工具转到选择视图界面设置视图Next》项目一初识微信小程序工具栏：提供了一些常用功能的快捷按钮，具体说明如下：Next》项目一初识微信小程序Next》模拟器：用于在计算机中模拟小程序在不同型号手机上的执行效果，小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的机型，以及显示比例和字体大小。Next》项目一初识微信小程序Next》资源区：在资源管理区里，可以添加新的文件，文件类型包括WXML、JS、WXSS和JSON。在资源管理区还可以创建新的文件夹。Next》项目一初识微信小程序Next》编辑器：在代码编辑区中可以打开多个页面切换查看，在代码编辑区域，小程序提供自动联想功能。Next》项目一初识微信小程序Next》调试器：调试工具主要包括Wxml、AppData、Console、Sources、Storage、Network、Memory、Security、Sensor、Mock、Audits、Trace和Vulnerability功能模块。感

谢

观

看THANK项目二小程序编程基础任务一小程序的执行顺序MiniProgram小程序包含哪些项目文件，每一个页面包含哪些文件，把它写在以下横线里？想一想：Next》在app.js页面，定义一个App()函数，还可用来注册一个微信小程序。App()必须在app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果。App()函数里有一些生命周期函数。Next》小程序注册函数App()属性类型必填说明onLaunchfunction否生命周期回调——监听小程序初始化。onShowfunction否生命周期回调——监听小程序启动或切前台。onHidefunction否生命周期回调——监听小程序切后台。onErrorfunction否错误监听函数。onPageNotFoundfunction否页面不存在监听函数。onUnhandledRejectionfunction否未处理的Promise拒绝事件监听函数。onThemeChangefunction否监听系统主题变化其他any否开发者可以添加任意的函数或数据变量到Object参数中，用this可以访问小程序注册函数App()App({ onLaunch(options){console.log("启动onLaunch")},onShow(options){console.log("启动onShow")},onHide(){console.log("启动onHide")},onError(msg){console.log(msg)},globalData:'Iamglobaldata'})小程序注册函数App()执行结果如下图所示。Page(Objectobject)注册小程序中的一个页面。接受一个

Object

类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。页面注册函数Page()Next》属性类型说明dataObject页面的初始数据optionsObject页面的组件选项，同中的options，需要基础库版本behaviorsStringArray类似于mixins和traits的组件间代码复用机制，参见，需要基础库版本onLoadfunction生命周期回调—监听页面加载onShowfunction生命周期回调—监听页面显示onReadyfunction生命周期回调—监听页面初次渲染完成onHidefunction生命周期回调—监听页面隐藏onUnloadfunction生命周期回调—监听页面卸载onPullDownRefreshfunction监听用户下拉动作onReachBottomfunction页面上拉触底事件的处理函数onShareAppMessagefunction用户点击右上角转发其他any开发者可以添加任意的函数或数据到Object参数中，在页面的函数中用this可以访问。这部分属性会在页面实例创建时进行一次深拷贝。页面注册函数Page()Next》感

谢

观

看THANK项目二小程序编程基础项目二小程序编程基础任务二构建页面数据MiniProgram定义data数据：在页面JS文件page函数中第一项为data属性，在data中定义本页面逻辑处理需要用到的数据，其中很大一部分数据将用WXML文件的数据渲染。因为小程序JS文件是基于JavaScript编写的，所以在JS文件中可以定义字符串、数字、布尔值、对象和数组等类型的数据。Next》页面数据Page({

data:

{

text:

"This

is

page

data.",

sliderOffset:

0,

state:{

genre:[],

genre_index:

0,

model:[],

model_index:

0,

terminalStatus:'',

}

},})获取data数据：获取data中的text和genre_index值需要使用this。Next》页面数据

onLoad:function(options){

var

gener_index=this.data.state.genre_index

console.log(gener_index)

var

text=this.data.text

console.log(text)

}页面数据执行效果如下图所示。内容绑定：WXML中的动态数据均来自对应Page的data。数据绑定使用Mustache语法即{{}}语法将变量包起来。Next》数据绑定在index.wxml页面数据绑定，示例代码如下：<view>{{message}}</view>组件属性：在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据。Next》数据绑定在index.wxml页面数据绑定，示例代码如下：<viewid="item-{{id}}"></view>控制属性：在index.wxml页面数据绑定，示例代码如下Next》数据绑定<view

wx:if="{{condition}}">hello,world</view>关键字：true：boolean类型的true，代表真值。false：boolean类型的false，代表假值。Next》数据绑定在index.wxml页面数据绑定，示例代码如下：<checkboxchecked="{{false}}"></checkbox>特别注意：不要直接写checked="false"，其计算结果是一个字符串，转成boolean类型后代表真值。感

谢

观

看THANK项目二小程序编程基础项目二小程序编程基础任务三列表渲染MiniProgram在微信小程序中，列表渲染是一种常见的需求，它可以将一组数据以列表的形式呈现给用户。列表渲染在小程序中的实现主要依赖于wx:for指令，它允许遍历数组或对象，并对每个元素进行操作。Next》列表渲染简介在组件上使用

wx:for

控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为

index，数组当前项的变量名默认为

item。Next》wx:for和wx:key的使用Page({data:{array:[

{message:'foo'},

{message:'bar'}

]}})在index.wxml页面实现列表渲染，示例代码如下：<viewwx:for="{{array}}">{{index}}:{{item.message}}</view>wx:for和wx:key的使用示例代码效果如下图所示。使用

wx:for-item

可以指定数组当前元素的变量名，使用

wx:for-index

可以指定数组当前下标的变量名。Next》wx:for和wx:key的使用<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.message}}</view>将

wx:for

用在<block/>标签上，以渲染一个包含多节点的结构块。Next》blockwx:for的使用<block

wx:for="{{[1,

2,

3]}}"

wx:key="*this">

<view>

{{index}}:

{{item}}

</view></block>将

wx:for

用在<block/>标签上，以渲染一个包含多节点的结构块。Next》blockwx:for的使用<viewwx:for="array">{{item}}</view><viewwx:for="{{['a','r','r','a','y']}}">{{item}}</view>等同于blockwx:for的使用运行结果如下所示。花括号和引号之间如果有空格，将最终被解析成为字符串。Next》blockwx:for的使用<viewwx:for="{{[1,2,3]}}">{{item}}</view><viewwx:for="{{[1,2,3]+''}}">{{item}}</view>等同于blockwx:for的使用运行结果如下所示。感

谢

观

看THANK项目二小程序编程基础项目二小程序编程基础任务四条件渲染MiniProgram在微信小程序中，条件渲染是一种非常实用的技术，它允许我们根据条件来决定是否显示某个组件或页面。通过条件渲染，开发者可以动态地呈现用户界面，根据用户的输入、数据或其他条件来做出相应的调整。Next》条件渲染简介在框架中，使用wx:if=""来判断是否需要渲染该代码块：Next》wx:if的使用<viewwx:if="{{condition}}">Helloworld</view>也可以用wx:elif和wx:else来添加一个else块：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>wx:if的使用示例代码效果如下图所示。因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。Next》blockwx:if的使用<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block>blockwx:if的使用示例代码效果如下图所示。在框架中，使用wx:if=""来判断是否需要渲染该代码块：Next》wx:if的使用<viewwx:if="{{condition}}">Helloworld</view>也可以用wx:elif和wx:else来添加一个else块：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>hidden也可以用来控制元素的显示与隐藏，与wx:if不同，当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。Next》hidden的使用<view

hidden="{{flag}}">

flag为true值时，隐藏评论</view>Page({

data:

{

flag:true

}})在JS中定义flag的值blockwx:for的使用运行结果如下所示。花括号和引号之间如果有空格，将最终被解析成为字符串。Next》blockwx:for的使用<viewwx:for="{{[1,2,3]}}">{{item}}</view><viewwx:for="{{[1,2,3]+''}}">{{item}}</view>等同于blockwx:for的使用运行结果如下所示。感

谢

观

看THANK项目二小程序编程基础项目二小程序编程基础任务五事件渲染MiniProgram事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches。小程序中绑定事件，通过bind关键字来实现。如bindinput，bindtap(绑定点击事件)，bindchange等。Next》事件绑定简介通过bind+“事件名称”为组件绑定事件，如bindchange、bindtap等，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。在大多数组件和自定义组件中，

bind

后也可以紧跟一个冒号，其含义不变，如

bind:tap。Next》事件的使用方式（1）不带参数的事件绑定在wxml中定义组件。Next》事件的使用方式在JS页面定义事件处理函数。Page({data:{num:0},changeinput:function(e){console.log(this.setData({num:e.detail.value}));}})<inputtype="text"bindchange="changeinput"/>（2）带参数的事件绑定在wxml中定义组件。Next》事件的使用方式在JS页面定义事件处理函数。Page({

data:

{

},

tapEvent:function(e){

console.log(e)

//获取事件详情

console.log(e.currentTarget.dataset.hi)//获取数据绑定data-的数据

console.log(e.currentTarget.dataset.id)

}})<view

data-hi="WeChat"

data-id="01"

bindtap="tapEvent"

>Click

me</view>事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。Next》事件分类运行环境渲染层touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发longtap手指触摸后，超过350ms再离开（推荐使用longpress事件代替）transitionend会在WXSStransition或wx.createAnimation动画结束后触发animationstart会在一个WXSSanimation动画开始时触发animationiteration会在一个WXSSanimation一次迭代结束时触发animationend会在一个WXSSanimation动画完成时触发touchforcechange在支持3DTouch的iPhone设备，重按时会触发WXML的冒泡事件列表：触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。Next》事件的捕获阶段(1)捕获事件capture-bind开头，点击哪个事件，就触发哪个和自己包裹的所有事件。<view

class="outer"

capture-bind:tap='handleTap1'>

outer

view

<view

class="middle"

capture-bind:tap='handleTap2'>

middle

view

<view

class="inner"

capture-bind:tap='handleTap3'>

inner

view

</view>

</view></view>触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。Next》事件的捕获阶段（2）取消冒泡、捕获事件capture-catch开头，不管怎么点击，都只触发最外层事件。<view

class="outer"

capture-catch:tap='handleTap1'>

outer

view

<view

class="middle"

capture-catch:tap='handleTap2'>

middle

view

<view

class="inner"

capture-catch:tap='handleTap3'>

inner

view

</view>

</view></view>感

谢

观

看THANK项目二小程序编程基础项目三小程序常用组件Flexelasticmodellayout任务一Flex弹性模型布局Flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。Flex布局在浏览器中存在一定的兼容性，在小程序中，是完全兼容Flex布局的，并且微信官方也是推荐使用Flex布局的。下面就来详细的讲下Flex布局。项目三小程序常用组件任务描述Flex弹性模型布局弹性容器：包含着弹性项目的父元素。弹性项目(Flexitem)：弹性容器的每个子元素都称为弹性项目。轴(Axis)：每个弹性框布局包含两个轴。方向(Direction)：可以通过flex-direction来确定主轴和侧轴的方向。Flex弹性模型布局传统的布局解决方案Flex容器属性Flex项目属性小程序Flex布局Flex-directionFlex-wrapjustity-contentalign-contentflex-flowalign-itemsorderflex-growflex-shrinkflex-basisflexalign-selfFlex布局相关属性

主轴排列：默认情况下，容器在主轴的方向是从左到右。在主轴方向上，可以通过justify-content属性来设置他们的排列方式。属性说明flex-start项目靠近父盒子的左侧。默认采用的就是这种排列方式。flex-end项目靠近父盒子的右侧。center所有项目会挨在一起在父盒子的中间位置。space-around项目沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。space-between项目沿主轴均匀分布，位于首尾两端的子容器与父容器紧紧挨着。space-evenly项目在主轴上均匀分布，收尾两端的自容器到父容器的距离跟自容器间的间距是一样的。图主轴排列方式Flex布局相关属性

侧轴排列：默认情况下，侧轴的方向是从上到下。在侧轴方向上，可以通过align-items属性来设置他们的排列方式。图侧轴排列方式属性说明flex-start起始端对齐。默认就是这种对齐方式。flex-end末尾段对齐。center中间对齐。stretch如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。Flex布局相关属性

主轴和侧轴方向：主轴默认的方向是从左到右，侧轴的方向默认是从上到下，当然也可以进行修改。可以通过flex-direction进行修改。图主轴和侧轴方向属性说明row默认属性。从左到右。row-reverse从右到左。column从上到下。column-reverse从下到上。Flex布局相关属性

换行：默认情况下，元素个数如果超过一定数量，那么在一行当中就排列不下。此时flex默认的处理方式是压缩元素，使其能在一行中排列下来。可以通过flex-wrap来改变排列的方式。图换行属性属性说明nowrap不换行。默认方式wrap换行wrap-reverse换行，但是第一行会在下面。Flex布局相关属性

多行排列：在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过align-content属性来确定排列的方式。图多行排列方式属性说明flex-start从上往下排列。flex-end末尾段对齐center中点对齐space-between与交叉轴两端对齐，轴线之间的间隔平均分布space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。Flex项目布局属性

如果我们想对某一项子级元素单独设置属性，这就要用到flex的项目属性，设置在项目（子容器）上的6个属性。图flex项目布局属性属性说明order定义项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。flex-basis定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex是flex-grow,flex-shrink和flex-basis的简写，默认值为01auto。后两个属性可选。align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。Flex布局案例

设计一个小程序页面，利用flex弹性盒模型布局实现九宫格效果，在此案例中需要用到Flex弹性模型布局display、更新主轴和侧轴方向属性flex-direction、主轴排列属性justify-content、侧轴排列属性align-items。感

谢

观

看THANK项目三小程序常用组件"Punchineveryday"layoutdesign任务二“天天打卡”布局设计如果需要每天打卡，统计要卡数据，那么打卡小程序肯定是最佳选择，本任务配套源代码中提供了完整的天天打卡小程序案例。从图来看，天天打卡小程序的页面可以分成上下两个区域，上面区域用于实现打卡信息的填写，包括用户昵称、打卡名称、打卡地点以及打卡时间。下面区域以标签的形式列出打卡记录。方便用户查看打卡记录。项目三小程序常用组件任务描述页面基本结构

分析了天天打卡小程序并学习了Flex布局，接下来编写天天打卡小程序的基础页面结构和样式，打开pages/card/card.wxml文件编写页面结构代码。<!--

昵称、打卡名称

--><view

class="card

mt20"></view><!--

打卡地点

--><view

class="card

mt20"></view>

<!--

打卡时间：时间选择器、重复日期

--><view

class="card

mt20"></view><!--

新建按钮

--><view

class="create"></view><!--

打卡标签

--><view

class="list">

</view>案例初始化

在chapter03项目中创建一个名为card的空白页面，打开app.json文件，创建新页面的代码如下所示。{

"pages":[

"pages/card/card"]}

打开pages/card/card.json文件中编写页面配置代码，设置具体如下。{

"navigationBarTitleText":

"天天打卡",

"navigationBarBackgroundColor":

"#15a8e2"}感

谢

观

看THANK项目三小程序常用组件"Punchthecardeveryday"function任务三“天天打卡”功能实现如果需要每天打卡，统计要卡数据，那么打卡小程序肯定是最佳选择，本任务配套源代码中提供了完整的天天打卡小程序案例。从图来看，天天打卡小程序的页面可以分成上下两个区域，上面区域用于实现打卡信息的填写，包括用户昵称、打卡名称、打卡地点以及打卡时间。下面区域以标签的形式列出打卡记录。方便用户查看打卡记录。项目三小程序常用组件任务描述获得个人信息-开放数据

微信小程序提供了open-data组件用于展示微信开放的数据。可以直接获取头像和昵称，无需用户授权。open-data组件属性属性类型说明typestring开放数据类型，groupName：拉取群名称，userNickName用户昵称。userAvatarUrl用户头像。userGender用户性别。userCity用户所在城市。userProvince用户所在省份。userCountry用户所在国家。userLanguage用户的语言。open-gidstring当type="groupName"时生效,群iddefault-textstring数据为空时的默认文案打卡名称-输入框组件

小程序中的部分组件是由客户端创建的原生组件，其中包含input输入框组件，input中的字体是系统字体，所以无法设置font-family。在案例中，为input组件绑定了bindinput事件，键盘输入时触发，处理函数可以直接return一个字符串，将替换输入框的内容。

//

设置任务名称

bindKeyInput:

function

(e)

{

this.setData({

"cardName"

:

e.detail.value});

},打开pages/card/card.js文件，实现bindKeyInput事件，获取e.detail.value获取到输入里的值，通过setData()函数将e.detail.value值赋给cardName。打卡地点-地理位置API

在微信小程序中，经常需要使用到地理位置功能，可以通过API接口来获取当前的位置。小程序提供了wx.chooseLocation(Objectobject)API来获取地理位置，直接调用微信的接口API，返回一个json数据。打卡地点-地理位置API[代码略]"permission":

{

"scope.userLocation":

{

"desc":

"你的位置信息将用于小程序位置接口的效果展示"

}}}

打卡时间-picker组件

picker组件从底部弹起的滚动选择器。在官方文档中，提供了五种类型的picker组件，如普通选择器，多列选择器，时间选择器，日期选择器和省市区选择器，可以用mode属性区分。图picker组件属性属性类型说明header-textstring选择器的标题，仅安卓可用modestring选择器类型，包括selector普通选择器；multiSelector多列选择器；time时间选择器；date日期选择器；region省市区选择器。disabledboolean是否禁用bindcanceleventhandle取消选择时触发打卡时间-picker组件

时间选择器bindchange代表当用户选择了不同的选项时，会触发相应的函数。可以使用bindchange修改js文件里面对应的值。图时间选择器属性属性类型说明valuestring表示选中的时间，格式为"hh:mm"startstring表示有效时间范围的开始，字符串格式为"hh:mm"endstring表示有效时间范围的结束，字符串格式为"hh:mm"bindchangeeventhandlevalue改变时触发change事件，event.detail={value}重复日期-条件运算符

在小程序的开发中，有时候需要根据page的data中的数据来决定页面中的某元素加不加载，或者一个元素有没有某个属性，这时候就可以用条件运算符来实现。vara=10,b=20;console.log(20===(a>=10?a+10:b+10));感

谢

观

看THANK项目四商城首页模块开发任务一商城项目需求分析Mallprojectdemandanalysis项目四商城首页模块开发任务描述尝试创建一个小程序前端综合设计实例。创建以“梅园”为主题的小程序实例，包括新闻和产品页面的设计和数据请求实现。软件开发步骤需求分析软件设计软件开发软件测试可行性分析软件实施如何做好软件需求分析？目的是将用户非形式的需求转化为明确、完整的需求定义，确保系统满足功能、性能和可靠性等具体要求。软件需求分析是开发过程中的关键步骤，涉及对用户和项目需求的深入调研与分析。如何做好软件需求分析？需求分析内容功能性分析必须实现哪些功能向用户提供功能需求执行的操作帮助用户进行充分描述外部行为形成软件需求规格说明文档设计约束进行设计的约束说明非功能性需求软件性能、可靠性、响应时间运行环境的要求相关标准、规范用户界面具体细节未来可能的扩充方案“梅园”功能需求分析首页功能需求五个功能模块：首页功能、新闻功能、产品功能、购物车功能和个人中心功能。五个功能模块都可以在tabBar中显示，通过tabBar功能，实现页面的自由切换。轮播图效果，并且至少需要3幅图片自动播放功能。01图标导航、推荐产品滚动区域功能。02最新产品展示功能。03首页功能需求新闻页功能需求新闻列表功能，并且实现下拉刷新、上拉触底功能。01新闻详情页面需要显示新闻标题、图片、正文和日期。02允许点击按钮将当前阅读的新闻添加到本地收藏中。03已经收藏过的新闻也可以点击按钮取消收藏。04产品页功能需求显示产品分类，点击商品分类，可以进入到产品列表页面。01点击产品进入到产品详情页，可以查看产品的详情信息。02获取产品的评论信息，并将产品添加到购物车功能。03购物车功能需求显示购物产品列表。01计算出购物车里全部产品的金额。02删减购物车里产品的数量，并重新计算金额。03个人中心页功能需求未登录状态下显示登录按钮，点击后可以显示微信头像和昵称。01使用模板功能完成个人信息列表。02使用Echart图表进行个人信息统计。03页面功能实现方法或组件

表

更多功能模块更多需求分析

查找微信开发者文档，你还能提出哪些功能模块？功能需求的作用明确用户的需求和期望，确定项目的功能和特性。1预防需求不符，减少开发成本和时间。2确保软件满足用户需求，提升质量和满意度。3建立软件开发目标，加强团队协作与沟通，提升效率和质量。4感

谢

观

看THANK项目四商城首页模块开发任务二商城项目创建Mallprojectcreation原生开发是指使用微信官方提供的开发工具和API来进行开发，包括小程序前端开发和后端接口开发。原生开发开源小程序框架是一种基于微信官方框架的再封装和拓展，通过提供一些常用的开发模块和组件，简化开发流程。开源小程序框架低代码开发平台是一种以可视化方式进行开发的工具，可以帮助开发者快速搭建原型并生成代码。

低代码开发平台在市场上有很多专业的小程序开发团队或者个人开发者可以提供开发服务。外包或代开发小程序开发方式微信云开发微信云开发由微信团队和腾讯云联合推出。01提供专业的小程序、小游戏、公众号网页开发服务。02支持快速开发，与微信开放能力无缝对接。03开发者无需自建服务器，可直接使用平台API。04云数据库CloudBase提供的核心功能之一，提供基础读写、聚合搜索、数据库事务、实时推送等功能。云存储CloudBase云存储提供稳定、安全、低成本、简单易用的云端存储服务，支持任意数量和形式的非结构化数据存储，例如图片、文档、音频、视频、文件等。

云函数使用CloudBase的云函数，可以以函数的形式运行后端代码，响应SDK的调用或者HTTP请求。123微信云开发小程序技术架构小程序前端开发使用HTML、CSS、JavaScript。利用WXML和WXSS构建页面结构和样式。调试和性能优化小程序框架和运行时组件库和开发工具前端技术栈小程序技术架构调试和性能优化调试工具和日志输出性能优化小程序框架和运行时基于JavaScript的框架一系列的

解析和执行小程序的代码API和组件组件库和开发工具快速搭建界面集成开发环境（IDE）前端技术栈小程序后端开发主要使用服务器端语言和框架，如Node.js、Java、PHP等，通过接口和数据库来实现数据的交互和存储。小程序技术架构安全和权限管理数据和用户隐私的安全措施功能和资源进行权限控制数据库和缓存存储和管理小程序的数据缓存技术数据接口和服务端开发数据接口后端服务端开发新建页面文件本项目所有图片素材放置在images文件夹下，并在images下面按图片功能进分文件夹放置，例如tabs文件，放置的是导航栏里的icon图标。新建6个页面，分别是news新闻列表页，newsDetail新闻详情页、goods产品页、goodsDetail产品详情页、cart购物车页面和profile个人信息页。

小程序默认导航栏是黑底白字的效果，可以通过app.json中的window属性进行重新配置来定义导航栏效果。属性类型默认值描述backgroundTextStylestringdark下拉loading的样式，仅支持dark/lightnavigationBarBackgroundColorHexColor#000000导航栏背景颜色，如#000000navigationBarTitleTextstring

导航栏标题文字内容navigationBarTextStylestringwhite导航栏标题颜色，仅支持black/white表

页面配置选项导航栏设计{

"pages":

[代码略],

"window":

{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":

"#e60",

"navigationBarTitleText":

"梅园",

"navigationBarTextStyle":"white"}}导航栏设计【示例4-2】修改“梅园”小程序项目配置app.json方件，效果所下图所示。感

谢

观

看THANK项目四商城首页模块开发任务三商城首页视图设计Mallhomepageviewdesign任务描述项目四商城首页模块开发在确定好项目功能之后，接下来创建新的项目。并在新的项目下创建所需要的页面文件。首页效果图如右所示：属性类型默认值描述pagePathstring是页面路径，必须在pages中先定义textstring是tab上按钮文字iconPathstring否图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。selectedIconPathstring否选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。表

对象属性值tabBar组件的设计如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。其中list接受一个数组，只能配置最少2个、最多5个tab。【示例4-3】使用tabBar组件，完成“梅园”小程序底部导航，

实现页面切换效果。效果所下图所示。tabBar组件的设计swiper组件的设计swiper组件为滑块视图容器。通常用于图片之间的切换播放，被形象地称为轮播图。swiper组件分成两个部分：是外部的swiper组件；嵌套在swiper内的swiper-item组件，并且也只能嵌套swiper-item组件。图

轮播图效果图【示例4-4】“梅园”小程序首页的轮播图功能表

swiper组件属性属性类型默认值必填描述indicator-dotsbooleanfalse否是否显示面板指示点indicator-colorcolorrgba(0,0,0,.3)否指示点颜色indicator-active-colorcolor#000000否当前选中的指示点颜色autoplaybooleanfalse否是否自动切换currentnumber0否当前所在滑块的indexintervalnumber5000否自动切换时间间隔durationnumber500否滑动动画时长swiper组件的设计swiper组件可以设置的部分属性如下表所示。作用：在WXML页面中跳转的导航。navigator组件的设计类型一：保留当前跳转，跳转后可以返回当前页，它与wx.navigateTo跳转效果是一样的；

navigator组件类型二：关闭当前页跳转，是无法返回当前页，它与wx.redirrectTo跳转效果是一样的；

类型三：跳转底部标签导航指定的页面，它与wx.switchTab跳转效果是一样的。

属性类型默认值描述targetstringself在哪个目标上发生跳转，默认当前小程序。Self：当前小程序；miniProgram：其它小程序urlstring

当前小程序内的跳转链接open-typestringnavigate跳转方式。属性值包括navigate、redirect、switchTab、reLaunch、navigateBack、exittargetstringself在哪个目标上发生跳转，默认当前小程序。Self：当前小程序；miniProgram：其它小程序表

对象属性值navigator组件的设计navigator组件【示例4-5】利用Flex弹性盒模型实现“梅园”小程序图片导航功能。完成效果如下图所示。图

图片导航效果弹性布局设计页面scroll-view组件的设计view组件用来对页面的结构进行布局，如果要在页面中某一区域实现滚动效果，可以使用scroll-view组件。使用竖向滚动时，需要给scroll-view一个固定高度，通过WXSS设置height。表

页面配置选项属性类型默认值必填描述scroll-xbooleanfalse否允许横向滚动scroll-ybooleanfalse否允许纵向滚动upper-thresholdnumber/string50否距顶部/左边多远时，触发scrolltoupper事件lower-thresholdnumber/string50否距底部/右边多远时，触发scrolltolower事件scroll-topnumber/string

否设置竖向滚动条位置scroll-leftnumber/string

否设置横向滚动条位置scroll-into-viewstring

否值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡scroll-view组件的设计图

“推荐美景”功能scroll-view组件的设计【示例4-6】利用scroll-view组件实现“梅园”小程序“推荐美景”功能，实现图片横向滚动。完成效果如下图所示。图4-15公共样式公共样式的设计app.wxss是整个小程序的公共样式表。可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。如果页面有自己的样式表，则会覆盖公共样式表用法跟标准css文件无异，支持.class、#id。公共样式的设计【示例4-7】在“wintersweet”项目中，定义一个全局样式，实现功能之间的灰色间隔。

.divide{

margin-top:20rpx;

}01打开app.wxss页面，定义一个公共的样式，实现页面功能之间的间隔，在前面的例题中，页面的颜色已经设置为灰色，在这一步里只需要设置上边距为20rpx即可。公共样式的设计【示例4-7】在“wintersweet”项目中，定义一个全局样式，实现功能之间的灰色间隔。

02步骤2：打开index.wxml页面，在图片导航和推荐美图之间，实现app.wxss里定义的样式。<view

class="divide"></view>感

谢

观

看THANK项目四商城首页模块开发任务四商城首页动画的实现Implementationofthemallhomepageanimation项目四商城首页模块开发任务描述在小程序中，通常可以使用CSS渐变和CSS动画来创建简易的界面动画。同时，还可以使用wx.createAnimation接口来动态创建简易的动画效果。

简单来说，整个动画实现过程需要以下三步：（1）创建一个动画实例

animation。（2）调用实例的方法来描述动画。（3）最后通过动画实例的export方法导出动画数据传递给组件的

animation

属性。属性类型默认值描述durationnumber400动画持续时间，单位mstimingFunctionstringlinear动画的效果delaynumber0动画延迟时间，单位mstransformOriginstring'50%50%0'允许改变被转换元素的位置表

wx.createAnimation接口属性Animation动画实例表

wx.createAnimation接口属性属性类型默认值描述durationnumber400动画持续时间，单位mstimingFunctionstringlinear动画的效果delaynumber0动画延迟时间，单位mstransformOriginstring'50%50%0'允许改变被转换元素的位置Animation动画实例Animation动画实例动画从头到尾的速度是相同的linear动画以低速开始，然后加快，在结束前变慢ease动画以低速开始ease-in动画以低速开始和结束ease-in-out动画一直保持开始状态，最后一帧跳到结束状态step-end动画以低速结束ease-out动画第一帧就跳至结束状态直到结束step-start

timingFunction从小程序基础库2.9.0开始支持一种更友好的动画创建方式，用于代替旧的wx.createAnimation。它具有更好的性能和更可控的接口。在页面或自定义组件中，当需要进行关键帧动画时，可以使用this.animate接口：this.animate(selector,keyframes,duration,callback)属性类型必填描述selectorString是选择器（同SelectorQuery.select的选择器格式）keyframesArray是关键帧信息durationNumber是动画持续时长（毫秒为单位）callbackfunction否动画完成后的回调函数表

this.animate接口属性关键帧动画this.animate('#container',[{opacity:1.0,rotate:0,backgroundColor:'#FF0000'},{opacity:0.5,rotate:45,backgroundColor:'#00FF00'},{opacity:0.0,rotate:90,backgroundColor:'#FF0000'},],5000,function(){this.clearAnimation('#container',{opacity:true,rotate:true},function(){console.log("清除了#container上的opacity和rotate属性")})}.bind(this))关键帧动画核心功能：商品展示是电子商城吸引用户的关键。购物体验：提供类似现实超市的商品浏览体验。视觉美化：通过商品展示增加商品的吸引力。技术实现：采用弹性布局展示最新产品。图4-18最新产品效果图实现商品动画效感

谢

观

看THANK项目五新闻页面模块开发任务一新闻页面视图层设计Newspageviewlayerdesign在小程序开发中，经常会遇到新闻模块需求，包括新闻列表、新闻详情、新闻评价等，小程序为新闻模块提供了各类API和组件。掌握了这些API和组件的使用，即可完成新闻模块功能的开发。本项目将通过“新闻列表、新闻详情页面”，讲解公共数据的定义、详情数据的获取、收藏功能、背景音乐API、分享API等功能的实现。项目五新闻页面模块开发任务描述新闻功能开发流程01021.需求分析

在开发新闻头条小程序之前，我们需要对目标用户的需求进行深入分析：新闻内容、快速阅读、个性化推荐和互动需求等。0304052.功能设计基于以上需求分析，我们可以进行界面设计、功能设计、数据库设计3.功能开发在开发环节，需要使用微信小程序开发工具和相关技术，后端开发、前端开发、接口对接。4.测试与优化完成开发后，需要进行严格的测试，包括单元测试、集成测试和性能测试等。5.上线与推广经过测试和优化后，可以将新闻小程序上线到微信开放平台。新闻列表页面分成筛选区域和卡片式新闻区域两部分。筛选区域主要用于新闻分类筛选和时间排序功能，卡片式新闻区域用于显示新闻列表。本项目配套源代码提供了新闻页面，读者可以使用微信开发者工具打开该页面，查看项目的运行结果，如图所示。新闻列表页面设计卡片式新闻筛选区域新闻列表页面分成筛选区域和卡片式新闻区域两部分。筛选区域主要用于新闻分类筛选和时间排序功能，卡片式新闻区域用于显示新闻列表。本项目配套源代码提供了新闻页面，读者可以使用微信开发者工具打开该页面，查看项目的运行结果，如图所示。新闻列表页面设计<viewclass="card"

><viewclass="card-top"></view>

<imageclass="cardimg"src='/images/news1.jpg'mode='aspectFill'></image><textclass='card-desc'>“萝岗香雪”曾是羊城八景之一</text><viewclass="card-detail"><textclass='card-read'bindtap='handleDetail'data-id=''>查看详情</text></view></view>新闻列表页面设计

在分析了页面结构之后，下面开始编写新闻列表页面结构和样式，首先在pages/news/news.wxml文件中编写页面布局代码，框架代码如下：课后练习

练一练：画出图中新闻列表页面的设计图，使用小程序常用的Flex布局方式实现该页面。感

谢

观

看THANK项目五新闻页面模块开发任务二新闻列表页面的实现Newslistpageimplementation通过前面的学习，读者已经知道数据可以定义在JS文件的data对象中。当数据较多时，或者当没有条件提供数据接口时，可以采用模拟数据进行代替。例如，可以将数据定义在utils/common.js文件中。项目五新闻页面模块开发任务描述MOCK数据使用Mock数据可以保护真实数据源中的敏感信息，避免因为开发和测试而导致真实数据泄露的风险。真实数据的保护Mock数据能够提供可用的虚拟数据，使得开发人员和测试人员能够在没有完整的系统和真实数据的情况下进行工作。快速开发和测试Mock数据允许前后端团队并行开发，以提高整个开发过程的效率。独立开发和测试0201Mock数据优点03

Mock数据是指在软件开发过程中使用的一种模拟数据，它用于模拟真实数据源的数据，具有相似的数据结构和字段。这种数据通常在真实数据不可用或无法获取时使用，以便在开发、测试和演示过程中提供可用的虚拟数据。模拟数据的定义其中，id表示每条数据的编号，title表示新闻的标题，cate_id表示新闻分类编号，poster表示卡片新闻的贴图，desc表示卡片新闻的摘要，content表示新闻内容详情，views表示浏览数量，favorites表示收藏数量，addtime表示新闻添加时间，添加时间引入了小程序默认的util文件中定义的时间格式，使用Date()函数获取当前系统时间。bgmusic表示背景音乐，包括了音乐地址和音乐名称。

下面提供了1条新闻列表数据作为示例。读者可以根据视图界面的功能，自行添加或修改新闻内容。模拟数据的定义

import

util

from

'../utils/util'const

news=[

{

id:'01',

title:'最美梅花园',

cate_id:'1',

poster:'/images/news/news1.jpg',

desc:'“萝岗香雪”曾是羊城八景之一',

content:

'不同种类的梅花将陆陆续续开放两个多月...',

views:'1250',

//浏览数量

favorites:

'63',

//收藏数量

addtime:util.formatTime(new

Date()),

bgmusic:{

url:'/music/4.mp3',title:'四季歌'}}]模拟数据的定义

constnews=[代码略] exports.getNewsList=()=>{ letnewslist=[] for(vari=0;i<news.length;i++){ letobj={} obj.id=news[i].id obj.title=news[i].title obj.poster=news[i].poster obj.desc=news[i].desc obj.views=news[i].views obj.favorites=news[i].favorites obj.content=news[i].content obj.addtime=news[i].addtime obj.bgmusic=news[i].bgmusic newslist.push(obj) } returnnewslist; }

getNewsList()函数将前面所定义好的news数据使用for循环的方式读取，调用push()方法写到newslist数组里，最后返回newslist数组。模拟数据的定义

exports.getNewsDetail=(newsid)=>{ letnewsDetail={}; for(vari=0;i<news.length;i++){ if(newsid==news[i].id){ newsDetail=news[i]; break; } } returnnewsDetail; }

在utils/common.js文件中定义getNewsDetail()函数通过传入的参数newsid来获取需要读取的新闻详情。新闻列表页面数据绑定

varcommon=require('../../utils/common.js') Page({ data:{

newsList:[] }, on