Web全栈开发案例教程课件 第8章 微信小程序入门

第8章微信小程序开发基础《Web全栈开发案例教程》学习目标/Target掌握微信小程序开发账号的注册方法，掌握获取微信小程序AppID的方法掌握创建微信小程序项目的方法，了解小程序的项目结构

掌握微信小程序界面设计原则，熟悉常见的小程序界面元素

掌握微信小程序页面制作的步骤，了解微信小程序页面文件构成本章引言/

Summary微信小程序开发的市场需求很大。虽然微信小程序有自己独立的一套开发语言，但实际上小程序开发大量借鉴了Web开发中的各种相关技术。例如，小程序前端绑定数据借鉴了Vue.js的语法，相比于传统的网页开发，小程序没有复杂的DOM操作，而是通过数据绑定与组件化来实现界面的动态更新。目录/Contents010203微信小程序开发概述微信小程序页面的制作船山文献小程序页面的制作微信小程序开发概述8.18.1微信小程序的特点01020405用户在使用微信小程序时无须安装，直接使用，不占用存储空间在使用微信小程序后，可以用完即走，无须卸载某一个名称被注册后，另一个微信小程序将不能使用相同的名称用户可以通过多种途径打开微信小程序，例如微信搜索、好友分享、小程序识别码等微信小程序入口丰富，再加上基于微信生态，使得微信小程序的传播能力强无须安装、触手可及用完即走、无须卸载名称唯一入口丰富传播能力强8.1微信小程序开发的特点与Web开发相比，微信小程序的前端页面数量少，页面的布局相对简单。为了适应不同手机屏幕尺寸的差异，小程序的前端页面必须使用可变宽度布局设计。微信小程序的开发也可分为前端页面开发和后端程序开发。前后端通信默认采用JSON数据。8.1.1微信小程序界面设计清晰明确：小程序的界面应该清晰易懂，不能有任何模糊不清的元素；便捷优雅：小程序的界面应该提供便捷的使用体验，并且保持优雅的外观；统一稳定：小程序的界面应该保持统一，不同页面之间应该保持一致，避免混淆用户；友好礼貌：减少无关设计元素干扰用户，友好并礼貌地提供服务引导操作。。微信小程序的设计指南指出：8.1.1微信小程序界面设计首页分类页购物车个人中心8.1.1微信小程序的界面元素搜索栏。轮播图栏：轮播图栏用来轮播若干张图片。内容区：由于手机屏幕宽度的限制，内容区建议分为2栏或1栏。底部标签栏：可以设置2-5个标签按钮，标签按钮一般采用图标金刚区：通常包括2行（或1行）小图标首页的页面元素8.1.1微信小程序的界面元素左边是导航项列表，scroll-view组件可方便地实现可滑动区域。右侧是子分类列表或商品列表。分类页的页面元素商品列表区：显示商品的图片、标题、型号、价格、数量等信息结算区：应固定在商品列表区的底部，应使用CSS固定定位（fixed）购物车的页面元素8.1.1微信小程序的界面元素左边是导航项列表，scroll-view组件可方便地实现可滑动区域。右侧是子分类列表或商品列表。分类页的页面元素商品列表区：显示商品的图片、标题、型号、价格、数量等信息结算区：应固定在商品列表区的底部，应使用CSS固定定位（fixed）购物车的页面元素8.1.1微信小程序的界面元素头像昵称区、横向图标区、纵向菜单列表区这个页面建议用色块对不同的功能区域进行分区。个人中心页的页面元素8.1.2微信小程序开发前的准备010203注册微信小程序开发账号获取微信小程序开发者的AppID安装微信开发者工具1注册微信小程序开发账号步骤1步骤2步骤3步骤4使用浏览器访问微信公众平台的官方网站1注册微信小程序开发账号单击步骤1图片中“立即注册”链接，即可进入开发账号的注册页面，在该页面中可选择注册的账号类型。步骤2步骤1步骤3步骤4选择注册的账号类型1注册微信小程序开发账号单击步骤2图片中的“小程序”链接，跳转到小程序注册页面。步骤3步骤2步骤1步骤4跳转到小程序注册页面1注册微信小程序开发账号步骤4步骤2步骤1步骤3账号信息的填写在步骤3小程序注册页面根据提示填入自己的邮箱、密码、确认密码等，完成账号信息的填写。2获取微信小程序AppID在微信小程序中，AppID又称为小程序ID，是每个小程序的唯一标识，每个小程序账号只有一个AppID，因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。当注册成功小程序开发账号以后，再次进入微信公众平台（/），用微信扫码登录，就会自动进入到如图所示的小程序的AppID页面。顺便指出，在该页面还可配置服务器域名和业务域名3安装微信开发者工具进入微信官方文档页面，在该页面中依次单击“开发”、“工具”、“下载”，在下载页面选择“稳定版、Windows64”即可下载微信开发者工具安装包。安装微信开发者工具下载微信开发者工具掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目8.1.3创建微信小程序项目

先定一个小目标！8.1.3创建微信小程序项目启动微信开发者工具时，会出现一扫码界面，如下图所示。使用微信扫码登录微信开发者工具，微信开发者工具将使用这个微信账号的信息进行微信小程序的开发和调试。步骤1步骤2步骤3登录微信开发者工具也可单击“游客模式”，但此时微信开发者工具的部分功能将被限制，可见微信开发者工具需要电脑联网才能正常使用。8.1.3创建微信小程序项目使用微信扫码登录成功后会进入微信开发者工具的项目选择界面。步骤2步骤1步骤3进入微信小程序的启动页单击图中的“＋”（或者在微信开发者工具主界面中单击“项目→新建项目”），就会进入微信小程序项目的创建界面8.1.3创建微信小程序项目在创建小程序界面，将内容填写完后，单击“确定”按钮创建微信小程序项目。步骤3步骤2步骤1创建微信小程序项目8.1.3创建微信小程序项目在微信小程序项目的创建界面中，读者可以自定义项目名称和目录，如填写项目名称为“wcs”，目录为“D:\miniprogram\wcs”。关于AppID、开发模式、后端服务和模板选择的解释如下。AppID：填写8.1.2节获取的AppID即可。如果不想使用自己的AppID，也可以使用测试号，二者的区别是，前者能够使用的功能比后者多，例如代码的上传和发布。8.1.3创建微信小程序项目开发模式：有“小程序”和“插件”两种选择，由于我们要创建一个微信小程序项目，所以此处应选择“小程序”。后端服务：有“微信云开发”和“不使用云服务”两种选择。在“微信云开发”中，开发者无须搭建服务器，即可使用云函数、云数据库、云存储以及微信云托管等完整云端能力。模板选择：微信开发者工具提供了多种模板用于快速创建微信小程序项目。8.1.3创建微信小程序项目微信小程序项目创建成功后，会进入微信开发者工具的主界面，如下图所示。8.1.3创建微信小程序项目多学一招：微信开发者工具的外观设置微信开发者工具允许用户对其进行外观设置，包括主题、调试器主题和自定义外观。默认的主题为深色，如果想设置为其他颜色，更换选项即可。熟悉微信小程序的项目结构，能够解释每个文件的作用8.1.4微信小程序的项目结构

先定一个小目标！8.1.4微信小程序的项目结构微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构，如图所示。pages：用于存放微信小程序的所有页面。app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑。app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等。app.wxss：微信小程序的全局样式文件，文件可以为空。8.1.4微信小程序的项目结构project.config.json：微信小程序的项目配置文件，记录了开发者的appid等信息。有时要运行别人开发的小程序，需在这里把别人的appid改成自己的appid。project.private.config.json：用于保存微信开发者工具的私人配置，配置的优先级高于project.config.json。sitemap.json：用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件，则默认为所有页面都允许被索引。8.1.4微信小程序的项目结构在微信客户端中启动微信小程序的步骤。把整个微信小程序的代码包下载到本地。解析app.json全局配置文件，通过该文件解析出微信小程序的所有页面路径。执行app.js入口文件，调用App()函数创建微信小程序的实例。渲染微信小程序的首页。熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用8.1.4微信小程序的页面组成

先定一个小目标！8.1.4微信小程序的页面组成一个微信小程序是由一个或多个页面组成的，这些页面被存放在pages目录中。下面以pages目录下的index页面为例展示其组成部分，index页面的组成部分如下图所示。index页面由4个文件组成，分别是index.js、index.json、index.wxml和index.wxss。WXML（WeiXinMarkupLanguage，微信标记语言）：类似于网页中的HTML，用于构建页面结构，文件扩展名为.wxml。WXSS（WeiXinStyleSheets，微信样式表）：类似于网页中的CSS，用于设置页面样式，文件扩展名为.wxss。8.1.4微信小程序的页面组成JS：类似网页中的JavaScript语言，用于保存页面初始数据，实现页面逻辑和交互，文件扩展名为.js。需要注意的是，微信小程序中的JS不含DOM和BOM，但它提供了丰富的API，可以实现许多特殊的功能，例如微信登录、音频播放、文件上传等。JSON（JavaScriptObjectNotation，JavaScript对象符号）：用于利用JSON语法对页面进行配置，文件扩展名为.json。8.1.4微信小程序加载页面的步骤微信客户端在加载微信小程序页面时的步骤。读取并解析页面中JSON文件的配置。加载页面的WXML文件、WXSS文件和JS文件，实现页面渲染。其中，页面中WXSS文件的样式会覆盖项目根目录下的app.wxss文件中相同的全局样式；页面中JS文件的Page()函数会被调用，用于创建页面实例。熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式8.1.5微信小程序的通信模型

先定一个小目标！8.1.5微信小程序的通信模型微信小程序实现了渲染层、逻辑层和第三方服务器的通信。WXML和WXSS工作在渲染层，用于实现页面的渲染。JS工作在逻辑层，用于实现页面的逻辑。微信小程序的通信模型分为两个部分。第1部分是渲染层与逻辑层之间的通信，即将逻辑层的数据绑定到页面中。第2部分是逻辑层和第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据。微信小程序页面的制作8.28.2微信小程序页面的制作010203用wxml构建页面结构用wxss设置页面样式开发一个微信小程序，首先应设计小程序的静态页面，这一阶段的主要任务包括添加页面和底部标签栏8.2.1微信小程序添加页面 1.添加页面添加页面的步骤：①新建文件夹；②新建Page。新建文件夹新建Page2.设置启动页面启动页面：小程序启动之后显示的默认页面。在app.json中，将该页面设置为第一个注册页面即可（写在所有页面的最前面）。"pages":["pages/Category/Category","pages/index/index"],app.json文件3.添加底部标签栏在app.json文件中配置tabBar对象。"tabBar":{"selectedColor":"#009966","backgroundColor":"#ffffff","borderStyle":"black","color":"#999999","list":[

{"pagePath":"pages/index/index","text":"首页","iconPath":"pages/images/bar/home-1.png","selectedIconPath":"pages/images/bar/home-0.png"},

{"pagePath":"pages/category/category","text":"分类","iconPath":"pages/images/bar/category-1.png","selectedIconPath":"pages/images/bar/category-0.png"},

……

]},属性说明pagePath页面路径text标签上的文字iconPath未选中标签的图片路径selectedIconPath选中标签的图片路径，图片大小限制为40KB，建议尺寸为81px×81px，不支持网络图片路径，该属性不是必须的4.页头标题栏的设置在app.json文件中配置"window"对象。"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"船山研究文献检索","navigationBarBackgroundColor":"#ffcc00"},app.json文件属性说明navigationBarBackgroundColor导航栏背景颜色navigationBarTextStyle导航栏标题颜色，取值只能为black或whitenavigationBarTitleText导航栏标题文字内容backgroundTextStyle下拉loading的样式，取值只能为dark或lightbackgroundColor下拉刷新栏的背景颜色enablePullDownRefresh是否开启全局的下拉刷新，值为true或false8.2.2用wxml构建页面结构WXML是微信团队为微信小程序开发设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。与HTML相比，WXML有以下特点：WXML只要写<body>标签内的内容，WXML无<html>、<head>、<body>等标签。WXML和HTML使用的标签不同。例如，<view>标签对应HTML中的<div>标签。WXML使用的标签是微信小程序中定义的标签，有少数与HTML标签同名（如<input/>）。应避免使用HTML标签，否则会报错。WXML提供了与Vue.js模板语法类似的模板语法，例如数据绑定、列表渲染、条件渲染等。WXML中的标签必须严格闭合。单标签必须写成<tag/>形式，标签名应全部小写。WXML标签HTML标签用途<view><div>定义一个空的块级元素<text><span>定义一个空的行内元素<image><img>插入图像，小程序是按照background-image来实现的<navigator><a>定义链接，小程序中称之为路由，小程序有多种方法实现路由，<navigator>标签并不常用<scroll-view>无定义一个可滚动视图区域<swiper>无定义一个轮播图或者在该标签中嵌入多个页面<input/><input>小程序中的<input>仅能定义文本框，小程序把checkbox和radio都单独做成了标签<button><button>定义按钮，小程序中的按钮并不属于表单<block>无该标签一般搭配for或if来使用，用于循环显示或条件显示标签中的内容，相当于语句块{……}<include/>无用于引用其他文件的代码，是一个单标签WXML与HTML标签的对比2.WXML中的数据绑定1）在index.js文件的Page()函数中添加如下data对象代码，存放页面数据。Page({data:{id:1,title:'王船山简介',person:{name:"王船山",age:"1619年10月-1692年2月",sex:"男",dynasty:"明末清初",motto:"中国朴素唯物主义思想的集大成者"}}})2）在index.wxml文件中绑定数据。方法是使用Mustache语法（双花括号）。<viewclass="menu"><viewclass="item">姓名：{{}}</view><viewclass="item">出生：{{person.age}}</view>……</view></view><view><viewclass="top"><viewclass="user-title">{{title}}</view></view>data对象用来存放页面初始数据，即页面第一次渲染时所用到的数据知识储备Page({//页面初始数据

data:{},//页面生命周期回调函数，以onLoad()为例onLoad:function(){console.log('onLoad()函数执行了')},//页面事件处理函数，以onPullDownRefresh()为例onPullDownRefresh:function(){console.log('onPullDownRefresh()函数执行了')}})Page()函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。调用Page()函数的示例代码如下。1.Page()函数知识储备页面初始数据页面初始数据是指页面第一次渲染时所用到的数据。下面演示如何定义页面初始数据，示例代码如下。data:{msg1:'Hello',msg2:'World'},1.Page()函数8.2.3用wxss设置页面样式1）项目根目录中的app.wxss文件作为全局样式，会作用于所有页面，而局部页面的wxss样式作用于当前页面2）在WXSS中设置背景图片的时候，可以使用网络图片或者以Base64格式编码的图片3）wxss提供了rpx单位（响应式像素），是微信小程序独有的、解决屏幕自适应的尺寸单位。规定任何屏幕宽度都为750rpx。故1rpx是屏幕宽度的1/750。iPhone6的屏幕宽度为375px，故1rpx=0.5px。建议将字体设置为30rpx左右。WXSS具有CSS的大部分特性，同时在CSS的基础上做了少量补充和修改。8.2.3用wxss设置页面样式【例8-2】为例8-1中的页面添加样式，在index.wxss文件中编写如下代码.top.user-title{color:white;text-align:center;}.top.user-img{width:100%;margin:0auto}.topimage{height:360rpx;

background-size:cover;}.menu.item{height:96rpx;line-height:96rpx;border-bottom:2rpxsolid#ccc;padding:040rpx;font-size:34rpx;}8.2.4用flex布局制作金刚区微信小程序中经常使用flex布局来实现自适应页面。属性说明flex-direction决定主轴的方向（即项目的排列方向），默认值为row，即主轴为从左到右的水平方向，项目按照主轴方向排列flex-wrap规定是否允许项目换行，默认值为nowrap，即不换行flex-flowflex-direction和flex-wrap的组合属性，默认值为rownowrapjustify-content定义了项目在主轴上的对齐方式，默认值为flex-start，即项目在主轴方向上，与主轴起始位置对齐

nav-bar-wrapnav-bar-item

nav-barslider8.2.4用flex布局制作金刚区【例8-3】为例8-2中的页面添加金刚区（小图标区）.nav-bar-wrap{display:flex;/*将小图标的父元素设置为flex容器*/flex-flow:columnwrap;/*将小图标按列排序，允许换行*/height:400rpx;}.nav-bar-item{width:187.5rpx;display:flex;flex-direction:column;align-items:center;padding-top:28rpx;}8.2.4用flex布局制作金刚区为例8-1中的页面添加样式，在index.wxss文件中编写如下代码<viewclass="jingang"><scroll-viewclass="nav-bar"scroll-xbindscroll="scroll"><viewclass="nav-bar-wrap"><blockwx:for="{{navbarArr}}"wx:key='key'><viewclass="nav-bar-item"bindtap="onNavbarItem"data-id='{{item.id}}'><imagesrc="{{item.pic_url}}"/><text>{{}}</text></view></block></view></scroll-view><viewclass="slider"><viewclass="slider-inside.slider-inside-location"style="left:{{left}}"></view></view></view>知识储备若要为组件绑定事件，可以通过为组件添加“bind+事件名称”属性或“catch+事件名称”属性来完成，属性的值为事件处理函数，当组件的事件被触发时，会主动执行事件处理函数。bind和catch的区别在于，bind不会阻止冒泡事件向上冒泡，而catch可以阻止冒泡事件向上冒泡。3.事件绑定步骤1演示如何为组件绑定事件在pages/index/index.wxml文件中给button组件绑定tap事件，事件处理函数为compare()函数。知识储备<buttonbindtap="compare">比较</button>步骤2bindtap表示绑定tap事件。在触屏手机中，tap事件在用户手指触摸button组件离开后触发，而在微信开发者工具中，tap事件在鼠标单击button组件时触发。3.事件绑定onclick=

"compare()"事件绑定机制直接调用函数知识储备compare:function(){console.log('比较按钮被点击了')},步骤1步骤2在pages/index/index.js文件的Page({})中定义compare()函数。演示如何为组件绑定事件3.事件绑定条件渲染<viewwx:if=“{{condition}}”>是否显示</view>如果需要根据不同的判断结果显示不同的组件，可以使用条件渲染来实现。使用wx:if=“{{val}}”来判断是否需要渲染标签对应的组件，如果变量val的值为true，则渲染组件并输出；变量val的值为false，则不渲染组件，示例代码如下。通过变量condition的值来控制是否渲染view组件等价于Vue中的v-if<viewwx:if="{{count<1}}">0</view><viewwx:elif="{{count==1}}">1</view><viewwx:else>2</view>给标签设置了wx:if控制属性后，可以为后面的标签设置wx:elif、wx:else控制属性。wx:elif控制属性表示当前面标签的if条件不满足时，继续判断elif（elseif）的条件。wx:else控制属性也可以直接出现在wx:if控制属性的后面，示例代码如下。条件渲染<block>标签<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block><block>标签中wx:if控制属性的值为true，在页面上会渲染出<block>组件内部的两个view组件。通过<block>标签可以创建一个容器，该标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接收控制属性。<block>标签的示例代码如下。列表渲染<viewwx:for="{{array}}">{{index}}:{{item.字段}}</view>在组件上使用wx:for控制属性绑定一个数组，就可以使用数组中各项的数据重复渲染该组件。循环时，当前项的变量名默认为item，当前项的下标变量名默认为index。其语法格式如下。知识储备数组中包含对象情况下的列表渲染在pages/index/index.js文件的Page({})中编写页面数据。data:{list:[{message:'梅',id:1},{message:'兰',id:2},{message:'竹',id:3},{message:'菊',id:4}]}id是每条数据的唯一标识1.列表渲染步骤1步骤2步骤3知识储备在pages/index/index.wxml文件中编写页面结构，将list数组中的数据在页面中显示出来。<viewwx:for="{{list}}"wx:key="id">{{index}}{{item.message}}======={{item.id}}</view>数组中包含对象情况下的列表渲染1.列表渲染步骤1步骤2步骤3知识储备数组中包含对象情况下的列表渲染的页面效果如下图。数组中包含对象情况下的列表渲染1.列表渲染知识储备在pages/index/index.wxml文件中修改页面结构，实现通过wx:for-item、wx:for-index更改item和index的变量名。<viewwx:for="{{list}}"wx:for-item="item2"wx:for-index="index2"wx:key="id">{{index2}}：{{item2.message}}</view>数组中包含对象情况下的列表渲染通过wx:for-item更改item的变量名为item2，通过wx:for-index更改index的变量名为index21.列表渲染步骤1步骤3步骤2API路由常用的页面路由API如下。wx.navigateTo：保留当前页面，跳转到应用内的某个页面上，但是不能跳到tabBar页面。使用wx.navigateBack可以返回到原页面。微信小程序中的页面栈最多为10层。wx.redirectTo：关闭当前页面，跳转到应用内的某个页面上，但是不允许跳转到tabBar页面。wx.navigateBack：关闭当前页面，返回到上一页面或多级页面。可通过getCurrentPages获取当前的页面栈，并决定需要返回几层。wx.switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面。wx.reLaunch：关闭所有页面，打开到应用内的某个页面。8.2.5用swiper组件制作标签页【例8-4】用swiper组件实现标签页切换<viewclass="tab"> <!--标签栏区域的页面结构--><viewclass="tab-item{{tab==0?'active':''}}"bindtap="changeItem"data-item="0">王船山生平</view><viewclass="tab-item{{tab==1?'active':''}}"bindtap="changeItem"data-item="1">船山故居</view><viewclass="tab-item{{tab==2?'active':''}}"bindtap="changeItem"data-item="2">船山著作</view></view>8.2.5用swiper组件制作标签页【例8-4】用swiper组件实现标签页切换<viewclass="content"> <swipercurrent="{{item}}"bindchange="changeTab"><!--将item值赋给current--><swiper-item><includesrc="info.wxml"/></swiper-item><swiper-item><includesrc="home.wxml"/></swiper-item><swiper-item><includesrc="book.wxml"/></swiper-item></swiper></view>8.2.5用swiper组件制作标签页【例8-4】用swiper组件实现标签页切换Page({data:{item:0,tab:0,……},changeItem:function(e){this.setData({item:e.target.dataset.item

})},changeTab:function(e){this.setData({tab:e.detail.current //将current属性值赋给tab，改变选中标签的样式

})}})8.3船山文献检索小程序的页面制作开发步骤分为：①前端页面的制作；②后端程序的开发；③前后端之间的数据绑定。该小程序的前端页面主要有4个，即首页（index）、内容页（show）、列表页（category）个人中心（me）8.3.1首页的制作搜索栏轮播图船山研究著作

著作一著作二著作三著作四船山研究论文

论文一论文二论文三论文四首页包括搜索栏、轮播图和商品列表区。搜索栏使用类名为search的<view>标签定义，其内部为.searchInput定义的文本输入框。输入框中有2个元素，左边是搜索图标，右边是提示语JS工作在逻辑层，用于实现页面的逻辑轮播图：用swiper组件实现。代码如下：<swiper>

<swiper-item>1</swiper-item>

<swiper-item>2</swiper-item>

<swiper-item>3</swiper-item></swiper>8.3.1首页的制作：制作轮播图【例8-4】制作轮播图区域<viewclass="haibao"><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"circular><blockwx:for="{{imgUrls}}"><swiper-item><imagesrc="{{item}}"class="silde-image"mode="scaleToFill"></image></swiper-item></block></swiper></view>属性类型说明indicator-dotsboolean是否显示面板指示点indicator-colorcolor指示点颜色indicator-active-colorcolor当前选中的指示点颜色autoplayboolean是否自动切换currentnumber当前滑块的index，默认0intervalnumber自动切换时间间隔circularboolean是否采用衔接滑动8.3.1首页的制作：制作内容列表区制作内容列表区<viewclass="line"></view><viewclass="items"><blockwx:for="{{hotList}}"><viewclass="item"id="{{item.ID}}"bindtap='seeDetail'><viewclass="pic"><imagesrc="/pages/images/books/{{item.picurl}}"

mode="aspectFit"></image></view><viewclass="name">{{item.title}}</view><viewclass="price">{{item.author}}</view></view></block></view>8.3.2内容页的制作内容页分为上下两部分，上面显示书的封面，下面显示书的书名、作者、出版社等信息<viewclass="content"><vi